프론트엔드

[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..

프론트엔드에서 검색을 해보자~~~!!!

백엔드에서 search: 인수 받는 게 없을 때 프론트엔드에서만 검색을 해보는 법 !~~~~~~~!!!!!!!!!! ELK하면 비싸대욤 const [searchedData, setSearchedData] = useState([]); const onChangeSearchInput = (event) => { console.log(event.target.value); const filtered = props.themesAll.fetchThemesAll.filter((themeList) => { return themeList.title.includes(event.target.value); }); setSearchedData(filtered); }; (쓰로틀링이나 디바운싱이 필요할 것 같다.) 1. 이렇게 함수를..

프론트엔드 부트캠프 77일차, 팀 프로젝트(19) 예약한 자에게만 댓글을 허용하노라

내가 예약한 테마가 아니면 테마 후기를 달 수 없게 하자! const [isReviewer, setIsReviewer] = useState(false); useEffect(() => { data?.fetchReservationsUser.filter( (ele: IFetchReservationData) => ele.theme_menu.theme?.id === router.query.id ).length >= 1 ? setIsReviewer(true) : setIsReviewer(false); }, []); isReviewer 라는 state 변수를 하나 선언했다. reviewer가 맞으면 댓글 달 수 있게 할거고, 아니면 댓글을 못 달게 할 것이다. 댓글을 못 달게 하는 방법은 여러가지가 있을 것 같다. ..

프론트엔트 부트캠프 72일차, 팀 프로젝트(18) 좋아요 디바운스, 포토하임, 조명, 자전거

어제는 블로그를 쓰지 않았다! 사실 한 것도 별로 없고 일찍 퇴근했기 때문이다,,, Room -> room 변경! const getDebounce = _.debounce(async () => { const result = await createLikeTheme({ variables: { themeId: router.query.id }, }); setLove(result.data?.createLikeTheme); }, 500); const onClickLove = async () => { getDebounce(); }; 좋아요 0.5초에 한 번만 눌리게 하기! 디바운싱~ useEffect(() => { data?.fetchTheme.likeUsers.filter( (el: IFetchThemeData) =..

프론트엔드 부트캠프 54일차, 팀 프로젝트(1)

화요일 저녁에 팀이 발표됐고, 수요일날 첫 만남부터 그 다음날 주제 정하기... 등 여러번 회의를 거쳤다. 특히 프론트단 안에선 회의를 꽤 많이 했다. 와이어프레임, 플로우차트 전에 기획부분에서 은근히 정해야할 게 많았다. 와이어 프레임은 따로 기획자분에게 맡겼고, 그거랑 회의했던 걸 토대로 플로우 차트를 짰다. 처음이라 재밌기도 했지만 어렵다는 느낌이 더 강했다. 그리고 이제 피그마에 작업을 해야했는데, 피그마 작업을 위해서 또 디자이너 분을 구해야 했다. 내가 피그마를 다루니 그저 조금 복잡해진 파워포인트였다... 이외로 깃, 보일러 플레이트, 파일/변수명 정하는 규칙 등 세세한 걸 정해야했다. 깃은 따로 레파지토리를 만들어서 연습해보기도 했다. 변수명 정하는 규칙은 camel케이스, 파일명 등은 P..

도커(Docker) 고래 모양 그거

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

220624 프론트엔드 부트캠프 45일차 🌺기말고사🌺 파이팅🫶

10시 20분 화장실 갔다오고 깃허브 연결까지 ! 45분...이제야 app.tsx 설정 끝내고 레이아웃 들어감 왜..캡쳐해놓은거지? 기억이 안 남.... 근데 며칠전에 ㅇ호님한테 물어본거 얻어걸린 느낌...?!?!?!? 귀여운 병아리가 보여! 더보기 10시부터 시험봤으니까 약 11시간 정도..?째 하고 있네. 생각보다 진도가 많이 안 나간다. 학원에선 9시30분까지 하다가 집에와서 밥 먹고 씻었다. 솔직히 20분 정도는 식빵 먹으면서 쉬었다. 배고프고 계ㅔㅔㅔ속 하니까 너무 지쳤었다. 그리고 내가 css에 약하다는 걸 처음으로? 느꼈다... ㅠㅠ ㅠㅠ ㅠㅠ css가 재미없는 것까진 아닌데, 막 예전처럼 엄청 즐겁게 하질 못한다... 내 맘대로 안되는게 답답해 아직 여러 속성에 대해서 이해가 부족한 것 같..

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

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

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

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

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..