생성될 때 모든 초기 상태를 받아서 컴포넌트 내부의 this.state에 자동으로 할당할 지, props을 따로 받고 필요한 것만 상태에 수동으로 할지 고민..컴포넌트 내부에서 state를 지정하게되면 사용할 때마다 undefined제외 로직을 작성해주어야하기 때문.기

기존에 베이스 컴포넌트를 구성할 때 컴포넌트를 생성할 때 받는 element를 target이라고 지칭했다. 부모 돔으로 여기고 컴포넌트 내부에서 template메소드를 이용해 target돔의 내용을 생성해주는 걸부모 돔에 내 돔을 만드는 걸로 여겼었는데, 이럴 경우 컴

에러처리를 모든 api를 추상화한 함수에 공통적으로 해줘야하는지각 api를 사용할 때마다 매번 try catch를 해줘야하는지 모르겠다..후자의 경우에 중복코드가 발생할 것 같은데 전자같이 한 번에 몰아서 처리하는 것도 좋은 방법은 아닌 것 같다.또한 공통적인 에러인

ts + webpack5 환경에서 이미지 import가 안됐던 이유 src/index.ts 범위 안에 import를 안 했기 때문에 dist폴더에 안 만들어졌다.ts에서는 따로 이미지 확장자를 설정해줘야만 import한 image주소를 변수에 담아서 사용할 수 있다.i

api호출 성능 최적화 방법디바운스 & 쓰로틀링브라우저 스토리지 캐시 (세션 스토리지)사용성 개선자동 포커싱 - 값이 있으면 가장 뒤로가게창 닫았다 켜도 기존 상태가 유지되도록 (로컬 스토리지 이용)input cursor 텍스트 가장 끝으로 자동 포커싱하기input태그

input 속성에 autofocus을 작성해주면 자동으로 포커싱이 된다.replace를 사용해 특정 글자에만 태그를 씌워주도록 구현선언적으로 코드를 짜고 싶은데 기능들을 함수로 분리할 때 순수 함수로 깔끔하게 추상화하는 것과 함수명을 적절하게 짓는 것이 어려웠다.

바닐라 js과제 연습 - 기존의 베이스 컴포넌트의 구조로는 부모 상태 중 일부만 사용하는 컴포넌트를 선택적으로 리렌더링 시킬 수 없었다.상태 각각을 구독할 수 있는 패턴을 찾아보았으나, prop으로 넘겨받으면 안되고 직접 가져다가 써야했다(import하거나 등등..)p

과제 전형 연습을 위해 프로그래머스 데브매칭 때 출제되었던 검색 앱을 구현했다. 기존에 만들어놓은 클래스 기반 베이스 컴포넌트로 만들었는데, 문제점을 발견했다. 특정 자식 컴포넌트만 부분 렌더링할 수 있도록 개선을 했지만, 부모의 상태가 여러 개이고, 각 상태가 각 자

클린코드에 대해 공부한 것을 바탕으로 MonthSub프로젝트의 유효성 검사 로직을 리팩토링 했다.게시글 생성과 수정에서 같은 form을 쓰게 했는데, 로직이 다른 점이 있다보니, 유효성 검사를 할 때 엄청난 중첩 if를 써서 작성했었다.최대한 한 함수에 한 기능을 담당

프로젝트 코드를 다시 보니 내가 짠 코드지만 하나도 못알아보았다.코드 퀄리티에 심각성을 느껴서 클린코드를 짜는 법에 대해 공부했다.유데미 강의 수강, 유튜브를 보며 공부하면서 내가 뭘 놓쳤는지 알게되었다.한 함수는 하나의 동작만 하도록.함수의 인수는 2개 이하 적당하고

헤맨 것 페이지를 이동할 때 컴포넌트가 생성되게 했다. 엄연히 따지면 App컴포넌트가 한 페이지고 Sidebar와 EditFrame은 자식 컴포넌트지만 나는 각각 두 영역을 페이지로 사용하고 싶었기 때문이다. 왜냐하면 두 영역에 대한 로직을 각 App에 합쳐서 작

클래스 필드 선언에서 typescript와 javascript이 다르게 동작하는 부분을 발견했다. 클래스 확장을 했을 경우 부모 클래스의 constructor함수가 다 실행되고 나서 자식의 필드가 생성된다. constructure함수 내부에서 프로퍼티 생성 및 할당

트리 구조 목록 구현 받아온 문서 목록 데이터를 받아서 최상위 ul에 PageItem를 렌더링하면서, 문서에 자식 문서들의 데이터가 있다면 재귀적으로 하위 목록들을 렌더링시켰다. 이벤트 설정 오류 문제점 ul에 걸 경우 하위 ul에도 이벤트가 걸렸기에 이벤트

기존에 script type module로 사용했던 것을 webpack을 적용해 번들링하고 webpack설정에 babel을 같이 설정해주었다. 환경 설정 관련 트러블 슈팅 babel 오류 async, await를 사용하니까 regeneratorRuntime is n

가급적 부모 돔에 내 템플릿을 삽입하는 방법을 이용한다.내 돔(this.node)을 만들어서 부모 돔에 appendChild하는 방법은 리스트에 동적으로 item을 추가해야할 때만 사용한다.부모 컴포넌트에 자식 컴포넌트를 연결할 빈 태그를 만들어서 연결하고, data-

학습한 것http와 네트워크 약간, cors, 웹 스토리지, 세션과 jwt, 이벤트 전파어디선가 들어본 것, 알고 있었지만 잊혀져간 개념들을 확실히 공부했다.정렬 알고리즘 문제풀이문제를 풀 때 두서 없이 생각했기 때문에 더 어려웠다는 것을 깨달았다주요 로직의 분기를 먼

TCP/IP란 인터넷에 관련된 다양한 프로토콜의 집합애플리케이션 계층HTTP프로토콜 사용리퀘스트 요청 및 처리DNS로 도메인명에서 IP주소로 변환해주는 역할전송계층TCP프로토콜 사용대용량의 데이터를 보내기 쉽게 작게 분해(패킷)하여 상대에게 보내고, 정확하게 도착했는지

정렬 알고리즘 학습 정렬은 무조건 오름차순, 내림차순이 아니라 정렬 조건에 따라 정렬하는 것이다. 모든 수를 자기 자리에 정렬시켜야하기 때문에 갯수만큼 비교 로직을 반복해야한다. 정렬이 된 영역과 안 된 영역이 있다. 일단 자기 자리만 잡는 것. 모든 값이 자기 자리

재귀 알고리즘 학습 재귀함수란? 자기 안에서 자신을 부르면 해당 함수가 복사되어 실행되는 것 (실행컨택스트가 만들어지는 것) 실행실행실행실행 - 리턴리턴리턴리턴 재귀함수가 호출된 곳으로 돌아감 수열, 규칙적이지만 복잡한 반복에 사용할 수 있다. 재귀 함수는 결국 반복을

User Interface의 주소창에 URI가 들아오면 Browser Engine에 전해준다.Browser Engine은 Data Prsistance에 캐시된 데이터가 있는지 확인 후 URI와 함께 Rendering Engine에 전달한다.Rendering Engine