본문 바로가기

전체 글

 (122)
TailwindCSS - 기본 정리 "[ 기존 css ] : tailwindCss 사용 예시" 형태로 작성했다. 크기 / 간격 및 배경 [ width ] : w-12 , w-1/2(50%) [ max-width ] : max-w-sm [ height ] : h-12 [ padding ] : p-6 [ padding-top ] : pt-0 [ padding-bottom ] : pb-0 [ padding-top + padding-bottom ] : py-10 [ margin ] : m-10 [ margin-left + margin-right ] : mx-auto [ background color ] : bg-white border [ border-width ] : border-3 [ border-color ] : border-black [ b..
next.js SSR 실행 과정 웹브라우저가 getRequest를 통해 서버에 요청을 할 때마다 서버가 pre-rendering해서 화면을 보내준다. 순서 웹브라우저 접속과 동시에 getRequest 보냄 서버가 response로 이미 렌더링된 html을 보내줌 자바스크립트 로딩 리액트 hydrate hydration 서버에서 받은 이미 렌더링된 html 화면에 리액트의 상태와 같은 데이터가 연결되는 과정. 이를 통해 초기 로딩시 클라이언트에서 지 상호작용이 가능하며, 이후에는 일반적인 react app처럼 동작한다. 만약 hydrate과정이 없다면 서버에서 온 html은 무시하고, 클라이언트 사이드 렌더링이 새로 필요하게된다. 리액트는 hydrate할 때, 렌더링된 콘텐츠가 서버와 클라이언트간에 동일할 것으로 예상한다. 개발자모드에서..
React - Next.js 사용 이유 pre-rendering을 쉽게 할 수 있다. 자동으로 코드 스플리팅, pre-fetching 을 해준다. 파일시스템 기반 라우팅이 가능하다. vercel로 서버 호스팅이 쉽다. 이밖의 이점. 1. pre-rendering을 쉽게 할 수 있다. 클라이언트 사이드 렌더링만 가지고 개발한 사이트는 맨 처음에는 텅 빈 화면이 나온다. 이후 자바스크립트 실행 -> 리액트 동작 과정을 거친 후 화면이 보이기때문에 초기 로딩이 느리다. 또한, 맨 처음에 텅 빈 화면이 나오기때문에 검색엔진에 제공할 수 있는 정보가 적어서 검색 엔진 최적화가 되지 않는다. 따라서 사용자경험과 검색엔진 최적화를 위해 pre-rendering을 할 수 있다. 프리렌더링 : 화면의 컴포넌트나 데이터를 미리 렌더링해서 html으로 저장해두..
TypeScript 사용 이유와 동작 원리 JavaScript의 한계 인터프리터 언어인 자바스크립트는 동적 타이핑언어이다. 동적으로 타입이 변환되기때문에 변수의 자료형에 제한이 없다. 자료형간의 연산의 경우 동적으로 타입이 변환되기 때문에 프로젝트의 규모가 커질 경우 의도하지 않은 에러가 발생할 수 있다. TypeSrcript의 보완점 JavaScript의 SuperSet 언어로, 타입에 대한 문법을 제공한다. JavaScript와 1:1 매칭되는 컴파일 언어이기때문에 JavaScript를 사용하는 곳이라면 TypeScript를 적용할 수 있다. 정적 타이핑 언어로 변수의 타입을 코드 실행전에 결정한다. 컴파일 시점에 타입체크를 진행하기때문에 런타임 이전의 논리적인 오류를 확인할 수 있다. TypeScript의 이점 인터페이스, 제네릭 등을 지원..
TypeScript-React 다룰 내용 1. 타입스크립트 프로젝트를 세팅하는 방법 및 Js프로젝트 -> Ts프로젝트 마이그레이션 방법 2. React에서 자주 사용하는 타입 타입스크립트 프로젝트를 세팅하는 방법 및 Js프로젝트 -> Ts프로젝트 마이그레이션 방법 Create React App 타입스크립트 프로젝트 세팅하기 폴더 생성(typescript-react) npx create-react-app . --template typescript "create-react-app 이라는 것을 사용해서 현재폴더에 프로젝트를 만드는데, 타입스크립트 템플릿을 사용하겠다." 는 의미의 명령어이다. 제대로 생성이 되었다면, tsconfig.json 파일과 함께 프로젝트가 생성된다. . 으로 현재폴더를 만드는 것 대신, 아래와같이 사용할 수도 있다..
TypeScript 자바스크립트는 인터프리터 언어, 동적 타이핑 언어이다. 인터프리터 언어 : 소스코드를 한 줄 씩 읽어서 실행하는 언어. 컴파일 언어 : 소스코드를 기계어로 바꿔놓고 실행하는 언어. 동적 타이핑 언어 : 변수의 자료형을 자유롭게 바꿔서 사용 가능함. 정적 타이핑 언어 : 변수나 함수에 타입을 지정하고, 그 타입만을 사용하는 방식. 자바스크립트의 동적 타이핑 언어적 단점으로 실수하기 쉽고, 실수를 발견하기 어렵다는 점이 있다. 이러한 단점을 보완하기위해 정적 타이핑을 지원하는 타입스크립트가 있다. 타입스크립트는 정적 타이핑을 지원하기때문에 실제 배포하기 전에 타입을 체크한다. 다룰 내용 TypeScript 프로젝트 생성 기본적인 타입 enum, interface, 타입 별칭 Union, Intersectio..
쿠키, 세션, 로컬스토리지 쿠키 설명 로그인상황을 예시로, 로그인이 성공하면 서버는 클라이언트에 일종의 인증서를 보내준다. 클라이언트가 이것을 가지고오면 어떤사람인지 구분하는데 사용하기로한다. 클라이언트는 request를 보낼 때 마다 이 인증서를 request에 포함해서 보내야한다. 이 때 사용하는 것이 쿠키이다. 로그인에 성공했을 때 서버가 Set-Cookie헤더로 쿠키의 값을 보내준다. 클라이언트는 저장해두었다가, 서버에 Request를 보낼 때 마다 매번 Cookie헤더로 보내주어 로그인상태라는 것을 표시한다. 웹브라우저를 껐다 키거나, 컴퓨터를 껐다 키더라도 쿠키값은 유지되기 때문에 일정기간 로그인하지않아도 로그인상태가 유지된다. 특징 서버로부터 response로 쿠키를 받으면, 클라이언트에서는 별도로 작업을 해주지 않아..
웹페이지 렌더링 방식(CSR, SSR, SSG) 웹페이지 렌더링 방식의 특징과 상황에 따른 렌더링 방식 선택 1. CSR(Client Side Rendering) 브라우저에서 동적으로 태그와 스타일을 생성해 페이지를 채운다. 최초에 하나의 페이지(비어있는 페이지)만 서버로부터 불러와 렌더링하고, 이후 모든것들을 브라우저에서 렌더링한다. (SPA) 한 번 렌더링하고 난 이후에는 필요한 부분만 렌더링하기때문에 효율적이다. 장점 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임없이 부드럽게 페이지가 바뀌어 사용자 경험이 좋다. 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생한다. 단점 모든 스크립트 파일이 로드될 때 까지 기다려야하기때문에 초기 로딩 속도가 느리다. (최초에 빈페이지를 받아오기때문에 페이지..

티스토리툴바