profile
#프론트엔드
태그 목록
전체보기 (189)MonthSub Refactoring(24)WaffleCard Refactoring(21)TypeScript Project(14)리액트(11)벨로퍼트(10)코드스피츠 스터디(9)NotionClone Refactoring(4)컴포넌트(4)typescript(3)JavaScript(3)Vanilla TS - i(3)DFS(2)useEffect(2)자료구조(2)vue(2)호이스팅(2)React(2)리액트 라이프사이클(2)반응형(2)함수형 프로그래밍(2)axios(2)클로저(2)객체(1)노션 클로닝(1)project(1)정렬 알고리즘(1)DP(1)scrollEvent(1)프로토타입(1)computed(1)클린 코드(1)코드스피치 스터디(1)기능중심(1)라이프 사이클(1)TS문법(1)대괄호 표기법(1)비동기(1)함수형 setState(1)react hook(1)재귀 알고리즘(1)Flex(1)JS 실행 컨텍스트(1)콜백함수(1)트리 탐색(1)Route(1)cs공부(1)일급 함수(1)vanilla js(1)v-for(1)async/await(1)동적프로그래밍(1)watch(1)BFS(1)ClearTimeout(1)JS런타임 환경(1)useMemo(1)this(1)setTimeout(1)getter setter(1)고양이 사진첩(1)MonthSub Refacroting(1)CSS(1)무한 스크롤(1)hook(1)useCallback(1)미디어쿼리(1)breakpoint(1)애플리케이션/컴포넌트 인스턴스(1)useInterval(1)생성자 함수(1)이터러블 프로토콜(1)MonSub Refactoring(1)data(1)CustomEvent(1)링크트 리스트(1)spa(1)템플릿 문법(1)상속(1)아토믹디자인패턴(1)JSX(1)v if(1)Java Script(1)클래스와 스타일 바인딩(1)methods(1)이벤트 루프(1)객체 지향 프로그래밍(1)form 상태관리(1)algorithm(1)emotion(1)v-on(1)메모리(1)React.memo(1)배열(1)promise(1)history API(1)React 공부(1)API(1)프로그래머스(1)브라우저 렌더링(1)js 메모리(1)Interceptor(1)lifecycle(1)intersection observer(1)

[TIL] 0522

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

약 11시간 전
·
0개의 댓글

[TIL] 0521

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

약 11시간 전
·
0개의 댓글

[TIL] 0520

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

2일 전
·
0개의 댓글

[TIL] 0519

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

2일 전
·
0개의 댓글

[TIL] 0518

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

4일 전
·
0개의 댓글

[TIL] 0517

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

5일 전
·
0개의 댓글

[TIL] 0516

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

7일 전
·
0개의 댓글

[TIL] 0513

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

2022년 5월 13일
·
0개의 댓글

[TIL] 0511

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

2022년 5월 12일
·
0개의 댓글

[TIL] 0510

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

2022년 5월 11일
·
0개의 댓글

[리팩토링] 최적의 컴포넌트 구조에 대한 고민

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

2022년 4월 25일
·
0개의 댓글

[리팩토링] 필드 선언에서TS와 JS의 차이점

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

2022년 4월 25일
·
0개의 댓글

[리팩토링] 트리구조 목록 구현

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

2022년 4월 25일
·
0개의 댓글

[리팩토링] 환경 설정

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

2022년 4월 25일
·
0개의 댓글

[리팩토링] 베이스 컴포넌트 구현 및 적용

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

2022년 4월 25일
·
0개의 댓글

[TIL] 0424

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

2022년 4월 24일
·
0개의 댓글

HTTP와 네트워크

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

2022년 4월 24일
·
0개의 댓글

[TIL] 0422

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

2022년 4월 23일
·
0개의 댓글

[TIL] 0421

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

2022년 4월 23일
·
0개의 댓글

[JS] js런타임과 렌더링과정

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

2022년 4월 22일
·
0개의 댓글