콘요맘떼 개발일지

프론트엔드 개발을 해 본 사람이라면 CORS 이슈를 정말 많이 접해봤을 것이다. CORS는 뭐고 왜 굳이 우리를 이렇게 귀찮게 하고 어떻게 하면 해결할 수 있을까? CORS (Cross-Origin Resource Sharing) CORS는 이름에서도 알 수 있다시피 서로 다른 출처에서 자원이 공유되는 것을 의미한다. 따라서 CORS에 대해 이해하기 위해서는 출처 (Origin)이라는 것이 어떻게 정의내려질 수 있는지가 중요하다. 인터넷 URL은 프로토콜, 호스트, 경로(path), 쿼리문, 프래그먼트 등 여러 가지 요소로 구성되어 있다. (URL 구조 관련 포스트 참고) 그 중에서 Protocol, Host, Port 총 세 가지가 일치하면 하나의 Origin으로 여겨진다. (일반적으로 포트 번호는 규..

이번에 MERN 스택으로 이미그레이션한 유튜브 클론프로젝트를 Netlify, Heroku로 각각 프론트엔드와 서버를 배포했다. (DB는 이전에 사용했던 MongoDB Atlas를 그대로 사용했다.) 그런데 development mode에서는 정상적으로 작동하던 session이 heroku로 배포되면서 제대로 유저 정보를 저장하지 못하기 시작했다. (참고로 세션은 MongoDB Atlas를 통해 persist하고 있었는데 DB에는 제대로 session이 저장되어 있었다. 따라서 DB와의 커넥션 문제는 아니다.) 해결 방법은 다음과 같이 express-session 미들웨어의 config를 설정해주면 된다. "proxy : true"에 대한 멘션은 정말 많은 검색을 해도 잘 나오지 않았는데 Heroku 혹은..

tsconfig.json 파일로 들어가서 compilerOptions를 확인한다. target : "es5 | esnext 등등 ..", module : "동일" 일 때 module 값을 수정한다. "module : "commonjs" 예시)

React Native 앱의 구성 요소 React Native 앱은 크게 세 가지 요소로 이루어져 있다. Native 영역과 JS 영역이 존재하며 그 둘을 Native Bridge가 이어준다. 1. Native side (Main Thread = UI Thread) 네이티브 영역인 메인 스레드는 어플리케이션이 실행되자마자 시작된다. 메인 스레드는 우선적으로 앱을 로드하고 JS 스레드를 실행시킨다. 메인 스레드는 앱의 UI적인 부분을 담당한다. (그렇기 때문에 UI 스레드라고 부르기도 한다.) 메인 스레드는 JS의 이벤트 루프가 끝날 때마다 네이티브 브릿지를 통해 받은 메시지를 기준으로 UI를 화면에 보여준다. 반대로 사용자가 기기에 UI 이벤트를 일으키면(press, touch 등) 네이티브 브릿지를 통..

1. React.memo( ), useMemo( ), useCallback( ) 각각 함수 컴포넌트, 함수 컴포넌트 내 변수, 함수 컴포넌트 내 함수를 메모이제이션하기위해 사용한다. 위 세가지 메소드들을 활용하면 불필요한 리렌더링을 방지할 수 있다. 이미 관련 내용들에 대한 포스팅을 한 기억이 있으니 간략하게 넘어가겠다. (마지막으로 useCallback( )의 중요성을 한 번만 더 강조하고 싶다. 함수를 props로 넘겨줄 때 익명 arrow function을 경우가 종종 있는데 이는 해당 익명 함수를 전달해주는 컴포넌트가 리렌더링될 때마다 새로운 함수 인스턴스를 만들어줘야 한다. 그렇기 때문에 동일한 함수 내용이더라도 다른 인스턴스이기 때문에 해당 함수를 전달받은 자식 컴포넌트는 부모 컴포넌트가 리렌..

예전부터 궁금했던 문제이다. package.json과 package-lock.json은 어떤 차이가 있을까? 궁금하면 별 다를 수 있나. 공부해야지. package.json package.json은 프로젝트의 정보(name, version 등) 혹은 의존 패키지 정보(dependencies, devDependencies)를 저장한다. (참고로 그냥 dependencies는 프로덕션을 위해 필요한 패키지들을, devDependencies는 로컬 개발 혹은 테스팅과 관련된 패키지들을 다룬다.) package.json의 주요 특징은 버전 정보를 저장할 때 구체적인 버전이 아니라 version range를 기록한다는 것이다. 즉 버전 o.o.o을 사용한다가 아니라 버전이 o.o.o 이상이다, o.o.o 미만이다..

TIL (Today I Learned) 2022.03.09 오늘 TIL 3줄 요약 거대한 하나의 클래스보다 잘 쪼갠 여러 클래스가 낫다. 클래스는 하나의 책임만을 가져야 한다. (이것이 지켜졌는지 여부는 이름을 지을 때 티가 난다.) 클래스의 응집도를 높이려면 메소드의 매개변수 수를 줄이자. 오늘 읽은 범위 10장. 클래스 책에서 기억하고 싶은 내용을 써보세요. 표준 자바 관례에 따르면 클래스는 static public 상수 → static private 변수 → private 변수 (인스턴스 변수) → 공개 함수 → 호출되는 비공개 함수의 순서로 내용이 구성된다. public 변수가 필요한 경우는 거의 존재하지 않으며 비공개 함수는 자신을 호출하는 공개 메소드의 바로 아래에 위치시킨다. (p.172) ..

Intersection Observer Intersection Observer API는 타겟 요소와 상위 요소(혹은 최상위 요소인 document)의 viewport 사이의 intersection의 변화를 비동기적으로 관찰한다. (MDN에서 정의된 바는 이렇다.) 보다 간단하게 정리하면 특정 Element가 기준 화면(viewport)에 노출되었는지 여부를 감지한다고 보면 된다. 사실 element의 가시성을 판단하기 위해서는 다른 방법도 존재한다. window에 scroll 이벤트에 대한 event listener을 추가하고 Element.getBoundingClientRect( )를 통해 element가 viewport에 상대적으로 가지는 위치를 점검한다면 특정 element의 가시 여부를 판단할 수..

TIL (Today I Learned) 2022.03.06 오늘 읽은 범위 9장. 단위 테스트 책에서 기억하고 싶은 내용을 써보세요. TDD의 세 가지 법칙 : 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다. / 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다. / 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다. (p.155) 실제 코드가 변경되면 테스트 코드 역시 변경이 필요할 수 있다. 테스트 코드를 복잡하게 마음대로 작성하면 이 과정이 매우 골치아파진다. 따라서 테스트 코드의 품질은 실제 코드만큼이나 중요하다. (p.156) 실제 코드에 유연성, 유지보수성, 재사용성을 제공하는 버팀목이 바로 단위 테스트다. 테스트 케이스가 있으면 버그를 ..

TIL (Today I Learned) 2022.03.05 오늘 읽은 범위 8장. 경계 책에서 기억하고 싶은 내용을 써보세요. 경계 인터페이스를 사용할 때에는 클래스로 감싸줌으로써 해당 경계 인터페이스가 전체 프로그램에 끼치는 의도치 않은 영향을 방지하고 프로그램에 필요한 기능만을 추출한다. (p.145) 외부 코드를 사용할 때에는 먼저 자기 프로그램을 작성하는 것이 아니라 간단한 테스트를 작성하여 외부 코드의 사용법을 익히는 학습 테스트를 이용하자. (p. 146) 경계를 최대한 줄이고 그 외의 요소들로부터 분리시킴으로써 프로그램에 대한 통제성을 높이자. 경계를 잘 관리하지 않으면 우리가 통제할 수 없는 영역의 외부 코드에 의해 너무 휘둘릴 수 있다. 최소한 경계 코드는 우리가 통제권을 쥘 수 있다. ..