능히 해낼 수 있다

✍️✍️✍️ 위 글은 작성자의 개인적인 경험이니 가볍게 읽어주시길 바랍니다. 모든 포지션이 하나의 서비스를 만들어 한 사이클을 돌려보는 30일짜리 프로젝트를 진행하게 되었다. UX/UI를 제외한 포지션당 4명의 인원이 참여해 총 15명의 인원이 참여하는 나의 경험 중 대규모 프로젝트인 만큼, 포지션마다 리더가 있었으면 좋겠다는 PL님의 말씀에 따라 싱크업 미팅 때 나는 프론트엔드 리더(이하 FE리더)가 되었다. 1. 타 포지션과 미팅 TeamSMASH 개발이 한창이던 5월 중순, 모든 파트팀원들이 처음 만나는 싱크업 미팅이 진행 됐었다. 당시 첫 백엔드(이하 BE)와의 협업이었기 때문에 소통하는 부분에 있어 정신이 없는 상황이었다. 그래서그런지 첫 미팅이 스트레스로 다가왔었다(한꺼번에 여러정보를 정리해야..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). ✍️✍️✍️ 위 글은 작성자의 개인적인 경험이니 가볍게 읽어주시길 바랍니다. 프로젝트 관련글을 두달만에 작성하게 되었다. 사실 3월과 4월에 리액트 관련 토이플젝을 진행하긴 했었지만, 당시 나의 리액트 이해도가 글을 쓰고있는 현재 시점보다 좋지 못했다. 때문에 3월에 진행했던 개인 토이플젝의 완성도와 4월에 진행했던 팀 토이프로젝트에서의 기여도가 높지 못해 회고글을 작성하기가 민망한 관계로, 우선 최적화를 진행해보고 난 후에 후기 정도의 글로 올해 안에 작성해 보는 것이 목표로 하고 보름간의 프로젝트에 대한 글을 시작 해 보겠다. 0. 시작 5월엔 미니 프로젝트를 진행하게 되었는데, 근태관리 서비스를 만들..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 현재 FE 네 분과 BE 네 분이 함께하는 미니 프로젝트를 진행 중 이다. 프로젝트에서 결정해야 할 여러가지 중 하나인 개발 환경설정하기를 진행 중 zustand와 react-query를 사용하는 부분에 대한 이야기를 하기 위해 각 라이브러리의 장단점과 사용하게 되는 이유 등을 살짝 적어보려 한다. zustand와 react-query를 알아보기전에 우선 client state와 server state 의 개념의 차이를 알아야 한다. client state - 클라이언트 상태 웹 애플리케이션에서 브라우저 측에서 유지되는 상태를 의미한다. 브라우저는 사용자 인터페이스를 렌더링하고 사용자의 입력 및 이벤트를 ..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 가령 데이터가 여러개 있는 경우엔 react에선 어떤 메소드를 사용해야할까? 그리고 이 데이터를 나열해야하는 상황에선 어떻게 해야할까? 물론 하나씩 뽑아서 쓰는 방법도 있겠지만 굉장히 비효율적이다. 때문에 JS에선 for문을 사용해 데이터 나열 시 사용하기도한다. 하지만 react에서는 map이란 메소드를 사용하는데, 이를 어떻게 사용하는지 예시와 함께 기록해 두려한다. 예시. 게시판 만들어보기 우선 코드파일은 전체를 보여줄 App.jsx, 글을 써서 저장하는 것이 아닌 임의로 게시글 데이터를 저장할 articleData.js 이러한 데이터 내용을 보여줄 Board.jsx로 나눠 작성하도록 한다. 우선 a..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 개념 이벤트 버블링(event bubbling)이란, 이벤트 위임의 작동메커니즘으로, 한 요소에 이벤트 발생 시 할당된 핸들러가 동작하고, 이어서 부모요소 핸들러가 동작, 동작 동작.... 해서 가장 최상단의 조상요소를 만날 때까지 반복되는 것인데, 리액트에서도 마찬가지로 이벤트 버블링이 발생한다. 예시 import React from 'react' function Bubble() { return ( alert('나는 부모태그입니다')}> 부모태그입니다 alert('나는 p 자식태그입니다')}> p자식태그입니다. ) } export default Bubble 여기서 자식캐그인 p를 클릭하게되면, 부모인 d..