전체 글

MVVM 아키텍쳐 디자인 패턴 MVVM은 Model - View - View Model의 약자로 애플리케이션의 비즈니스 로직과 사용자에게 보여주는 presentation UI를 분리하는 패턴이다. View 앱의 보여지는 UI View Model 앱의 비즈니스 로직을 담고있음 뷰와 모델 사이에서 뷰의 요청에 따라 로직을 실행 모델 데이터의 변화에 따라 뷰를 갱신 모델에 데이터를 요청, 데이터를 가공 Model 데이터를 처리 뷰모델에게 데이터를 응답 뷰 ui 컴포넌트이다. 상위 컴포넌트에서 props로 전달받은 상태에 따라서 화면이 동작한다. 사용자가 이벤트를 발생시키면 이벤트에 따른 데이터 변경을 뷰에서 바로 처리하지않고, 상위 컨테이너인 View Model 컨테이너에서 처리하도록 한다. interface..

데이터 구조 상태는 배열 타입이고, 배열의 요소는 각 object 객체이다. const initialState = [{id: '1', isDone: false }, {id: '2', isDone: false }, ...] 목표 위와 같은 데이터 구조를 가지고있는 전역 상태 state 배열에서 해당하는 요소를 먼저 찾고, isDone 속성을 바꾸고 싶다. redux toolkit을 사용해서 상태를 관리하는데, 배열 안 특정 요소의 속성 isDone을 유저가 누르는 checkbox 이벤트 값대로 바꿔야한다. UI 코드 유저가 체크하는 체크박스의 event.target.checked 값을 받아서 rtk 슬라이스로 dispatch하는 코드 export interface Todo { id: string; isDo..

원래 소문자로 시작했던 barChartSlice.ts 파일이름을 vscode에서 대문자로 BarChartSlice.ts 바꾸고, github의 원격저장소로 푸쉬했다. 하지만, 업데이트된 원격저장소에는 대문자로 바뀐 파일명이 반영이 안되어있었다. git은 대/소문자 구분을 하지 못한다. 따라서 파일 이름은 똑같지만 대/소문자만 변경해서 다시 원격저장소로 push 하는 경우, rename 해주는 명령어로 직접 파일이름을 수정해주어야 한다. 이때 쓰는 명령어? git mv mv는 move를 표현한 약자인데, 공식문서에 보면 move or rename a file, a directory라고 나온다. git mv 파일의 이름을 rename 해준다. git mv 파일이 위치해있는 디렉토리 위치를 이동시킨다. 그런데..

상황 d3 차트 라이브러리로 line 차트를 그리는데, 차트에 그려지는 value 값이 0일때는 라인 차트가 아예 나타나지 않고, 다른 값이 있을때는 차트가 그려지다가 0이 나오면 차트가 끊기는 이상한 현상이 있었다. Error: attribute d: Expected number, "M36.5,NaNL79.5,NaNL122…". 게다가 콘솔에는 이런 에러가 찍히고 있었다. 기존 import { line } from 'd3-shape'; const LineChart = ({bars, xScale, yScale}) => { const lineGenerator = line() .x((bar) => xScale(bar.data.indexValue) + bar.width / 2) .y((bar) => yScal..

나의 기술 블로그는 유입이 정말 없는 편이라 별로 재미가없어서 잘 안썼다… 🫠 그치만… 나중에 보면 내가 재밌으니까 써보는 첫출근 일기 벌써 첫 출근 한 주가 갔고 한번의 주말이 지나갔다. 시간 정말 빠르고 정신없고 여전히 몸과 마음이 적응중인 상태이다. ㅋㅋ 원래 첫출근하고 당일날 생각을 남겨두고싶은데 그 전날 걱정이 되어서인지 거의 잠을 깊게 못잤다… 그래서 첫째날 집에 좀비되서 와서 머리가 깨지는 줄.. 그래서 글 쓸 여유 없었고 지금도 사실 며칠째 잠을 깊게 잘 못자서 매우 피곤한 상태지만.. (약간 밤새서 새벽비행기 타고 온날 밤 느낌..) 그래도 지금 기록하지않으면 금방 또 느끼는 것들이 다 날라갈 것이므로 지금 기록해본다. 가보자고~~ 마지막으로 회사에 출근했던게 22년 1월이었으니까 퇴사하..

react 기본 자바스크립트로 만들어둔 todo app을 타입스크립트를 배우고 한번 마이그레이션 해보았다. 그런데 마이그레이션하면서 컴파일에서 에러 내주는 것들을 나름 이것저것 해보면서 빨간 줄 다 없앴다고 좋아했는데 실제로 켜보니 제대로 작동하질 않는 것....??? 이걸 디버깅 하는데도 시간을 얼마나 들였는지... ^^ 다음엔 실수하지 않기위해 기록해본다! 📌 문제 form 태그에 submit 이벤트를 등록해두어서 input을 작성하고 추가 버튼을 누르면 내용이 서버로 가고 화면 리스트에 추가가 되어야함. But, 자꾸 화면이 새로고침됨. 아무런 콘솔도 안보이고 그냥 완전 새로운 화면 이게 e.preventDefault()가 작동을 안해서 그런건지도 한참 이후에 깨달았다... 😂 form 태그 사용하..

hana@Hanaui-MacBookAir ~ % npm install -g typescript npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/typescript npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/typescript' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/typescript'] { npm ERR! errno: -13, npm ERR! code: 'EACCES',..

프로젝트를 하면서 가장 해결하기어려워서 애먹었던 부분이 있다. 바로 App.js의 useEffect 비동기요청의 실행순서 부분이다. 예상했던 실행순서에 따라 실행이되지않아 사용자 인가가 정보가 필요한 페이지 (ex 마이페이지)에서 새로고침시 데이터를 받아오지 못하는 이슈가 있었다. 프로젝트가 끝날때 까지도 해결이되지 않아 임시방편으로 해결해두고, 이후 리팩토링을 하면서도 그 이슈에 대해 여러가지를 찾아보고 적용해보았지만 쉽게 해결이 되지 않았다. 플젝이 끝나고 약 1달이 지난무렵.. 같이 개발했던 우리팀 수진님하고 디스코드로 근황주고 받다가 그 이슈에 대해 얘기하게되었고 그날 그 문제를 diggingg하다가 드디어...!!! 새벽 3시가 넘어서 문제가 해결되었다. 😭 정말 ... 이 문제를 해결하려고 u..