우선 Semantic Versionin(=== SemVer)에 대해서 알아보자.시맨틱 버져닝이란 소프트웨어의 버전 변경 규칙에 대한 제안이다.npm에서는 Major.Minor.Patch의 버저닝 방식을 따른다ex) 18.2.0 일때 Major은 18, Minor은 2,

env파일에 대해 간략히 정리.env.env.development.env.production.env.test.env.local : 가장 우선순위가 높음. 다른 파일들을 override한다REACT_APP\_ 라는 접두어를 사용NEXT_PUBLIC\_ 라는 접두어를 사용

http 는 여러 언어와 문자로 된 국제문서의 전송을 지원해야한다. 엔터티 본문은 단순 비트들로 채워져있는데, 이 장에서는 이를 문자언어로 지원해주는 문자집합 인코딩과 언어태그에 관해 알아보자서버는 아래 헤더를 통해 문서의 문자와 언어를 알려준다 Content-Type

fetch : javascript에서 제공하는 전역 메소드로 이전의 XMLHttpRequest를 대체한다fetch가 반환하는 Promise객체는 오류상태(404, 500등)를 수신해도 거부하지않는다.응답 status가 200~299를 벗어날경우 ok속성이 false로

미뤄왔던 개발 환경 설정을 한꺼번에 정리해보자Eslint vs Prettiereslint : 코드의 퀄리티를 보장해주는 린터.prettier : 코드의 스타일을 깔끔하게 통일시켜주는 린터.우리는 코드의 퀄리티와 스타일을 동시에 가져가기위해 eslint + prettie

cache 공부를 하면서 부가적으로 알게된 SWR 전략에 대해 정리해보자swr 캐싱된 리소스를 즉각적으로 보여주면서, 갱신된 데이터의 최신성 까지 보장하기위한 전략이다.stale-while-revalidate헤더는 max-age와 Cache-Control 헤더에 사용.

하나의 페이지를 가져오고, 그 페이지가 가르키는 모든 페이지를 가져오는 방식을 재귀적으로 동작웹을 돌아다니며 끌어 모은 데이터를 DB에 저장하여 검색기능지원루트집합 이라는 출발점의 URL 집합을 가진다. 루트집합은 여러 페이지로 연결되는 아주 큰 사이트와 고립된 아주

엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공해주는 메소드를 알아보자.const rect = Element.getBoundingClientRect();padding과 border-width를 포함한 DOMRect 객체를 리턴해준다.width와 height가 아

Element안의 특정 노드를 삽입할때 유용한 API이다.특정 엘리먼트의 앞,뒤 또는 특정엘리먼트의 내부의 맨앞, 맨뒤에 target 엘리먼트를 삽일 할 수 있다.Element.insertadjacentelement( option, target)beforebegin :

http 통신의 근간인 https메시지에 대해 알아보자 메시지의 흐름 인바운드 : 클라이언트 -> 프락시 -> 서버 아웃바운드 : 서버 -> 프락시 -> 클라이언트 즉, request를 인바운드, response를 아웃바운드로 보자. > http 메시지의 흐름은 다

GET요청을 보낼때 유용한 Url api와 url search params에 대해 알아보자아래 url 객체가 있다고 가정했을때 const url = new URL("https://www.naver.com:8080/user/profile?id=13");url.

엘리먼트의 너비와 높이를 찾아주는 대표적인 3가지 속성들의 미묘한 차이에 대해서 자세히 알아보자3속성 모두 공통적으로 margin은 포함하지 않는다요소내부의 현재 높이로, 콘텐츠 + 패딩만큼의 사이즈를 리턴한다요소자체의 현재 높이로, 콘텐츠 + 패딩 + 스크롤바 + 테

특정 엘리먼트가 2줄을 넘었을때 trigger를 해야하는 상황이 있다고 생각해보자.이때, fake element를 사용하면 가능하다.아래와 같은 박스가 있을때, 해당 박스가 2줄 이하이면 button이 자세히보기, 2줄이 넘어가면 button이 닫기로 바뀐다고 가정해보

로그인이후에 기존에 보던 페이지로 이동하기위해 router history를 저장하는법에 대해 알아보자useEffect안에서 router.event.on 와 router.event.off를 통해 router가 변할때 마다 실행되는routeChangeComplete 이벤트

useEffect에서 특정 target에 blur Event를 걸었는데, 적용되지않았던 경험을 적어보자useEffect는 실행이 되는데 pwRef에서 blur시 이벤트가 일어나지않는다.useEffect의 의존배열을 비워두면 InputComponent가 mount되기전에

리액트에서 useEffect의 의존배열로 아무리 삽질을 해도 몰랐던부분인데 알게되어 정리해보자onFocus : 태그에 onFocus 프로퍼티를 사용하여 onClick처럼 사용가능.Ref.current.addEventListener("focus", () => {}) :

js에서 제공하는 이벤트로 구현할수없는 여러가지 trigger로 이벤트를 일으키는데 사용되는 observer에 대해서 알아보장 Observer의 종류 mutationObserver IntersectionObserver 그외 PerpformaceObserver, Rep

Nextjs에서 hydration과정과 거기서 발생하는 missMatch에러에 대해 알아보자server에서 pre-rendering된 html파일이 client로 보내진다.이때 받은 html파일로 화면을 먼저 그린다. (첫번째 렌더링)번들링된 JS파일이 그 뒤에 cli

nextjs의 서버사이드 렌더링에서 data를 fetch하는 방법을 알아보자페이지에서 getServerSideProps함수를 리턴하는 경우에는 해당 함수가 리턴하는 props를 통하여 컴포넌트가 렌더링되기 이전에 pre-rendering 한다.서버측에서만 실행되고 클라