728x90

[Front-end] 개발자 공부 93

[개발 공부 43일차] JS 자료구조 | 예문 & 용도

코드를 작성하는 데 있어서 어려움을 느끼는 이유를 좀 더 곰곰이 생각하다가 자료구조에 대해서 더 명확하게 알고, 또 정리해 두는 게 필요하겠다 싶어서 오늘은 포함해 이번 주말까지는 자바스크립트 자료구조에 대해서 공부할 생각이다. 1. JavaScript 주요 자료구조 2. 각 자료구조의 예문 & 용도 3. 금일 소감 1. JavaScript 주요 자료구조 1) 배열(Array) : 연속적인 메모리 공간에 동일한 타입의 데이터를 순서대로 저장 인덱스를 사용해 데이터에 접근 가능 다양한 메서드(push, pop, shift, unshift, slice, splice 등)를 통해 배열 조작 가능 2) 객체(Object) : 키(key)와 값(value)의 쌍으로 데이터를 저장 유연한 데이터 구조를..

[개발 공부 42일차] Redux-Toolkit, Redux Error

오늘은 다소 짧은 포스팅이 될 것 같다. 과제 하고 하루 종일 코드 짜느라 개념이나 다른 걸 공부할 여유가 없었다. 1. [plugin:vite:import-analysis] Missing "./modules/letters" specifier in "redux" package 2. Uncaught TypeError: Cannot read properties of undefined (reading 'filter') 3. 금일 소감 1. [plugin:vite:import-analysis] Missing "./modules/letters" specifier in "redux" package 이번 과제에선 타인의 코드를 읽는 능력도 함께 길러보자 하는 생각으로, 어려운 길이 되겠지만... 내 코드..

[개발 공부 41일차] Thunk(Redux 미들웨어), Custom Hook

1. [Redux 미들웨어] Thunk 2. Custom Hook (커스텀 훅) 3. 금일 소감 1. [Redux 미들웨어] Thunk : Dispatch를 할 때, 객체가 아닌 함수를 Dispatch 할 수 있게 됨 Dispatch(객체)가 아니라 Dispatch(함수)를 할 수 있게 되는 것! => 중간에 하고자 하는 작업을 함수를 통해 넣을 수도 있고 그것이 중간에 실행되는 것 [중요] '함수'를 Dispatch 할 수 있게 해줌! 액션이 리듀서로 전달되기 전, 중간에 어떤 작업 더 할 수 있음 Dispatch 하면 Action이 reducer로 전달되고, reducer는 새로운 state를 반환하는 과정에서 미들웨어를 사용하면, 하고 싶은 작업들을 넣어서 할 수 있음 [사용 이유] :..

[개발 공부 40일차] ...(spread 연산자), Compile Error

1. [JSONPlaceholder] setState & spread 연산자 쓰임 이유 2. Uncaught TypeError: Cannot read properties of null (reading 'map') 3. Failed to load resource: net::ERR_CONNECTION_REFUSED 4. Uncaught (in promise) ReferenceError: process is not defined 5. 컴파일 에러(Compile Error) & 런타임 에러(Runtime Error) 6. 금일 소감 1. [JSONPlaceholder] setState & spread 연산자 쓰임 이유 JSONPlaceholder를 복습하다가 위 사진에 하이라이트 처리한 부분이 이해..

[개발 공부 39일차] Redux 작동 체계 | 데이터, 함수, Custom Hooks

오늘 팀 배정이 다시 됐다. 다행이다. 팀이 바뀔 때마다 기여 가능한 인원이 한 명씩 줄어서 이번 팀에서는 '혼자 다 해야 하는 거 아냐??' 했는데 걱정하지 않았어도 좋았을 팀원분들로 배정이 되었다. 1. Vite UI가 로드되지 않음 2. 데이터, 함수 그리고 Custom Hooks ① Redux, Action, Dispatch ② 함수를 작성할 때 고려해야 할 점 3가지 3. 금일 소감 1. Vite UI가 로드되지 않음 와 진짜 Vite 갑자기 로드가 안 되길래 정말 너무 조마조마했다. 이러면 공부 하나도 못 하는데 어쩌나 싶었다. 그리고 강의에서 나온 코드 그대로 작성했는데 안 되길래 대체 뭐가 문젠가 싶은 마음이었다. 에러 메시지라도 보고 싶은데 개발자도구를 사용하지 못 하니 정말..

[개발 공부 38일차] 프로젝트 발표 완료 | 협업 시스템 정리

