다들 그동안 감사했어요~! 나영팀 최고✨
프로젝트 11/17 - 11/20 4주차 프로젝트(Notion 클로닝) 멘티 코드 리뷰과제 11/17 - 11/21 3주차 과제 코드 리뷰 반영과제 11/21 - 11/24 6주차 과제과제
1주차
과제 기한
- 과제 수행 기간 : 2022년 10월 20일(목) ~ 2022년 10월 25일(화)
- 멘티 코드 리뷰 기간 : 2022년 10월 26일(수) ~ 2022년 10월 28일(금)
- 멘토 코드 리뷰 기간 : 2022년 10월 26일(수) ~ 2022년 10월 30일(일)
- 코드 리뷰 반영 기간 : 2022년 10월 31일(월) ~ 2022년 11월 2일(수)
- DAY 5 트리를 이용하여 전위 순회, 중위 순회, 후위 순회를 검색하여 직접 구현해보세요. (힌트 : 스택, 재귀 호출)
- DAY 5 트라이를 사용하여 자동 완성 코드를 구현하세요. (이전에 트리 파트에 사용된 레벨 순회를 응용하여 구현하시오!)
3주차
과제 기한
- 과제 수행 기간 : 2022년 10월 31일(월) ~ 2022년 11월 4일(금)
- 멘티 코드 리뷰 기간 : 2022년 11월 5일(토) ~ 2022년 11월 8일(화)
- 멘토 코드 리뷰 기간 : 2022년 11월 5일(토) ~ 2022년 11월 10일(목)
- 코드 리뷰 반영 기간(개인 프로젝트 종료 후) : 2022년 11월 17일(목) ~ 2022년 11월 21일(월)
내용
- 지금까지 만든 Simple List Todo 앱을 강화합니다. 아래의 요구사항을 만족하는 코드를 올려주세요.
- 아래의 체크리스트를 복사하여 PR 시 활용해도 좋습니다!
과제 상세 요구사항
공통
컴포넌트에 new를 붙이지 않고 쓸 경우 에러가 나도록 방어코드를 넣어주세요.
- 컴포넌트를 class 형태로 구현한 경우 이 요구사항은 무시하셔도 됩니다.
state를 갖는 컴포넌트의 경우, initialState를 받는 부분과 setState 함수에서 nextState를 받는 부분에서 state에 대한 validation을 추가해주세요.
가급적 변수는 const로 선언하며, 부득이한 경우에만 let을 사용합니다.
TodoList
To do의 값에 isCompleted라는 값을 추가합니다. 그리고 TodoList의 Todo를 클릭하면 해당 값이 토글 되도록 만듭니다.
- isCompleted가 true인 경우 text에 삭선이 그어지도록 해주세요. false로 바뀌면 삭선을 없애주세요.
Todo text 옆에 삭제 button을 만듭니다. 누르면 삭제 되도록 처리합니다.
TodoCount
TodoCount 컴포넌트를 만듭니다.이 컴포넌트는 TodoList 아래에 렌더링 되어야 하며, 완료된 Todo의 갯수 / 전제 Todo 갯수를 표시해주면 됩니다.
- 이때 TodoCount에서 TodoList에 직접 접근해서 데이터를 가져오면 안 됩니다.
4주차
프로젝트 기한
- 프로젝트 수행 기간 : 2022년 11월 8일(화) ~ 2022년 11월 16일(수)
- 멘티 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 20일(일)
- 멘토 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 22일(화)
- 코드 리뷰 반영 기간 : 2022년 11월 23일(수) ~ 2022년 11월 25일(금)
공통 일정
커피챗
특강
GitHub 특강(10월 20일) -진유림 개발자님
실무에서 자주 사용하는 명령어
- amend: 깜빡하고 수정 못한 파일이 있어요, 방금 만든 커밋에 살짝 추가하고 싶어요
- stash: 변경사항을 잠시 킵해두고 싶어요, 아지 커밋은 안 만들래요
- reset: 옛날 커밋으로 브랜치를 되돌리고 싶어요
- revert: 이 커밋의 변경사항을 되돌리고 싶어요
- cherry-pick: 저 커밋 하나만 떼서 지금 브랜치에 붙이고 싶어요
JavaScript 주요 문법의 문제 라이브 코딩과 개발자의 학습과 성장(10월 25일) - 이선협 강사님
알고리즘을 잘 공부하는 법
필수로 해야할 것
- 항상
여러가지 풀이 방법이 있을 수 있다는 것을 기억
- 항상
예외가 있을 수 있다는 것을 기억
- 내가 풀어낸 답이
베스트인지 의심
- 문제를 풀었다면
시행착오를 모두 기록하자
다른 사람의 코드를 많이보자. 생각하지 못했던 방법을 발견할 수 있다.
- 쉽게 포기하지 말자. 하지만
도저히 모르겠다면(3시간) 답을 보는 것도 좋은 방법
그나마 재밌게 공부하는 법
- 시각적인 사이트의 도움을 받자
- 공부하는 자료구조 / 알고리즘이 어디에 쓰일지 생각해보면서 공부
마음 가짐
- 알고리즘 마스터가 될 필요는 없다.
- 회시는
기초 능력 확인 문제 해결 능력
- 즉,
어디까지 공부할지가 중요
코딩테스트 잘 준비하는 법
자신의 성향을 파악
- 내가 어떤 사람인지
- 미리 생각하고 의사 코드를 작성해야 더 잘 풀리는 사람
- 일단 코드를 작성하면서 생각해야 더 잘 풀리는 사람
메모하기
- 긴장하면 풀다가 내가 무엇을 하려했는지 잊을 수 있으므로 코드에 주석을 달거나 노트에 메모하면서 풀자
- 알고리즘은 논리적으로 표현할 수 있다. 헷갈리면 순서도를 그려
디버깅
- 내가 예상한대로 동작이 안된다면 꼭 디버깅
- cnosole.log 사용
익숙해지기
- 문제를 잘 읽는 것에 익숙
- 시간복잡도를 계산하는 것에 익수해져야 한다
- 자잘잘한 성능보다 시간복잡도가 훨씬 중요
- 항상 엣지 케이스를 생각하는 것에 익숙해져야 한다
좋은 코드 만드는 방법
간결하고 가독성 좋은 코드
- 변수, 함수의 이름을 잘 정했는가
- 중복 코드를 제거했는가
- 함수형 프로그래밍도 좋은 방법 ⇒ map, filter, reduce(성능이 안 좋을 때도 있음)
가지치기를 했는가?
- 사소한 로직이라면 성능이 크게 개선되지는 않지만 코드 리뷰에서 좋은 평가를 받을 수 있음
JS를 잘 이용했는가?
- 문법 활용 ⇒ 구조 분해 할당, …오퍼레이터
일관성을 유지 했는가?
- var와 let 혼용, 카멜이랑 스네이크 혼용, 변수나 함수명을 줄임말과 전부 적는 경우를 섞을 때
문제 유형 파악 방법
접근 방법
- 문제 유형을 바로 파악하는 것보다 가능성 있는 방법을 좁혀나가는 것이 중요
- 좁힐 수 있는 힌트 ⇒ 입출력 제한, 문제 키워드, 이미지, 문제 순서
알고리즘 대회에서 많이 쓰는 꿀팁!
- 문제를 읽기전에 입출력 제한부터 확인
입력이 x00 이하인 경우 ⇒완전 탐색, 백트래킹
입력이 x0,000 이하인 경우 ⇒ 최대 n ^ 2, 문제에 따라 n ^ 2 * logN
입력이 x,000,000 이하인 경우 ⇒ 최대 nlogN 이내로힙, 우선 순위큐, 정렬, 동적 계획법, 위상 정렬, 다익스트라
입력이 x00,000,000 이하인 경우 ⇒ 최대 O(n)으로 끝내야하는 문제(DP, 그리디)
유형을 한 눈에 파악하기 힘든 경우
- 동적 계획법 ⇒ 규칙을 찾을 수있다면 이 유형일 가능성 높음
- 백트래킹 ⇒ 아무리 생각해도 모두 탐색해야하면 이 유형일 가능성 높음
- 그리디 ⇒ 사람이 직관적으로 풀어낼 수 있다면 이 유형일 가능성 높음
개발자의 학습과 성장
시간 대비 고효율
진단 ⇒ 내가 어떤 공부를 해야 할까?
- 개발에 필요한 세가지 요소(사고, 기술, 과학)
사고⇒ 논리적 사고 또는 추상적 사고
- 기술 ⇒ 프로그래밍 언어, 방법론, 프레임워크
- 과학 ⇒ 네트워크, 메모리, OS, 시스템
사고하는 방법
단계적 추상화에 익숙해지자
- 추상적으로 생각한 것을 도식화 하면 좋음
다양한 관점에서 바라보자
- 시스템, 도메인, 데이터, UI 관점
논리사고를 정리하고 기록
- 비슷한 문제를 해결할 때 큰 도움
기술 공부하는 방법
시작하면 웬만하면 공식 문서
심화 내용은 혼자 학습하지 말고 도움을 받는 것이 좋다
- 잘하는 사람의 도움을 받자
- 오픈 소스를 분석하는 것도 좋은 방법
- 타인의 지식을 빠르게 나의 것으로 만드는 것이 가장 효율적
과학 공부하는 방법
제일 좋은 방법은 열심히 외우는 것
사용 사레도 같이 알아두면 좋다
패턴
패턴을 발견하면 그 즉시 정리해서 기록하자
- 컴포넌트, 설계 패턴들을 정리
안해봤던 것을 해보자
- 어렵더라도 안해봤던 경험ㅇ르 가리지 않고 많이 쌓는 것이 중요
공개된 소스를 많이 참고
- 소스를 분석하는 것이 어렵다면 따라치는 것부터 시작해도 좋다.
- 익숙해지면 내 방식으로 리팩토링 하면서 만들어보자.
실제로 적용해보자
산출물에 대해
- 블로그, 오픈소스, 프로젝트, 발표 등등
가장 중요한 것은 시간 투자좋은 개발자로 성장하기(11월 5일) - 마광휘 개발자님
우리가 성장해야 하는이유
- 왜 성장하고 싶은지, 구체적이고 명확하게
- 시장에서 도태되지 않기 위해서
실무를 알아야 면접에 붙을 수 있음
- 애자일은 환상
- 애자일의 탈을 쓴
워터폴이 기다림
- 사용자의 입장에서 항상 생각하며 개발을 해야함(마인드셋)
- 고객에게 가치를
자료구조, 알고리즘, 기술, 패턴, 아키텍처등을 이용해 정해진기간안에 최대한 훌륭하게만드는게 잘하는 개발자
주니어때 생각해보면 좋을 몇 가지
기록과 함께 성장
- 공부한 모든 내용
- 논의/논쟁한 모든 내용
- 도메인 지식
- 짧은 단상, 아이디어, 오늘 한 일들과 같은 회고글
- 작성한 것을 그대로 두지 말고 공유해서 검증을 받아야 함(내 얘기), 잘한다고 착각 할 수 있음
- 별 거 아닌것도 블로그에 작성하는 것이 좋음
블로그 장점- 대외적으로 보이는 글이므로, 신경을 써서 글을 작성
- 점진적으로 글의 성장
여러 사람들에게 보여지므로써, 피드백을 받을 수 있는 창구를 마련하여 이야기를 진행할 수 있음
- 회고도 블로그에 올리면 좋음
블로그를 통해 성장
- 꾸준함은 결국 자신을 성장시키는 가장 쉬우면서 가장 어려운, 그렇지만 명확한 성장수단
- 그냥 개발만 하는 것이아니라
의도와 목표를 항상 생각하며 공부
왜? 라고 생각
- 개발자의 길을 걸으면서 “왜” 라고 깊게 파고든 문제가 있었는지?
- 이해의 넓이, 깊이 ⇒ 깊이가 깊어질수록, 이해의 넓이는 한정, 따라서 어려워 질수록 설명하기 어려워진다. ⇒ 한 단계 더 내려가고, 옆으로 움직여 보자.
- 상대방이 이해를 쉽게 하려면, 이해의 넓이가 넓어야 한다
- 상배방보다 더 잘하고, 유니크하려면 깊어야 한다
- 어떠한 개념에 있어 한단계씩 내려가며 깊이 있게 공부 해야함
- 이해의 범주를 인지
"왜"는 수평적, 수직적 이해를 하기 위함- 추천: 어떤 지식을 고웁한다고 했을때, 그 지식에 대해서 “3뎁스` 이상 고민을 해보는 것
- 실제: 배민에서 신입 면저블 약 100명 가까이 봤는데, “반드시 합격할 인재”로 뽑힌 사람의 대부분은 질문을 하면 알아서 “2뎁스” 이상의 지식까지 꺼내옴.
- 회사측에서는 단순한 지식을 아는지를 궁금한것이 아니라 이 지식을 사용할 수 있나?
- 질문에 대해서만 답변하지 말고, 주체적으로 찾아본 내용들도 함께 이야기
- 주니어 개발자는 즉시 전력보다 “성장 가능성”을 본다
정리
- 왜 라는 물음을 공부하면서 항상
커리어 방향성
- 주니어 개발자의 성장 방향성
- 3, 5, 7, 10년 의 미래를 구상
- 주요한 5가지
- 취업이 되면 이제부터 시작
- 각자의 도메인 업무만 생각하지 않기
- 도메인 전문가가 되도록 노력하기
- “서비스 개발자”는 곡객에게 제공되는 가치가 최우선
- 커리어 3년 안으로, 좋은 시니어들의 좋은 습관을 자신에게 함양
정말 중요⇒서로를 경쟁자라고 생각하지 마세요!- 프로그래머는 장거리 마라톤으로써 지금 잘한다고 연봉이 수천만원 차이나지 않음
- 개발 업계는 모르면 모른다고 할 수록, 빠르게 알수록 스노우볼이 커진다.
- 시니어가 없어도, 좋은 ㅣㅁ원이 있다면 빠르게 성장할 수 있어요.
강의 프로젝트 정리
자동 저장 편집기 만들기 페이지 별 정리
App
- main이 넘겨준 전체공간 제공
- PostPage, PostEditPage 컴포넌트 생성
- URL에 따른 페이지 Render
- Custom 이벤트 걸린 element
이벤트 발생 시URL 이동 및 Re-render하는 initRouter 호출
PostsPage
- 페이지 생성
- postLIst, LinkButton 생성
- post 데이터를 서버에서 불러와서 PostLister에 데이터를 전달하고 자신의 도화지에 그려달라고 요청
페이지 관련 Component는 공간과 데이터를 서브 Component에 제공하고서브 Component는 제공받은 공간에 제공받은 데이터를 가공해 render
PostList
- postPage에서 전달 받은 공간에 전달 받은 데이터를 마크업을 통해 render
- post list item 클릭 시(이벤트 버블링) Custom Event 등록
- history API를 통해 해당 URL로 이동
- App의 this.router 호출 ⇒ URL 경로에 따라 다른 페이지 Render
PostEditPage
- Editor, HomeButton 생성
- postEditor 데이터를 서버에서 불러와서 Editor에 데이터를 전달하고 자신의 도화지에 그려달라고 요청
콜백 함수- Editor 창에 사용자 입력 시 업데이트 처리(디바운스 이용해 일정시간 지난 후 저장)
- localStorage
- 서버에 데이터 추가(new페이지에 입력 후 처음으로 2초가 지난 시점)
- URL을 새로 추가된 데이터의 id로 수정 ⇒ new 페이지에서 입력을 한 다음에 다른 페이지 같다가 다시 돌아올 때 new 페이지가 렌더링 되면 안되므로
- localStorage의 해당 id의 post 데이터를 제거
- 서버에 데이터 수정
- localStorage의 해당 id의 post 데이터를 제거
new → new⇒ 같으니까 그냥 rendernew → n, n → n⇒ n번 id 관련 데이터 호출 및 도화지 render, Editor에 호출 때 받아온 데이터 전달n → new⇒ 페이지 id는 다른데 new와 관련된 데이터가 서버에 없으므로 따로 처리new → n, n → n경우에만 호출- 호출 후에 state의 post item update
서버(new post)
서버(기존 post)
페이지이동
데이터 호출
- page Component는 공간과 데이터를 서브 Component에 제공하고 서브 Component는 제공받은 공간에 제공받은 데이터를 가공해 render
Editor
- Editor의
제목또는내용이 수정 될때마다 EventListener을 통해keyup 이벤트 및 콜백함수 - Editor의 state를 PostEditPage에 전달 ⇒ PostEditPage에서 서버에 데이터를 request 메소드를 통해 추가하거나 수정
- setState를 통해 수정한 내용으로 render
그외
- api ⇒ 서버에 데이터 생성, 삭제, 수정, 조회 등등
- router
- Custom 이벤트 등록(URL 이용)
- 등록된 URL로 History API를 통해 이동
- App의 this.router 호출을 통해 처음부터 특정 페이지 render
- storage ⇒ localStorage에서 데이터 set, get