티스토리

성장을 위한 기록

검색하기

블로그 홈

성장을 위한 기록

bigtae1007.tistory.com/m

B_Tae 노트

구독자: 1

방명록 방문하기

주요 글 목록

react에서 api 테스트 코드 작성하는 방 (feat. react testing library, mock api) 들어가기 앞서 mock API는 꼭 테스트를 위해서만 사용하는 건 아닙니다. API 명세서가 작성되어 있다면 서버가 완성되기 이전 프론트 단에서 개발을 진행할 때 유용하게 사용할 수 있습니다. 이점은 인지하고 넘어가도록 하겠습니다. mock API를 사용하여 리액트 테스트코드 작성하기 이번에는 mock API를 이용하여 테스트하는 방법에 대해 정리해보도록 하겠습니다. 사실 실제 서비스에 연결된 API를 사용하여 테스트 할 수 있습니다. 그렇게 된다면 API 통신까지 테스트를 할 수 있으니 안정성은 더 올라갈 것으로 생각되지만, API 통신 즉 서버가 정상 동작하는건 서버단에서 테스트를 해야할 사항이지 프론트단에서 꼭 테스트할 필요는 없다고 생각됩니다. 그리고 mock API를 사용할 경우 여러 장점이 있.. 공감수 0 댓글수 3 2023. 8. 31.
React 비동기 작업을 위한 테스트 하는법 (feat. React testing library) 아래 포스트를 읽기 전 Jest와 React Testing Library에 대해 이해가 없다면 이전 글을 보고 오시는 것을 추천드립니다. 비동기 작업을 고려하여 테스트 코드를 작성해야 하는 이유 개발을 하다 보면 비동기 작업을 하는 경우가 많습니다. Click, 렌더링 등에 이벤트가 발생했을 때 특정 로직을 수행하도록 코드를 작성한 경험이 많을 겁니다. 또 로직을 즉시 실행할 수도 있지만 의도적으로 특정 시간 이후 실행되도록 한 경험도 있을 것이라 생각합니다. 간단한 예로 렌더링 된 후 2초가 지났을 때 화면에 title이 “Load”에서 “Finish”로 변경되는 화면이 있다고 합시다. 이 화면에 테스트 코드를 단순히 render후 Finish text를 찾는다면 에러가 발생합니다. 당연하죠. 변경하기.. 공감수 0 댓글수 0 2023. 8. 25.
React Testing Library를 이용한 TodoList (feat. testing-library/react) 이 글은 벨로퍼트와 함께하는 리액트 테스팅을 참고하여 작성했습니다. 혹시 Jest나 React Testing Library가 처음이라면 이전 포스트를 한번 읽고 보시는 것도 이해에 도움이 됩니다. 물론 보지 않으셔도 이해할 수 있습니다. React Testing Library를 이용하여 Todo List 만들기 들어가기 앞서 기반이 되는 벨로퍼트와 함께하는 리액트 테스팅에서는 yarn add react-testing-library jest-dom @types/jest를 사용하고 있습니다. 현재는 라이브러리 이름이 변경되어 react-testing-library가 아닌 @testing-library/react를 사용하고 있습니다. 제가 이 글에서 사용한 라이브러리는 @testing-library/react.. 공감수 0 댓글수 0 2023. 8. 23.
React 테스트 코드 (feat. jest, React Testing Library) Testing React Apps · Jest React Testing Library | Testing Library CRA와 함께 사용하는 Jest React 프로젝트를 생성하는 방법은 생략하도록 하겠습니다. create-react-app을 사용하여 프로젝트를 생성 했을 때 기본적인 Jest 라이브러리가 같이 설치가 됩니다.따라서 기본적인 테스트 코드를 위한 라이브러리 설치는 필요없습니다. 여기서는 렌더링 스냅샷을 사용하기 위해 react-test-renderer을 추가 설치하겠습니다. yarn add --dev react-test-renderer //Link.tsx import {useState} from 'react'; const STATUS = { HOVERED: 'hovered', NORMAL:.. 공감수 0 댓글수 0 2023. 8. 23.
Jest로 테스트 코드 작성하기 Getting Started · Jest 본 글은 Jest 29.5V Docs를 기반으로 작성했습니다. 간단한 테스트 작성하기 Jest 설치 yarn add --dev jest 본 글에서는 yarn을 기준으로 작성하겠습니다. npm은 Docs에 나와있으니 참고 부탁드립니다. package.json 수정 { ... "scripts": { "test": "jest" } ... } 테스트 코드 작성 /* sum.ts */ // 테스트할 함수 function sum(a, b) { return a + b; } module.exports = sum; /* src > __tests__ > sum.test.ts */ // 테스트 코드 const sum = require('./sum'); describe("sum mod.. 공감수 0 댓글수 0 2023. 8. 18.
react naitve 무한 스크롤, 페이지 네이션 구현하기 ( scrollview, flatList ) 무한스크롤, 페이지네이션이란? 무한스크롤, 페이지네이션이란? 무한 스크롤과 페이지네이션은 비록 방식이 다르지만, 비슷한 목적을 가진 기법이다. 페이지네이션과 무한 스크롤은 데이터를 효과적으로 표현하기 위한 한 가지 기법이다. 한 번에 많은 양의 데이터를 받게 될 경우, 받는 과정이 오래 걸리고 그 데이터를 기반으로 UI를 그리는 데도 시간이 소요된다. 따라서 먼저 데이터를 일부만 불러온 후, 특정 이벤트가 발생할 때 추가 데이터를 받을 수 있다. 페이지네이션의 경우, 흔히 검색에서 볼 수 있는 '이전', '다음'과 페이지 번호를 누를 때 다음 데이터를 로드하게 된다. 반면, 무한 스크롤의 경우 개발자가 지정한 높이를 지나 스크롤했을 때 이벤트를 설정해 추가 데이터를 로드할 수.. 공감수 0 댓글수 0 2023. 8. 17.
[에러] Nest.js 순환 종속성 양쪽 service 사용 순환 참조 이슈 해결 발달 nest.js로 개발 중 A Service를 B Service에 inject, B Service를 A Serivce에 inject하는 상황에서 서로 의존하다보니 에러가 발생했다. (서버 개발자 부재로 서버 코드를 작성하다 발생한 이슈....)\ 에러 로그 Nest can't resolve dependencies of the AService (?, .....). Please make sure that the argument dependency at index [0] is available in the A Moduel context. 해결 앞서 말했든 위 에러는 양쪽에서 의존하여 발생한 이슈이다. Moduel 문제코드 // A-Module @Module({ imports: [ Ty.. 공감수 0 댓글수 0 2023. 8. 17.
react native 폰트 여백 없애기 발달 전반적인 앱 리뉴얼을 진행하면서 폰트 변경 요청이 들어왔다. 그리고 요청에 맞게 변경했더니 기존 UI가 깨지는 문제가 발생했다. (android에서만) 기존에 사용하던 폰트 : NanumGothic 변경 예정에 폰트 : NotoSansKR NotoSansKR폰트 자체에 위아래 여백이 존재하는 것 같았다. (Ios에서는 자동으로 여백을 삭제하는 것인지 여백이 없었다.) 위 사진은 단순 태그에 123을 입력한 것인데, 위 123을 보면 위아래 여백이 있어 border과 글자 사이에 간격이 넓은 것을 볼 수 있다. 해결 react-native Style에 includeFontPadding라는게 있는데 이걸 false로 지정하면 여백을 지울 수 있다. 하지만 모든 font에 적용하는 것은 귀찮기 때문에 하.. 공감수 0 댓글수 0 2023. 8. 17.
React 프로젝트 S3 배포하기 React 프로젝트를 S3에 배포하는 방법을 정리하고자 합니다. AWS에 깊은 지식은 없으며 프로젝트, 회사 내에서 배포를 했던 경험을 바탕으로 정리하는 글임으로 참고하시는 분들은 이점 유의 바랍니다. 피드백은 언제나 환영입니다. S3 버킷 들어가기에 앞서 AWS 콘솔 로그인 등에 기본적인 과정은 생략하도록 하겠습니다. 버킷 생성 1. S3 접속 S3에 들어가서 우측에 "+ 위젯 추가"를 클릭 2. 버킷 만들기 "버킷 만들기" 클릭 3. 버킷 설정하기 이미지에 작성된 내용을 보기 전 이미지 아래에 각 요소에 대한 간단한 설명을 보시고 상황에 맞게 설정하시면 됩니다. 버킷 이름 버킷 이름은 자유롭지만 도메인과 연동할 예정이라면 동일 혹은 비슷하게 작성해 주는 게 좋습니다. 버킷이 쌓이다 보면 구분하기 어려.. 공감수 1 댓글수 0 2023. 4. 26.
[GIT] git cherry-pick이란 ? 여러 브랜치에 커밋하기 git cherry-pick은 다른 브랜치 위에 있는 커밋을 현재 브랜치에 적용시킬 때 사용할 수 있다. main에 있는 커밋 중 D 커밋을 feature 브랜치에서 cherry-pick 하여 반영한 그림이다. cherry-pick 사용법 git chery-pick { 커밋 해시 }해당 커밋이 현재 브랜치에 불러와 진다. git cherry-pick 417ebbd git chery-pick { 커밋 해시 } { 커밋 해시 }2개의 커밋이 현재 브랜치에 불러와 진다. git cherry-pick 415ebbd b4a48fb git chery-pick { 커밋 해시 }..{ 커밋 해시 }커밋이 연속적이라면 앞에 커밋부터 뒤에 커밋까지 현재 브랜치에 불러와 진다. git cherry-pick 415ebbd.... 공감수 0 댓글수 0 2022. 11. 16.
[GIT] git stash란? 커밋 없이 pull하기 stash (스테이시) 사용하는 이유 [ 1 ] 커밋 없이 pull, checkout 등을 사용하기 위해 코드를 작성하다보면 작업 중 pull, checkout 등을 할 필요가 있다. 하지만, 커밋을 하지 않을 경우 위 명령을 수행할 수 없을 뿐더러 단순히 브랜치를 옮기기 위해 커밋을 하는 건 바람직하지 않다. ( 커밋 메세지는 히스토리를 남길 수 있는 중요한 요소 ) 위 상황에서 스테이시를 통해 변경사항을 저장하고 다른 작업후 돌아와 이어 코드를 작성할 수 있다. [ 2 ] 잘못된 브랜치에서 작업했을 경우 예를 들어 develop 브랜치에서 작업을 했어야 했지만, 실수로 main에서 작업하고 있던 경우가 있다. 이때 스테이시를 통해 잘못된 브랜치에서 작업한 내용을 저장하고 develop브랜치로 이동하여.. 공감수 0 댓글수 0 2022. 11. 16.
[GIT] git add 란? 변경된 파일 stage에 올리는 방법 add 란 ? 수정한 코드를 가지고 커밋을 날리기 위해서는 어떤 파일을 포함할 지 정해야한다. 여기서 git add 명령어를 통해 원하는 파일만 포함시킬 수 있다. git add 사용법 git add 특정 파일을 선택해 스테이징 영역에 넘길 때 사용할 수 있다. 추가하고 싶은 파일에 경로를 작성한다. 작성한 경로 하위에 속한 모든 파일을 추가한다. git add . “.”이란 경로는 현재 경로를 말한다. 즉 현재 경로 하위 모든 파일을 추가한다. 현재 디렉토리 이하 변경된 내용 모두를 스테이징 영역에 넘길 때 사용한다. 현재 디렉토리 상위 변경사항은 넘기지 않는다. git add -A 작업하는 디렉토리 상 모든 변경사항을 스테이징 영역에 넘긴다. 공감수 0 댓글수 0 2022. 11. 16.
Redux 란 ? redux-thunk, redux-saga 이론적인 내용만 정리. 예시 코드는 하단 벨로퍼트 링크에 아주 잘 명시되어 있다. redux는 자바스크립트 상태관리 라이브러리이다. redux 본질은 node.js 모듈이다. redux 기본 개념 단일 소스 동일한 데이터는 항상 같은 곳에서 가지고 나온다. (store) 즉 스토어라는 공간은 하나만 존재한다. 읽기 전용 액션이라는 객체를 통해서만 상태를 변경 할 수 있다. 순수 함수로만 변경이 가능하다. 즉 reducer는 순수 함수여야 한다. store 스토어는 상태가 관리되는 하나만 존재하는 공간이다. 컴포넌트와 별개로 스토어라는 공간이 있어서 필요한 상태를 담는다. 필요한 컴포넌트에서만 스토어에 접근을 한다. action 주문서라고 볼 수 있다. 액션은 앱에서 스토어에 운반할 데이터 다르게 보면 저.. 공감수 0 댓글수 0 2022. 8. 11.
WIL 0801 ~ 0807 13주차 회고 실전 프로젝트 마무리하며 실전 주차가 마무리되고 이제 지원 주차에 들어왔다. 실전 프로젝트를 돌아보는 시간을 갖고자 한다. 왜 stockhub인가? 리더님에 아이디어였다. 나는 별다른 아이디어도 없었고, 프로젝트에 아이디어가 단순 게시판 형식만 아니면 됐다. 주식을 주제로 하다 보니 차트 구현 등 재밌는 그림도 있을 것 같아서 그대로 진행하기로 했다. websocket만 추가 의견을 냈다. 사용 기술 몇 가지만 살펴보자면 cloudFront 배포, reactquery, recoil 정도 있는 것 같다. CloudFront배포는 사실 욕심이였다. 처음에는 Amplify로 배포했었다. CloudFront로 변경한 이유는 자동으로 https 환경으로 배포가 되기 때문에 백엔드에서 https로 배포하기 전까지 .. 공감수 0 댓글수 0 2022. 8. 7.
useInput 훅 만들기 with. typescript 노마드 코더를 보며 typescript 버전으로 정리한 내용 tpyescript 이해도가 부족해 완벽한 내용은 아닐 수 있습니다 훅 export const useInput = ( initialValue: string,validator?: ((value: string) => boolean) | any => { const [value, setValue] = useState(initialValue); const onChange = ( event: ChangeEvent | ChangeEvent) => { let willUpdate = true; if (typeof validator === "function") { willUpdate = validator(value); }//else { ..... 함수가 아닌 다.. 공감수 0 댓글수 0 2022. 8. 4.
WIL 0725 ~ 0731 12주차 회고 이번 주를 진행하면서 기술적으로 막혔던 부분 도메인 주소와 S3 주소에 버전이 다른 이슈 문제 상황 소켓 테스트를 위해 몇몇 컴포넌트를 주석으로 변경하여 배포를 한 후 동작하는 것을 확인하고 완성된 파일을 build 하여 S3에 배포하였다. 도메인에서는 변경사항이 제대로 반영되지 않았고, s3 도메인에서는 변경사항이 반영됐다. 문제 원인 가설 1. 도메인까지 연결되는 시간이 걸림으로 기다려야 한다. 가설 2. s3 배포를 할 때 도메인에도 올리기 위해서는 추가적으로 어떤 행동을 해야 한다. 가설 확인 가설 1 확인 . 단순히 기다려봤다. 가설 2 확인 . 가설 1을 확인하기 위해 기다리면서 검색을 진행했다. s3와 도메인에 차이에는 route 53과 cloudfront에 영향을 받았고, 만일 두 버전에 .. 공감수 0 댓글수 0 2022. 7. 31.
WIL 0718 ~ 0724 11주차 회고 실전 프로젝트를 진행하며 기술적으로 막혔던 부분 특정 상황에서 useQuery로 API 요청하기 자세한 정리는 github 링크로 대체 GitHub Issue 실제로 사용하지는 않았지만, 사용하기 위해 다양한 방법으로 많은 시도를 한 주제이다. 단순히 react-query를 사용하지 못하는 것일 수 있으나, 내가 찾은 공식 문서에 옵션과 지금까지 습득한 지식을 가지고 해결하기 위해 많은 노력을 했다. 물론 해결방법은 구글링을 더 깊게 한다면 금방 찾을 수 있을 것 같다. 고민하게 된 이유는 옵션을 하나 찾았을 때 충분히 배운 지식으로도 더 좋은 방법이 아닐 수는 있지만, 구현 할 수 있다는 생각이 들었고, 내가 지금 수준에서 할 수 있는 방법 중에 어떤 방법이 제일 효율적일지 찾기 위해 다양한 방법으로 .. 공감수 0 댓글수 0 2022. 7. 24.
React(리액트) redux에서 recoil로 recoil 기초 사용법 recoil 설치 명령어 npm install recoil yarn add recoil recoil vs redux 이번 프로젝트에서 상태관리 라이브러리를 선택하는 과정에서 여러 고민을 했었다. 그 동안 사용했던 익숙한 redux를 사용하는가, 새로운 recoil을 사용해보는가 결과는 처음에는 redux였고, 이제는 recoil이다. 처음 redux를 선택한 이유 개인적으로 상태관리 측면에서만 본다면 원툴이라 생각할 정도로 확실한 상태관리를 할 수 있다. 또한 지금까지 사용하면서 익숙하기 때문에 코드를 빠르게 작성할 수 있다. 그럼에도 recoil로 갈아탄 이유는 ? 우선 전역 상태관리를 해야하는 데이터가 거의 없었다. 클라이언트 데이터도 거의 없고 아직까지 서버 데이터는 없다. 이런 상황에서 비교적 무.. 공감수 0 댓글수 0 2022. 7. 19.
WIL 0711 ~ 0717 10주차 회고 MVP개발을 하는 3주 동안 어떤 기술을 다뤄봤나 상태 관리를 위한 redux와 react-query github action 배포 recoil 1. 상태 관리를 위한 redux와 react-query 이번 프로젝트에서는 상태관리를 위해 redux와 react-query를 사용했다. redux를 선택한 이유는 무겁긴 하지만 상태 관리에 확실하며 thunk를 써야 하는 것이 아니라면 redux를 사용하는 것도 크게 나쁘지 않을 것 같다고 판단했다. 가장 큰 이유는 내게 익숙하기 때문이다. react-query를 사용한 이유는 우선 전역 상태관리를 할 데이터가 많지 않기 때문에 redux-thunk는 쓸데없는 코드를 많이 작성할 것 같다는 생각이 들었고, 새로운 기술을 학습해보고자 선택을 했다. 또한 프로젝.. 공감수 0 댓글수 0 2022. 7. 17.
WIL 0704 ~ 0710 9주차 회고 가장 헤맷던 부분 특정 조건에서 query 사용하기 이번 주차를 진행하면서 가장 오래 걸렸고 가장 헤멧던 부분은 특정 조건에서 query를 작성하는 부분이 있었다. 나는 검색기능에서 검색을 실행했을 때 query를 요청하는 방법에 대해 아직도 고민을 하고 있다. mutate를 사용하는 방법도 있지만, 캐시 데이터를 관리하기 위해 query가 적절하다 생각했고 이 방법을 탐구하고 있다 생각한 방법 자세한 트러블 슈팅은 깃 이슈에서 정리하고 있다. 이번 이슈 정리 깃 enabled를 false로 두고 refetch를 사용하는 방법 mutate를 사용하고 redux로 전역상태관리 하는 방법 이 밖에 테스트 해보지 않은 생각하는 방법 1. enabled를 false로 두고 refetch를 사용하는 방법 useS.. 공감수 0 댓글수 0 2022. 7. 10.
React(리액트) 로그인 이후 이전 페이지로 이동, 페이지 저장하기 카카오 로그인 이후 이전 페이지로 이동 누군가 보시고 더 좋은 방법이 있다면 제발 댓글 남겨주세요! 카카오 로그인 과정 이건 소스가 많고 또 개발자 페이지에 너무 잘 정리되어 있기 때문에 간략하게 넘어가 보자면, 카카오에서 Rest API 키 Redirect URL을 입력한 URL로 이동을 하면( a태그 또는 window.location.href를 이용했다) 인가 코드를 URL에서 받을 수 있고 그 인가 코드를 백엔드에게 전달해 백엔드에서 토큰을 받는다(정확한 로직은 모른다) 어쨌든 백엔드에서 토큰을 전달받고, 우리는 그 토큰을 가지고 매 요청마다 넣어주면 된다. 본론 로그인 이후 이동을 메인 페이지로 했었는데, client가 어딘지도 모르는 글을 보다 댓글을 달려고 로그인을 했더니 url을 못 찾는다?.. 공감수 0 댓글수 0 2022. 7. 5.
react .env활용하여 API키 등 환경 변수 관리하기, firebase 예제 react. env 활용하여 API 키 등 환경 변수 관리하기 간단해 보이고 내용도 많은 이걸 정리하는 이유는 내가 멍청한 삽질을 했고, 혹여나 누가 보거나 미래의 내가 또 이런 어이없는 실수를 저지르지 않기 위함이다. .env를 사용하는 이유! 개발을 진행하면서 서버 포트 혹은 firebase API 키 등 다양한 key를 관리하게 될 것이다. 이걸 git에 올린다면 어떤 일이 벌어질 까? git을 보고 나도 그 API에 요청을 보낼 수 있을 것이다. 필요한 정보가 다 있기 때문에.... 특히 firebase는 많이 사용하면 비용이 발생하는데, API 키를 모두 알고 있다면 내가 그 데이터 베이스에 접근하는 건 어렵지 않을 것이다. 나는 물론 이 사실을 알고 있었지만 .env에 사실을 알지 못했고, 처.. 공감수 0 댓글수 0 2022. 7. 4.
WIL 0627 ~ 0703 8주차 회고 가장 헤맸던 부분 "form 양식" 이번 주차를 진행하면서 가장 오래 걸렸고 가장 헤멧 던 부분은 form 양식을 작성하는 부분이 있었다. onKeyDown 2번 실행되는 문제 자동 스크롤이 되지 않는 문제 enter를 눌렀을 때 submit이 되는 문제 내가 구현 하려고 목표했던 기능은 검색창을 입력하면 그 검색과 일치하는 항목 리스트가 보이며, 방향키로 선택을 하여 해당 검색어를 입력하는 과정이었다. 1. onKeyDown 2번 실행되는 문제 한글로 "삼성"이라는 키워드를 입력하고 downArrow를 입력하면 처음에 onKeyDown함수가 2번 실행이 됐다. 처음에는 왜 두 번만 실행되는지 원인을 찾기 위해 여러 테스트를 해봤는데, 영문, 숫자 는 한 번만 실행되고, 한글만 두 번 실행된다는 사실을 .. 공감수 0 댓글수 0 2022. 7. 3.
react(리액트) 특정 요소로 스크롤하기, 검색기능에서 자동 스크롤 원하는 요소(element)로 스크롤 하기 , 검색 리스트 자동 스크롤 자주 쓰이는 곳은 아마 어떤 버튼을 눌렀을 때 해당 위치로 자동 스크롤하는 경우에 사용하겠지만, 이번에 나는 상황이 달랐다. 이번 프로젝트에서 검색 기능을 작성하고 있었고, 검색 시 내용을 포함하는 항목을 하단 list에 보이는 기능이 있었다. 여기서 네이버 검색처럼 방향키로 요소를 선택하고 싶었고, 작성 후 테스트해보니 처음 화면에 보이는 list 영역을 지나가면 스크롤되지 않고, 안 보이는 화면에서 열심히 선택하고 있었다...... .scrollIntoView() 나는 이 친구를 사용하여 스크롤 조건을 작성했다. 일부 예시 코드 if (e.code === "ArrowDown" && Number(stockIndex) !== stoc.. 공감수 0 댓글수 0 2022. 7. 1.
React (리액트) onKeyDown 이벤트 두 번 실행 되는 이슈, 한 번만 실행하기 onKeyDown이 2번 실행되는 이슈 프로젝트를 하면서 검색 기능을 작성하던 중 생긴 이슈가 있다. 검색창 하단에 나타내는 목록을 방향키로 조회를 하는데, 처음에 2번 실행돼 첫 번째 항목이 아닌 두 번째 항복으로 바로 갔다. 우선 이렇게 2번 입력되는 원인은 한글은 조합하여 사용하기 때문이라고 생각하고 있다. 영문이나 숫자는 위와같은 이슈가 발생하지 않을 것이다. (공식 문서에서 확인을 못해봤다) 컴퓨터는 작성된 한글이 완성된 단어인지, 작성 중인지 구분할 수 없다 그렇기 때문에 방향키를 누르면, 단어를 완성하면서 실행되고 그 이후에 한 번 더 실행하게 된다. (추측) 이를 해결할 수 있는 방법을 찾다 2가지를 찾게 됐는데, 경우에 따라서는 1가지일 것이다. (제가 이 1가지만 가능했습니다 ) 우선 .. 공감수 0 댓글수 0 2022. 7. 1.
React(리액트) React-Query 쿼리 useMutation 사용해보기, invalidateQueries( 이 내용은 제일 하단에 있는 링크인 udemy에 있는 "React Query : React로 서버 상태 관리하기"를 보고 요약한 내용입니다. 복습 없이 작성된 내용이고 기억해보기 위한 기록임으로 참고하는 건 좋지만 공식문서를 꼭 확인하고 올바른 방법으로 사용하시길 바랍니다. 혹시나 보시는 분들이 있을까 하여.... useMutation 변이 사용해보기 useQuery와 형태가 비슷해 보이는 게 어떤 차이가 있나? 쉽게 생각하면 useQuery는 get메서드에서 사용하고 useMutation은 그 외 메서드에서 사용할 수 있다. 다른 특징을 보면 query-key가 없다. 당연하게도 일회성 통신이기 때문에 기억할 쿼리 키가 없다. 캐시에 데이터를 저장하지 않는다. thunk에서는 데이터를 받아 reduce.. 공감수 0 댓글수 0 2022. 6. 28.
WIL 0620 ~ 0626 7주차 회고 7주차 Week I Learn (클론 프로젝트) 이번 주 키워드 이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리 이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리 이번 주차를 진행하면서 목표가 있었다. 협업 시 프론트 간의 약속을 정해 잘 이행하기 미니프로젝트 기간에도 시도는 했지만 나 역시 적응하지 못했고, 기능구현에 정신이 팔려 잘 이뤄지지 못했다고 생각해서 실전 대비 한 번더 연습하는 시간을 갖고자 했다. 결론적으로는 성공적이라고 할 수 없었던 것 같다...... 컴포넌트를 쪼갰지만 너무 공통되는 부분이 많아서 충돌없이 협업하는 부분도 어려웠고 시간에 쫓겨 빠르게 코드를 작성하다 보니, 세세한 규칙을 따라갈 수 없었다 ...... 반응형 CSS 이번 주차를 진행하면서 .. 공감수 0 댓글수 0 2022. 6. 26.
서버사이드 렌더링 SSR , 클라이언트 사이드 렌더링 CSR 간단 장단점 서버 사이드(SSR) 렌더링이란? Next.js를 알아보다 서버 사이드 렌더링이라는 말을 들었다. 서버 사이드 렌더링이란 무엇일까 ? 말 그대로 서버에서 렌더링을 한다는 것이다. 더 자세히 얘기해보자면, 서버에서 페이지를 그려 클리이언트로 보낸 후 화면을 표시하는 기법이다. 이 반대대는 개념이 클라이언트 사이드 렌더링이고 대표적으로 내가 사용하는 React이다. 서버 사이드 렌더링 , SSR 동작과정 장단점 장점 SEO, 검색엔진 최적화의 좋다. 여기서 SEO란 검색엔진이 웹을 크롤링 하면서 페이지에 컨턴츠 색인을 생성하는 과정인데, 모든 데이터가 이미 HTML에 담겨진채로 서버에서 받기 때문에, 어플리케이션을 구성하는 모든 페이지를 가지고 있게되고 이로 인해 seo 효과가 좋다. 빠른 초기 로딩 서버에.. 공감수 0 댓글수 0 2022. 6. 26.
React, React-query 리액트 쿼리 useQuery 사용하여 get 받아오기 기초 사용 방법 이 내용은 제일 하단에 있는 링크인 udemy에 있는 "React Query : React로 서버 상태 관리하기"를 보고 요약한 내용입니다. 복습 없이 작성 된 내용이고 기억해보기 위한 기록임으로 참고하는 건 좋지만 공식문서를 꼭 확인하고 올바른 방법으로 사용하시 길 바람니다. 혹시나 보시는 분들이 있을까 하여 .... React-Query , useQuery // 설치 명령어 yarn add react-query query는 비동기 통신을 중점으로 하는 상태관리 라이브러리이다. 기본 개념을 깊게 정리하는 것은 나중으로 미루고, 지금은 빠르게 학습 중에 있어서 내용 정리를 해보고자 한다. useQuery에 장점으로는 무엇이 있을까? 데이터를 캐시에 저장하여 변동되지 않는 다면 그 데이터를 가져와 빠르게 .. 공감수 0 댓글수 0 2022. 6. 25.
React(리액트) 반응형 CSS 라이브러리 react-responsive 리액트 반응형에 사용하기 좋은 라이브러리 react-responsive CSS를 통해 반응형을 구현하는 방법인 @media [타입] [사이즈 지정] { css }이런 방식으로 작성 할 수 있을 것이다. 물론 이 방법으로도 모든 반응형을 구현 할 수 있지만, 이번에는 responsive라는 라이브러리를 사용해봤다. react-responsive 이 친구의 장점이 무엇이냐? react-responsive에서 제공하는 useMediaQuery 훅이다. 해당되는 화면 크기에 들어오면 true 값을 반환한다. 해당되지 않는다면 당연히 false를 반환한다. 사용 방법은 간단하고 다양한다. 아래 참고할 다른 분들의 블로그 링크를 확인하여 편한 방법을 사용해보자. const isDesktopOrLaptop = use.. 공감수 0 댓글수 0 2022. 6. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.