본문 바로가기

React
15

context API와 zustand를 같이 쓴 이유 면접을 봤을때 항상 단골 질문이였다.상태관리를 context API랑 zustand를 같이 사용하셨는데 이유가 무엇인가요?라는 질문을 받았는데 면접때만 준비해가고 알던것도 까먹는 나는대답은 했지만 되게 아쉽고,,, 아쉬운,,, 답변만 했다. 하하!결과는 탈락이다. 당연함 대답 밍숭맹숭하게 함. 최근 항해 99클럽 1일1아티클을 신청했는데 면접질문도 볼 수 있길래 정리 하고자 작성해본다!UI 상태 관리에서 어려움을 겪었던 경험이 있다면, 어떤 방식으로 구조를 개선하거나 상태를 관리했는지 설명해 주세요. 그 과정에서 적용한 성능 최적화 기법이나 고민한 점이 있다면 함께 설명해 주세요.이 질문이 내가 받은 질문과 관련이 있다고 느낀건 프로젝트를 진행하면서 상태관리하다 삽질한적도 많고 머리 터지는일도 많았기 때.. 2025. 4. 9.
리액트 suspense 왜 쓸까?? 프로젝트 진행 하면서 사용해본 suspense가 무엇인지, 왜 사용해야하는지 작성해보고자 한다!! Suspense? 이것.. 뭐예요?ReactSuspense는 컴포넌트의 렌더링을 일시중지하고 데이터 로딩을 기다릴 수 있게 해주는 React의 기능이다.React16.6부터 도입된 기능으로, 컴포넌트가 렌더링 되기 전에 데이터 로딩을 기다릴 수 있게 해줌으로써 데이터 로딩중에도 자연스러운 사용자 경험을 유도할 수 있다.ReactSuspense를 사용하면 로딩 상태를 선언적으로 처리할 수 있어 코드의 가독성과 유지보수정을 높이고, 사용자 경험을 개선하는 효과를 얻을 수 있다!  lazy, SuspenseSuspense의 핵심 개념으론 lazy와 fallback이 있다 lazy는 동적 임포트를 통해 컴포넌트를 .. 2024. 12. 13.
React websocket을 이용한 1:1 채팅 만들기 엉엉 울면서 구현한 채팅 레지고. WebSocket이란??웹소켓은 웹 앱과 서버 간의 지속적인 연결을 제공하는 프로토콜이다. 이를 통해 서버와 클라이언트간에 양방향 통신이 가능해진다.HTTP와는 달리, 웹소켓 연결은 한 번 열린 후 계속 유지되므로, 서버나 클라이언트에서 언제든지 데이터를 전송할 수 있다. 이때 데이터는 패킷(packet) 형태로 전달되며, 전송은 커넥션 중간과 추가 HTTP 요청 없이 양방향으로 이뤄진다!이런 특징 때문에 웹소켓은 온라인 게임이나 주식트레이딩 시스템 같이 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 적합하다 사용하기webSocket 연결 const [messages, setMessages] = useState([]);const webSocket = useRef(nul.. 2024. 7. 10.
React 파일 이미지 최적화 하기 react-image-file-resizer 메인프로젝트를 통해서 이것저것 참 많이 써본것 같다.이번엔 이미지 파일 리사이저를 통해 이미지 최적화를 해보겠따. 이미지 리사이징이 왜 필요한가? 🤔이미지 용량이 큰 경우엔 서버와 DB에 부담을 줄 수 있고 프론트에서 이미지를 느리게 불러오기 때문에 이미지 용량이 크다면 서버와 DB에 부담을 줄이며 프론트에서 이미지를 빠르게 보여줄 수 있게 리사이징이 필수라고 나는 생각한다! 메인 프로젝트에서는 사진업로드가 많은 서비스이다 보니채팅에서는 굳이 용량이 크고 사이즈가 클 필요가없다는 생각이 들어 리사이징을 진행하기로 했다 react-image-file-resizer는 이미지 리사이징, 인코딩을 위해 사용한다. base64 혹은 blob으로 변환이 가능함base64 인코딩이 뭐유..?진짜 말 그대로 풀면 6.. 2024. 7. 10.
React Hook Form를 활용해 폼 관리 하기 + zod 이전 프로젝트에서는 formik과 yup이라는 유효성관리 라이브러리를 사용했는데이번에는 react hook form 그리고 zod를 사용해보았다. React Hook Form이란?Performant, flexible and extensible forms with easy-to-use validation.사용하기 쉬운 유효성 검사를 통해 성능이 우수하고 유연하며 확장 가능한 양식을 제공합니다. React Hook Form을 사용해서 폼 컴포넌트의 개발과 유지 보수를 용이하게 할 수 있다.React Hook Form을 사용하면 폼 컴포넌트의 상태 및 유효성 검사를 관리하는 데 필요한 코드 양을 대폭 줄일 수 있음폼 요소의 값이나 상태 변경에 대한 이벤트를 관리하기 위해 명시적인 이벤트 핸들러를 작성할 필요 .. 2024. 6. 21.
리액트로 OAuth 소셜로그인 구현하기(구글,네이버,카카오) 이전 프로젝트에서는 무작정 카카오소셜로그인 하나만 구현했엇는데 이번 기회에는 OAuth가 뭔지부터 공부하고자 작성해본다. ❓OAuth가 뭐야OAuth란 Open Authorization의 약자로, 인터넷 사용자들이 자신의 자격 증명(사용자 이름과 비밀번호)를 공유하지 않고도 웹 사이트나 애플리케이션이 사용자 정보를 접근할 수 있도록 하는 인증 프로토콜이다.제3자 애플리케이션 접근 허용사용자들이 자신의 소셜 미디어 계정(구글,페이스북 등)을 통해 다른 웹사이트나 애플리케이션에 로그인 할 때, 이를 가능하게 하는 것이 OAuth이다. 사용자는 자신의 자격증명을 공유하지 않고도 제3자 애플리케이션이 필요한 정보에 접근 할 수 있도록 승인한다. API  접근 권한 부여개발자들이 OAuth를 사용하여 다른 서비스.. 2024. 6. 10.
React-Query 사용하기 이전에 강의를 들으면서 강사님이 리액트 쿼리를 한번은 써보는게 좋다는 얘기를 하신적이 있었는데 한번 써봐야지 생각 해뒀다가이번 프로젝트를 통해 제대로 써보면서 공부하는 계기가 되었다.❓React-Query가 뭐야? 공식문서에는 다음과 같이 React-Query를 설명하고 있다.TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.T.. 2024. 6. 10.
리액트 랜딩페이지 제작하기 1일차 레퍼런스 수집 평소관심사는 아이돌이지만.. 요즘 자주 방문하는 무신사! 랜딩페이지를 만들기로 했다. 브랜드 쇼케이스 또는 매거진을 보면서 어떤걸 할까하다가 주우재 & 미주 어쩌고 매거진이 있길래 그걸로 선택함 사실 그냥 화보가 예뻐서 선택했다. 핀터레스트 심해어가 되어 찾은나의 레퍼들....... 처음엔 어두운 배경에 알록달록한걸 하고싶었으나 주제가 패션인지라 깔끔해야 될 것같아 이런 선이 많이 들어간 레퍼런스들을 찾았다. 기획은 디자인하면서 같이했음... 이건 이렇게 하면 좋을것같고~ 디자인 제작 나의 창작의 고통이 담긴.. 아트보드,, 내가 프론트를 하는건지 디자이너를 꿈꾸는건지,........ 프로젝트 공지 받고 반나절은 레퍼런스 찾고 새벽까지 디자인을 끝냈다 그냥. 얼른 끝내고싶었기때문. 2일차로.. 2024. 3. 22.
React-quill 사용해서 에디터 구현하기 * 구글링으로 들어오는.. 선생님들 시간을 아껴드리기 위하여...이 글은.. 여기저기 블로그 선생님들의 코드를 긁어와 완성된 코드만 있습니다요... 원리가 궁금하신분들은 뒤로가기 Plz.. 이번엔,, 과제가 아닌프로젝트로 ~!~ 다시 리액트 crud 앱을 구현해보기로했다 여전히 toast ui는 버전이 안맞아서 억지로 --force 명령어 사용해서 테스트 해봤는데간헐적으로 오류도 뜨고 다른 팀원이 풀 받고 install 할때 계속 오류 이슈가 있어서깔끔히 포기ui가 제일 예쁘고 좋앗는데,,, 왜 리액트 버전을 올려주실 생각이 없으신건가요... 이전에 사용한 md-editor는 이미지를 업로드하려면 url을 직접 작성해야하는 불편함이 있고 정보도 많이 부족해서 많은 사람들이 사용하는 라이브러리를 선택했다... 2024. 3. 14.
React 프로젝트 파이어 베이스로 배포하기 터미널에 npm install -g firebase-tools 설치가 되었다면 다시 터미널에 firebase login 입력 후 로그인해준다 로그인이 되ㅓㅇㅆ다면 뭐 woohoo!하면서 로그인 성공했다는 페이지가 뜸 npm run build로 리액트 앱 빌드 firebase init (파이어 베이스 시작) Hosting : Configure 어쩌고 방향키로 선택 -> 스페이스바 -> 엔터 5. 이미 프로젝트는 만들어져 있으니 첫번째꺼 선택 6. 배포할 프로젝트 선택 7. 호스팅할 폴더 선택 성공하면 깃허브 로그인하는 페이지가 뜸 -> 로그인 성공하면 woohoo! 하면서 로그인 성공창 뜸 8. 깃허브 유저 이름이랑 레포지토리 이름 작성 9. 10. 어느 브랜치에서 소스코드를 올렸을때 자동으로 배포되게 할.. 2024. 2. 1.
React 마크다운 에디터 구현하기 처음엔 Toast ui를 사용해서 에디터를 적용하려 했으나 버전이 자꾸 안맞는다고 튕겨서 다른 라이브러리를 적용하게 되었음 프로젝트 문제인건지 뭐가 문제인건지 도저히 알수없음,,, 23년 10월이면 최근 아니냐고요 ㅠㅠ 머슨 이렇게 쉬운 라이브러리가 다 있는지 사용하기 1. 설치 npm i @uiw/react-md-editor 2. import import MDEditor from '@uiw/react-md-editor'; 3.editor사용하기 *나는 이전에 작성한 메일보내기에 에디터를 사용해서 작성한 내용들이 들어가야 했는데 연결이 쉽지 않았다 그래서 그냥 textarea 추가해서 안보이게 해놓고 보냈음 그랬더니 메일에는 안녕하세요 이런식으로 간다.. 사용해주면! 이런식으로 잘 나온다. viewer .. 2024. 1. 9.
React Email JS로 메일 보내기 기본 설정 https://www.emailjs.com/ Send email directly from your code | EmailJS No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com 여기 회원가입 일단해주기 회원가입하고 로그인 하면 이런 화면이 뜬다 1. add new service 버튼 클릭 > 이메일 서비스에 연결할 폼 선택 2. 이메일 서비스 이름과 서비스 아이디 설정 나는 기본값 그대로 뒀는데 변경해도 된다그랫음 처음 만드는거면 create service버튼이 보일것 Create.. 2024. 1. 8.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바