공부 기록일지📚

box-sizing의 속성값 content-box (box-sizing의 default value) Content 영역을 기준으로 box의 size 적용 width값이 400px이더라도 padding을 50px로 주면 500px의 width를 가진 box가 된다. 👾 위와 같은 이유로 일반적으로 모든 요소의 box-sizing을 border-box로 맞춰주고 시작하는 경우가 많다. border-box Border 영역을 기준으로 box의 size를 적용 content와 padding을 포함한 box 사이즈가 width 값이 되는 것 Inline요소 vs Block 요소 div, p, span, h1, h2 등 수많은 HTML 태그는 블록요소와 인라인 요소로 분류한다. CSS에서 display 속성은 웹 ..

🟡 문제 상황 git status 명령어로 현재 commit 상태를 확인할 때,한글로 작성된 파일들이 제대로 보이지 않는 현상이 발생했다. 아래와 같이 숫자로 표현되고 영어로 작성된 파일들은 제대로 보인다. 🟡 원인 core.quotepath 설정: 일반적이지 않은 문자를 탈출문자로 처리하는 기능 core.quotepath가 큰 바이트를 가진 문자를 탈출문자로 인식하여 파일명이 깨지게 된다고 한다.(기본 세팅이 true값으로 되어있기 때문이다.) 한글 인코딩이 UTF-8에 들어가 0x80 보다 큰 바이트를 가진 escape 문자 처리가 되어 "unusual"인 케이스로 포함되기 때문에 위와 같은 문제상황이 발생한 것이므로 해당 세팅을 false로 지정해주면 정상적으로 작동한다. 🟡 해결 방법 터미널 창에..

모든 내용은 맨 하단의 원작자분이 작성해주신 포스팅 내용을 제가 이해할 겸 축약하여 작성한 것입니다. 문제시 알려주시면 삭제하겠습니다! 자세한 내용을 원하시면 링크를 타고 본 포스팅을 확인해주세요. 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트는 어떤 필요에 의해서? -> 아마 코드의 실행 순서와, 각각의 실행에서 참조해야하는 변수, 식별자 등을 효과적으로 관리하기 위한 목적으로 도입되었다. 실행 컨텍스트란 "실행할 코드에 제공할 환경 정보들을 모아놓은 객체" -> 정보들을 어딘가에 모아두는 이유? A. "언젠가 필요할 때 꺼내어 쓰기 위함이다." 실행 컨텍스트 요소 Variabl..

우리가 많이 사용하는 react hook 중 useState의 인자 값으로 리터럴 값 외에 함수를 넘겨줄 수도 있습니다. 이를 Lazy initial state라 하는데 자세한 내용은 맨 하단의 react 공식 문서 ref를 확인해보시면 됩니다. 🟠 Lazy initial state( 지연 초기값 ) initialState 인자는 초기 렌더링 시에 사용하는 state이다. 그 이후의 렌더링 시에는 이 값은 무시됩니다. 즉, 설정해 놓은 초기값을 필요로하는 순간이 맨 처음 화면이 랜더링될 때 한번이고 입출력 계산이 필요한 경우라면 lazy init 함수를 통해 성능 최적화 작업이 가능합니다. 구체적인 예시로는 localStorage(웹스토리지) 접근, map, filter, find, new Date등 데..

왜 이 WebAPI에 대해서 찾아보게 됐나? - query string을 업데이트해야 할 때 사용하기 좋은 WebAPI입니다. 혹은 URL Validation을 할 때 유용할 거 같습니다. - 어렴풋이 URLSearchParams()를 사용해본 거 같은 느낌이 들어 찾아보니 이전에 리액트 프로젝트를 했을 때 사용한 React router dom v6의 useSearchParams()와 비슷한 거 같네요. 🟡URLSearchParams ❗URL 전체를 인자로 넘기는 것이 아니라 query string 부분만 인자로 넘겨준다. URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의한다. 이 생성자(new 키워드로 새 인스턴스 반환)를 통해 구현되는 객..

웹 스토리지? 저장할 데이터가 별로 중요하지 않거나, 유실되어도 무방할 데이터라면 서버 단에서 데이터를 저장하는 것이 낭비일 수도 있습니다. 클라이언트 단, 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지를 활용해봅시다. 2가지 종류 웹 스토리지에는 크게 localStorage 와 sessionStorage가 있습니다. 두 개의 매커니즘 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐 입니다. 세션 스토리지는 웹 페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. -> 💥브라우저에서 같은 웹 사이트를 여러 탭이나 창을 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 ..

타입스크립트를 사용할 때 가장 큰 혜택 두 가지를 뽑는다면 자동완성 문서화 기능 이라고 할 수 있습니다. 타입을 잘 사용하면 직접 모든 코드를 작성하지 않고 IDE(우리의 경우엔 vscode)가 추론해준 선택지들 사이에서 고르는 방식으로 코드 개발이 가능합니다. 물론 타입스크립트를 제대로 작성했을 때, TS가 잘 추론할 수 있겠죠. 1️⃣자동완성 IDE뒷단에서 돌고 있는 LSP(Language Server Protocol)에 의해 개발자가 작성된 코드의 타입이 실시간으로 체크됩니다. 그래서 가끔 타입 추론이 제대로 되지 않을 때는 TS Server를 재시작해주면 됩니다. (종종 타입 체킹이 안될 때가 있는데.. 새로고침을 하면 됩니다. 아예 모를 때는 vscode를 껐다가 켰네요. ) 타입스크립트 파일을..

프론트엔드 과제를 하면서 구현되어있는 백엔드 api를 쓰기 위해 로컬에서 서버를 켰는데 네트워크 요청이 자꾸 실패하는 상황이었습니다. 첫번째로 원인 파악에 나선 것은 endpoint 였는데, 아무리 봐도 문제가 없었고 next.js에서 서버를 구동했을 때, 붉은 폰트가 나오는 것이 에러메세지가 아니라 정상 구동됐을 때도 저렇게 떴기 때문에 제대로 읽지 못하고 넘겨버린 것이 문제였습니다. 결론적으로 1시간정도 헤맸었는데 그냥 8080 포트를 이미 사용중인 프로그램이 있기 때문에 해당 프로그램을 kill해주면 되는 문제였습니다. (에러 메세지가 뜨면 제대로 확인하자..^ ^) 8080포트로 다른 프로그램을 실행 시킨 기억이 없어서 vscode를 다 끄고 다시 재가동했어도 똑같은 에러메세지가 발생해서 결국 직..