corin

배경지식! 01. 추가해야 하는 기능이 여럿 있었다. 모달창을 키고 끄는것. 무한 스크롤로 수정. 별점주기 기능(로컬 스토리지 활용) 02. 모달과 별점은 이전에 했던 것과 유사하여 크게 어렵지는 않았으나 무한 스크롤이 좋은 자료가 없어서 좀 헤맸다. 역시 좋은 자료는 영어로 되어 있다. 후 03. 개인적인 일정으로 인해서 시간이 없었다. 월요일까지 제출인데 토요일 오후에 시작하였다. 1번째 Push 설계 의도 * 각 컴포넌트 안 함수들은 그 컴포넌트 밖으로 내보이지 않기 * 각 컴포넌트에서 관련 이벤트 부여하기 가능한 이벤트를 삭제/재등록하지 않기 * 무한 스크롤 이벤트에서 옵저버 이벤트를 app.ts에 배치하여 최초 랜더링 시 이벤트 세팅 * itemList 에 이벤트를 부여해서 모달 여는 이벤트 위..

배경지식! 01. 처음으로 API를 사용해보기 > 비동기로 처리하기 위해 promise / asnyc / await 사용 02. 이벤트 부여하는 것을 유틸에 모아다가 렌더링 후 부여하는 방식을 사용해봄 03. 검색 API가 있다는 것을 처음에는 몰라서 헤메다가 나중에 검색 API를 사용 04. 렌더링 테스트는.. 어떻게 하는 거죠..? 1번째 Push 설계 의도 * 컴포넌트는 본인의 템플릿과 이벤트를 가지고 있습니다. * 컴포넌트 파일에서 이벤트를 부여하는 경우 렌더링이 이루어지지 않은 상태이기 때문에 이벤트 부여를 모아다가 렌더링이 끝난 이후 모은 이벤트를 부여해주었습니다. * 처음에는 맨 상위 컴포넌트에서 랜더링을 해주었지만, 그런 경우 async가 상위 파일까지 타고 올라가버립니다. 때문에 API에..

무한 스크롤을 만들어보고자 한다. 이는 이벤트 스크롤로도 가능하지만 IntersectionObserver을 이용하는 것이 reflow가 덜 일어나 더 좋다고 한다. 그리고 이벤트 스크롤은 연속해서 계속 이벤트가 발생하기 때문에 Debounce, Throttle관리를 해줘야하지만, IntersectionObserver은 그런 것들을 하지 않아도 된다. 작동 원리는 대충 이해하기로는 전체 페이지가 있고, 그 안에 우리가 보는 뷰가 있다는 것을 전제로 한다. 그 중 지정된 element가 우리가 보는 뷰 안에 들어오거나 나가는 것을 감지하여 이벤트를 발생해준다. 실행 목적 1. div 태그에 a 태그를 연이어 놓고 싶다. 2. 이 a 태그는 무한으로 만들어질 수 있고 이걸 스크롤로 계속 내리고 싶다. 태그 정..

1. resolve / reject = callback 함수이다. 2. resolve / reject 인수는 진행 상 필수요소이다. > 없다고 해서 문제가 발생하는 것은 아니지만 아래 finally, then, catch가 실행되지 않는다. 3. 사용예시 1) val() 실행되며 안에 있는 프로미스 작동 2) setTimeout = 비동기 함수라서 동기 흐름에서 벗어나서 작동 3) setTimeout 안 함수로 랜덤함수를 만들어 5보다 작으면 성공/ 크면 실패로 성공실패 사례를 만듦 > 해당 부분은 원래 API가 연결이 안되는 등의 오류를 처리하기 위함. 연결되면 성공, 안되면 실패처럼. > 하지만 여기서는 임의로 랜덤함수로 성공-실패를 지정해줌 4) 여기서 "안에 들어있는 콘솔로그" 는 프로미스 안에 ..

