이 프로젝트는 앱을 공부하려고 시작한거였고, 간단히 만들 계획이었다. 당연히 따로 스펙을 정하지도 않았었다. 하지만 스펙을 정하지 않고 개발을 하니, 중간 중간 추가하고 수정할 것들이 계속 생기고, 구조도 이리저리 바뀌었다. 그러니 두달 정도 소홀히 할 정도로 늘어졌었다. 하지 않을 것을 정하는게 얼마나 중요한 지를 체감하며, 지금이라도 구체적인 스펙을 정해보려 한다. 우선 앱을 처음 들어가면 런치 스크린이 나온다. 런치 스크린에는 간단한 애니메이션이랑 로고나 문구를 넣을 것이고, 로컬 저장소에서 데이터를 가져온다. 헬스 일지 데이터는 이런 식으로 구성한다. interface SetState { weight: number; num: number; } interface HealthState { name: ..

본격적으로 앱에 기능들을 추가하기에 앞서서 지금까지 만든 앱 상황을 정리해봐야겠다. 블로그의 쓴 내용말고도 짬짬이 몇가지를 추가했다. 우선 홈 스크린이다. 운동한 날짜를 보여주는 달력과 오늘 운동을 기록하는 버튼이 있다. 달력과 운동하기 버튼 사이에 며칠 연속으로 운동하고 있는지 보여주는 칸도 추가할 예정이다. 달력에 날짜를 클릭했을 때 보여지는 다이어리 화면이다. 날짜는 탑바로 뺄 예정이고 그날 한 운동들을 보여줄 거다. 운동 기록하기 버튼은 깜빡하고 기록을 하지 않았을 때를 위한 버튼이다. 만약에 이미 기록이 있다면 '기록 수정하기'라고 텍스트를 바꿔서 보여줄 것이다. 다이어리 화면에서 '운동 기록하기' 버튼을 클릭하거나 홈 화면에서 '운동하기' 버튼을 클릭했을 때 들어가지는 기록 추가 화면이다. 탑..

드디어 실전 리액트 프로그래밍을 완독했다. 5월 5일에 막 공부를 시작할 때 세웠던 5월 안에 끝내겠다는 목표보다는 좀 늦은 감이 없지 않지만, 어찌어찌 개강 전까지 끝낸거에 만족스럽다. 여태껏 웹개발 공부는 프로젝트를 진행하면서 필요할 때 필요한 것만 해왔지, 이렇게 각잡고 공부한 것은 처음이다. 두 공부법 모두 각자의 장단점이 있어서 상황마다 목적에 맞는 공부법을 선택하면 좋을 것 같다. 이번에 실전 리액트 프로그래밍을 통해 공부한 것은 만족스러웠다. 웹개발하면서 쌓여있던 많은 궁금증이 풀렸고, 개발하면서 갖고 있던 부채감, 막막함이 많이 해소되었다. 앞으로 목표도 뚜렷해졌다. 이제 열심히 할 일만 남았다!

동적 타입 언어 정적 타입 언어 변수에는 여러가지 타입이 있다. 언어마다 조금씩 상이하긴 하지만 숫자, 문자열, 배열 등이 있다. 이 변수의 타입이 런타임에 결정되는 언어가 있고, 컴파일 타임에 결정되는 언어가 있다. 전자를 동적 타입 언어라 하고 후자를 정적 타입 언어라 한다. 자바스크립트는 동적 타입 언어다. 동적 타입 언어이기 때문에 숫자로 초기화한 변수에 문자열을 할당해도 문제가 없다. 동적 타입 언어는 코드의 양이 적을 때는 생산성이 높지만, 코드가 복잡해지면 런타임 시 예상치 못한 오류가 발생할 가능성이 높아지고 그 에러를 찾기도 힘들어진다. 그래서 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 타입스크립크(TypeScript)가 등장했다. 타입스크립트의 여러 타입들 타입스크립트에..

8장은 리액트 기반 프레임워크 Next.js를 다룬다. next의 가장 큰 특징은 서버사이드 렌더링(SSR)을 지원하는 것이다. 서버사이드 렌더링(SSR)이나 클라이언트사이드 렌더링(CSR)을 모른다면 아래의 유튜브를 추천한다. 드림코딩 - SSR Next.js next.js를 시작해보자. 우선 next와 react를 설치한다. $ npm init -y $ npm install next react react-dom next.js는 프레임워크이고, 프레임워크는 저마다의 규칙이 있다. next.js에서는 모든 페이지 컴포넌트가 pages 폴더 밑에 있어야 한다. pages 폴더를 만들고, page1.js 파일을 만든다. // ./pages/page1.js export default function Page1..

웹팩(Webpack) 웹팩은 모듈 번들러다. 모듈은 자바스크립트 파일 같은 리소스 파일이고, 번들은 여러 모듈로 만들어진 결과 파일이다. 2000년대 초반의 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 이 때는 페이지당 필요한 리소스 파일이 많지 않아서 웹팩과 같은 번들러가 필요하지 않았다. 하지만 single page application이 등장하면서 하나의 HTML 파일이 많은 자바스크립트 파일을 포함했고, 더이상 script 태그로 불러오기에는 무리가 있었다. 파일이 실행되는 순서도 신경써야 하고, 변수를 덮어쓰는 위험도 생겼기 때문이다. 그래서 이런 문제점을 해결해주는 웹팩이 등장했다. webpack-cli webpack-cli는 webpack을 cli에..

바벨과 웹팩은 웹 어플리케이션을 제작할 때 필수적인 기술이다. create-react-app, next.js 등 프로젝트를 구축해주는 라이브러리, 프레임워크는 바벨과 웹팩을 기본적으로 포함한다. 바벨과 웹팩을 자세히 모르더라도 내장된 기본 설정으로 간단한 프로젝트를 제작할 수는 있지만, 프로젝트의 규모가 점점 커지면 바벨과 웹팩을 알아야 할 순간이 찾아온다. 바벨(Babel) 바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다. 하이 레벨의 언어를 로우 레벨 언어로 변환하는 보통의 컴파일러와는 비교된다. 바벨은 JSX, ES6 등 최신 문법을 브라우저에서 이해할 수 있는 코드로 변환시켜준다. 바벨을 이용하면 오래된 브라우저도 최신 자바스크립트 코드를 이해할 수 있게 된다. 먼저 바벨을 실행할 프로젝..

4장은 리액트 활용법을 다루는데, 블로그에 포스팅하기 애매해서 따로 공부했다. 5장은 클래스형 컴포넌트를 다룬다. 클래스형 컴포넌트 자체가 레거시여서 기존 코드를 작업하지 않는 이상 클래스형 컴포넌트를 접할일이 잘 없다. 그래서 나중에 사용할 일이 생기면 그 때 공부하기로 하고 패스했다. 이제 6장. 6장은 리덕스를 다룬다. 리덕스는 리액트를 사용하면서 생기는 많은 불편한 점들을 개선해주는 훌륭한 프레임워크다. 리덕스(Redux) 리덕스는 자바스크립트를 위한 상태 관리 프레임워크다. 리덕스를 사용하는 이유는 다음과 같다. - 컴포넌트 코드와 상태 관리 코드를 분리할 수 있다. - 서버 렌더링 시 데이터 전달이 간편하다. - 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋다. - 깊은 곳에 있는 자식 ..

이번엔 useState, useEffect 외의 다양한 훅을 알아보자. useContext useContext 훅은 Consumer 컴포넌트를 사용하지 않고도 Provider 컴포넌트의 context 데이터를 사용할 수 있게 해준다. 사용한 것과 사용하지 않은 것을 비교해보자. // Provider 컴포넌트 import React, { createContext, useContext } from "react"; const UserContext = createContext(); export default function NoUseContext() { const user = { name: "Jane", age: "25" }; return ( ); } // Consumer 사용 function CunsumerC..

ref 리액트로 개발하다 보면 돔 요소에 직접 접근해야 할 떄가 있다. 이때 ref 속성을 사용하면 자식 요소(컴프넌트, 돔 요소)에 직집 접근 할 수 있다. import React, { useEffect, useRef } from "react"; export default function TestUseRef() { const inputRef = useRef(); useEffect(() => { console.log(inputRef); inputRef.current.focus(); }, []); return ( save ); } useRef 훅이 반환하는 ref 객체를 이용하면 자식 요소에 접근할 수 있다. 접근하고자 하는 요소의 ref 속성에 ref 객체를 넣으면 된다. props로 ref 전달하기 리..