전체 글

🔮 설치하기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)는 타입 검사를 수행합니..

🌀 타입스크립트란타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 기존의 자바스크립트는 개발자가 명시적으로 변수의 자료형(type)을 적어주지 않아도 런타임에 동적으로 타입이 할당되었습니다. 그러나 타입스크립트는 개발자가 명시적으로 변수의 자료형을 적어주어 컴파일 시에 변수의 자료형을 체크합니다.다음은 타입스크립트의 예시 코드입니다.// -------------- javascript --------------const str = 'hello javascript';const num = 1004;const arr = [1, 2, 3];const obj = { name: 'Emma', age: 1004,};// -------------- typescript --------------const st..

🐝 정의CSS 파일을 별도로 작성하지 않고 자바스크립트 파일 안에서 CSS를 작성하는 방식입니다. 자바스크립트 코드가 실행되며 CSS 코드가 생성됩니다.CSS-in-JS 라이브러리의 종류는 다음과 같습니다.Styled-ComponentsemotionJSS-ReactglamorousRadiumAphroditeetc.. 🐝 장단점CSS-in-JS의 장점은 다음과 같습니다.CSS 클래스의 이름 충돌 문제 해결: 스코프를 해당 컴포넌트로 한정하여 전역적으로 인식되는 네임스페이스의 충돌을 방지합니다.컴포넌트 단위의 스타일링: 컴포넌트에 적용될 스타일을 같은 파일 내에서 정의하고 관리할 수 있습니다.동적인 스타일링: props나 state에 따라 상황에 맞는 스타일을 적용할 수 있습니다.자바스크립트를 활용: 자..