배경지식! 01. 점차 체력이 떨어져간다. 02. 추가되는 기능/ 선호목록 만들기, 선호-비선호, 세부정보 모달 03. 꼬여버린 임포트 1. PR 메세지 + 리뷰(답변) Q. 대략적인 파일 임포트 : 위에서 보실 수 있다시피 굉장히 파일이 엉켜있습니다. 이를 해결하기 위해서 붙잡고 있었지만 도저히 해결할 수 없었습니다. 이렇게 된 원인을 제 생각대로 말하자면, 컴포넌트의 불명확한 정의라고 생각합니다. 컴포넌트를 재활용이 가능한 엘리먼트 단위정도로 생각했습니다. 때문에 파일 안에 템플릿과 그 엘리먼트 용도에 맞는 함수들을 넣었습니다. 그 결과 다른 곳에서 그 함수를 필요로 한다면 그 파일을 임포트하게 되고, 이것이 상하관계 없이 이어지며 결국 서로가 서로를 임포트하는 상황에 이르렀습니다. 이 상황이 굉장히..

배경지식! 01. 여기서부턴 나혼자 리팩토링! 02. 악 테스트 어려워 1. PR 메세지 1. 구상 * 템플릿 분리: 일단 동적 컴포넌트로 따로 변경되지 않을 컴포넌트는 템플릿 파일에 따로 저장하였습니다. 파일로 분리해 놓는 것이 좋을 수 있지만, 적어도 지금은 분리되어있으면 가독성만 해친다고 생각하였습니다. 다만, 모달창을 하나의 폼으로 다시 정의한 과정에서 템플릿이 너무 길어졌다는 문제가 있습니다. 거슬리기는 하지만 따로 빼는 것은 다른 컴포넌트와의 통일성을 해친다고 생각해 동일하게 넣었습니다. * 컴포넌트: 일전에 했던 것처럼 컴포넌트 안에 이벤트리스너를 추가하는 함수를 구현했으나 로직들을 다른 파일에 만들어 불러오는 식으로 만들었습니다. 다만 이런 경우에 다른 파일에 종속된다고도 생각이 들었습니다..

배경지식! 01. 컴포넌트란 무엇일까. 컴포넌트 중심 개발이 미션 목표 02. 주어진 탬플릿으로 보다 원활한 css but 많아진 기능구현 03. 지금까지 중 제일 시간이 부족. 3일 중 마지막날에 이르기까지 못한 기능구현 04. 설계.. 했다고 생각했는데 어디까지가 도메인이죠? 1. PR 메세지 1. 구상 * 컴포넌트 분리: 컴포넌트를 처음 접했습니다. 때문에 컴포넌트가 무엇인지를 익히는 것이 가장 우선이었습니다. 페어와 이야기한 끝에 컴포넌트를 html 태그 중 기능을 가지는 것으로 정의하고 이를 하나의 파일로 만들었습니다. 해당 컴포넌트 파일은 컴포넌트를 랜더링할 수 있게 템플릿을 가지고 있고, 이벤트-모달창을 키거나, 필터를 하는 등-를 가지고 있는 경우 이벤트를 부여하는 함수를 포함했습니다. *..

key - value 를 이용한 데이터 저장 방법은 두 가지가 있다. - map - object 이 두 가지가 같은 것이라고 생각했다. 그러던 중 두 개념이 다른 것임을 깨닫고 어떻게 다른지 찾아보았다. 더불어 데이터를 저장하고 사용하는 과정에서 벌어질 수 있는 다양한 상황을 실험해보았다. 이렇게 다른데 왜 같은 거라고 생각했을까? 실제로는 map을 잘 안써서 그런가 - 기본 개념 / 문법 Map Object 생성 방법 const map = new Map([ ["a", "문자형 key"], [1, "숫자 key"], [[1, 2, 3], "직접 array key"], [arr, "참조 array key"], ]); const object = { a: "문자형 key", 1: "숫자 key", "[1, 2..

간단한 inline / block에 대한 소개, flex, grid의 설명, 실제 사이트 예시를 포함하고 있습니다.

Number 메서드 유한한 수인지 확인하기 Number.isFinite() vs isFinite() 👉 Number.isFinite: 정말 유한한 수인 경우에 true 👉 isFinite(): 인수를 한번 처리하고 유한수인지 확인하기 때문에 true = 1로 처리됨. 👉 인수에 따른 반환값 인수 Number.isFinite() isFinite() 개념 유한수 판단 유한수 판단하는 빌트인 전역 함수 0 true true 100 true true -13 true true 1.3578 true true -54.573277 true true 2**53 true true 2**53-1 true true "1" false true true false true false false true undefined fals..