Dev

호이스팅? TDZ? var과 let/const? 확실하게 짚기

호이스팅이란? 코드에 선언된 변수 및 함수가 코드 상단으로 끌어올려지는 것처럼 동작하는 것을 말합니다. 이는 자바스크립트 파서가 내부적으로 끌어올려서 처리하는 것으로, 실제 메모리에서는 변화가 없습니다. 이러한 호이스팅이 발생하는 이유는 자바스크립트 해석기의 동작 방식 때문입니다. 자바스크립트 코드가 실행되면 파싱을 하게 되는데, 이때 코드를 해석해 전역 컨텍스트에 전역 변수 및 함수를 등록하려하기 때문에 끌어올려지는 듯한 현상이 발생하게 됩니다. 변수 호이스팅 console.log(name); // undefined var name = 'danmin'; 코드 상으로 보기에는 name 변수의 생성과 초기화가 console.log 이후에 이루어졌으니 에러가 발생할 것 같아 보이지만, undefined로 출..

요즘 핫한 SSR 프레임워크, Remix 사용해보기

https://remix.run/ Remix - Build Better Websites Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. remix.run 위의 리믹스 공식 사이트를 둘러봅시다! 세상에.. 공식 사이트가 이렇게 힙할 수 있나요...? 첫인상부터 매우 강렬하게 다가왔습니다. 이번 프로젝트에 Remix를 도입해봐야겠다고 다짐하게 된 이유는 바로 Nested Rout..

Next.js에서 redux toolkit 세팅하기

CSR에서 세팅하는 거랑 뭐가 다른데? Next.js는 서버 사이드에서 렌더링이 이루어집니다(SSR). 그래서 일반적인 CSR 환경에서 리덕스를 사용할 때와 달리 추가적인 작업이 필요합니다. 1. 서버 사이드에서 생성되는 리덕스 store와 이후 클라이언트 사이드에서 생성되는 리덕스 store는 다릅니다. 따라서 이 둘을 합쳐주는 로직이 필요합니다. 서버에서 생성한 store의 상태를 HYDRATE 라는 액션을 통해 client에 합쳐주는 리듀서를 작성해봅시다. action.payload에는 서버에서 생성한 store의 상태가 담겨있어 이 둘을 합쳐 새로운 client 측 store의 상태를 만들게 됩니다. // store/index.tsx import { combineReducers, } from "@..

맥북 마이그레이션이 필요 없을 정도로 간단한 "맥북 + 개발 환경 세팅" | iterm2 + ohmyzsh 테마 설정 (m1 기준)

1. 기본 맥북 세팅 세 손가락 드래그 애플리케이션 창을 움직여 이동시키거나, 문서 내 글을 드래그할 때 클릭으로 하면 불편함이 많죠. 이걸 굳이 클릭해서 끌지 않아도, 간편하게 터치 & 드래그로 할 수 있는 방법이 있습니다. 으로 들어가면 드래그 활성화를 할 수 있습니다. 저는 세 손가락으로 드래그 활성화를 하고, 페이지를 쓸어 넘기거나 Mission Control을 사용할 경우 네 손가락을 씁니다! 앱 expose 로 들어가면 앱 Expose를 켤 수 있습니다. 현재 포커스 된 탭과 동일한 애플리케이션 내의 탭들만 노출시키는 기능으로, 비활성화해놓으면 은근 불편하더라고요ㅎㅎ 2. 설치할 앱 이건 지극히 프론트를 하는 제 주관적인 의견입니다 :) 1. 필수적인 앱 크롬, 카카오톡, 노션, vsc, zo..