🖥️ Front End4 next.js 에서 data fetching 기존 react에서는 client에서 data fetching을 시도하기 때문에 비밀정보 등을 넣을 수 없다. 개발자 도구를 통해 network 탭에 들어가면 통신하고 있는 정보들을 볼수있기 때문이다. 또한 이렇게 정보가 유출되면 데이터 베이스와 통신도 할 수 없다. 또한 client 에서 data fetching을 진행하면 항상 usestate를 사용해야하며 그에 맞는 useEffect도 사용해야한다. 또한 항상 클라이언트 측에서 로딩상태는 존재하기 때문에 이에 대한 처리도 진행해줘야한다. sever에서 이를 data fetching를 진행하면 API 를 통해 데이터베이스에 접근할 필요가 없으며 위의 hook들을 사용할 필요가 없어진다. 또한 로딩상태는 클라이언트 쪽이 아닌 서버측으로 옮겨간다. nex.. 2024. 2. 2. CSR vs SSR (hydration, "use client") SSR vs CSR CSR 모든 렌더링 즉, 모든 ui구축작업이 모두 client측에서 일어나는 것 Rendering react code를 브라우저가 이해할 수 있는 html 로 바꾸는 작업 CSR의 단점 1. 렌더링 되기전 잠깐의 빈화면 브라우저는 html을 띄워준다. 그냥 React 환경에서는 CSR이기때문에 자바스트립트가 돌아가기 전 잠깐동안 빈 Html을 보여준다. 그러고 자바스크립트가 돌아가면 HTML을 자바스크립트가 redering 하고 그제서야 보여지게 된다. → 자바스크립트가 안돌아가거나 느리면 html은 비어있기때문에 아무것도 볼수없다. 2 .Seo 검색엔진 최적화 구글의 검색엔진은 html의 요소를 본다. 그렇기에 비어있는 html은 검색엔진 최적화를 할수없다. SSR 모든 렌더링이 서.. 2024. 1. 30. git & github git 버전관리란? 파일을 버전별로 저장하고 나중에 특정시점에 버전을 다시꺼내올수있는 시스템 장점 지난 과정확인 가능 이전 버전으로 돌아갈수있음 다른 컴퓨터에 작업물 전송가능 → 백업본을 만들수있다. 협업이 가능하다. git은 버전관리와 동시협업을 할수있게 도와준다. git hub 깃으로 버전 관리 해놓은 프로젝트를 올려놓을 수 있는 원격저장소의 역할을 해주는 서비스 레포지토리 (저장소) 깃이 버전별로 바뀌는 모습(커밋)을 기록해놓는 곳이 레포지토리 💡 .git 디렉토리 = 레포지토리 커밋 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 동작 & 결과물 git init 현재 디렉토리를 git이 관리하는 프로젝트 디렉토리로 설정하고, .git 디렉토리 즉, 버전관리를 해주는 git 디렉토리를 생성해.. 2024. 1. 20. 타입스크립트 기초 타입스크입트는 자바스크립트의 슈퍼셋 node와 웹은 JS를 실행 할수있기 때문에 타입스크립트를 자바스크립트로 변환해주어야함(트랜스파일) ⇒ 이 과정을 도와주는 것 : TSC 타입스크립트 컴파일러 TSC 타입검사 → 트랜스파일 ⇒ 웹 노드에서 자바스크립트에 실행 컴파일러 : 기계어로 바꾸는 과정 트랜스파일 : 웹이 읽을수 있도록 언어를 바꾸는 과정 타입스크립트에서 정의한 타입은 타입검사에만 사용되며 실행될 때는 사용되지 않는다. “use strict” 자바스크립트를 엄격한 규칙에서 사용하고 싶을 때 사용함 타입스크립트 타입 기본적인 타입스크립트 타입 종류 타입 문자열 string 숫자형 number 불린형 boolean undefined undefined null null 객체 타입 기본적으로 typeof.. 2024. 1. 1. 이전 1 다음
