react

JS로 React 흉내내기 스터디 회고

블로그 이전 하였습니다. JS로 React 흉내내기 스터디 회고 꼭 한번쯤은 해보고싶었던 js로 React 흉내내기 yoon-hae-min.github.io 기존 글 JS로 React를 만든 완성품 GitHub - Yoon-Hae-Min/create-react-with-vanilla-js-study: 바닐라 JS를 사용해서 리엑트를 만들어보는 스터디 바닐라 JS를 사용해서 리엑트를 만들어보는 스터디. Contribute to Yoon-Hae-Min/create-react-with-vanilla-js-study development by creating an account on GitHub. github.com 스터디 시작 계기 나는 React개발자가 아닌 프론트엔드 개발자이다 즉 내가 알고 있는 Reac..

React-Query vs SWR

블로그 이전하였습니다. React-Query vs SWR 비슷하지만 다른 react-query와 swr를 컨셉을 이해하며 비교해보자 yoon-hae-min.github.io 기존 글 서론 둘이 비교하기 앞서 왜 이런 라이브러리를 쓰는지부터 보고 가자 React에서 서버로부터 데이터를 가져오거나 전송해야할때 fetch Api를 사용하거나 axios를 사용하고는 한다. 이를 사용해서 충분히 서버와 데이터를 주고받을 수 있으나 규모가 커지면서 데이터 처리, 에러핸들링과 같은 부가적인 요인들이 많아지게 된다. 직접 구현해도 되지만 라이브러리를 이용해서 좀 더 쉽게 처리할 수 있다. 공통점 1. 데이터 요청 및 관리를 하기 쉽게 만들어 준다. 2. 캐시를 통해 api 호출을 줄이고 성능(UX)를 향상할 수 있다...

Tailwind CSS vs Styled-component

블로그 이전하였습니다. Tailwind CSS vs Styled-component 요즘 뜨고있는 Tailwind CSS와 너무나도 익숙한 Styled-component를 비교해보자 yoon-hae-min.github.io 기존 글 기존에 css-in-js 형식의 emotion과 styled-component를 자주 사용했다. 다만 사용하면서 변수명 짓기와 해당 클래스명을 찾으려면 파일을 띄워놓고 찾고 비교하는 등의 번거로움이 있었고 tailwind css는 이를 고려해서 만들었다기에 slack 클론 코딩에 적용하면서 도입해 보기로 하였다. 첫인상 처음 공식문서를 딱 펼치자마자 "으음... 이거 완전 부트스트랩 아니야??" 웹개발 입문전에 부트스트랩 썼던 기억이 새록새록 떠올리는 문법들로 가득 차있었다. ..

React Following Follower Modal창 동기화하기

블로그 이전하였습니다. React Following Follower Modal창 동기화 react-query의 queryClient를 이용해서 팔로우 팔로워 모달창을 동기화 시켜보자 yoon-hae-min.github.io 기존 글 진행 동기 Breaking프로젝트를 진행하면서 프로필 팔로잉 팔로워 모달창에서 유저를 팔로잉 할시에 반대편 모달창에 그 값이 적용되지 않았고 이를 해결하기 위해서 Profile Modal에 state로 만들어 두 개의 Modal을 묶어서 처리했는데 이보다 좋은 방법이 없을까 고민하던 중 optimistic update를 배우면서 이와 비슷하게 직접 queryCache에 접근해서 해결해 보자고 생각하였다. 리펙토링 시리즈 인피니티 스크롤에서 데이터가 많아지면 프레임이 떨어짐 마..

React query를 사용하면 전역 상태가 필요없다?

블로그 이전하였습니다. React Query를 사용하면 전역 상태가 필요없다? React Query를 사용하면서 생긴 오해와 진실 yoon-hae-min.github.io 기존 글 처음 React query를 사용하면서 잘못된 개념을 하나 가지고 갔었다. React-query를 사용하면 전역 상태가 필요 없다는 것이었다. 애초에 개념이 다른 말인데 왜 이렇게 생각했는지에 대해서 풀어보고자 한다. 프론트엔드 개발에서 꼭 필수적인 것이 state 즉 상태이다. 상태를 주관적으로 정의를 내려본다면 사용자와 상호작용하기 위해 동적으로 변하는 데이터를 말할 수 있다. 이 상태에 따라 UI를 적절하게 보여주도록 설정하는 것이 상태 관리인 것이다. 하지만 상태가 복잡해지고 다양화 됨에 따라 하나의 상태가 영향을 미치..

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", // 기본..

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

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

프론트엔드의 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..