분류 전체보기101 Next.js : 리액트 말고 나 써라. Next.js는 어떤놈이야?Next.js는 오픈 소스이며, 프레임워크로 리액트와 함께 빠르고 사용자 친화적인 웹 앱 및 정적 웹 사이트를 개발할 수 있다.뒤에 소개할 다양한 기능들을 이용해 리액트 애플리케이션을 효율적으로 구축 및 성능을 최적화 할 수 있다.리액트와 Next의 차이는?🔖 서버 사이드 렌더링(SSR)과 정적 생성(SSG) 지원초기 로딩 속도의 향상과 SEO 개선에 용이하다.리액트의 클라이언트 사이드 렌더링(CSR) 또한 사용 가능하다.CSR에 비해 페이지 요청 시마다 더 빠른 성능을 제공한다.또한 CSR도 사용 가능하다. (유도리 있는 친구)🔖 라우팅 및 코드 분할페이지 라우팅 및 앱 라우팅을 통해 동적으로 페이지를 생성하고 필요 시 코드를 자동 분할한다.번들 크기를 줄이고 앱 성능 최.. 2024. 5. 31. Next.js 기본 Next.js는 무엇인가🏷️ 초기 로딩이 느리고 검색 엔진에 제공하는 정보가 적은 리액트의 단점을 커버한 프레임워크pre-rendering을 통해 미리 렌더링할 정보를 저장하거나 서버가 그때 그때 렌더링하여 화면을 출력한다.Vercel를 통한 서버 호스팅을 이용해 빠른 코드 배포가 가능하다.파일 시스템 기반 라우팅을 통해 편하게 페이지를 나누고 개발이 가능하다.어떻게 만들어야 할까?🏷️ 생성 과정npx create-next-app을 이용해 프로젝트를 생성한다.파일 정리 및 기초 세팅 후 npm run dev을 통해 개발자 모드를 열어 개발한다.🔖 프로젝트 초기 구성project |- components |- lib |- pages |- public |- styles eslintr.. 2024. 5. 27. 타입스크립트.. 누구냐 너 타입스크립트는 뭐지?🏷️자바스크립트를 포함하는 상위 확장자(superset)이라고 할 수 있으며, 기존의 동적 타이핑 언어이던 자바스크립트에 타입을 부여하여 정적 타이핑 언어로 변환한 언어를 지칭🔖자바스크립트를 기반으로 동작하기 때문에, 사용되려면 자바스크립트로 변환되는 "컴파일" 과정을 거쳐야 한다.타입스크립트를 사용하는 이유는?🏷️타입을 정의하여 사전에 버그를 예방 가능하다.타입스크립트는 컴파일 과정에서 타입을 결정컴파일 과정에서 타입을 정의하기 때문에 컴파일 시 에러 예방🏷️높은 생산성을 제공한다.기존 자바스크립트와 다르게 변수의 이름 뿐 아니라 데이터의 자료형까지 전부 파악 가능🏷️강력한 호환성을 가진다.기존 자바스크립트의 상위 확장자이므로, 자바스크립트 코드를 가지고 확장하는 형식으로 .. 2024. 5. 24. CH_24. 클로저 더보기클로저(closure)의 개념“클로저는 ‘함수’와 그 함수가 ‘선언됐을 때의 렉시컬 환경’의 조합이다”더보기☝ 잠깐(wait)!! 렉시컬 환경이란?→ 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 가리키는 자료구조함수를 일급 객체로 취급하는 함수형 프로그래밍에서 없어서는 안될 중요한 특성 function outerFunc() { const x = 10; const innerFunc = function () { console.log(x); }; innerFunc();}outerFunc(); // 10실행 컨텍스트 관점호출 시 각각의 스코프 체인을 순차적으로 검색하여 상위 스코프에 접근하여 함수를 실행innerFunc 함수 내부에서 변수 x 검색 → 검색 실패!outerFunc 내부에.. 2024. 5. 19. 타입스크립트 기본 문법 정리 기본형🏷️종류와 타입종류 타입 문자열 string 숫자형 number 불린형 boolean undefined undefined null null 배열과 튜플🏷️배열은 타입을 적은 후 [] 붙이기, 튜플은 개수와 순서가 정해져 있으므로 [] 안에 순서대로 타입을 구분// 배열const cart: string[] = [];cart.push("c001");cart.push("c002");// 배열의 배열const carts: string[][] = [["c001", "c002"], ["c003"]];// 튜플let mySize: [number, number, string] = [175, 30, "L"];객체 타입🏷️{} 내부에 프로퍼티 네임 작성 후 콜론, 타입 작성🏷️각 프로퍼티는 세미콜론으로 구분?.. 2024. 5. 18. 기초 프로젝트를 마치며 비교적 짧은 기간 동안 진행된 코드잇 기초 프로젝트를 마쳤다👍이번 프로젝트는 프로젝트 주제도 정해져있는 것들 중에 선택하는 것이었고, 또 기본적으로 API들도 모두 제공되어 정말 지금까지 공부한 기초적인 내용을 써먹어보는 구성으로 진행했다.물론 간단한 프로젝트였고, 앞으로 해나갈 공부나 프로젝트들에 비하면 작은 걸음이지만 나름 느낀걸 작성해보고자 한다😁어떤 프로젝트?1. 프로젝트의 목적이번에 우리팀이 진행한 프로젝트는 온라인 롤링페이퍼 서비스를 구현하는 것을 목표로 진행했다.주제는 한정적이었고, 함께 진행하는 팀은 많았기 때문에 여러 팀과 주제가 겹치지도 했고 이미 선정한 주제를 가지고 진행하는 것이라 한계가 정해져있는 프로젝트라고 볼 수 있었지만, 주어진 시간과 한정된 자원을 이용해서 기본적인 요구.. 2024. 5. 17. 이전 1 ··· 3 4 5 6 7 8 9 ··· 17 다음