햐 드디어 News Feed 프로젝트가 끝났다. 14시부터 발표 시작인데 발표 순서 룰렛 돌린 결과, 내가 첫 번째 발표라 기뻤다. 나중에 할수록 순번 기다리면서 지치고 또 다른 팀 발표 내용과 피드백이 머리에 잘 안 들어오기 때문이다. 이번에도 운이 좋았던 나 1. 우리 팀 발표 Feedback 내용 2. 프로젝트 관리 및 협업 시스템 개념 정리 ① 업무분류 체계(Work breakdown structure, WBS) ② 업무 분류 체계의 2가지 유형 ③ 칸반 보드 ④ 프로젝트 매니저 3. 금일 소감 및 KPT 회고 1. 우리 팀 발표 Feedback 내용 [칭찬] 큰 글자로 설정한 것 좋고, 취소 버튼 클릭 시 내용이 초기화되는 불상사가 발생할 수 있는데 그것을 미연에 방지함으로써 UX적..

[개발 공부 37일차] 프로젝트 완성! 발표 직전날

1. CSS 수정해서 진짜 완성된 모습 2. 금일 소감 1. CSS 수정해서 진짜 완성된 모습 최최최종이다. 기능에만 일단 집중을 하느라고 어제 올린 게시글처럼 CSS가 여러모로 뭉개져있어서 새벽에 잠 안 자고 총 여섯 페이지 모두 CSS를 수정했다. 그러니 그냥저냥 볼 만한 정도로는 됐다. 오늘은 정오까지 최종 완성된 코드와 시연 영상을 제출해야 해서 잠이고 뭐고 일단 내는 게 중요해서 끝까지 보완하고 수정할 부분 하고 제출했다. 그러고 한 3시간 정도 자고 PPT 준비하고. 시연 영상이 마음에 들지 않아서 다시 촬영했다. 귀여운 아바타 넣어서 하려고 했는데, 귀여운 아바타로 화면 녹화하면 자꾸 저장이 안 돼서 그냥 정장 입은 아바타로 바꿔서 촬영했다. 아쉽다..... PPT 표지는 위와 ..

[개발 공부 36일차] Devtiny Merge | News Feed

1. 내가 구현한 페이지 및 기능2. [Error]  missing in props validation     - props의 타입 검증 방법3. 깨달은 핵심 포인트   (1) Merge   (2) 기획 및 설계, 와이어프레임의 중요성   (3) 완성된 코드를 다른 데에도 저장해두자4. 금일 소감   1. 내가 구현한 페이지 및 기능  총 세 페이지를 맡았다. My Page, Detail Page, Write Page다.CRUD랑, 이미지 업로드, 로그인 된 정보를 가지고 글을 다르게 보여주는 기능 등을 구현하였다. 메인 페이지랑 마이 페이지가 연결되는 부분이 있다 보니 기능의 일부는 안 되는 것도 있었다. 원래 더 일찍 주말에 Merge 해서 기능 완벽히 완성시키고 필수 기능 마무리 작업까지 끝냈어야..

[개발 공부 35일차] Devtiny | CRUD, 이미지 업로드 구현

굉장쓰하게 바쁜 연휴였다.연휴 내내 코드를 본 기억 뿐이다. 하지만 재밌었다. 이번에 내가 맡은 기능들이 좀 중요하면서도 어려울 수 있겠다고 생각해서 선택했는데 내 예상이 맞았다.  1. 개발자 커뮤니티 구현2. 문제 : 해결책   ①  작성일시 추가했더니 글 새로 추가하면 화면에 아무것도 안 뜸   ②  [Edit 버튼 클릭]  클릭한 게시물의 id를 갖고 Write Page로 넘어가서 해당 게시물의 내용이 보여야 하는데 안 뜸   ③  import 절대 잊지 말기   ④  내가 맡은 페이지, 기능 구현 완료   ⑤  "상태 관리는 어떻게 하죠?"   ⑥  [Write Page] 새 게시글 작성을 누르면 아무것도 안 보임3. 금일 소감   1. 개발자 커뮤니티 구현  우리 팀은 'Devtiny'라는 개..

[개발 공부 34일차] To-do List 구현

오늘은 입문 주차 과제인 To-do List를 구현헀다. React 들어온 지 3주 정도 됐는데, 그동안 공부법과 공부 방향에 대해 엄청 헤매서 시간을 효율적으로 못보낸 것 같다. 이제 제대로 알았으니 늦은 만큼 더 달려서 효율 끝판 찍어야겠다. 1. To-do List 구현 2. 오늘 공부한 내용 ① map과 filter의 차이점 ② find, push, pop, reduce, forEach ③ [함수표현식, 함수선언식 차이] 확실히 알기 ④ 함수에서 return 사용 여부 핵심 정리 && 어떨 때 return 하고, 생략하는지 3. 금일 소감 1. To-do List 구현 시간 재면서 했는데 거의 25분만에 과제 코드 다 작성했다. 이틀만에 React 입문 과제 25분 컷 달성 가능한데 ..

728x90