전체 글
(React Router) 3. global layout을 추가해보자
이전글: https://moneytech.kr/70 (React Router) 2. 기본 CSS, JS, JSX 세팅과 Root Route 설정 1. 기본 CSS, JS 파일 세팅 이 튜토리얼은 데이터 만들기(create), 읽기(reading), 검색하기(searching), 수정(update), 삭제(deleting)하기를 다룹니다. 전형적인 웹 앱의 경우 웹 서버의 API와 소통하겠지만, 이 moneytech.kr 1. Root Route 구현하기 src 폴더 내에 routes라는 폴더를 구현하고 그 안에 root.jsx 파일을 생성합니다. mkdir src/routes touch src/routes/root.jsx 꼭 커맨드를 사용할 필요 없습니다. 에디터에서 클릭으로 만들어도 됩니다. src/r..
(React Router) 2. 기본 CSS, JS, JSX 세팅과 Root Route 설정
이전 글: https://moneytech.kr/69 (React Router) 1. 리액트 라우터 튜토리얼 진행 - Vite를 통한 프로젝트 생성 1. 개요 리액트로 개발을 진행하면서 다른 컴포넌트로의 이동, 주소를 입력했을 때 다른 컴포넌트를 호출 등 라우트(Route) 기능을 구현할 일이 생겼다. 라우트는 프론트엔드 개발의 기본 중에 기 moneytech.kr 1. 기본 CSS, JS 파일 세팅 이 튜토리얼은 데이터 만들기(create), 읽기(reading), 검색하기(searching), 수정(update), 삭제(deleting)하기를 다룹니다. 전형적인 웹 앱의 경우 웹 서버의 API와 소통하겠지만, 이 튜토리얼의 경우 브라우저 저장소(Browser Storage)와 가짜 네트워크 지연(Ne..
(React Router) 1. 리액트 라우터 튜토리얼 진행 - Vite를 통한 프로젝트 생성
1. 개요 리액트로 개발을 진행하면서 다른 컴포넌트로의 이동, 주소를 입력했을 때 다른 컴포넌트를 호출 등 라우트(Route) 기능을 구현할 일이 생겼다. 라우트는 프론트엔드 개발의 기본 중에 기본이지만, 오랜만에 코드를 손에 잡는 나로서는 아예 기억이 안 난다. 그래서 이번 글은 React Router에 있는 튜토리얼을 직접 진행해보면서 react-router-dom 모듈을 익혀보려고 한다. 이 프로젝트를 클론했습니다: https://reactrouter.com/en/main/start/tutorial Tutorial v6.6.1 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you k..
3. 기본 변수들 타입스크립트로 타입 지정하기
1. 타입 지정하기 변수에 타입을 지정하기 위해서는 해당 변수에 어떤 타입이 담길지를 알아야 한다. 기존 코드에서 변수에 값을 가져오는 메서드에 마우스를 갖다대보자. 가령 document.getElementById()를 보면 해당 아이디가 존재할 경우에는 HTMLElement를 가져올 것이고 그렇지 않으면 null값이 담길 것이다. (너무 당연한 것인데요?) 그래서 container 변수의 타입은 HTMLElement 혹은 null값을 담을 "유니온 타입"으로 지정해준다. 이런 식으로 하단의 변수를 모두 바꿔주면 다음과 같이 바꿀 수 있다. 2. 바꾼 코드 app.ts type Store = { currentPage: number; feeds: NewsFeed[]; // NewsFeed라는 형태가 배열에..
2. Parcel.js로 타입스크립트 컴파일
1. Node 프로젝트 세팅 및 Parcel.js 세팅 npm 세팅을 위해 프로젝트 세팅을 해준다. 해당 프로젝트에서 터미널 호출 후 타이핑 npm init 프로젝트명, 버전, 라이센스 등을 정의하고 시작하자. 이제 parcel을 설치해줄 차례다. 터미널에서 아래 명령어 타이핑 npm i parcel-bundler 혹시 parcel.js index.html이 안된다면, npx로 실행하자. npx는 모듈을 임시로 설치하고 실행만 하는 것이기 때문에 해당 모듈이 설치되어 있지 않아도 실행된다. npx parcel index.html 그러면 번들링이 성공적으로 되고,, dist에 완성본 파일이 담긴다. dist 폴더에 있는 .js.map은 tsconfig.json에 있는 "sourceMap": true 에서 ..
1. 타입스크립트(Typescript) 세팅하기 - tsconfig.json
1. tsconfig.json에 대하여 타입스크립트를 자바스크립트로 변환(컴파일-프로그래밍 언어를 다른 언어로 변경함)할 때 여러 가지 옵션을 줘서 다양한 방식으로 변경할 수가 있다. 자바스크립트를 공부한 사람이라면 알고 있듯이, 자바스크립트는 표준 자체만으로도 버전이 엄청나게 많다. 그래서 타입스크립트 변환 옵션 중에 대표적인 것이 어떤 버전의 자바스크립트로 타깃 하느냐도 있다. 이 옵션은 대부분의 node 프로젝트와 같이 json파일 규격으로 지정해두는데, 타입스크립트를 위한 옵션 파일은 파일명을 "tsconfig.json"으로 지정해야한다. 먼저 tsconfig.json을 생성해보자. tsconfig.json { "compilerOptions": { "strict": true, "target": "..
0. Hackers News 자바스크립트 코드 타입스크립트로 마이그레이션 시작
1. 타입스크립트란? 타입스크립트(Typescript)는 타입이 유연한 자바스크립트에 좀 더 엄격하게 타입을 줄 수 있는 언어이다. 타입을 명시할 수 있는 버전의 자바스크립트라고 생각하면 되고, 여러 실수를 잡기 위해서 타입스크립트로 코딩한 다음에 자바스크립트로 변환해서 사용한다. 2. 변환할 코드 타입스크립트 공부를 위해서 Hackers News API를 통해 간단하게 구현한 예제를 사용할 것이다. 아래 예제를 타입스크립트로 부분적으로 바꿔볼 것이고, 바꾸면서 장점에 대해서도 함께 기술할 예정이다. 본 수업은 패스트캠퍼스의 "김민태의 프론트엔드 아카데미 : 제 1강 JS & TS Essential"의 내용을 따왔다. 예제 코드: index.html app.js const container = docum..
(React 만들기) 09. 리액트 Hook 원리와 제약사항들
이전글: https://moneytech.kr/63 (React 만들기) 08. virtual DOM (가상 DOM - 문서 객체 모델) 1. 가상 돔 개발자들이 DOM을 직접 건드리지 않고 훨씬 더 쉬운 구조물로 UI를 개발할 수 있도록 중간에 DOM처리는 리액트에게 맡기고 개발자는 JSX만 개발하면 될 수 있도록 하는 것. 리액트는 실제 moneytech.kr 1. Hook Hook의 규칙: https://reactjs.org/docs/hooks-rules.html#gatsby-focus-wrapper Rules of Hooks – React A JavaScript library for building user interfaces reactjs.org 리액트 훅은 class를 사용하지 않아도 stat..