본문 바로가기

전체 글

 (1092)
NextJS(2) - Pages, Static Pre Rendering 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Pages NextJS에서 Pages 아래의 파일들을 라우팅 처리 해줌 단, 해당 컴포넌트들은 export default 해야 함 index.(js|ts)는 앱의 홈(/)으로 연결 됨 JSX 사용하여도 React를 import 하거나 확장자를 바꿀 필요 없음 useState, useEffect와 같은 hook은 import 해야 함 2. Static Pre Rendering NextJS는 앱에 있는 페이지들을 미리 렌더링 정적으로 생성 됨 React.js vs Next.js CSR : Client Side Rendering 브라우저가 유저가 보는 모든 UI를 만드는 일을 함 React는 기본적으로 CSR id가..
NextJS(1) - Initialize, Framework Vs. Library 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Initialize npx create-next-app 2. Framework Vs. Library 라이브러리 사용하는 것 원하는 대로 코드를 작성 프레임워크 추상화된 코드를 불러오는 것 정해진 방식대로 구현 자유도의 차이 라이브러리 > 프레임워크 대표적으로 NextJS의 경우 pages 디렉토리 안에서 파일을 기준으로 라우팅을 할 수 있음 NextJS가 파일명에 맞추어 라우팅을 해줌 Inversion of Control(통제의 역전) 개발자는 라이브러리를 사용 개발자는 프레임워크의 규칙을 지킴 Reference Nomad Coders - NextJS 시작하기
TypeScript(8) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. tsconfig.json TypeScript 설정 파일 IDE가 이를 감지하여 프로젝트에서 TypeScript로 작업하는 것을 알게 됨 자동완성기능 제공 예시 { // where, 어디에 타입스크립트 파일이 있는 지 // TypeScript -> JavaScript로 컴파일하고 싶은 모든 디렉터리 넣기 "include": ["src"], // 컴파일 옵션 "compilerOptions": { // JavaScript 파일이 생성될 디렉터리 지정 "outDir": "build", // 어떤 버전의 JavaScript로 컴파일 할 지 "target": "ES6", // TypeScript가 어떤 런..
TypeScript(7) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 다형성을 활용한 클래스 정의 예시 다형성이란, 다양한 형태를 가질 수 있도록 하는 것 제네릭을 활용 // 제네릭이 지정되어 있어 해당 인터페이스가 적용된 객체는 value가 제네릭으로 넘겨받은 T로 적용되어야 함 interface CustomStorage { [key: string]: T } ​ // 클래스 정의 // 제네릭을 지정함으로써 new 키워드를 사용할 때, 특정 타입을 넘겨 받음 class LocalStorage { // 넘겨받은 제네릭은 storage 프로퍼티에 지정된 인터페이스 CustomStorage에 전달 됨 private storage: CustomStorage = {} set(k..
Recoil & Custom Hook & styled-components를 활용한 전역 모달 구현 1. 서론 Modal이란, 주 창에 종속된 그래픽 인터페이스이다. 보통 사용자의 입력에 따른 피드백, 오류, 안내 등을 나타내기 위한 목적으로 사용한다. 이번에 진행하는 프로젝트에서도 이런 목적의 모달들이 기획이 되었다. 설계 단계부터 내가 맡아서 만들게 되었으므로 구조부터 잡아가야했다. 어떻게 구현할지? 구현할 서비스에서 모달은 사용자의 입력에 따른 피드백, 오류, 안내 등을 나타내기 위한 목적으로 사용될 것 이외에도 사용자의 입력을 받는 모달도 구현되어야 함 구현할 모달을 카테고리화 Alert Modal: 사용자에게 오류/안내를 나타내는 모달, Template화 필요 Custom Modal: 특정 페이지에서만 독립적으로 사용될 모달, Template화 필요 없음 why? Alert Modal은 페이지..
TypeScript(6) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. readonly property에 읽기 전용 속성 부여 public property이어도 내용을 수정할 수 없음 TypeScript keyword 2. static JavaScript keyword 인스턴스 메서드가 아닌, 클래스 생성자 자체에 정의된 메서드 클래스를 생성하지 않아도 사용할 수 있음 3. interface typer과의 차이 object의 형태만을 정의 type은 다양한 목적으로 사용 가능 상속(extends)의 대상이 될 수 있음 type의 경우에는 &(and)으로 표현 객체지향 프로그래밍과 유사한 문법 클래스의 모양도 정의 가능 같은 interface를 여러번 선언하면, 합쳐..
TypeScript(5) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. Classes TypeScript에서는 객체 지향 프로그래밍 키워드를 사용할 수 있음 JavaScript로 컴파일되며 해당 키워드들은 사라짐 해당 키워드들은 TypeScript에서만 사용딤 ex) private, protected TypeScript에서는 클래스를 Type으로 사용할 수 있음 접근 제어자 정리 구분선언한 클래스 내상속받은 클래스 내인스턴스 private 접근 가능 접근 불가 접근 불가 protected 접근 가능 접근 가능 접근 불가 public 접근 가능 접근 가능 접근 가능 추상 클래스 다른 클래스가 상속 받을 수 있는 클래스 추상 클래스는 인스턴스를 만들 수 없음 추상 메소..
[프로그래머스] 땅따먹기 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(land) { return Math.max(...land.reduce((acc, row) => { return [ row[0] + Math.max(acc[1], acc[2], acc[3]), row[1] + Math.max(acc[0], acc[2], acc[3]), row[2] + Math.max(acc[0], acc[1], acc[3]), row[3] + Math.max(acc[0], acc[1], acc[2]) ] }, [0, 0, 0, 0])); } Reference 프로그래머스

티스토리툴바