Age of Discovery

그동안 정신이 없어서 꽤 오랜만에 글을 남겨본다...ㅎㅎ 링크게더 사이드프로젝트를 진행하면서 단순히 굴러가게 만드는 게 아니라 코드 컨벤션과 개발 문화를 정립하며 어떻게하면 반복을 줄이고 재사용할 수 있을 지를 많이 생각할 수 있게 됐다. emotionJS로 styled component를 생성하여 재사용하고 props에 따라 조건적으로 다른 스타일을 보여주는 방법을 공유하고자 한다. 사실 styled component랑 크게 다를건 없지만 https://next--emotion.netlify.app/docs/typescript Emotion - TypeScript Emotion includes TypeScript definitions for @emotion/react and @emotion/style..

제주에서 돌아오자마자 리액트 네이티브를 세팅해봐야겠다는 생각에 바로 돌입했다. 예상보다 알아야 할 것도 많았고 설치해야 할 것도 많았다. 진짜 쉽지 않았다...ㅋㅋ 아직 에뮬레이터(시뮬레이터)만 켜보는 수준이었고 디바이스를 연결하거나 배포를 하지는 않았지만 우선적으로 설치하는 과정에서 배워야 할 게 많았기 때문에 각 프로그램 혹은 라이브러리들이 어떻게 이 시뮬레이터를 동작시키는지 먼저 공부해야할 것 같다. 지금은 단순히 블로그 글 들을 보고 따라하는 수준이었지만 세팅을 커스텀하고 또 다른 오류들을 해결하기 위해서는 동작원리들을 정확히 이해해야하기 때문에 공부하면서 중요한 부분은 블로그에 하나씩 업로드 할 예정이다. welcome to RN !!

서버를 따로 구현하지 않고 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..

사용자가 쉽게 커스텀하고 이용이 가능한 input 라이브러리를 만들어보려고 한다. input하나만드는데 보일러 플레이트가 많은 CRA는 설치하기 싫었고 CRA없이 초기세팅을 웹팩으로 빌드했다. css는 emotionJS를 사용하기로 결정했다 css in js를 구현할 때 jsx문법 내에서 style={{}}로 하는것 보단 css={{}}로 작성하는게 더 익숙했기 때문이다. (현재 진행중인 링크게더 프로젝트에서 쓰고 있다.) 딱히 성능상의 유의미한 차이는 없다ㅋㅋ... 웹팩세팅 관련 글은 다음에 다뤄보도록 하겠다. (길어질거 같음..) npm i -D @emotion/react @emotion/styled emotion 패키지를 설치해주고 typescript를 사용하는 경우 tsconfig.json의 컴파..

