TIL

2024년 2월 회고

2024년 프론트엔드 취준 개발자의 2월의 회고. 이번 달의 모든 포커스는 이력서에 맞춰져 있었다. 혼자 이력서를 고쳐봤자 제자리 걸음같은 생각에 여기저기 기웃거리며 커피챗을 요청했다. 낯을 가리는 성격인지라 참 순탄치 않았지만 처음 했던 커피챗에 대한 기억이 굉장히 좋았어서 용기를 가질 수 있었다. 세 번의 커피챗을 했고 이런 저런 커리어적인 고민을 나누고 여태까지 작성한 이력서에 대한 의견도 들을 수 있었다. 역시나 다른 사람들에 시각에서 피드백을 듣기를 잘 했다. 왜 진작 다른 사람들을 만나며 의견을 묻지 않았을까하는 후회가 됐다. 그리고 수정을 마쳤는데 사실 이력서를 인생에서 수없이 많이 작성해봤지만 매번 새롭고 어렵다. 나는 같은 사람인데 참 아이러니하다. 지난 회사에서 했던 프로젝트와 무엇을 ..

Next.js v14 Error : createContext in a Server Component

Server Error Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component 원인 : 클라이언트 컴포넌트에서만 사용가능한 createContext를 사용해서 생긴 에러. 컴포넌트가 있는 파일 최상단에 'use client'를 쓰면 해결되다고 한다. 그러나, metadata를 export 하고 있었기 때문에 관련 파일들을 client 모듈로 선언할 수 없었다. 'use client'를 선언할 경우 선언 아래로 실행되는 컴포..

[TIL] 이벤트 버블링?

이벤트 버블링이란 물 속에서 거품이 보글보글 올라오는 것에서 연상된 표현으로 하위에 요소에서 진행되는 이벤트가 상위의 요소들에게 전달되는 것을 말한다. 예를들어 button요소를 감싸고 있는 button요소를 클릭하면 button 요소에 있는 onClick이벤트가 실행되고 감싸고 있는 div에 있는 onClick이벤트가 실행된다. 만약 div위에 상위 요소가 있다면 그 요소도 마찬가지로 onClick이벤트가 실행된다. 이를 방지하기 위해서는 event.stopPropagation()이라는 웹API를 사용하면된다. 이를 사용할 경우 target하는 해당 요소에서만 이벤트가 발생하게 된다.

자바스크립트의 비동기 처리

프론트엔드를 공부하면서 많이 들어봤지만 아직도 개념이 정확하게 잡혀 있지 않다는 게 창피한 비동기 처리. 이번에 면접을 보면서 이 질문에 대답을 명확히 하지 못 했다는 수치심을 느끼고 이 참에 제대로 정리하고 넘어가고자 한다. 동기 VS 비동기 자바스크립트가 싱글 스레드다. 싱글 스레드란 무엇일까? 한 마디로 자바스크립트 언어는 한 번에 하나만 수행할 수 있다는 말이다. 그렇기 때문에 동기와 비동기의 개념이 나온 것 같다. 동기란 하나의 작업이 수행되고 끝난 다음에 또 다른 작업이 수행되는 것처럼 작업이 순서대로 하나씩 수행되는 방식을 말한다. 반대로 비동기란 하나의 업무를 처리하는 동시에 다른 업무도 처리하는 것을 말한다. 그런데 한 번에 하나의 작업만 수행한다던 자바스크립트로 어떻게 비동기 처리를 할..