구 게시글

React로 라이브러리 만들어보기

사용기술 prettier, eslint, rollup, ts, storybook 기존 기술 스택에 babel도 포함되어 있었으나 생각을 해보면 웹페이지로 띄우는 게 아니고 react에서 사용하는 ui라이브러리 이기 때문에 하위 호환성을 생각해서 변환해줄 필요가 없다. Pacakge.json 패키지를 만들때 기본적인 정보와 설정 내용을 package.json파일에 적어둔다 { "private": false, // 배포를 하기위해서는 false로 설정되어야 한다. "main": "dist/cjs/index.js", // 기본적인 진입경로를 설정한 파일이다. 번들이 된 파일을 지정한다. 여기서는 commonJs파일의 진입 파일을 설정한 것이다. "module": "dist/esm/index.js", // 기본..

백엔드 코드를 읽어보자

데이터 베이스 팀플을 하면서 같은 팀원이 JS 및 백엔드 경험이 없어서 코드 읽는 것을 도와주는 걸 목적으로 글을 작성하였습니다. 사용 스택 node js express swagger 주요 파일 app.js 백엔드에서 중심이 되는 파일로 middleware를 설정하고 관리한다 노드 서버의 entry point(서버로 들어오는 시작 지점)이다 routes 주소별로 라우터가 들어간다(네트워크에서 배우는 라우터랑 같은 느낌으로 생각하면 편하다) 서버로 들어오는 end point(서버로 들어오고 서버 안에서 최종적으로 도착하는 지점)를 지정한다 router.(HTTP method) 구조로 해당 end point로 들어오게 되면 코드를 실행한다. controllers end point로 들어온 요청을 토대로 로직..

JS 프로젝트 TS로 마이그레이션하기

알고리즘 텀 프로젝트에서 간단하게 js로 작업을 하였는데 TS를 배우면서 한번 적용해 보고 싶어졌다 그래서 무작정 시작하는 JS프로젝트 TS로 마이그레이션 하기! 기본 세팅 일단 타입스크립트도 라이브러리다 설치하자 npm i typescript 기존 프로젝트에 tsconfig파일 설정하기 npx를 통해 간단하게 설정 파일을 만들 수 있다. npx tsc --init 타입스크립트의 핵심은 타입!! 타입 또한 설치해 주어야 한다 각 프로젝트에 필요한 라이브러리들의 타입을 설치해주자 내가 사용했던 타입은 jest, node, react, react-dom, styled-components의 타입을 설치해 주었다 npm i @types/react ...등등 eslint 또한 typescript에 맞춰서 다시 i..

피그마 SVG 파일 추출시 컴포넌트상에서 다른 이미지 생성

피그마에서 svg파일로 추출해서 프로젝트에 넣어서 사용하고 있었다 그러던 중 문제가 발생하였다 직접 파일을 볼때는 정상 작동 하였지만 React 코드 상에서 불러올때는 다른파일 이미지가 불러와 지는 것이다. 이유는 정말 참신했다 피그마에서 svg파일을 export할시에 svg파일에 있는 pattern의 id값이 각 svg의 고유값이 아닌 전부다 pattern0을 띄우고 있기 떄문이었다. // svg 파일중에 있는 코드 rect라는 태그의 fill이 pattern0을 가르키고 있다 여기서 지정하는 pattern0은 바로 밑에있는 pattern 태그를 뜻한다 이 pattern에서 이미지를 불러오게 된다 하지만 이게 페이지 단에 업로드가 되면 문제가 된다. 피그마에서 image가 있는 모든 파일들을 svg로 ..

QueryString(부제: 카카오 로그인)

카카오 로그인 오류 js sdk를 이용하여 카카오 로그인을 구현하던 중에 발생하였다. 프론트단에서 카카오로그인으로 인가 코드를 받고 토큰을 받아 와야 로그인이 완료가 되는데 토큰을 못받아 왔다 인가코드는 js sdk를 사용해서 구현을 할 수 있었지만 토큰은 rest API post method를 이용해서 받아와야 했다 export const postAccessCode = (data) => { const headers = { 'Content-Type': 'application/x-www-form-urlencoded', }; return axios({ method: 'post', url: KAKAO_PATH.OAUTH_TOKEN, headers: headers, data: data, }); }; 필수설정을 ..

소셜 로그인(카카오, 구글)

로그인 전략 카카오 로그인과 구글 로그인을 사용하였으며 oauth를 사용해서 로그인 하였다 우리는 jwt토큰으로 로그인을 한다. oauth 2.0 방법 사용 사진은 카카오 로그인 방식이지만 구글 또한 같은 전략을 사용한다. 카카오 로그인 전략으로는 클라이언트가 카카오에 로그인 요청을한 후 인가코드를 받아서 우리 서버로 전송후 백엔드에서 카카오로 코드를 주어 토큰을 받는 방식으로 동작한다. 다만 지금 우리 프로젝트 같은 경우에서는 벡엔드 팀이 안드로이드 팀은 토큰을 바로 백엔드에 넘겨주어 프론트도 똑같이 인가코드를 주는 것이 아닌 토큰을 주는것으로 해달라고 요청하였다 프론트 로그인 흐름 카카오서버에 로그인 요청 인가코드 발급 인가코드를 카카오서버에 전달 토큰을 받음 토큰을 벡엔드로 전달 로그인 flow i..

프론트엔드의 JWT

jwt토큰은 쿠키 세션 처럼 인증방법의 한 종류이다 출처: https://www.bezkoder.com/jwt-json-web-token/ jwt 인증방법 cookie session 인증 방법 둘의 공통점은 서버에 어떤 값을 주고 원하는 데이터를 받는다는 점이다 기존의 쿠키 세션은 세션아이디를 통해서 서버에 저장되어있는 데이터를 불러오지만 jwt는 서버에서 유효한지만 체크하고 데이터를 넘겨준다 JWT 토큰 - 구조 jwt는 기본적으로 토큰안에 데이터가 들어있다. Header, Payload, Signature 3부분으로 이루어지는데 각각의 부분은 Base64Url로 인코딩되어 있어 디코드를 하여 데이터를 얻는다. ( 보통 인증할때 백엔드에서 유효하면 디코드 해서 데이터를 넘겨준다) 단 여기서 인코딩은 암..

CSR SSR SSG(NEXT JS) SPA MPA 정리

개발을 하다 보면 어디선가 자꾸 줄임말이 튀어나온다 SSR SSG CSR SPA MPA 아니 이게 뭔데???? CSR(Client Side Rendering) Client Side Rendering의 줄임말로 클라이언트 단에서 랜더링을 하겠다는 말이다. 쉽게 React를 생성할수 있는 CRA(create-react-app)을 사용하면 기본 설정으로 CSR을 사용하도록 한다. CSR 처리 방식 브라우저가 접속을한다. (설정으로 바꿀 수 있다)와 스크립트 파일만 있는 HTML을 받는다. 브라우저가 다시 프런트 서버에 스크립트에 있는 JS를 호출한다. 호출받은 모든 페이지를 브라우저로 받아와서 웹사이트를 그려준다. 웹사이트에 필요한 데이터를 백엔드 서버에 호출한다. 받은 데이터를 웹사이트에 추가해 완전한 웹사..

React 상태관리와 불변성

react의 상태를 관리하다보면 불변성을 지켜서 사용하라고들 한다. 굳이 데이터를 추가할때도 array.push(5); 위의 push방법이 아닌 newArray=[...array, newData]; 이런식으로 spread 방법을 사용해서 데이터를 넣고 한다 이는 불변성을 지키려고 일부러 이런 방법으로 사용한다. 불변성 불변성부터 이야기해보자면 값이나 상태를 변할수 없는것이다 즉 새로운값이 생기면 상태를 변경해주는 것이아니라 새로 할당하는 것을 말한다. 대표적으로 원시타입이 이렇게 동작한다 let a = 3; //원시타입 3이라는 변수를 할당했다 let a = 5; 5로 변경을 하면 메모리에서는 a라는 변수에 5를 다시 할당하게된다 이는 불변성을 지키고있는 것이다. 원시타입이 있으면 참조타입도 있다 let..

react-countdown-circle-timer 소개

npm 사이트: https://www.npmjs.com/package/react-countdown-circle-timer react-countdown-circle-timer Lightweight React countdown timer component with color and progress animation based on SVG. Latest version: 3.0.9, last published: 3 months ago. Start using react-countdown-circle-timer in your project by running `npm i react-countdown-circle-timer`. There www.npmjs.com 설치방법 npm npm i react-countdown..