Age of Discovery

https://jurgen-94.tistory.com/123 [TypeScript] - 타입 추론 as keyof typeof 디벨킷 프로젝트를 타입스크립트로 마이그레이션하는 작업 중에 타입 추론에 대해 더 찾아볼만한 기회가 생겼다. const contents = { first: , second: , third: , fourth: , }; {isOpen && ( { contents[key] } )} FAQ를 보 jurgen-94.tistory.com 며칠전에 올렸던 keyof typeof 글에 이어서 좀 더 자세히 알아봐야겠다는 생각에 타 블로그 글이랑 강의를 참고하여 연습했는데 그 과정을 공유하고자 한다. enum이란? enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능이라고 한다. const..

디벨킷 프로젝트를 타입스크립트로 열심히 마이그레이션하는 중에 react-full-page라는 라이브러리가 타입스크립트를 지원하지 않아서 생기는 오류에 대해서 정리해보려고한다. 자동으로 타입스크립트까지 지원해주는 라이브러리가 있는가 하면 스타일드 컴포넌트처럼 @types/styled-components 이런식으로 타입스크립트 패키지까지 추가설치해줘야하는 라이브러리도 있다. 하지만 저 오류메시지가 알려주는 것처럼 npm install --save-dev @types/react-full-page 명령어를 실행해 타입 패키지까지 추가설치해봐도 install자체가 안되고 온통 빨간 오류만 뜰 뿐이다. 바로 구글링에 들어갔다. https://github.com/zwug/react-full-page/issues/48..

디벨킷 프로젝트를 타입스크립트로 마이그레이션하는 작업 중에 타입 추론에 대해 더 찾아볼만한 기회가 생겼다. const contents = { first: , second: , third: , fourth: , }; {isOpen && ( { contents[key] } )} FAQ를 보여주는 코드이며 Wrapper로 contents[key]를 감싸 contents의 key와 props로 받은 key가 일치할경우 해당 컴포넌트를 렌더링한다. 해당 파일을 tsx로 변환했을 때 아래의 오류가 나오는데 Contents 객체에 있는 key 값이 Contents객체의 key 중 하나가 아닌 다른 문자열인 경우 오류를 발생시키는 것을 의미한다. typescript는 객체의 key와 value의 타입을 명확하게 추론하..

타입스크립트는 설치나 컴파일 등의 부분에서 까다로운 녀석이다. (eslint, prettier할 때도 마찬가지..) 그럼에도 사용하는 이유는 동적인 언어를 정적으로 바꿔주어 프로젝트 규모가커질수록 안정적인 유지보수가 가능하게 한다. 디버깅 또한 쉬워진다. (추상적인 오류메시지 해결) 그리고 타입을 미리 지정함으로서 누리는 혜택인 자동완성 기능은 타의 추종을 불허한다. 처음 세팅만 잘한다음 타입스크립트를 어느정도 공부해놓으면 안정적으로 개발할 수 있다. CRA로 세팅된 초기프로젝트를 만질일이 있었는데 clone후 typescript를 설치한다음 react에서 사용하는 router-dom이나 styled-components 등을 설치하려고 할 때 이런 오류가 났다. npm패키지로 리액트프로젝트를 하다보면 누..

서버를 따로 구현하지 않고 S3 스토리지로 배포되어있는 데이터를 그대로 받아와야했다. 웹팩에서 환경변수를 주입해 axios get요청으로 데이터를 받아와보자! npm install dotenv npm install webpack-env 우선 dotenv와 webpack-env 패키지를 설치한다. 그리고 .env 파일을 생성 후 gitignore에 넣어주자 (깃헙에 올리지 않기 위함) env파일엔 외부에 알려지지 않아야하는 클라이언트 아이디 or 시크릿키 or api주소 등이 있다. API_ENDPOINT=http://localhost:3000/ 위와 같은 형식으로 좌항은 대문자로 입력해야한다. 또한 문자열이라고 따옴표를 넣어주면 안된다. 웹팩으로 파일이 프로젝트가 세팅되어있으면 webpack.common..

서버를 따로 구축하지 않고 nextJS만으로 풀스택 투두리스트를 구현해보자..! prisma를 사용해 postgreSQL 데이터베이스를 NextJS의 API router와 연동하는 작업이 필요하다. 가장 먼저 postgreSQL이 설치 된 후 실행되어있어야 한다. 맥OS 기준으로 https://semtax.tistory.com/12 맥 OS 에서 PostgreSQL 설치하기 1. Postgres SQL 설치 아래 명령어를 이용해서 PostgreSQL을 설치한다. brew install postgresql 설치가 완료 되었으면 아래 명령어를 이용해 postgresql 서비스를 시작한다. pg_ctl -D /usr/local/var/postgres start && brew se semtax.tistory.c..

리액트의 프레임워크인 nextJS를 사용해 투두리스트를 만들어보자! nextJS를 이용하면 기존 CSR방식의 문제점들을 보완할 수 있다. ( 애플리케이션의 규모가 커질수록 초기로딩속도가 느리거나 혹은 SEO최적화가 힘든 점 등의 문제들 ) 또한 API router를 통해 서버를 구축하지 않고도 풀스택으로 개발할 수 있다는 점이 매혹적이었다. 이번 기회를 통해 백엔드를 간접적으로 경험해 볼 수 있다고 느꼈고 배우지 않을 이유가 전혀 없었다. 내가 처음 자바스크립트와 리액트를 공부할 때도 투두리스트를 만들었는데 nextJS로도 투두리스트를 만들며 익숙해진 후에 개인프로젝트로 생각하고 있는 개인 블로그를 만들어볼까 한다. nextJS typescript tailwind CSS prisma postgreSQL ..

단기간에 결과물을 만들어내야 하는 프로젝트 특성상 타입스크립트를 선뜻 시도하지는 못했다. 타입스크립트 강의들으면서 공부하다 보니 어느 정도는 알게 됐지만 실제로 프로젝트에 적용하는 게 더 빨리 배우는 지름길이라 믿고 기존 cra로 구성한 프로젝트를 타입스크립트로 마이그레이션 해보기로 마음먹었다. 웹팩과 cra는 타입스크립트 입히는 데에 있어서 차이가 있다. 그 과정을 알아보자 1. TypeScript 추가 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 혹은 yarn add typescript @types/node @types/react @types/react-dom @types/jest 위의 명령어로 ..

프론트엔드 개발자를 목표로 한다면 자바스크립트(이하 JS)를 갈고 닦고 다듬어야한다. JS의 고유한 특성과 다른 언어들이랑은 다른 동작원리까지 현재 [자바스크립트란?]의 카테고리에 시리즈로 정리해보려고 한다. JS는 자바, C언어와는 다르게 '융통성'을 가지고 있다. 개발자들이 좀 더 편하게 사용할 수 있고 타자를 한 글자라도 덜 칠 수 있도록 해주는 언어이다. 변수선언을 예로 들어보자 아래의 코드는 JAVA의 변수선언이다. i라는 변수에 100을 할당해준다. int i=100; let, var, const를 무시하고 극단적으로 비교해보자면 JS는 아래와 같이 i = 100 간단명료하게 사용할 수 있다. (물론 이렇게 사용하는 개발자는 없다.) 또한 자료형을 비교할 때에 특히 고유의 특성이 드러난다. 1..