Phot_o_matic Programming

package-lock.json package-lock.json은 npm을 사용하여 package.json 파일 또는 node_modules 트리를 수정하면 자동으로 생성되는 파일이다. 파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고 있다. package-lock.json 파일이 꼭 필요한 이유 package.json 파일의 의존성 선언(dependency)에는 version range가 사용된다. 이것은 특정 버전이 아니라 버전의 범위를 의미한다. 예를 들어 npm install express를 실행하면 package.json 파일에는 “^4.16.3”(Caret Ranges)로 버전 범위가 추가된다. 이 package.json 를 기반으로 npm install을 실행하면 현재는 4.16.3 ..

Programming/Concept 2019. 7. 11. 13:47

react client를 다루면서 , 항상 눈에 밟히던 것이 있었다. "service worker.unregister()" 도대체 누구냐 넌 service worker 브라우저가 백그라운드에서 실행하는 스크립트 웹 페이지랑은 별개로 동작 페이지나 사용자 상호작용이 필요없는 기능에 대한 문호 개방 (푸시 알림, 백그라운드 동기화 등) 왜 사용해? => 해당 API가 오프라인 환경을 완벽하게 통제할 수 있는 권한을 개발자에게 부여하고, 그 환경을 지원할 수 있도록 해 줘서! 주의할 점은 없어? 표준이 아니다 https가 적용되어 있어야 한다 지원하는 브라우저 확인 필요 생명주기가 있다 생명주기(Life Cycle)

Programming/React 2019. 7. 11. 11:11

socket.io란? 실시간 웹 응용 프로그램을위한 JavaScript 라이브러리이다. 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 한다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js 용 서버 측 라이브러리로 구분되어 있다. install 라이브러리이므로 npm을 이용하여 설치가 가능하다. - npm install socket.iosocket.emit(event, callback1) & socket.on(event, callback2) socket.io는 동일한 event명을 가진 socket끼리의 상태 공유 및 통신으로써 동작된다. socket.emit을 통하여 callback1과 같이 어떤 함수가 실행되거나 결과로써의 값이 존재하게 되면, 동일한 event명을 가진 so..

Programming/Hello, stranger 2019. 7. 10. 23:11

유사난수(pseudorandom number)는 난수를 흉내내기 위해 알고리즘으로 생성되는 값을 가리킨다. 이 때 유사난수를 생성하는 알고리즘을유사난수 생성기(pseudorandom number generator,PRNG)라고 부른다. 유사난수는 알고리즘의 상태에 의해 값이 정해지므로 생성된 수열은 일정한 주기를 가지며, 따라서 난수의 예측 불가능성을 가질 수 없다. 예측 불가능성이 필요한 경우 하드웨어와 같이 외부 신호를 이용하는 하드웨어 난수 생성기를 사용한다. (Technically, a computer-shuffled deck will usually be "pseudorandom", not "truly" random. However, the difference between the two is t..

Programming/Algorithm 2019. 7. 10. 09:57

Programming/Hello, stranger 2019. 7. 9. 13:36

Hello, stranger Google Translate API를 통하여, 실시간으로 번역이 가능한 글로벌 채팅 앱 서비스를 기획하여 프로젝트를 진행하였다. 서비스를 이루는 구조와 스킬의 대략적인 도식은 아래와 같다. 서비스 전체 구조 목적 글로벌 채팅 앱은 많지만, 타국간 채팅에서 언어의 장벽은 외부 번역기를 거치는 불편한 과정이 있어야만 원활한 소통이 가능하였다. 이런 불편함을 해소하고, 스스로가 관심있어 하는 국가 거주민 혹은 언어 사용자와의 대화를 편리하게 하는 것에 목적이 있다. 구현할 기능 - 국가 및 언어별 채팅방 운영 - 원하는 언어로의 번역 - 채팅 기록 확인 - 프로필 사용할 기술 1. 서버 nodejs express socket.io AWS EC2 AWS EC2 상에서 배포가 되도록..

Programming/Hello, stranger 2019. 7. 8. 20:01

switch문은 어떠한 조건에 따라 미리 설정한 행동을 취하도록 하는 문법이다. 이제껏 써 온 if문과는 어떠한 차이점이 있는지 아래의 예시 코드로 알아보자. switch (test) { //test라는 변수에 대해서, 설정되어 있는 조건과 비교하게 된다 case 100 : //if(test === 100)과 같은 의미이다 alert('100점입니다.'); break; //어떤 case에 부합하였다면, 그 case 내에서 switch문을 종료하기 위하여 break 걸어준다 case 0 : alert('빵점입니다!'); break; default : //test의 값이 어떠한 case와도 부합하지 않을 경우에 실행되는 구문이다 alert('채점을 해 주세요.'); break; }

Programming/Concept 2019. 7. 3. 15:19

React는 Component 내부에서 state라고 하는 속성값을 가짐으로써, rerender를 발생시키는 기준점으로 삼을 수 있다. React의 Lifecycle을 생각해보았을 때, 어떤 state 값의 변화가 있을 경우, 새롭게 render를 하였던 것을 떠올릴 수 있다. 관리하는 state의 수가 몇 가지 안 되고, component의 개수, 깊이가 적은 경우에는 props로 state 변경 및 갱신된 값을 넘겨주는 것이 별 것 아닌 것처럼 느껴질 수 있다. 하지만, 조금만 구조가 복잡해지면 이런 관리가 몇 배는 복잡해지는 것을 상상할 수 있을 것이다. 아래의 그림을 보면 redux라는 것이 있을 경우와 없을 경우를 비교할 수 있다. redux를 통하여 state 관리가 얼마나 간편하고 직관적으로..

Programming/React 2019. 7. 3. 14:32