일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- CSS
- nest.js 순환 종속성
- javascript 테스트
- react jest
- Testing-library/react
- react native 무한스크롤
- HTML
- mock api 사용법
- nest.js 순환 참조
- JavaScript
- nest.js circular Dependency
- TodoList 테스트 코드
- react
- 첫코딩
- 리액트 테스트 코드
- 리액트 테스트
- React 테스트코드
- 프로젝트 배포하기
- 첫 코딩
- react 테스트
- 비동기 테스트
- 개발
- TDD방식으로 리액트 테스팅
- nest.js forwardRef
- mock api를 이용한 react 테스트
- React Testing Library
- jest
- FlatList 무한 스크롤
- react testing library 비동기 테스트 사용법
- ScrollView 무한 스크롤
- Today
- Total
목록분류 전체보기 (101)
성장을 위한 기록
서버 사이드(SSR) 렌더링이란? Next.js를 알아보다 서버 사이드 렌더링이라는 말을 들었다. 서버 사이드 렌더링이란 무엇일까 ? 말 그대로 서버에서 렌더링을 한다는 것이다. 더 자세히 얘기해보자면, 서버에서 페이지를 그려 클리이언트로 보낸 후 화면을 표시하는 기법이다. 이 반대대는 개념이 클라이언트 사이드 렌더링이고 대표적으로 내가 사용하는 React이다. 서버 사이드 렌더링 , SSR 동작과정 장단점 장점 SEO, 검색엔진 최적화의 좋다. 여기서 SEO란 검색엔진이 웹을 크롤링 하면서 페이지에 컨턴츠 색인을 생성하는 과정인데, 모든 데이터가 이미 HTML에 담겨진채로 서버에서 받기 때문에, 어플리케이션을 구성하는 모든 페이지를 가지고 있게되고 이로 인해 seo 효과가 좋다. 빠른 초기 로딩 서버에..
이 내용은 제일 하단에 있는 링크인 udemy에 있는 "React Query : React로 서버 상태 관리하기"를 보고 요약한 내용입니다. 복습 없이 작성 된 내용이고 기억해보기 위한 기록임으로 참고하는 건 좋지만 공식문서를 꼭 확인하고 올바른 방법으로 사용하시 길 바람니다. 혹시나 보시는 분들이 있을까 하여 .... React-Query , useQuery // 설치 명령어 yarn add react-query query는 비동기 통신을 중점으로 하는 상태관리 라이브러리이다. 기본 개념을 깊게 정리하는 것은 나중으로 미루고, 지금은 빠르게 학습 중에 있어서 내용 정리를 해보고자 한다. useQuery에 장점으로는 무엇이 있을까? 데이터를 캐시에 저장하여 변동되지 않는 다면 그 데이터를 가져와 빠르게 ..
리액트 반응형에 사용하기 좋은 라이브러리 react-responsive CSS를 통해 반응형을 구현하는 방법인 @media [타입] [사이즈 지정] { css }이런 방식으로 작성 할 수 있을 것이다. 물론 이 방법으로도 모든 반응형을 구현 할 수 있지만, 이번에는 responsive라는 라이브러리를 사용해봤다. react-responsive 이 친구의 장점이 무엇이냐? react-responsive에서 제공하는 useMediaQuery 훅이다. 해당되는 화면 크기에 들어오면 true 값을 반환한다. 해당되지 않는다면 당연히 false를 반환한다. 사용 방법은 간단하고 다양한다. 아래 참고할 다른 분들의 블로그 링크를 확인하여 편한 방법을 사용해보자. const isDesktopOrLaptop = use..

