BO의 개발로그

8/19 (목) [자료구조와 알고리즘] 세션 내용 Big-O 표기법 new Date() 자료 구조 this 클로저 0. 과제 리뷰 - Sorting Machine 과제 관련 피드백 정리 💡 컴포넌트 설계 1. components 폴더 관련 - components 폴더에는 주로 재사용할 컴포넌트만 모아놓는다. - routes.js에서 import하는 컴포넌트는 웬만해서 components에 있으면 안 된다! (라우터는 한번 사용할 껍데기와 같기 때문에 재사용 컴포넌트가 있는 components 폴더에서 불러오는 것은 nope! 🙅‍♀️) - 아래 사진과 같이 레이아웃 기반으로 폴더를 나누어서는 안 된다! 2. 컴포넌트 재활용의 기준 - 오름차순, 내림차순 결과를 출력해주는 컴포넌트를 각각 따로 만들었다면?..

8/16 (월) [핵심 자바스크립트 개념 2] 세션 내용 실행 컨텍스트 호이스팅 스코프 this 클로저 0. 블로그 과제 피드백 지난 주 블로그 과제에서 브라우저 작동 원리에 대해 주제 방향을 잘못 잡은 사람이 있었다고 한다.(=== 나) 브라우저에서 구글 닷컴을 쳤을 때 어떤 일이 일어나는지에 대해서 적은 사람이 있는데 면접 질문이 명확하게 다르다! url을 입력해서 네트워크 중심의 인터넷 작동 원리를 질문하는 게 있고, 브라우저가 어떻게 동작하는지에 대한 질문으로 두 갈래로 나눠지는데 이번 블로그 과제는 후자를 쓰기를 원했던 것! → 조만간 시간을 들여 수정하는 것으로! ✍ 1. 오늘 주제 관련 면접 질문 - var, let, const의 차이에 대해서 설명해주세요. - Closure에 대해서 설명해..

8/12 (목) [핵심 자바스크립트 개념 1] 세션 내용 동기와 비동기의 이해 콜백 함수 Promise async & await 0. 프론트엔드 개발자라면 가지고 있어야 할 책 Top 3 - → a.k.a 코뿔소책.... - - → 세션 끝나자마자 바로 구매 완..! 1. 관련 면접 질문 - Callback 패턴과 그의 문제점에 대해서 설명해주세요. - Promise와 Callback의 차이점은 무엇이고 각각 장단점은 무엇인지 설명해주세요. - Promise는 무엇인지 설명해주세요. - Promise All은 언제 쓰이는지 설명해주세요. - async/await와 Promise의 차이는 무엇인지 설명해주세요. - 관련 코드를 보고 예상되는 순서와 그 이유에 대해서 설명해주세요. 2. 배운 내용 정리 이번..

1. 과제 내용 ※ 코드 리뷰를 위해 연출된 스토리입니다. 이응수 대리님이 혼자서 진행하였던 '책 찾기' 프로젝트가 예상치 못한 반응을 불러일으켰고, 회사는 서비스를 확장하고자 한다. 이응수 대리님의 코드와 결과물을 분석하고 리뷰하여 더 큰 규모의 프로그램이 될 수 있도록 개선 방향을 찾는다. 2. 과제 수행 시 신경 쓴 부분 - 실제 프로덕트라고 가정하고 리뷰한다. - 확장 가능성에 주안점을 둔다. - 좋은 점, 나쁜 점에 대해 솔직하게 반응한다. - 본인의 개발 경험 중심으로 풀어나간다. - 버그 발견 시, 추측이 아닌 구체적 방법을 제시한다. - 수정할 수 있는 부분을 다 말한다. - 클린 코드의 관점이 아니다. - 내가 멘토라고 생각하고, 신입 사원에게 코드에 대해 리뷰한다는 느낌으로 작성한다. ..

8/9 (월) [리액트에서 좋은 코드란?] 세션 내용 리액트에서 좋은 코드란? React에 적용할 수 있는 Clean Code 확장성을 고려하고, 재사용이 가능한 컴포넌트 설계 0. 블로그 작성 Tips 글의 대제목/소제목이 잘 분리되어 정리되어 있고, 문단이 깔끔하고, 코드의 syntax highlighting이 잘 되어 있어야 한다. 명확한 주제가 있는 글이어야 한다. - 나의 경험을 통해 다른 사람에게 새로운 정보를 전달하는가? - 특정 주제를 깔끔하고 알기 쉽게 정리하여 다른 사람들로 하여금 그 개념을 쉽게 이해할 수 있게 작성되었는가? - 인사 담당자가 읽었을 때 이 사람을 뽑고 싶게 만드는 글인가? (긍정적/협업능력/셀프피드백/회고) css, jsx, js, bash 등 언어에 맞는 synta..

8/2 (월) [React Foundation 2] 세션 내용 React: Functional/Class Component, React Hooks, Event 등 프론트엔드 라이브러리 선정 가이드 애자일 개발 0. React 학습 가이드 💡 리액트 초보라면? - 영어 잘하는 경우: 🔗 유데미 강의 - 한국어로 된 좋은 강의는 🔗 인프런 - 책 추천 : - 김민준 저. 💡 리액트 경험이 있다면! - 책 추천 : - 이재승 저. 1. 두 번째 기업 과제 Review 1.1 Routes는 상수로 작성하면 좋다! 앞으로는 두 번 이상 썼다! 하면 그냥 무조건 상수로 빼자! 유지보수를 위해서! 1.2 URL 설계 1.3 컴포넌트 파일은 일반 파일과 구분 짓기 위해 항상 대문자로 파일을 시작한다! 또, 확장명으로 ..

1. 과제 구현 사항 로그인 페이지 계정, 비밀번호 입력 시 로그인 기능 구현 로그인된 계정은 자신에게 허용된 메뉴만 보이게 함(권한 관리에 해당) 회원가입 페이지 이름, 주소, 신용카드 정보, 나이 등의 회원 정보를 받아 회원가입 기능 구현 주소, 신용카드는 팝업을 이용해서 입력받기 가입 시 유효성 검사하기 다양한 메뉴를 가지고 있는 홈페이지 관리자 페이지 권한 별로 접근 가능한 메뉴가 다르게 설정되어야 함 테이블 컴포넌트 페이지를 만들어 Data Table 구현, 페이지네이션 구현, 검색 기능 구현 2. 내가 맡은 파트 공통 컴포넌트 마크업 및 스타일링 로그인/회원가입 페이지 마크업, 스타일링 및 유효성 검사 유저 데이터 로컬스토리지 연동 3. 작업 중 생긴 일.. 3.1 헤더 우선 로그인 하지 않은..

7/29 (목) [React Foundation] 세션 내용 React: CRA 폴더 구조, 컴포넌트 설계 및 분리, state, props, map 등의 이해 함수의 재사용, utils성 함수 만들기 mock data 설계와 분리 1. CRA 폴더 구조 설계 Tips 폴더구조에 대한 정답은 없음! 오로지 써보고 느껴보는 것이 중요하다! 써보면서 나만의 스타일을 구축해야 한다. 하지만 그러려면 다른 사람의 코드를 많이 봐야 함! (역시 레퍼런스를 많이 보는 것이 중요! ) 가장 좋은 것: 오픈 소스나 유명한 스타트업이 공개하는 레포지토리를 참고하면서 최대한 다양한 폴더 구조를 써보고 자신에게 잘 맞는 폴더구조를 찾아보기! 여기서 제일 중요한 건, 내 것만을 고수하지 않기! "내가 다 써봤는데~ 이게 제일..