전체 글

🌿 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에 따라 상황에 맞는 스타일을 적용할 수 있습니다.자바스크립트를 활용: 자..