(next.js 12.1) zero configuration jest plugin
next.js 12.1 부터 SWC를 사용하여 아주 간단하게(zero-configuration) Jest를 지원해줍니다. 그 이전에 babel로 할 땐 설정해 줘야 할 게 정말 많았었습니다. 링크 회사 프로젝트에 적용 후 babel로 설정했을 때는 15초 걸리던 게 SWC로 설정했을 때 8~9초 정도로 단축되었습니다. …
April 18, 2022
Front-End interview questions(이직 후기)
주니어 프론트엔드 개발자 면접 후기 2021년 하반기에 이직을 하게 되면서 꽤 많은 회사의 면접을 봤다. 시니어 개발자들을 볼 수 있던 기회가 많이 없던 나로서는 굉장히 좋은 기회였고 즐거웠다. 가고 싶은 회사는 많았지만 아쉽게도 몸이 하나라 그 중 가장 가고싶던 회사를 가게 됐다. 이 좋았던 면접 기억이 날아가기 전에…
April 18, 2022
react-query guide - Invalidation
1. Query Invalidation Basics 는 쿼리를 무효화하고 다시 데 사용할 수 있다 쿼리를 유효하지 않은 것으로 표시하고 활성화된 쿼리를 background에서 refetch 한다 무효화 시킬 query key를 넣어주면 된다 2. Invalidation Without Refetching Active …
April 18, 2022
react-query guide - Queries
React query - Queries React-query Essentials를 듣고 작성한 문서입니다. 대부분의 코드는 react-query 인강에 나오는 코드를 사용하였고, 그 이외의 이해를 돕기위한 코드는 react-query 공식 문서에 나오는 코드를 사용하였습니다. 인강에 나오는 코드 레파지토리 react-q…
April 18, 2022
react typescript 에서의 defaultProps
defaultProps를 typescript환경에서 쓸 때 문제가 좀 있어요 회사에서 한 값을 로 받아서 구현한 컴포넌트가 있었는데, 로 구현을 하고 pr을 올렸다. 🙋♂️ defaultProps를 typescript환경에서 쓸 때 문제가 좀 있어서요, 라는 리뷰를 받았었다. 에서 가 제대로 동작하지 않는다는 이슈는 알고 …
April 18, 2022
독서 - 함께자라기, 애자일
함께자라기를 읽고 “학습 속도가 빠른 팀” 에 대한 내용이 이전 회사의 프론트엔드 팀에 해당하는 것 같아 뿌듯했다. 팀 퍼포먼스를 높이기 위해 새로운 방식을 실험해 보는 걸 강조하고, 학습이 실행과 동시에 이루어 지고, 도전 자체를 팀의 학습 능력에 대한 도전으로 받아들였고 같이 학습해야 한다고 생각하고, 기회와 가능성…
April 18, 2022
SSR..? SSG..? jsp...? next.js? 뭐가 다른데?
대략적인 흐름과 내용은 next js 히치하이커를 위한 안내서에서 참고했고, 추가적으로 필요하다고 생각되는 내용을 덧붙였다. 그 중에서 궁금했던 내용인 와 의 차이점에 대한 이유를 정리해 보려고 한다. 먼저, 웹이 변화해 왔던 흐름을 이해하는 게 중요하다. 대부분의 변화는 문제를 해결하려고 한 데서 출발하기 때문이다…
April 18, 2022
2021년 두 번의 이직과 세 번째 온보딩
2021년 총평 : 힘들었지만 돌아보니 다 필요한 것들이었다. 정신 없던 한 해였다. 두 번의 이직이 있었다. 이게 올 한해의 가장 큰 이슈였던 것 같다. 이렇게 이직하면서 면접도 많이 보고 과제도 하면서 많이 배웠다. 특히 '태도' 에 대해서. 두 번째 회사에서 2021년의 가장 많은 시간을 보냈었다. 여러가지 문제도…
April 18, 2022
번역 Next.js 의 page, pre-render
https://nextjs.org/docs/basic-features/pages 를 번역한 내용입니다. Page 이 문서는 Next.js 버전 9.3 이상을 위한 것입니다. 이전 버전의 Next.js를 사용하는 경우 이전 설명서를 참조하세요 Next.js에서는 page는 디렉토리에서 , , 또는 파일로 expor…
April 18, 2022
번역 CRA Supported Browsers and Features
Supported Browsers and Features CRA Supported Browsers and Features 를 번역한 글이다. 원문은 이 링크를 참조하면 된다. 원 글에서의 는 편의상 로 작성했고, 한글로 해석하는 것보다 원문 단어 그대로 두는게 낫다고 생각된 경우에는 단어 그대로 두었다. 지원하는 브라우…
April 18, 2022
자바스크립트의 THIS
📝 TL;DR - this의 확정 규칙 이전 글에서 this의 기본 규칙에 대해 알아봤다. 그렇다면 동시에 여러개가 쓰였을 때 this의 우선순위는 어떻게 될까. 일단 결론은 아래와 같다. 1. 로 함수를 호출(new 바인딩) 했는가? - 새로 생성된 객체가 this 2. 명시적 바인딩이나 하드 바인딩으로 호출됐는가?…
April 18, 2022
자바스크립트의 THIS
봐도 봐도 이해가 되지 않고 계속해서 헷깔리는 에 대하여 정리하고자 한다. 이번 글에서는 에 대해 정리할 것이다. 🙄 This 란 는 작성 시점이 아닌 런타임 시점에 바인딩 되며 함수 호출 당시 상황에 따라 콘텍스트가 결정된다. 함수 선언 위치와 상관 없이 this 바인딩은 오로지 어떻게 함수를 호출했느냐에 …
April 18, 2022
API 디자인 가이드 참고 문서
API를 디자인 할 때 참고할 내용들을 정리한다. 1. 그런 REST API 로 괜찮은가 - 네이버 엔지니어링 발표 https://tv.naver.com/v/2292653 - REST API 얘기가 나오면 빠지지 않는 내용 ( "아 그거 참고하시면 좋아요!" 라고 많이 추천해주신다) 2. 프론트엔드와 백엔드가 소통하는 …
April 18, 2022
CentOS에서 Nginx로 REACT배포
회사에서 테스트 서버는 직접 세팅해야 한다고 해서 다른 분의 CentOS가상 서버를 빌려서 테스트 해봤다. OS세팅이 되면 직접 세팅할 거라, 시행착오를 겪었던 내용을 정리한다. Node 설치 yum repository에 nodeSource 추가 intall node.js Nginx 설치 외부 저장소 추가 저거 열고 이…
April 18, 2022
CORS Error 해결
CORS Error 해결하기 CORS : Cross - Origin Resource Sharing 교차출처리소스 공유는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. MDN 다른 도메인에서 API를 요청…
April 18, 2022
React SEO 적용
React SEO 적용 SPA(Single Page Application)에서 SEO(Search Engine Optimization)를 적용하는 방법 SPA에서 SEO를 적용하는 방법은 생각보다 까다롭습니다. CSR으로 자바스크립트로 html을 동적으로 렌더링 해서 페이지를 보여주는데, 크롤러 봇은 javascript…
April 18, 2022
React.FC 를 사용하지 않는 이유, JSX.element 와 ReactNode
React.FC 를 사용하지 않는 이유, JSX.element 와 ReactNode 리액트 타입스크립트 로 함수형 컴포넌트를 작성할 때 이런식으로 React.FunctionalComponent 로 타입을 지정해서 사용하는 것을 많이 볼 수 있을 것이다. React.FC란 typescript 에서 함수형 컴포넌트를 사용하…
April 18, 2022
Type alias vs Interface
Type alias vs Interface Typescript 를 사용하면서 Type이나 Interface를 통해 유형을 정의하여 사용하는데 통일할 필요가 있어서 정리한다. 1. 기본적인 사용법 기본적인 사용법을 먼저 보면 이해가 쉽다. Typescript의 버전이 업그레이드 될 때마다 내용이 바뀌므로 이 내용에 의지하…
April 18, 2022
Programmers JavascriptStudy Review
프로그래머스 자바스크립트 스터디에서 배운 것들과 정보들을 정리하고자 한다. 시작 전 참고자료 JavaScript 첫걸음 - MDN의 자바스크립트 입문 문서 JavaScript 재입문하기 - 오해받고 있는? 자바스크립트에 대해 짧게 요약해둔 문서 ( 잘 모르고 쓰면 오류가 나는 부분들을 다시 짚어보자) 브라우저는 어떻게…
April 18, 2022
git commit username 수정하기
git commit username 수정하기 username이 잘못 커밋되었을 때 커밋을 수정해보자! 예전에 한 commit 의 username이 잘못 올라갔을 경우! (다른 컴퓨터로 커밋을 했을 때 종종 발생하는 일이다,,, 나 또한 ㅠㅠ,,,) 로 잘못한 커밋을 몇 번째인지 확인한다. 1. rebase를 사용한다 H…
April 18, 2022
React Lifecycle of Component
React LIfecycle of Component 리액트 컴포넌트의 라이프 사이클에 대한 글 현재는 클래스형을 많이 사용하지는 않는다고 하지만 그래도 알고 있어야 될 것 같아 정리한다. 먼저 클래스형과 함수형의 차이부터 알아보자! 클래스형 함수형 차이 클래스형 함수형 state, lifeCycle 관련 기능 사용 가능…
April 18, 2022
React array key
React key 존재 유무에 따른 업데이트 방식 너무 당연하게 쓰고 있던 건데 왜 key를 써야 하는지 안쓰면 콘솔에 에러로그가 찍히는지에 대한 내용이다 🙄 예를 들어서 다음과 같은 배열이 있고 이 배열을 렌더링 했을때 key 가 없을 때 이 배열의 와 사이에 를 삽입하게 된다면, 리렌더링을 할 때 와 사이에 새 태…
April 18, 2022