블로그 이사갔습니다 velog 로 이사갔습니다~! https://velog.io/@pgi0822 포트폴리오 사이트 React Query 5 버전으로 업데이트 React Query 4 버전으로 되어있던 코드를 5버전으로 바꿨다 차이점은 위에 코드에서 빨간 밑줄로 표시하였는데, 내가 수정한 부분만 정리해보면 1. isLoading이 isPending으로 바뀌었다. 2. useMutation이나 useQuery가 하나의 Object를 받도록 변경되었다. (이렇게 바뀐 것은 타입스크립과 연관이 있다.) - useMutation(fn, options) + useMutation({ mutationFn, ...options }) 3. useMutation 내부에 호출할 함수이름 또는 함수를 적을 때 원래는 그냥 작성했는데 mutationFn : 뒤에 작성해야한다. useQuery의 경우에는 queryFn : 뒤에 함수 이름 또는 함수를 적어주면 된다. 내가 수정한 부분은.. 타입과 인터페이스의 차이 회사에서 TypeScript로 백엔드 api를 만들다가 문득 타입을 선언할 때 interface로 하는 것과 type으로 선언하는 것의 차이가 궁금했다. (프론트 개발할 때는 type이 익숙해서 type으로 선언했었다) 이펙티브 타입스크립트에 나온 interface와 type의 차이점은 1. 유니온 타입은 있지만 유니온 인터페이스라는 개념은 없다 type A = 'a' | 'b' 가 있지만 인터페이스는 없다 type NamedVariable = ( Input | Output ) & { name: string }; 인터페이스는 왼쪽과 같이 사용할 수 없습니다. 또한 튜플타입은 type 키워드로 구현하는 것이 더 낫다고 합니다. 2. 인터페이스는 타입과 달리 보강(augment)이 가능하다 interface.. react-native cli 프로젝트에 storybook 적용하는 법 1. 설치 (기존 cli 프로젝트에 storybook 추가하기) npx sb@latest init --type react_native 2. addon 추가하기 (addon 은 여러 컬러로 바꿔보거나 텍스트를 변경하는 등의 작업을 할수 있게 해줌) // .storybook/main.js에 아래와 같이 작성 module.exports = { stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)','../components/**/*.stories.?(ts|tsx|js|jsx)'], addons: [ '@storybook/addon-ondevice-notes', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevic.. avoid using useEffect 요즈음 블로그 글 중에서 useEffect 사용을 피하라는 내용의 글을 보고 이유가 궁금해서 나름대로 공부해보았다. useEffect란 ? 외부 시스템과 리액트 컴포넌트를 동기화(synchronize)시켜주는 리액트 훅 useEffect 사용을 피해야하는 이유 나는 보통 useEffect를 api 호출(위에서 언급한 외부 시스템이라 할 수 있겠다) 해서 컴포넌트의 상태를 useState 훅의 setter 함수로 변경시킬 때 컴포넌트가 계속 리렌더링 되는 것을 막기위해 빈배열을 의존성배열로 해서 컴포넌트가 mount된 후 한번만 api를 호출하도록 사용했다. 하지만, 이 경우에 useEffect 내부에서 호출한 api는 컴포넌트가 마운트된 후 즉, UI 가 그려지고 나서 실행되기 때문에 UI가 다 그려지고.. 4개월차 회고라적고 반성문이라 읽는다 (feat. 기술 트렌드 찍먹 개발자가 되지 말자) 물경력에 관한 블로그 글들을 읽어보았을 때 깊이있는 공부를 하지 않고 원래 있던 코드를 비슷하게 작성하는 일을 반복하다보면 물경력이 되는 듯하다. 요즈음 많이 하는 생각이 '성장을 하려면 어떻게 해야할까?' 라는 것이다. graphQL 써볼까? express 대신 nest 써볼까? 하고 얕게 'graphQL은 프론트엔드 엔드포인트에서 데이터를 호출해서 사용하니까 여러 api를 호출해서 데이터를 가져오는 REST 방식보다 성능면에서 좋네.' , 'nest는 express보다 MVC패턴으로 하기 더 편하네' 까지만 알고 프로젝트에 도입하려는 위험한 생각을 했었던 나를 반성했다. 좋게 표현하자면 최신기술에 대한 관심이지만 코드로 작성해보지도 않고 그냥 블로그 글 몇개만 읽어보았던 내 자신을 성찰하게 되었다. .. 뜨거운 SSR은 가고 남은 건 볼품없지만 (feat. SSG, CSR, ISR) 왜 SSR ( Server Side Rendering ) 을 도입하고자 하였나? React에서 CSR을 하면 는 빈 HTML을 불러와서 브라우저에서 렌더링하여 화면을 그린다. (React 18버전부터는 RSC 라고 하는 서버컴포넌트를 사용할 수 있으나 RSC와 SSR은 다르다 !) React 코드를 보면 index.html 파일에 아래와 같이 root DOM 노드를 나타내는 코드가 있고, 자바스크립트 코드들은 모두 브라우저에서 실행되기 때문에 html 파일이 비어있다. 이렇게 되면 브라우저가 켜지면서 화면이 그려지기 시작하기 때문에 초기 로딩 속도가 느리다는 단점이 있다. (물론 코드가 많지 않은 프로젝트는 빠르게 로딩된다.) 반면, SSR은서버에서 렌더링 되어 브라우저로 전달된 정적 HTML 페이지를 .. websocket 과 polling, long-polling socket.io라는 라이브러리를 공부하다가 그동안 채팅하면 무지성으로 websocket 라이브러리(stomp, sock.js 등)를 가져다 쓰기 바빴는데 이번 기회에 서버와 클라이언트 간의 양방향 데이터 송수신에 사용되는 세 가지를 정리해보고자 한다. 일단 polling과,long-polling은 HTTP라는 프로토콜을 사용하지만 websocket은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜 (출처 :위키백과) 로 HTTP가 아닌 하나의 프로토콜이다. polling 일정시간 일정 간격을 두고 계속 요청하는 방법으로 말그대로 계속해서 요청하는 방법이다. 데이터가 없어도 무조건 요청이 가게 된다. 자료조사가 더 필요하지만 카카오에서 카카오페이 결제와 같은 부분에 polling방.. FSD (Feature-Sliced Design) 아침에 개발바닥 오픈카톡방에서 FSD를 보고 프로젝트시 폴더구조 정할 때 도움이 될듯하여 공식문서를 짧게 정리 해봤다. FSD 간략한 소개 FSD는 프론트엔드를 위한 구조로, 구조화되어 있으면 매번 바뀌는 비즈니스 요구에 더 잘 대응할 수 있으며 프로젝트에 신입 개발자가 투입되었을 때에도 이해하기 쉽기 때문에 나왔다고 한다. FSD는 아주 작은 싱글 페이지 어플리케이션에는 도움이 되지 않을 수 있으나 Google Cloud Admin dashboard 정도의 큰 앱에는 커스텀된 아키텍처가 필요하고 이 때, FSD에 기반하여 만들 수 있다. 이미 프로젝트가 있다면 점진적으로 채택할 수 있다. (FSD를 점진적으로 도입하는 법은 하단에 있다.) FSD 구성 크게 Layers ,Slices, Segments .. \n이 포함된 JSON 문자열 JSON.parse시 에러 json 형식으로 db 테이블에 저장된 데이터를 api로 호출하는 과정에서 에러가 났다. 특정 데이터 즉 문자열에 \n 과 같은 개행문자가 포함되어 있을 때, 이 문자열을 JSON.parse를 통해 JSON 객체로 바꾸는 과정에서 나오는 에러라는 것을 스택오버 플로우를 통해 알게 되었다. 해결은 \n에서 \이 역슬래쉬를 한 개를 자바스크립트의 replace 메소드로 두 개로 바꿔주어서 해결했다. 아래는 mdn 문서에 나온 JSON.parse의 예시이다. const json = '{"result":true, "count":42}'; const obj = JSON.parse(json); console.log(obj.count); // Expected output: 42 console.log(obj.resul.. HTTP 캐싱 설정 회사에서 개발을 하면서 페이지 번호를 req.query로 서버 API로 보내 페이징처리 된 게시물들을 가져오고 있었는데 1-> 2 -> 3-> 4-> 5 -> 4 ->3 페이지 이렇게 페이지를 계속 바꾸면서 테스트를 진행하는 중에 request failed with 304 라는 에러가 났다. api 호출은 axios 라는 라이브러리를 사용해서 했는데, axios는 찾아봐야겠지만 fetch API와 같은 경우에는 리액트에서 동일한 요청을 몇 초 이내에 하면 원래 캐싱해놓았던 값을 리턴하고 api call을 하지 않는다. 문득 토스 개발 블로그에서 본 "웹 서비스 캐시 똑똑하게 다루기" 라는 글이 떠올라서 요청 헤더에 'Cache-Control': 'no-cache' 이렇게 설정한 후 테스트를 진행했더니 r.. 쿠키가 무엇일까? 로그인 , 다시 말해서 인증을 구현할 때 쿠키를 많이 사용해서 쿠키에 관하여 공부를 했다. (세션도 공부할 예정!) 면접 질문으로도 많이 받기 때문에 정리 해보고자 한다. 쿠키를 사용하는 이유 - 세션을 유지하기 위해! 우리는 HTTP를 사용하여 서버와 클라이언트 간 통신을 한다. HTTP는 특징이 stateless (무상태) 이기 때문에 서버에서 HTML 파일을 받거나 하면 연결이 끊어져서 서버는 사이트에 접속하고 있는 사람이 누구인지 모른다. (IP 주소와 같은 것은 알 수 있지만) 그래서 서버에서는 사용자의 웹 브라우저로 키= 값 이렇게 한 쌍의 형태로 데이터를 보내고 그렇게 되면 브라우저에 저장된다. 브라우저 Application 탭 ( 윈도우는 F12 누르면 나온다 맥은 기억이 안남! ) 의 c.. 이전 1 2 3 4 ··· 6 다음