최근 프로젝트에서 lint와 prettier 설정할 일이 꽤 있었는데 하나로 통일시키면 좋겠다고 생각해서 기록으로 남기려한다. npm install -D --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-simple-import-sort .eslintrc.js module.exports = { root: true, env: { browser: true, amd: true, node: ..

모든 준비는 끝났다! 투두리스트 지금 바로 시작~~~합니다. pages폴더 안에 있는 index.tsx파일에 h1, input, textarea, button 태그들을 이용해 위 모양처럼 만들어주자. ( html과 css는 자유롭게 ^^ ) import { GetServerSideProps } from 'next'; import { ChangeEvent, useEffect, useState } from 'react'; import { prisma } from '../lib/prisma'; import axios from 'axios'; import { useRouter } from 'next/router'; export default function Home() { return ( To-Do-List {..

서버를 따로 구축하지 않고 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 ..

리액트의 고차함수에 대해서 알게 된 내용을 정리하고자 한다. HOC(Higher-Order-Components)는 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. 다른 분들이 써놓으신 블로그랑 공식문서를 찾아보면서 재밌어 보였고 고오급 기술이라는게 눈에 띄어서 공부해봤다. HOC를 쉽게 정의하면 상태관리 로직을 재사용하는 컴포넌트고 생각하면 된다. 여기서 사용하는 로직은 데이터를 받아와서 뿌려주는 정도로 아주 간단하게 작성했다. 바로 코드부터 살펴보자 import React, { ComponentType } from 'react'; import axios from 'axios'; import { useEffect, useState } from 'r..

가끔 구글검색창에 손이 가는 대로 검색하는 경우가 있다. 어떤 단어든 말이다. 우연찮게 손이 가는대로 오늘 프로젝트이름인 디벨킷을 검색해 봤는데 오잉? 익숙한 문구와 도메인이 가장 상단에 떠서 들어가 보니 우리가 만들었던 프로젝트의 웹페이지가 나왔다. 원래는 검색이 안 됐던 걸로 기억하는데 뭐지? 클라이언트 사이드 렌더링 방식으로 동작하는 SPA(이하 싱글페이지 애플리케이션) 프로젝트의 가장 큰 단점 중 하나가 검색 엔진 최적화가 안 되는 것인데 어떻게 우리 프로젝트가 검색엔진에 등록되는 것일까? 최근 SSR(이하 서버사이드 렌더링), CSR(이하 클라이언트 사이드 렌더링에 호기심이 생겨서 이것저것 공부해 보다가 이번 기회로 CSR은 어떻게 구글검색이 되는지 찾아보게 됐다. 처음엔 웹 호스팅과 서버 호스..

사이드 프로젝트를 진행하는 동안 인증기반을 JWT로 하기로 했고 refresh-token을 순환시키는 방법에 대해 알게 됐다. 그게 바로 refresh token rotation인데 무엇 때문에 생긴 기법이냐?를 알기 전에 refresh token에 대해서 알아보자 JWT를 사용하면 로그인 후 서버에서 access-token을 내려주고 클라이언트는 이 access-token을 웹 스토리지에 저장한 후 API요청할 때마다 http헤더에 같이 담아서 보내준다. 이 access-token의 만료기간을 길게 잡게 되면 해커의 공격으로 탈취될 경우 해커가 이 토큰으로 api요청을 보낼 수 있다. 그렇다고 만료기간을 짧게 잡으면 사용자가 그 만료기간이 지날 때마다 로그인을 자주 해줘야 하는 불편한 경험을 초래하게 ..

최근 취업준비한다는 핑계로 집에 붙어있었고 원격으로만 의사소통을 하다보니 답답함을 느꼈다. 시야를 넓히기 위해 그리고 타인을 통해 자극받고 집중하기 위해 지인이 소개해준 모임의 모각코를 다녀왔다. 나 포함 4명이 모였는데 다들 재직중이셨고 (나빼고..) 연차가 꽤 있으신분도 계셨다. 처음 모여서 간략하게 통성명하고 각자 코딩에 집중했다. 중간중간 재밌는 회사썰을 풀어주셨는데 취준생입장에선 그렇게 꿀잼일 수가 없었다 ㅋㅋ 각자 회사를 다니면서 현재 어떤 생각을 하고 사는지 요즘 걱정거리는 무엇인지 등의 얘기를 듣는데 나 또한 생각이 많아졌고 취업 후에도 어떻게 살아야할지에 대한 갈피를 잡는데 도움이 됐다. 연차가 많이 쌓이신 분들도 주말에 모여 코딩에 몰입하시는 것을 보니 역시 개발자는 평생 공부해야하는 ..

https://jurgen-94.tistory.com/96 Cookie / Session 프로그래밍을 시작하면서 지금까지 쿠키, 세션, 캐시, 토큰에 대한 개념이 정확히 안잡혀있어서 '언젠간 정확히 공부해봐야지' 라고 생각만했고 그 때 그 때 필요한 정보들만 받아들였다는 생각 jurgen-94.tistory.com 지난 글에 이어 토큰과 캐시까지 자세히 알아보자! 토큰 (Token) 토큰이란 인증을 위해 사용되는 암호화된 문자열이다. 사용자가 인증에 성공하면 서버는 토큰을 생성해서 클라이언트로 보낸다. 토큰도 세션과 마찬가지로 사용자가 보내는 요청에 포함된다. 세션 인증에 비해 서버 운영의 효율이 더 좋다. 세션과는 또 다른 로그인 유지 방식이다. 서버는 요청마다 함께 오는 세션 아이디를 바로바로 확인할..

단기간에 결과물을 만들어내야 하는 프로젝트 특성상 타입스크립트를 선뜻 시도하지는 못했다. 타입스크립트 강의들으면서 공부하다 보니 어느 정도는 알게 됐지만 실제로 프로젝트에 적용하는 게 더 빨리 배우는 지름길이라 믿고 기존 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 위의 명령어로 ..

이미 push한 커밋명을 변경하는 법에 대해 알아보자! 커밋컨벤션을 지켜야하기 때문에 불가피하게 push되어있는 커밋명을 변경하게 됐다. 혹시 모를 참사에 대비하여 개인 레포에서 2, 3번 테스트 해본 뒤 본 프로젝트에 적용하게 됐다. (테스트를 한 건 정말 탁월한 선택이었다..ㅋㅋㅋ) 커밋명을 변경하려는 브랜치에서 git rebase HEAD~1 -i 다음과 같은 명령어를 입력하면 터미널이 해당 브랜치의 가장 최근 커밋을 edit할 수 있게 자비를 베풀어준다. git rebase HEAD~2 는 가장 최근 커밋 바로 이전의 커밋이다. git log로 확인하자! 이게 edit창이고 좌측 상단의 커서를 보면 pick이라는 글자를 delete버튼으로 지우고 reword를 입력한다. 그 후 esc -> :wq..