요구사항 정의 구현해야 할 기능Create TodoRead Todos, TodoUpdate TodoDelete Todo 요구사항[공통]todos 데이터는 리덕스를 사용해 전역으로 상태 관리todos 모듈은 Ducks 패턴으로 구현 [메인 페이지]디자인과 화면 구성은 자유롭게 구현Todo의 상태에 '완료' 그룹과 '진행 중' 그룹을 나뉘어서 보이도록 구현Todo 추가 시 제목 input과 내용 input은 다시 빈 값이 되도록 구현input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value 초기화Todo의 완료상태가 true면 상태 버튼의 라벨을 취소, false면 라벨을 완료로 보이도록 구현Layout 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운..
요구사항 정의 구현해야 할 기능 UI 구현하기 Todo 추가하기 Todo 삭제하기 Todo 완료 상태 변경하기 (완료 ↔ 진행 중) 요구사항 디자인은 자유이나 화면 구성은 동일하게 진행 제목과 내용을 입력하고, 추가하기 버튼 클릭 시 Working에 새로운 Todo 추가 추가 완료되면 제목, 내용 input 빈 값으로 바뀌도록 구성 Todo의 isDone 상태가 true면 상태 버튼의 라벨을 취소, 상태가 false면 버튼의 라벨을 완료로 조건부 렌더링 Todo의 상태가 Working이면 위쪽에 위치, Done이면 아래쪽에 위치 Layout 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬 컴포넌트 구조는 자유롭게 구현하고 분리한 컴포넌트는 README에 작성 컴포..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 안돼도 그냥 하기 🤔 코어자바스크립트 완독하기 😎 알고리즘 테스트 통과하기 ✅ 안 돼도 그냥 하기 지난주에 썼던 WIL. 이번 주에 얼마나 지켰나? 보면 칼같이 50%를 달성했다. 코어 자바스크립트는 반 읽었고 바닐라JS로 계산기 만들기도 1/2 만큼을 남겨두고 있고 과제물도 한 개 제출했다. 이번주차도 내용이 어려워서인지 집중이 잘 안 됐는데 어떻게든 그냥 하려고 많이 노력했다. 스코프가 좀 크기도 했지만 눈 딱 감고 했으면 다 해낼 수 있었을 것 같아 아쉽지만 생각을 줄이고 그냥 하는 연습을 많이 할 수 있었다. 한동안 알고리즘이 안풀린다고도 이전에 썼었는데 안 풀리던 알고리즘이 아주 느린 속도로 다시 풀리고 있다. 알고리즘도 풀어보고 안되..
리액트 기초 개념을 정리하다 궁금한 것들이 생겨 메모장에 정리하고 있었다. 그러다 아, chatGPT한테 물어보면 기다릴 필요 없이 바로 질문할 수 있겠군 싶어 이것저것 물어보았다. 대답에 또 궁금한 게 생기면 꼬리에 꼬리를 물고 질문해보기도 하고 정말 궁금했던 것들을 물어보기도 하고. 1. Virtual DOM을 초보자가 이해할 수 있도록 쉽게 설명해줘 어제 브라우저 렌더링의 결과물인 DOM에 대해 공부하고 리액트의 Virtual DOM과 무슨 차이가 있는 건지 계속 헷갈려서 질문했다. 더 효율적인 렌더링을 위해 VDOM을 쓴다는 건 알겠는데 그래서 정확히 어떻게 하는지! 2. 리액트에서 VDOM이 자주 리렌더링되는 것도 프론트엔드의 성능이나 성능 최적화에 안 좋은 영향을 주니? 항상 궁금한 성능 관련..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 오류 해결 과정 기록하기 🤔 제공 강의 밀리지 않고 듣기 ✅ 오류 해결 과정 기록하기 이번 주는 자바스크립트 기초 주차였다. 개인 과제로는 github 실습, 팀 과제로는 숫자야구 페어프로그래밍이 있었다. 개인적으로는 숫자야구를 페어 프로그래밍 전에 미리 풀어보고, 그 과정에서 궁금한 내용들을 찾아보고, 오류가 있다면 그 과정을 기록했다. 기록을 하니 내가 어디서 막혔는지, 그 부분을 어떻게 이해하고 있었는지 알 수 있었고 확실히 직접 정리한 내용은 기억에 더 오래 남는다. [이번 주에 공부하고 기록한 내용들] [JavaScript] Uncaught ReferenceError: Cannot access 'X' before initializati..
프로젝트 소개 프로젝트 명 DevView 기획 의도 개발자 취준생들이 서로 추천하는 개발 관련 유튜브 링크를 아카이브하고 모아볼 수 있는 웹을 만들고자 했다. 프로젝트 설명 프로젝트 기간 2023-03-27 15:00 ~ 2023-03-30 18:00 사용 기술 온보딩주차 필수 강의였던 웹개발종합반에서 실습했던 것들 위주로 사용하였다. Design Figma Front-end HTML, CSS, JavaScript Back-end Flask, MongoDB 구현하고자 한 기능 / 구현하지 못한 기능 기능 스코프 개발 여부 메인화면 1차 ⭕ 네비게이션바 1차 ⭕ 글 작성 1차 ⭕ 상세페이지 리스트 조회 1차 ⭕ 상세페이지 검색기능 2차 ⭕ 상세페이지 댓글 1차 ❌ 상세페이지 별점 조회 2차 ❌ 상세페이지 ..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 미니 프로젝트 잘 끝내기 🤔 Aws Elastic Beanstalk 으로 프로젝트 배포하기 😎 항해 14기 입학시험 통과하기 ✅ 미니 프로젝트 잘 끝내기 이번 주 월요일부터 목요일까지는 온보딩 때 수강했던 웹개발종합반을 기반으로 풀스택 미니 프로젝트가 진행됐다. 월요일 15시부터 시작해 목요일 18시에 소개 영상 제작 및 발표 준비까지 마치는 일정이었다. 우리 조는 다들 열정 있고 의사소통이 잘되어서 첫날에 주제 선정, 구현할 기능 선별, 디자인 시안까지 모두 마칠 수 있었다. 이튿날부터 본격적인 개발을 시작하기로 했는데, 짧은 기간 내에 기능을 완성하는게 제일 우선이었기 때문에 그나마 코드가 덜 낯선 내가 초기 세팅을 빨리 마치고 다 같이 기..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 바닐라JS로 기능 실습해보기 🤔 코딩테스트 문제 매일 1-2개씩 풀기 😎 공부한 것들은 꼭 기록하기 😎 '오늘 이것만큼은 꼭 해낼 것' 정하고 노력하기 ✅ 바닐라JS로 기능 실습해 보기 지난주부터 수강 중인 강의에 jQuery가 나오는 부분은 모두 JavaScript로 바꿔보면서 공부를 진행했다. 제이쿼리가 간편하긴 하지만 자바스크립트를 사용했을 때 직접 요소를 골라서 어떻게 처리할지 더 자세히 작성하는 느낌이라, 그만큼 코드가 길어지긴 하지만 재밌었다. 이번 주는 바닐라JS 강의 중에서 자주 추천받았던 노마드코더의 크롬 앱 클론코딩 강의를 수강했다. 해당 강의는 이벤트를 걸 때 왜 EventListener인지, JS가 해당 코드를 어떻게 접근..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 웹개발 종합반 완강하기 🤔 공부한 내용 정리해서 블로그에 작성하기 😎 강의 코드 jQuery → 바닐라JS로 바꿔보기 😎 알고리즘 2문제씩 풀기 ✅ 웹개발 종합반 완강하기, 강의 코드 jQuery → 바닐라JS로 바꿔보기 부트캠프 사전 예습 강의인 웹개발종합반 강의가 입학시험에도 반영되는터라 1회독을 수강했다. 웹개발종합반 강의는 HTML, CSS, 간단한 JS로 화면을 만들고 파이썬과 몽고DB로 서버단이 진행된다. 본 과정(프론트엔드)에서는 파이썬과 몽고DB를 사용하지 않기 때문에 처음엔 이걸 어느 정도 깊이까지 공부해야 하는지 고민이 많았다. 강의를 수강해 보니 프로그래밍 언어를 자세히 알려주기보단 웹 페이지를 어떻게 만드는지에 대한 흐름을..
