총 4주의 기간 동안 프론트엔드 4명, 백엔드 3명으로 프로젝트를 진행하였다. 처음으로 백엔드와 함께 협업을 하면서 배려하며 소통하는 방법, 백엔드와 협의해야 할 점들에 대해 배울 수 있었다. 기획부터 개발까지 진행하면서 어려웠던 점, 느낀 점들에 대해 정리하고자 한다. 📌서비스 소개 서비스 명: WuMo 해당 서비스는 가족, 친구와 함께 모임에 대해 일정을 만들어서 기록할 수 있는 서비스이다. 카톡방에서 약속, 모임에 대해 이야기할 때 모임 내용과 관련없는 이야기가 섞여서 필요한 장소나 정보에 대해 찾기가 어렵다고 느껴서 모임에 대한 내용을 정리하고 기록할 수 있는 서비스를 만들게 되었다. 📱배포 사이트: https://5yes-wumo.vercel.app/ 🛠️프로젝트 깃헙: https://githu..
📖오늘 배운 것 Redux :Prop Drolling을 해결하기 위한 라이브러리 리덕스에서 사용되는 키워드 액션 : 상태에 변화가 필요할 때 액션을 발생 액션 객체에는 type 필드가 필수적이다. 액션 생성함수 : 액션을 만드는 함수. 파라미터를 바아와서 액션 객체 형태로 만들어준다. export const addTask = (content: string): Action => { return { type: "ADD_TASK", payload: { id: v4(), content, complete: false, }, }; }; 리듀서 :변화를 일으키는 함수 현재 상태, 전달받은 액션 두 가지 파라미터를 받아서 새로운 상태를 만들어 반환한다. useReducer를 사용하는 것과 똑같은 형태를 가지고 있다. ..
📖오늘 배운 것 forwardRef :상위 컴포넌트에서 전달받은 ref를 하위 컴포넌트로 전달하는 역할 useImperativeHandle :함수형 컴포넌트에서 forwardRef와 함께 사용할 때 부모 컴포넌트에서 자식 컴포넌트 ref에 설정한 메서드를 사용할 수 있다. 부모 컴포넌트에서 ref를 설정해서 자식에게 보낸다. function Parent() { const inputRef = useRef(); return ( inputRef.current.focus()}>Focus inputRef.current.clear()}>Clear ); } 자식 컴포넌트에서 부모에서 내려받은 ref를 받아서 useImperativeHandle을 이용해서 메서드를 설정할 수 있다. 그러면 부모컴포넌트에서는 이 로직에 ..
📖오늘 배운 것 Portals : 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법 첫 번째 인자는 렌더링 할 수 있는 React 자식을, 두번째 인자로는 자식을 렌더링할 DOM엘리먼트를 받는다. const el = useMemo(() => document.createElement("div"), []); useEffect(() => { document.body.appendChild(el); return () => { document.body.removeChild(el); }; }); return ReactDOM.createPortal( {children} ); useReducer : 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. reducer는 현재 ..
ResizeObserver :요소의 크기 변화를 감지하며 크기 변화가 일어날 때 발생할 수 있는 무한 콜백 루프와 순환 종속성을 방지한다. resize 이벤트와의 차이점은 resize는 브라우저의 크기를 기준으로 하는 반면 ResizeObserver의 경우 브라우저는 물론 특정 요소의 크기 변화를 감지할 수 있다. 또한 resize의 경우 변경도니 크기를 구하기 위해 getBoundingClintRect()메서드를 사용해야 했지만 ResizeObserver는 변경된 크기를 제공한다. new ResizeObserver로 생성하고 콜백함수로 크기가 변경됐을 때 실행할 함수를 넘겨준다. entry.contentRect : 요소의 크기, 위치 정보 등을 제공한다. ResizeObserver.observe() :..
📖오늘 배운 것 requestAnimationFrame() 애니메이션을 향상시킬 수 있는 방법 중 하나. 렌더링 최적화에도 사용될 수 있다. 특징 백그라운드 동작 및 비활성화시 중지 최대 1ms로 제한되며 1초에 60번 동작(프레임 비율을 모니터의 주사율에 맞추어서 실행) 다수의 애니메이션에도 각각 타이머 값을 상성 및 참조하지 않고 내부의 동일한 타이머 참조 이 함수는 스크롤 이벤트 최적화에 사용될 수 있는데 만약 스크롤 이벤트를 그냥 실행한다면 스크롤을 할 때마다 계속해서 이벤트가 실행될 수 있다. 이 때 최적화하는 방법으로는 쓰로틀링, 디바운스가 있고 그 외의 방법으로 requestAnimationFrame를 사용하는 방법이 있다. requestAnimationFrame 을 사용하면 브라우저가 렌더..
📖오늘 배운 것 new Image : 새로운 HTMLImageElement 인스턴스를 만든다. document.createElement('img')와 동일하게 작동한다. 이벤트 핸들러 onAbort: 사용자가 이미지 로딩을 중간에 멈출 때 발생하는 이벤트 onError: 이미지 로딩 중 에러가 발생했을 때 onLoad: 이미지가 성공적으로 로딩되었을 때 const [loaded, setLoaded] = useState(false); useEffect(() => { const image = new Image(); image.src = src; image.onload = () => setLoaded(true); }, [src]); Array.from :유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운..
📖오늘 배운 것 navigator.clipboard.writeText() 텍스트를 클립보드에 복사할 수 있는 메서드이다. 매개변수로 복사할 문자열을 받는다. navigator.clipboard.writeText("복사할 텍스트") Context :단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. context는 props drilling을 해결하기 위한 하나의 방법이다. props drilling이란 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하기 위해 오직 props를 하위 컴포넌트로 전달하는 용도로 컴포넌트들이 사용되는 과정을 말한다. 이때 Context를 사용하면 중간 컴포넌트들을 거치지 않고 바로 원하는 컴포넌트에서 데이터를 전달받을 수 있다..
어느새 데브코스 2개월이 지났다! 한 달 차 회고를 쓴 게 어제인 거 같은데 벌써 2개월이 지났다니... 할 것도 많았고 아파서 응급실도 갔다 오고.. 이래 저래 일이 많았어서 시간이 더 빠르게 느껴졌던 것 같다. 🧡6주차(2022.11.22 - 2022.11.25) 강의 바닐라 자바스크립트 강의를 마무리 하고 css로 들어가는 기간이었다. 바닐라 자바스크립트 강의도 워낙 길고 소화해야 할 내용이 많았고, 프로젝트 과제 등등이 있었기 때문에 휴~ css는 좀 나을까? 했는데...했..는..데.. 나에게 남은 건 더 길고 긴 강의 시간뿐이었다... CSS 심화와 SCSS 파트가 진행되면서 CSS는 그래도 아는 내용이 많았지만 SCSS는 처음 다뤄보는 부분이었다. 하지만 CSS 기반이기 때문에 그렇게 어렵게..
어느새! 1차 단위기간이 끝나고 2차 단위기간이 시작되었다. 어찌 시간이 이리 빠른지... 데브코스 면접 본다고 덜덜 떨던 때가 엊그제 같은데 벌써 한 달이라는 시간이 흐르고 첫 번째 프로젝트로 끝나버렸다! 모든 지 적당히 하자가 모토인 나는... 데브코스도 나름 적당히 보내고 있는 것 같다(? 주차별 회고를 써서 한 달 회고는 어떻게 진행하면 좋을까 고민하면서 이전 회고글을 보다가 이전에 썼던 주차별 회고에서의 감상과 어떤 게 달라졌는지! 기록하면 좋을 것 같다는 생각이 들었다. 1주 차 강의 1주 차는 아무래도 적응기간이었기 때문에 강의 위주(+과제)로 진행됐었다. 1주 차 회고를 다시 보니 확실히 데브코스라는 스케줄에 적응하는 데 바빴고 잘할 수 있을까라는 불안이 있었던 것 같다. 조금은 낯설고 어..
