본문 바로가기

분류 전체보기

(33)

Next.js Image 알아보기 Next.js에서는 이미지에 대한 최적화를 기본으로 제공한다 Next.js를 쓰지 않았을 때는 Lazy loading등 성능을 위해 고려해야할 사항이 많았는데 Next.js에서는 기본으로 제공을 해준다고한다. 한번 살펴보면서 공부해보자 Image 컴포넌트에 내장된 최적화는 아래와 같다 향상된 성능 - 최신 이미지 형식을 사용하며 각 디바이스에 맞는 올바른 크기의 이미지를 제공한다 시각적 안정성 - 자동으로 CLS (Cumulative Layout Shift) 를 방지해준다 빠른 페이지 로드 - 이미지가 뷰포트에 들어 왔을 때만 로드되기 때문에 초기 페이지 로드 속도가 빠르다 유연한 에셋 - 외부에 저장된 이미지의 경우에도 크기 조정이 가능 필수 props src 정적으로 가져온 이미지 파일 외부 URL ..

Next.js의 Pre-rendering Next.js는 모든 페이지를 Pre-rendering한다 즉, Next.js는 클라이언트측의 자바스크립트가 로드되기 전에 미리 HTML을 생성한다 Pre-rendering은 더 나은 성능과 SEO에 최적화 되어 있다. Static Generation , Server-side Rendering Next.js에는 Static Generation, Server-side Rendering 두가지 형태의 Pre-rendering 방식을 제공한다 두가지 Rendering 방식의 차이점은 페이지에 대한 HTML을 언제 생성 하느냐에 따른 차이이다. Static Generation - HTML은 빌드 시 생성되며 사용자 요청에 따라 재사용된다. Server-side Rendering - HTML은 사용자 요청마다 생..

Next.js의 _app과 _document 알아보기 Next.js에는 _document, _app 두개의 기본 페이지가 있다 _app, _document는 프로젝트에 공통적으로 적용 되어야할 내용들을 작성해야한다. App App 컴포넌트는 앱이 시작할 때 가장 먼저 호출되는 컴포넌트이다. 프로젝트의 글로벌 작업들을 수행하기에 적합한 컴포넌트이다 예시 페이지 변경 시에도 레이아웃과 상태값을 유지 componentDidCatch를 통한 에러 핸들링 페이지에 추가 데이터 삽입 Global CSS 추가 Header, Footer와 같은 공통 레이아웃 추가 const App = ({ Component, pageProps }) => { return ( ); }; export default App; 기본적인 _app 컴포넌트의 구조이며 props로 Component와..

Next.js 알아보기 Next.js의 개념에 대해 알아보는 글 최근에 알게 된 정보들을 정리하는 느낌으로 작성해보려 한다 Next.js는 vercel 팀에서 만든 React Framework이다. 서버사이드 렌더링을 함으로 얻는 이득 ? CSR의 단점 CSR의 경우 모든 JS 파일을 로드한 이후에 사용자가 웹을 보게 된다 → 즉 JS 파일을 로드하기 전 까지 사용자는 많은 시간을 대기해야 한다 👉 서버사이드 렌더링 즉 서버에서 자바스크립트를 로딩하고 유저가 볼 수 있는 html (미리 데이터가 렌더링된 페이지)을 볼 수 있기 때문에 유저가 페이지를 확인하는 시간을 단축 시킬 수 있다. CSR의 단점 SEO - CSR의 경우 자바스크립트가 로드 되지 않은 경우 웹페이지를 볼 수 없다 -> 비어있는 (index.html) 구글 ..

변수의 호이스팅, TDZ의 개념 바로알기 호이스팅 (Hoisting) 이란 ? JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. -MDN- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위(실행 컨텍스트)의 최상단에 선언하는 것. 호이스팅의 대상 자바스크립트에서는 모든 선언을 호이스팅한다. 보통 호이스팅은 var 키워드로 선언된 변수에서만 일어난다고 생각하지만 let, const 에서도 호이스팅이 일어난다. 변수의 생성 단계를 알아보면서 이해해보자 변수는 3개의 단계를 거쳐 생성이 된다. 1. 선언단계 자바스크립트에서 변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다. 선언단계에서는 ..

자바스크립트가 싱글스레드지만 비동기로 동작하는 이유 우선 글을 시작하기 전에 스레드에 대한 간단한 개념부터 이해하고 가면 좋을 듯하다. 프로세스와 스레드 차이 프로세스는 메모리 상에서 실행중인 프로그램을 말하며, 스레드는 이 프로세스 안에서 실행되는 흐름 단위를 말한다. 프로세스마다 최소 하나의 스레드를 보유하고 있으며, 각각 별도의 주소 공간을 독립적으로 할당받는다. (code, data, heap, stack) 스레드는 이중에 stack만 따로 할당받고 나머지 영역은 스레드끼리 서로 공유한다. 프로세스 : 자신만의 고유 공간과 자원을 할당받아 사용 스레드 : 다른 스레드와 공간과 자원을 공유하면서 사용 즉 스레드는 실행되는 흐름의 단위이며 멀티스레드 환경에서는 이 스레드가 다중적으로 이루어져 있기 때문에 한 번에 많은 일들을 처리할 수 있는 것이다. ..

Couch Coding ( 카우치 코딩 ) - CampUs 프로젝트 회고 카우치코딩에서 진행하는 6주간의 프로젝트가 끝이 났다. 6주간 팀원 모두가 열정적으로 임해주어서 마무리가 잘 된 것 같다고 생각한다 새벽까지 남아 개발하며 팀으로 일 한다는 것이 정말 멋진 일이라는 것을 느끼게 된 것 같다. 지금까지 이 프로젝트를 진행하며 느끼고 배웠던 것들을 기록했었고, 이제는 회고를 써보자 한다. CampUs 프로젝트에 참여하게 된 계기 여러 사람들이 다양한 아이디어를 냈었는데, 솔직히 막 끌린다거나 하는 아이디어는 없었다. 그 당시만 해도 내 자신감이 바닥을 기어 다닐 때여서 어딜 가든 1인분만 하면 좋겠다는 생각을 했던 것 같다 어느 팀, 어떤 프로젝트를 진행하든 팀원 분만 잘 만나면 좋겠다고 생각했다. 그렇게 캠핑장을 추천 서비스 팀에 참여하게 되었고 팀원분들과 짧은 대화를 나..

Couch Coding ( 카우치 코딩 ) - ReactKakaoMapSDK 이용하여 마커, 커스텀 오버레이 생성하기 (카카오맵) 우리 팀이 현재 개발하고 있는 CampUs 서비스는 지도를 통해 캠핑장의 좌표를 확인하고 캠핑장을 조회할 수 있는 서비스이다 위 사진처럼 캠핑장을 검색하면 그 결과에 따른 좌표가 지도에 등록되고 마커를 클릭했을 때 사진과 같아 '커스텀 오버레이'라고 부르는 컴포넌트를 렌더링 한다. 이전에 kakaoMap API를 통해 리액트에서 개발을 했을 때 리액트에서 사용하기가 조금 불편하다고 느낀적이 있어서 편리한 라이브러리가 없을까 찾아보다가 https://github.com/JaeSeoKim/react-kakao-maps-sdk GitHub - JaeSeoKim/react-kakao-maps-sdk: React components for using kakao map api React components for ..

이전 1 2 3 4 5 다음

티스토리툴바