BO의 개발로그

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

블로그 중독증인 이유 : 이번 주 포스팅 6개(이 포스팅 포함).. 내가 블로그 중독증에 걸리게 된 이유: 내가 쓴 글이 스토리 IT 분야 메인에 올라서..^^ 사실 이걸 어떻게 알았냐면.. 유입경로를 보는데 tistory.com으로 되어있길래 뭐야? 하고 클릭했더니 저 페이지로 연결됐다! 근데 나는 이게 그냥 내가 로그인하면 내 계정에서만 저렇게 보이는 건 줄 알고 한번 시크릿 창으로 켜봤는데도 저 화면이길래..! 바로 우리 팀원들에게 이 소식을 전달하였고... 비행기 태우는 실력이 수준급인 우리 팀... 칠리소스 사랑해요...💜 와중에 오늘만 벌써 3번 들어왔다는 현찬님 말이 너무 웃겨서 빵 터졌다ㅋㅋㅋㅋㅋㅋㅋㅋ 그도 그럴 게 내가 두 번째 과제 회고에 현찬님에 대해서 언급을 해놓은 부분이 있는데....

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

1. 과제 구현 사항 상품 목록 페이지(/) 상품 목록 리스트를 클릭하면 상품 상세 페이지로 이동하기 상품 상세 페이지(/productdetail) 상품 목록 페이지에서 상품 상세 페이지를 선택하면, 이력 데이터를 누적하기 동일 상품을 조회하는 경우, 이력 데이터를 최신 데이터로 갱신하기 '랜덤 상품 조회' 버튼을 클릭하면, 현 상품을 제외하고 랜덤 로드하기 '관심 없음' 버튼을 클릭하면, 랜덤으로 목록을 로드하기 '관심 없음' 버튼을 클릭하면, 해당 상품은 이후 상품 상세에 노출되지 않게 하기 상품 조회 이력 목록 페이지(/recentlist) 매일 자정(00시) 최근 조회 이력과 관심 없는 상품 목록 초기화하기 별도의 페이징 처리하지 않고 데이터 전체 로드하기 필터링 기능(목록 상단에 위치) 브랜드 ..

7/26 (월) [Orientation] 세션 내용 취업 성패를 결정하는 Business Manner git: Commit Message Guidelines TIL(Today I Learned) 작성 가이드 및 필요성 취업 성패를 결정하는 Business Manner란?! 🤓 코딩 과제 가이드! 1. 우선 코딩 과제할지 말지...? 할까 말까 할 땐 하자! 생각보다 도전하는 사람이 그렇게 많지 않다! 무조건 도전하자! 그렇다고 합격되기 쉬운 건 아니다... 전략적으로 도전하자! 💡 전략적...? How?! 과제를 봤는데, 도통 감이 오지를 않는다,, 😅 → 도전하지 말 것..! 과제를 봤는데, 딱 봐도 내 실력에는 어려울 거 같고, 시간이 얼마나 걸릴지 모르겠다,,🤔 → 시간이 여유롭다면 도전해보자! 굳..

1. 무한 스크롤의 원리 화면을 스크롤할 때 콘텐츠의 끝 부분을 감지하고, 다음 페이지를 불러와 현재 페이지에 이어 붙인다. 2. 구현 방법 전통적인 스크롤 감지(onScroll event) : 유저가 scroll을 하면 이벤트가 발생하고 현재 scroll 위치가 페이지에 끝에 닿았는지 판단한다. 하지만 이 경우 scroll 이벤트는 굉장히 빈번하게 발생하기 때문에 성능 최적화에 위배되는 문제가 있다. 그렇기 때문에 throttle 작업이 추가적으로 필요하다. Intersection Observer API : DOM 엘리먼트 간에 영역이 겹쳐지는 걸 감시한다. Intersection Observer API를 사용하면 scroll, resize와 같은 비싼 비용의 이벤트를 좀 더 쉽고 좋은 퍼포먼스로 사용..