- 전체보기(95)
- 자바스크립트(32)
- 자료구조(13)
- 클린코드(13)
- 알고리즘(12)
- 회고(10)
- 우테코(9)
- React(6)
- 정렬 알고리즘(4)
- DOM(4)
- 개발이랑은 딱히 상관없는 그냥 한 주 이야기(4)
- TIL(3)
- 우아한테크코스(3)
- array.length(2)
- nodejs(2)
- DFS(2)
- 너비우선탐색(2)
- stack(2)
- queue(2)
- JavaScript(2)
- 구조분해할당(2)
- git(2)
- 퀵소트(2)
- 깊이우선탐색(2)
- 재귀함수(2)
- 트리(2)
- BFS(2)
- 우선순위 큐(2)
- insertAdjacentHTML(1)
- 선입선출(1)
- virtual DOM(1)
- 타입 검사(1)
- 객체 변경 방지 메서드(1)
- object(1)
- 배열(1)
- Manifest(1)
- 동등 연산자(1)
- 이벤트 위임(1)
- 비차단(1)
- proto(1)
- 크롬익스텐션(1)
- else if(1)
- 순수함수(1)
- 불변성(1)
- 코드컨벤션(1)
- 선택 정렬(1)
- 참같은값(1)
- 컴포넌트 합성(1)
- ReactDOM(1)
- 싱글스레드(1)
- 이벤트루프(1)
- Graph(1)
- radix sort(1)
- stopPropagation(1)
- 거짓같은값(1)
- 애자일(1)
- eqeqeq(1)
- 해시(1)
- 해시맵(1)
- priority queue(1)
- heap(1)
- 프로미스(1)
- 그래프 순회(1)
- 단축평가(1)
- 함수형 프로그래밍(1)
- 객체(1)
- 제너레이터(1)
- 이중 연결 리스트(1)
- 시간복잡도(1)
- 커스텀 이벤트(1)
- null 병합 연산자(1)
- instanceof(1)
- 버블 정렬(1)
- reconciliation(1)
- 해시 테이블(1)
- dijkstra(1)
- 다익스트라(1)
- 라우팅(1)
- 프로토타입(1)
- 비동기반복(1)
- 매개변수(1)
- CRLF(1)
- 공간복잡도(1)
- null(1)
- early-return(1)
- Prototype(1)
- 이벤트 흐름(1)
- NaN(1)
- 유사배열객체(1)
- props drilling(1)
- 고차 함수(1)
- react redux(1)
- 부정조건문(1)
- composition(1)
- getElementsByClassName(1)
- async(1)
- 비동기(1)
- 코드리뷰(1)
- 책리뷰(1)
- Document 노드(1)
- linkedlist(1)
- &&(1)
- singly linked list(1)
- 선형 검색(1)
- LF(1)
- 타입스크립트(1)
- nodeList(1)
- typeof(1)
- this바인딩(1)
- Element 노드(1)
- 의존성역전원칙(1)
- prefix-suffix(1)
- 조건문(1)
- break(1)
- Node(1)
- querySelectorAll()(1)
- continue(1)
- Object.prototype.toString.call()(1)
- min-max(1)
- object.freeze(1)
- Computed property Name(1)
- Object.isFrozen()(1)
- props.children(1)
- 검색 알고리즘(1)
- OR 연산자(1)
- 배열 고차함수(1)
- 산책(1)
- async/await(1)
- 이진 힙(1)
- Big O(1)
- context(1)
- 삼항연산자(1)
- tree traversal(1)
- 타입(1)
- 후입선출(1)
- 길 찾기(1)
- 리팩토링(1)
- this(1)
- first-last(1)
- begin-end(1)
- CSS(1)
- CSS Module(1)
- styled components(1)
- 가중 그래프(1)
- 드모르간의 법칙(1)
- 함께 자라기(1)
- 퀵정렬(1)
- useCallback(1)
- import 모듈(1)
- useselector(1)
- FIFO(1)
- preventDefault(1)
- prettierrc(1)
- 기타(1)
- 책(1)
- InnerHTML(1)
- 분기다루기(1)
- 이진 탐색 트리(1)
- 이진 검색(1)
- appendChild(1)
- 스택(1)
- array(1)
- 트리구조(1)
- 단일 연결 리스트(1)
- 무방향 그래프(1)
- 클래스 컴포넌트(1)
- graph traversal(1)
- 캡처링 단계(1)
- doubly linked list(1)
- 자막번역(1)
- LIFO(1)
- 재조정(1)
- 환경설정(1)
- components(1)
- 버블링 단계(1)
- isNaN(1)
- for await of(1)
- lookup table(1)
- 병합 정렬(1)
- DOM 이벤트(1)
- 일치 연산자(1)
- 다크모드(1)
- HTMLCollection(1)
- try catch(1)
- default case(1)
- Binary Search Tree(1)
- 그래프(1)
- Hash Table(1)
- 선언적 프로그래밍(1)
- Naive String Search(1)
- 인접 리스트(1)
- 큐(1)
- 동시성(1)
- else(1)
- robots(1)
- 삼항조건연산자(1)
- 트리 순회(1)
- 기수 정렬(1)
- binary heap(1)
- redux(1)
- EOL(1)
- eslintrc(1)
- Real DOM(1)
- stopImmediatePropagation()(1)
- 합성(1)
- vscode(1)
- 노션(1)
- 디버그(1)
- 최적화(1)
- React.memo(1)
- 경계(1)
- undefined(1)
- eqeq(1)
React Fiber 얕게 알아보기
리액트 화이바....? 어디선가 계속 언급되던 React Fiber를 살펴봐야겠다고 마음을 먹었다. react-fiber-architecture 문서를 읽다가 이해도 잘 안되고 금방 까먹을 것 같아 일단 대충 번역했고, 이외에 다른 문서 등에서 살을 붙였다.
React란
2013년에 올라온 Pete Hunt: React: Rethinking best practices -- JSConf EU 영상을 보다가 공부 목적으로 가볍게 정리하였다. 번역 등이 매끄럽지 않거나 정확하지 않은 내용이 있을 수 있다.ㅠ
알아두면 쓸모있는 FE 환경설정
.eslintrc와 .eslintrc.json의 차이는 무엇일까요? .eslintrc는 json이나 yaml 로 해석될 수 있으며 deprecated 됐다. 따라서 .eslintrc.json을 사용하는 것이 적절하다. https://dev.to/ohbarye/esli
react-redux의 useSelector 훅 만들기
Redux와 React는 독립적인 라이브러리이다. 이 두 라이브러리를 함께 사용하는 경우 공식 Redux UI 바인딩 라이브러리인 React Redux를 사용하여 두 라이브러리를 바인딩해야 한다.이 라이브러리들을 이해하기 위해, react-redux 라이브러리의 여러
Redux가 뭐예요
리덕스는 cross-component 또는 app-wide 상태를 위한 상태 관리 시스템이다.상태는 로컬 상태, cross-component 상태, app-wide 상태 와 같이 세 가지로 구분할 수 있다.로컬 상태는 데이터가 변경되면 하나의 컴포넌트 UI에 영향을 미
스타일 간섭을 방지하기 위한 styled components와 css module
컴포넌트 파일에 css 파일을 import하여 사용하는 기존의 일반적인 스타일링 방식은 스타일의 스코프가 해당 컴포넌트에만 국한되지 않는다. 큰 프로젝트에서 수많은 개발자들이 같은 코드에서 작업하고 있을 때, 동일한 css 선택자가 다른 의도임에도 중복해서 사용될 수도
[React] Context가 꼭 필요할까? 컴포넌트 합성으로 props drilling을 극복해보자
Prop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.prop drilling이 보통 3~5개 컴포넌트를 거치는 정도이면,
[회고] 우테코 Level2 3주차 - 코리스
페이먼츠 미션 페이먼츠 미션 step1 피드백을 반영하고, step2를 진행하느라 바쁜 한 주였다. 오늘 step2를 완성하고 리뷰어님께 PR을 제출했다. 이번 미션에서는 디렉터리 구조를 개선하는 데에도 고민을 많이 했다. 컴포넌트들을 특성에 따라 common, components, containers, pages로 구분했다. 그리고 2단계에서 추가 구현...
[회고] 우테코 Level2 2주차 - 페이먼츠
이번 주에는 페이먼츠 step1 미션을 아놀드와 함께 하였다. useCallback, useContext, useReducer 등 리액트의 여러 hook들을 처음으로 직접 사용해봤다. 이외에도 styled-component와 storybook도 처음 접했다. 페어 덕분에 많은 것을 배웠다. 다음 링크들은 해당 미션을 구현한 배포 페이지와 스토리북 페이지...
JS로 SPA를 위한 간단한 Router 구현
바닐라 자바스크립트를 이용하여 SPA를 위한 간단한 Router를 만들어보고, 관련 개념을 정리하자. 데모페이지와 코드샌드박스 소스코드 주소는 아래와 같다. DemoPage codesandbox html은 다음과 같다. 앵커태그들을 만들고 변경된 html이 주입될
[회고] 우테코 7주차 - 산책
타입스크립트 타입스크립트를 처음 사용해봤다. 유튜브에서 타입스크립트 개념 기초 30분 강의를 듣고, 페어와 함께 필요한 부분을 하나 하나 찾아가면서 사용해보았다. 어려울 줄 알았는데, 생각보다 수월했고, 이렇게 이론보다 실행에 바로 옮기는 공부방법도 효과가 좋다는 것을 느꼈다. 하지만, 결과적으로 이론도 제대로 채워야겠다는 생각이 들어서, '타입스크립트 ...
자바스크립트에서 __proto__ VS. prototype 비교
SOF - \_\_proto\_\_ VS. prototype\_\_proto\_\_는 메서드 등을 체인을 타고 찾는데 사용되는 실제 객체이다.prototype은 new로 인스턴스를 만들 때 \_\_proto\_\_를 생성하는 데 사용하는 객체다. 함수 정의 코드를 실행
[회고] 우테코 6주차 - 독백이라 착각하기 쉽다
독백이라 착각하기 쉽다. 윤석철트리오의 곡 중에 가장 자주 듣고 애정하는 노래이다. 이번 주에 이 곡을 포함한 윤석철트리오의 재즈 음악을 많이 들었다.
[회고] 우테코 5주차 - 달리기를 말할 때 내가 하고 싶은 이야기
3월둘째주이번 주 화요일에 나만의 유튜브 강의실 구현 미션이 시작되었다. 위니와 페어가 되어 화요일부터 금요일까지 페어프로그래밍을 진행하였다. 페어프로그래밍을 할 때마다 느끼는 거지만, 다들 배울 점이 많고 열정적이다! 위니도 나랑 비슷하게 프로그래밍을 배우기 시작한지
[회고] 우테코 4주차 - 코드리뷰스터디 시작
지난 주말에 기획한 코드리뷰 스터디의 첫 시작을 잘 한 것 같다. 레이싱게임 미션 때, 혼자서 다른 37명의 크루들의 리뷰를 모두 살펴봐야해서 힘들었는데, 코드리뷰 스터디를 하면서 분량을 나눠서 하니까 훨씬 수월했다. 뿐만 아니라, 담당한 코드들을 더 자세히 분석하고,
[회고] 우테코 3주차 - 첫 회고, 성장의 요소
우아한테크코스를 시작한지 3주가 지났다. 우테코 총 10개월의 과정을 알차게 보내어 실력 있는 개발자가 되고 싶다는 생각에 시지프, 호프, 우디와 함께 주간회고스터디를 참여하게 됐다. ‘내가 성장하고 있는지’ 또는 ‘너무 무리하고 있진 않는지’ 등을 매주 일요일에 시간