리액트

[react-query] 리액트 쿼리

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. 서버 상태를 클라이언트로 가져올 수 있다. 캐싱, 동기화, 에러핸들링 등 비동기 과정을 더욱 편하게 사용할 수 있다. ?캐싱? 데이터는 업데이트 되고 있지만 요청은 날리지 않는 것 yarn add react-query react-query를 설치한다. import { useQuery } from "react-query"; cons..

@media, 반응형 디자인(Responsive Design)

사이트는 크게 반응형 사이트, 적응형 사이트 두 가지로 나뉜다. 요즘 트렌드는 반응형이다. 배달의 민족, 오늘의집, 직방(정말 조아하시는. ), 코드캠프 등이 있다. 적응형 사이트의 대표적인 예는 네이버, 다음, 쿠팡, 페이스북, 옥션, 크몽 등이 있다. 화면에서 보여줘야할 내용이 너무 많으면 반응형으로 만드는 것도 힘들고 UX 좋지 않다. 무조건 반응형으로 만들어야 한다는 건 잘못된 생각이고, 들어가야 할 곳과 아닌 곳을 구분해서 디자인 한다. 웹을 기획하는 단계에서 반응형 기획과 디자인이 같이 들어가야 한다! 반응형 웹을 만들기 위해서는 화면 구간을 나눠줘야 한다. 보통 모바일 크기일 때, 태블릿 크기일 때, pc크기일 때로 나눈다. 이런 나뉘는 포인트를 breakPoint 라고 한다! 화면을 전환하..

도커(Docker) 고래 모양 그거

도커 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 그리고 그 저장한 이미지를 클라우드에 올리고 그 이미지들이 서로 연결돼서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 컴퓨터에서 도커만 설치하면 이 문서의 내용대로 이미지를 다운받아 설치합니다. 가상머신과 비슷하지만 그것보다 훨씬 빠르고 자원을 효율적으로 사용합니다! 불필요한 추가적 운영체제 설치가 필요 없습니다. 도커를 쓰는 이유? 서버를 돌리기 위해선 환경이 갖춰져야 합니다. 예를 들어 회사에 각각 윈도우와 맥을 쓰는 개발자가 있었고, 리눅스를 쓰는 개발자가 신입으로 들어왔다고 해봅시다. 그럼 신입의 컴퓨터에 Node 등 버전을 똑같이해서 깔아야겠죠. 깔았는데 실행이 안돼요! 왜냐면 운영체제에 따라서 환경이 달라지기 때문입니..

220628 프론트엔드 부트캠프 49일차 : 배포를 해보자!(2) - 정적 배포 실습, refreshToken 권한분기, reactNative

오늘은 정적배포에 대해서 배웁니다~ 그리고 이번주에 실무에서 많이 쓰는 도커도 배울 거임~~~ 정적 배포 실습 정적 배포를 하기 위한 새로운 프로젝트를 만들 것이다... npx create-next-app class_build 뒤에 class_build는 바꿀 수 있음! package.json 들어가서 react 버전을 수정하고, 노드모듈즈 지우고 다시 yarn install index.js 들어가서 Image 부분은 주석처리 한다. yarn dev - 페이지 이동 속도가 느리다. 소스코드 수정하면 자동으로 refresh 된다. 하지만 실제 배포에선 그러면 안되잖아?! yarn start - 페이지 이동속도 빠르다. 소스코드 수정해도 refresh되지 않음. yarn build 후에 가능하다. 스토리지에..

220627 프론트엔드 부트캠프 48일차 : 배포를 해보자!(1), 테스트 코드(jest), 리액트 네이티브

배포는 삼단계로 진행될 거예요! SSR, SSG 1. 배포를 위한 숲을 그려보자! -> Cloud-Provider 2. 배포하면 끝인줄 알았는데...-ㅅ- 테스트는 또 뭐야? -> Jest / Cypress / TDD Cloud-Provider 서버를 계속 켜놓으려면 24시간 컴퓨터를 켜놔야하고, 다른 사람도 내 컴퓨터에 접속할 수 있게끔 네트워크 설정도 조금씩 바꿔야 한다. 반드시 서버실의 서버컴퓨터로 할 필요는 없다. 하지만 접속자가 많아지면 노트북 같은 걸로는 힘들다... (처리를 하는 cpu와 기록해놓는 메모리,ram이 좋아야 한다.) Front를 여러대, 각각의 소스코드로 각각 yarn dev해서 한 대가 안돼도 다른 애가 켜져있어서 그쪽으로 접속이 가능하게 한다. 로드 밸런서(부하 분산기) -..

220623 프론트엔드 부트캠프 44일차 : optimistic ui, og, SSR

낙관적 UI(Optimistic UI) 요청 보내고 기다리지 않는다. 어차피 성공할걸 알아...!! 이런 경우에 쓴다. 1. 99% 성공할 것이 예상되는 API 2. 1%확률로 실패하더라도, 문제가 안되는 API 개발을 할 땐... 좋은 컴퓨터만 있지 않다는 걸 생각해야한다! 느린 컴퓨터에서 좋아요 버튼만 누른다면? 좋아요 버튼 하트 채워졌다가 나중에 보니 안 눌려있어도 치명적인 오류는 아니잖아 + 일단 누르면 하트 채워지게 보여지게 해! 그런 것... 성공했다고 가정하고 미리 데이터를 주자. likeBoard 요청이 날아감 가짜 likeBoard를 데이터에 넘겨서 data.likeBoard 캐시 스테이트를 먼저 수정한다. 화면에 보여진다. DB에서 결과를 받아서 가지고 온다. 그 결과를 다시 updat..

