전체 글
JS로 React 흉내내기 스터디 회고
블로그 이전 하였습니다. JS로 React 흉내내기 스터디 회고 꼭 한번쯤은 해보고싶었던 js로 React 흉내내기 yoon-hae-min.github.io 기존 글 JS로 React를 만든 완성품 GitHub - Yoon-Hae-Min/create-react-with-vanilla-js-study: 바닐라 JS를 사용해서 리엑트를 만들어보는 스터디 바닐라 JS를 사용해서 리엑트를 만들어보는 스터디. Contribute to Yoon-Hae-Min/create-react-with-vanilla-js-study development by creating an account on GitHub. github.com 스터디 시작 계기 나는 React개발자가 아닌 프론트엔드 개발자이다 즉 내가 알고 있는 Reac..
프로그라피 - 기획
블로그 이전하였습니다. 프로그라피 - 기획 프로그라피 발표를 토대로 작성하는 프로젝트를 0부터 기획해보기 yoon-hae-min.github.io 기존 글 본 글은 프로그라피 초반에 기획단계에 관련된 글로 기획을 해보지 않은 필자의 밑바닥부터 고민한 경험입니다. 어떤 방 식으로 흘러갔는지에 초점을 두어서 편안한 마음으로 읽어주시면 감사하겠습니다. 서비스 발표 기존의 사이드 프로젝트를 진행하면서 아쉬웠던 점이 개발 기간이 끝나면 팀이 해체된다는 것이었다. 따라서 이번 프로젝트는 개발 기간이 끝나고도 계속 이어질 수 있는 프로젝트를 하길 원했었고 그러기 위해서는 모두가 즐겁고 실제 유저가 있는 서비스를 개발하고자 하는 욕구가 생겼다. 이에 프로그라피에서 이 서비스 자체에 대한 세션과 팀 내의 회의를 통해 기..
리액트 노드버드 NextJs 13 공모전 후기
블로그 이전하였습니다. 리액트 노드버드 NextJs 13 공모전 후기 제로초 스쿨의 첫 공모전인 리액트 노드버드리뉴얼 하기!! yoon-hae-min.github.io 기존 글 NextJs를 다시 공부하던 중 제로초스쿨슬랙에서 다음과 같이 리액트노드버드 공모전이 열렸었다. 백엔드는 강의 교안을 사용하고 프론트엔드만 만들어서 붙이는 것이었다. '어? 돈도 받고 공부도하고 좋은 거 아니야???' 마침 NextJs를 제외하고는 한 번씩 사용해 본 것이기 때문에 빠르게 후루룩 만들어보고자 시작해 보았다. Repository GitHub - ZeroCho/react-nodebird-next13 Contribute to ZeroCho/react-nodebird-next13 development by creating..
React-Query vs SWR
블로그 이전하였습니다. React-Query vs SWR 비슷하지만 다른 react-query와 swr를 컨셉을 이해하며 비교해보자 yoon-hae-min.github.io 기존 글 서론 둘이 비교하기 앞서 왜 이런 라이브러리를 쓰는지부터 보고 가자 React에서 서버로부터 데이터를 가져오거나 전송해야할때 fetch Api를 사용하거나 axios를 사용하고는 한다. 이를 사용해서 충분히 서버와 데이터를 주고받을 수 있으나 규모가 커지면서 데이터 처리, 에러핸들링과 같은 부가적인 요인들이 많아지게 된다. 직접 구현해도 되지만 라이브러리를 이용해서 좀 더 쉽게 처리할 수 있다. 공통점 1. 데이터 요청 및 관리를 하기 쉽게 만들어 준다. 2. 캐시를 통해 api 호출을 줄이고 성능(UX)를 향상할 수 있다...
Tailwind CSS vs Styled-component
블로그 이전하였습니다. Tailwind CSS vs Styled-component 요즘 뜨고있는 Tailwind CSS와 너무나도 익숙한 Styled-component를 비교해보자 yoon-hae-min.github.io 기존 글 기존에 css-in-js 형식의 emotion과 styled-component를 자주 사용했다. 다만 사용하면서 변수명 짓기와 해당 클래스명을 찾으려면 파일을 띄워놓고 찾고 비교하는 등의 번거로움이 있었고 tailwind css는 이를 고려해서 만들었다기에 slack 클론 코딩에 적용하면서 도입해 보기로 하였다. 첫인상 처음 공식문서를 딱 펼치자마자 "으음... 이거 완전 부트스트랩 아니야??" 웹개발 입문전에 부트스트랩 썼던 기억이 새록새록 떠올리는 문법들로 가득 차있었다. ..
프로그라피 React 8기에 합격하며
블로그 이전하였습니다. 프로그라피 React 8기에 합격하며 처음으로 합격해본 직장인과 함께해보는 개발동아리 yoon-hae-min.github.io 기존 글 지원동기 6개월 전부터 it관련 연합동아리에 참여하고 싶다는 생각은 있었지만 딱히 동기가 없었고 간절하지도 않았기 때문에 그냥 서류를 찔러 넣는 식으로 여기저기 넣었었다. 결과는 모두 서류탈락이었고 it연합동아리 지원을 점점 포기하고 있었다. 하지만 원티드 프리온보딩 프론트엔드에 참여하면서 네트워킹의 중요성을 깨닫고 연합동아리에 꼭 들어가야겠다는 동기가 생겼었다 조금 늦은 프리온보딩 프론트엔드 챌린지 1월 회고록 기간 2023.01.09 ~ 2023.01.20 (1회에 3시간 같은 4시간 수업을 4번 진행) 시작 때는 2022년 12월경 이 정도면..
React Following Follower Modal창 동기화하기
블로그 이전하였습니다. React Following Follower Modal창 동기화 react-query의 queryClient를 이용해서 팔로우 팔로워 모달창을 동기화 시켜보자 yoon-hae-min.github.io 기존 글 진행 동기 Breaking프로젝트를 진행하면서 프로필 팔로잉 팔로워 모달창에서 유저를 팔로잉 할시에 반대편 모달창에 그 값이 적용되지 않았고 이를 해결하기 위해서 Profile Modal에 state로 만들어 두 개의 Modal을 묶어서 처리했는데 이보다 좋은 방법이 없을까 고민하던 중 optimistic update를 배우면서 이와 비슷하게 직접 queryCache에 접근해서 해결해 보자고 생각하였다. 리펙토링 시리즈 인피니티 스크롤에서 데이터가 많아지면 프레임이 떨어짐 마..
조금 늦은 프리온보딩 프론트엔드 챌린지 1월 회고록
블로그 이전하였습니다. 프리온보딩 프론트엔드 챌린지 1월 회고록 원티드 프리온보딩 프론트엔드 챌린지 1월을 들으면서 느낀점 yoon-hae-min.github.io 기존 글 기간 2023.01.09 ~ 2023.01.20 (1회에 3시간 같은 4시간 수업을 4번 진행) 시작 때는 2022년 12월경 이 정도면 React로 웹좀 만들어 봤고 나름 코드에 대해서 자신감이 붙었을때 과연 내가 작성한 코드가 실제로 어느 위치에 있는지 궁금해졌었다. 내가 잘하고 있는것인지 아니면 보완해야 될 부분이 있을지를 기대하고 원티드 프리온보딩 프론트엔드 챌린지 1월에 참여하였다. 사전과제 GitHub - starkoora/wanted-pre-onboarding-challenge-fe-1-api Contribute to s..
React 인피니티 스크롤 최적화 해보기
블로그 이전하였습니다. React 인피니티 스크롤 최적화 해보기 yoon-hae-min.github.io 기존 글 진행 동기 Breaking프로젝트를 진행하면서 인피니티 스크롤 부분이 한계점이 있어서 이를 해결해 보고자 최적화 프로젝트를 진행하였다 첫 리펙토링은 인피니티 스크롤 관련 부분을 리펙토링 하는 것이었다. 리펙토링 시리즈 인피니티 스크롤에서 데이터가 많아지면 프레임이 떨어짐 (현재 글) 마이페이지 팔로우 팔로워 modal창에서 데이터 동기화 방법수정 필요 관련 PR 인피니티 스크롤 최적화하기 by Yoon-Hae-Min · Pull Request #1 · Yoon-Hae-Min/breaking-frontend 📝 관련 블로그 포스트 https://throwfe.tistory.com/17 📌 추가..
React query를 사용하면 전역 상태가 필요없다?
블로그 이전하였습니다. React Query를 사용하면 전역 상태가 필요없다? React Query를 사용하면서 생긴 오해와 진실 yoon-hae-min.github.io 기존 글 처음 React query를 사용하면서 잘못된 개념을 하나 가지고 갔었다. React-query를 사용하면 전역 상태가 필요 없다는 것이었다. 애초에 개념이 다른 말인데 왜 이렇게 생각했는지에 대해서 풀어보고자 한다. 프론트엔드 개발에서 꼭 필수적인 것이 state 즉 상태이다. 상태를 주관적으로 정의를 내려본다면 사용자와 상호작용하기 위해 동적으로 변하는 데이터를 말할 수 있다. 이 상태에 따라 UI를 적절하게 보여주도록 설정하는 것이 상태 관리인 것이다. 하지만 상태가 복잡해지고 다양화 됨에 따라 하나의 상태가 영향을 미치..