문자열이 정해진 영역 넘칠 때... 표시하기 ... p { display: -webkit-box; width: 100%; height: 20px; white-space: normal; text-align: center; -webkit-line-clamp: 1; // ...표시할 줄 -webkit-box-orient: vertical; overflow: hidden; // 영역 밖은 숨기기 text-overflow: ellipsis; font-size: 14px; font-weight: 600; } 여기서 -webkit-line-clamp: 1만 변경하면 원하는 줄에서 ...표시를 할 수 있다. 너비와 높이를 정해주는 것은 텍스트가 늘어남에 영역이 넓어져 모든 글자가 표현되는 걸 방지하기 위해 지정해줬다...
6주차 Week I Learn (미니 프로젝트) 이번 주 키워드 첫 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점 첫 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점 첫 백엔드와의 협업을 해봤다. 아쉬운 점 너무 아쉬운 부분이 많았다. 프로젝트를 진행하면서 더 효율적인 방법으로 협업을 할 수 있었을 것 같다는 생각과, 프론트 엔드와도 효율적으로 작성 할 수 있을 지 않을 까 하는 생각이 들었다. 우선 프론트 엔드끼리 컴포넌트 쪼개는 부분에서 아직 미숙한 것 같다. 공통되는 컴포넌트를 정하고 페이지 관련 컴포넌트, 폴더를 쪼개는 규칙, 코드 순서 등 있어보이기 위해 정하고 시작했지만, 대충 정하다보니 지켜지지 않는 경우가 허다했다. 내가 정했지만 나도 못 지키겠더라.... 백엔드와도 마찬가지이다. 모두가 API..

React 새로고침 시 경고창 띄우기 본론으로 넘어가기 전 완벽한 내용이 아님으로 다른 자료를 더 찾아보고 활용해 보시는 걸 추천드립니다. (혹시나 보시는 분이 있을까바.... ) 노션 등의 페이지를 나갈 때 변경된 사항이 저장되지 않는다는 확인 문구가 뜨는 것을 본적이 있을 것이다. 그것과 비슷하게 나도 글을 쓰는 도중에 새로고침을 하면 변경 될 수 있다는 안내 문구를 띄우고 싶었고, 그 방법으로 react-beforeunload를 찾았다. 사용 방법 사실 이 새로고침을 막을 수 있는 방법은 다양할 것 같다. onbeforeunload라는 이벤트도 존재하고 키보드 이벤트로도 막을 수 있을 것 같은데, 앞서 언급한 라이브러리를 이용하면 쉽게 구현할 수 있다. 라이브러리 설치 npm install reac..
나는 왜 토큰을 localStorge에 저장하는 방식만 생각했나 ? 혼자서 firebase를 이용한 로그인을 구현할 때에는 로컬 스토리지에 정보를 저장했다.( 토큰 비슷하게 로그인 유무와 닉네임만 파악할 수 있게) 그리고 이번 백엔드와 협업하면서 자연스럽게 토큰을 로컬 스토리지에 저장을 했다. 그리고 다른 프론트엔드와 얘기하는 도중 대부분의 사람들이 쿠키에 저장을 한 것을 보고 이유를 물었는데, 대부분이 그냥 쿠키로 하는 코드를 봤다는 대답에 궁금해서 알아보고 정리해보고자 이 글을 쓰려한다. 세션 스토리지 vs 로컬 스토리지 vs 쿠기 vs 세션 웹 스토리지 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소이다. 데이터 형테는 Key-value 스토리지 형태로 구성된다. 오직 문자형 데..
React route에 Link에서 데이터 전송하기 오늘은 React에서 Link에 데이터를 전송하는 방법을 알아봤다. 데이터 전달이 가능하다는 것은 알았지만 마땅히 사용해볼 일이 없어서 찾아보지는 않았고, 오늘 사용하게 되서 이 기회에 한 번 정리 해보려고 한다. 우선 react에서는 a태그를 사용하지 않고서 왜 Link로 연결을 할까? 내가 알기로는 a태그로 연결 할 경우 새로 고침이 일어나기 때문에 Link로 a태그를 대신한다고 알고 있다.(브라우저에서 검사해보면 Link는 a태그이다.) 다시 본론으로 돌아가 Link를 사용해서 데이터를 전달하기 위 코드를 예시로 들어보면, state안에 데이터를 담아 전달하게 된다. 위 예제에는 pathname만 있지만, 공식 문서를 보면 search, hash도..
3주차 Week I Learn (주특기 1주차) 이번 주 키워드 axios axios axios는 비동기 HTTP 통신을 할 때 사용된다. javascript에서는 보통 ajax , fetch, axios를 사용하는데 이 장단점을 비교해보자 ajax - Asynchronous JavaScript And XML 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신이다. XMLHttpRequest 객체를 이용해 전체 페이지가 아닌 필요한 데이터만 불러 올 수 있다. 장점 Jquery를 통해 쉽게 구현이 가능하다. Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다. 단점 Jquery를 사용해야만 간편하게 구현 할 수 있고 호환성을 보장 받을 ..