[문제 해결] Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`.

Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`. at InfiniteScroll data가 불러와지기 전에 인피니트 스크롤이 불러와져서 이런 문제가 생기는 것 같아서 {props.data && ( {props.data?.fetchUseditems.map((el: any) => ( {el?.name} {el?.seller.name} {el?.price}원 {el?.soldAt} {/* {props.basket.find((basketEl) => basketEl._id === el._id) ? ( 담기 취소 ) : ( 담기 )} */} ))} )..

[문제 해결] toast-ui 디폴트 밸류, 수정할 때 빈값 들어가는 문제, 랜딩 페이지 엔터쳐서 넘어가기

export default function BeanMarketEditPage() { const [isEdit, setIsEdit] = useRecoilState(isEditState); const router = useRouter(); const { data, loading } = useQuery(FETCH_USED_ITEM, { variables: { useditemId: router.query._id, }, }); useEffect(() => { setIsEdit(true); }, [isEdit]); return loading ? "" : ; } 1. toast ui에 디폴트 밸류가 안 들어옴 2. form 써서 data보내니까 수정하지 않은 부분은 빈 값이 되어서 수정이 됨 두 가지 문제가 있었는데..

220622 프론트엔드 부트캠프 43일차 : Memoization, @media(반응형 페이지), 토스트 에디터

오늘은 수요일 알고리즘 테스트가 있어요 오늘부터 이틀 동안은 최적화에 대해 배웁니다! 서버사이드 렌더링은 무슨 소린가? 도대체 이게 무슨 소리야,, 이것도 배울 거임! 자꾸 새로 만들지 말고, 메모해 놓는 거 어때? → Memoization 내 사이트 모바일에서도 보고 싶어! @media MEMOIZATION 부모, 자식 간의 관계로 만들어서 진행 폴더 안에 container랑 presenter를 만들어서 했는데, 32-01-memoization/container 입력하면 접속 가능하다! render시 변수가 새로 만들어지는 상황 함수가 새로 만들어지는 상황 부모 리렌더시, 자식도 리렌더되는 상황 const aaa = Math.random(); console.log(aaa); 콘솔에 찍어보면 state가..

220621 프론트엔드 부트캠프 42일차 : 이미지 업로드 최적화, promise-all, lazyload, preload

기존 이미지 업로드 방식은 비효율적이야! → FileReader Async-await를 for문에서 쓰면 안된다고? → Promise.all 이미지를 내가 원할 때 불러올 수 있대! → LazyLoad, PreLoad 이미지에 관한 것들을 배웠다! 이미지 업로드 최적화하기! 그리고 모아서 보낼 때 어떻게 기다리는지! 그리고 이미지를 불러오는 페이지에서 어떻게 이미지를 가져오는지! 이미지 업로드 _ 업로드 최적화 1. 이미지 업로드 해놓고 게시글 등록 안 하고 뒤로가기를 눌렀다, 그럼 스토리지엔 파일 저장되어있지? 이게 쌓이고 쌓여! 찌꺼기... 회사 입장에선 손해! 2. 파일 올리고 다운로드 URL 받아와서 그걸 보여주는거라 이미지 미리보기가 늦게 뜬다. 미리보기는 빨리 볼 수 없어?! 그래서 새로운 방..

220615 프론트엔드 부트캠프 36일차 : 웹 에디터(wysiwyg), XSS, OWASP, Hydration

오늘은 좀 신기한 걸 배웠다! 데려와서 넣기만 하면 갑자기 에디터가 생기는 라이브러리랑 해킹 공격? 해보기! 자리 바꾸니까 신기하게 하나도 안 졸려...뭘까 대체 웹 에디터 wysiwyg (위지위그, what you see is what you get) 유명한 것 세 개 1. react-draft-wysiwyg 2. https://www.npmjs.com/package/react-quill 3. toast-ui-editors - 노션처럼 꾸밀 수 있음, 국내에서 만든 괜찮은 라이브러리! 수업에서는 리액트 퀼을 사용한다. 리액트 퀼의 onChange는 HTML의 onChange가 아니다. 그래서 event.target.value로 받지 않고, 그냥 함수 인자로 value를 받으면 된다. ReferenceE..

react custom hook

import { withAuth } from "../../../src/components/commons/hocs/withAuth"; import MyPageContainer from "../../../src/components/units/user/mypage/UserMypage.container"; export function MyPage() { return ; } export default withAuth(MyPage); Mypage 부분, HOC (MyPage를 withAuth의 인자로 주고 그 return을 export함) 이걸 커스텀훅을 사용하는 방식으로 바꿀건데, page가 아니라 container에서 작업하기로 했다. import { useAuth } from "../../../commons/..