![]()
🔮 설치하기1) 테일윈드를 사용하고자 하는 디렉토리에서 터미널을 켭니다. 2) 터미널에서 아래의 명령어를 입력하여 tailwindcss, postcss, autoprefixer를 설치합니다.npm install -D tailwindcss postcss autoprefixer 3) 터미널에서 아래의 명령어를 입력하여 'tailwind.config.js'와 'postcss.config.js' 파일을 생성합니다.npx tailwindcss init -p 4) 'postcss.config.js' 파일을 열어 다음과 같은 내용으로 설정되어 있는지 확인합니다.module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },} 5) 'tailwi..
![]()
🐝 SSR(server side rendering)서버 사이드 렌더링은 사용자가 요청을 보낼 때마다 서버가 직접 렌더링을 마친 html 파일을 보내주는 방식입니다. 동작 과정은 다음과 같습니다.사용자가 웹 페이지에 접속하면 브라우저는 해당 url을 서버에게 요청합니다.서버는 받은 url을 기준으로 어떤 페이지를 렌더링할 지 결정합니다.서버에서 웹 페이지를 완성하고, 그 결과를 브라우저에게 응답으로 전달합니다.이후에는 클라이언트 사이드 렌더링(CSR)과 마찬가지로 브라우저는 받은 html 파일을 해석하여 DOM을 생성하고 hydration을 수행합니다.여기에서 중간에 있는 hydration이란 무엇일까요? 🐝 Hydrationhydration(하이드레이션)의 사전적인 의미는 '수분 공급', '수화'입니..
![]()
🌿 Next.js란next.js란 풀스택 웹 애플리케이션을 구축하기 위한 리액트 프레임워크로, 리액트를 더욱 강화하여 사용할 수 있게 한 리액트의 확장판이라고 할 수 있습니다.사용자 인터페이스를 구축하기 위해 리액트 컴포넌트를 사용하고, 추가 기능 및 최적화를 위해 페이지 라우팅과 빌트인 최적화 및 다양한 렌더링 전략을 제공합니다.아래에서 넥스트와 리액트를 비교하여 넥스트의 사용 이유에 대해 알아보겠습니다. 🌿 다양한 렌더링 전략리액트는 기본적으로 클라이언트 사이드 렌더링(CSR, client side rendering)으로 동작합니다.따라서 서버가 아닌 클라이언트인 브라우저에서 모든 것을 처리하기 때문에초기 접속 요청을 보내고, 사용자가 화면에 있는 콘텐츠와 상호작용 할 수 있기까지 어느 정도의 시..
![]()
타입스크립트는 기존의 자바스크립트에 타입 개념을 추가한 언어로, 개발자가 코드를 더욱 예측 가능하고 유지보수하기 쉽게 도와줍니다. 타입스크립트가 동작하는 원리는 다음과 같습니다.타입스크립트 코드 작성 -> 타입 검사/추론 -> 자바스크립트 코드로 변환 -> 실행아래에서 자세히 살펴보겠습니다. 🌀 동작 과정1. 타입스크립트로 코드 작성'.ts', '.tsx'와 같은 확장자를 가진 파일에 작성합니다.파일 안의 변수, 함수 등은 각자의 타입과 함께 정의되어 있습니다. 2. 타입 검사타입스크립트로 작성된 코드는 브라우저나 Node.js에서 실행할 수 없기 때문에 자바스크립트로 변환됩니다.이때 자바스크립트로 변환하기 전에 타입스크립트 컴파일러(tsc, typescript compiler)는 타입 검사를 수행합니..
