취업까지달린다

🐝 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..