콘요맘떼 개발일지

웹 사이트 혹은 애플리케이션에서 가장 코스트가 높은 것은 물론 서버와 요청을 주고 받을 때이다. 무엇을 하던 내부에서 처리하는 작업보다는 외부와 통신하는 작업이 비용이 높다. 서버에 대한 리소스 요청을 최적화하는 작업은 프론트엔드 성능 측면에서도 중요하지만 서버 측의 부담을 감소시켜줄 수 있다는 점에서도 신경써줘야 하는 부분이다. 리소스 요청을 최적화하는 방법에는 두 가지가 있다. 하나는 요청하는 리소스의 크기를 줄이는 것이고 하나는 리소스 요청 횟수 자체를 줄이는 것이다. 1. 리소스 용량 줄이기 (1) 트리 쉐이킹 : 트리 쉐이킹은 외부 모듈을 import할 때 필요한 기능만을 가져오는 것을 의미한다. (2) 불필요한 코드 제거하기 (ex. 주석) (3) Minify, Uglify 등을 통해 번들링 ..

웹 캐시 (Web Cache) 웹 캐시(Web Cache) 혹은 HTTP 캐시는 클라이언트가 웹 사이트 혹은 애플리케이션에 접속할 때 정적 자산을 캐싱함으로써 사이트에 접속할 때마다 해당 리소스들을 반복적으로 다시 요청하는 것이 아니라 저장된 사본을 사용하게 해준다. 그를 통해 웹 사이트를 접속할 때 페이지 로딩 시간을 감소시킬 수 있을 뿐만 아니라 서버 측에 가해지는 트래픽 부담 역시 경감시킬 수 있다. 리소스는 캐싱하는 장소는 브라우저일 수도 네트워크 상(ex. 프록시 서버)일 수도 있다. (만약 Cache-Control 헤더 값을 public으로 지정하는 경우 모든 장소에 캐싱이 가능하며 private으로 설정하는 경우 사용자의 브라우저에만 캐싱이 가능하다.) 웹 캐시를 통해 캐싱되는 리소스는 정적..

PWA (Progressive Web APP) 웹 앱과 네이티브 앱은 각자의 장점을 가진다. 웹 앱은 사용자에게 노출의 측면에서 접근성이 좋다는 장점을 가진다. 반면 네이티브 앱은 해당 OS에 최적화된 부드러운 사용자 경험을 제공해줄 수 있다. 또한 설치된 이후에는 오프라인에서도 동작할 수 있다. 2016년 구글이 새롭게 소개한 기술인 PWA는 두 가지 장점이 동시에 결합된 웹 앱을 구현할 수 있게 해 준다. 보다 정확히 표현하자면 PWA는 새로운 기술이라기 보다는 기존 시스템들의 장점이 결합된 새로운 형태의 애플리케이션을 구축하는 하나의 철학이라고 표현할 수 있다. PWA의 조건 및 기능 어떠한 웹 앱이 PWA인지 판단하는 데 절대적인 지표는 존재하지 않는다. 그러나 다음과 같은 핵심적인 조건들이 충족..

리액트 코드에서 컴포넌트가 mount되기도 전에 컴포넌트 갱신을 시도할 때 발생하는 에러 메시지이다. 그런데 아무리 찾아봐도 내 코드에서는 그런 실수를 한 적이 없다. 답은 정말 의외의 곳에서 나온다. 리액트는 video element의 muted 속성을 제대로 처리하지 못 한다. (웹 프로젝트 주제로 많이 추천되는 유튜브 클론 프로젝트를 해본 사람이라면 이미 크롬 정책으로 인해 video element의 자동 재생을 위해서는 muted 속성을 통해서 동영상을 무음 처리해야 한다는 사실을 알고 있을 것이다. 그런데 muted 속성을 넣어주는 순간 리액트는 위와 같은 이슈를 일으킨다. 간단하게 정리하면 이유는 이렇게 추측된다. 기본적으로 JSX element에서 우리가 value와 같은 attribute를..

테스트 과정에서 리액트 훅을 테스트할 수 있게 해주는 @testing-library/react-hooks의 renderHook 메소드를 실행할 때 발생할 수 있는 에러이다. 해당 에러와 관련돼서 우선적으로 살펴볼 것은 @testing-library/react-hooks 모듈의 peer dependency이다. 공식 홈페이지에서 제시한 바에 따르면 해당 모듈은 react-test-rerenderer, react-dom 두 종류의 rerenderer에 의존성을 가지며 둘 중 하나라도 설치되어있으면 사용이 가능하다. (따라서 둘 중 하나가 설치되었는지 확인하는 것이 우선 필요하다. 참고로 renderer dependency는 --save -dev 옵션으로 설치해주면 된다.) 만약 둘 중 하나의 renderer..

이번에 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" 예시)

예전부터 궁금했던 문제이다. 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 미만이다..

기본적으로 node resolver는 파일의 확장자를 적어주지 않더라도 파일을 import할 수 있다. 그러나 eslint에서는 import/extensions 룰에 의해 확장자를 명시하지 않고 파일을 가져오는 행위를 금지하고 있다. 이미지 파일 등의 asset을 가져올 때에는 확장자를 명시하는 것이 필요하겠지만 js 파일들을 import할 때에는 이러한 규칙이 개인적으로 많이 번거롭게 느껴진다. 이럴 때에는 다음과 같이 eslintrc.js 파일을 수정하여 해결할 수 있다.

Typescript를 사용하는 경우 ThemeProvider을 사용할 때 Theme 타입에 대한 설정이 추가적으로 요구된다. 위와 같이 emotion.d.ts 파일을 생성해준다. 그 후 Theme 안에 본인이 ThemeProvider을 통해 전달해줄 Theme 타입을 작성해주면 된다. Theme.font와 같이 세부 내용을 곧바로 적어주는 방법과 Theme.layout과 같이 해당 테마속성의 Theme을 별도로 작성 후 import 하는 방법이 존재할텐데 개인적으로 theme/layout.ts와 같은 각각의 테마 파일에서 그에 해당하는 타입을 선언하고 그를 import해오는 방식이 관리 측면에서 보다 바람직하지 않을까 생각된다.