관심사의 분리, SRP, Custom Hook Clean Code 기능 구현이 급급한 코드…? 나중에 다시보는 경우는 드물다. 만들 때 부터 클린코드로 하는 것이 나의 생각과 마음가짐, 코드의 방향성이 좋아지는 것 같다. 첫 단추를 잘끼워야 되어야지. 내가 생각하는 클린 코드. 그런데 좋은 코드, 클린한 코드란 무엇일까? 내가 볼때는 선언적 ...

UseEffect & Context API 의존성 배열 의존성 배열을 제대로 다루지 못한다면 React 를 사용하면서 버그가 발생할 확률이 높아진다. useEffect의 의존성 배열을 통해 중요성과 올바르게 다루는 법을 배워보자. 1. 의존성 배열이란? useEffect 훅에 두번째 인자로 넘기는 배열. 두번째 인자를 넘기지 않...

React 렌더링 최적화 1. 렌더링 1-1) 렌더링이란? 화면에 특정한 요소를 그려내는 것 렌더링 과정을 잘 처리해 주는 것이 우리가 Vanilla JavaScript 를 사용하지 않고 UI 라이브러리 or 프레임워크를 사용하는 이유 VanillaScript 는 DOM 에 직접 접근하고 수정하는 것( 명령형 ), 애플리케이션 규모가...

[Errors] Image Optimization using Next.js’ default loader is not compatible with next export 버그가 발생한 과정 Next.js 를 aws s3 버킷에 올리는 과정에서 발생한 문제 Static 한 페이지로 만들기 위해서는, Next build 가 아닌 next expo...

팀으로 일하는 법 + 개발자의 기본기 Overview 요즘들어 기본기를 중요시 해라 라는 말을 많이 들었다. 볼링을 칠때 주변사람들한테, 기술 이사님한테, 운동을 배울때.. 벌써 3번이나 들었다. 그런데 이번 원티드 프리온보딩도 ‘개발자의 기본기’ 에 관한 세션이 있었다. 기본을 잘 알아야 어떤 것이든 잘 할수 있다 « 내가 내린 결론이다...

React Hook Form 양식 유효성 검사를 위한 React Hooks 로그인 화면을 구현하다 보면, 아이디 양식(보통 이메일) 이나 비밀번호(특수문자, 자릿수제한) 양식을 제한해야 할 때가 많다. 나의 경우는, 이메일과 비밀번호를 하나의 객체로 control 하려고 했었다. const [form, setForm] = useState({ ...

1. 최단경로 문제란? 두 노드를 잇는 가장 짧은 경로를 찾는 문제 가중치 그래프 (Weighted Graph) 에서 간선 (Edge)의 가중치 합이 최소가 되도록 하는 경로를 찾는 것이 목적 최단 경로 문제 종류 단일 출발 및 단일 도착 ( single-source and single-destination shortest pat...

너비 우선 탐색 이전 블로그: 깊이우선탐색(DFS) 1. 파이썬으로 그래프를 표현하는 방법 파이썬에서 제공하는 딕셔너리와 리스트 자료 구조를 활용해서 그래프를 표현할 수 있음. 그래프 예와 파이썬 표현 graph = dict() graph['A'] = ['B', 'C'] graph['B'] = ['A', 'D'] graph['C'...

1. BFS 와 DFS 란 대표적인 그래프 탐색 알고리즘 너비 우선 탐색 (Breadth First Search): 정점들과 같은 레벨에 있는 노드들 (형제 노드들)을 먼저 탐색하는 방식 깊이 우선 탐색 (Depth Firsh Search): 정점의 자식들을 먼저 탐색하는 방식 BFS/DFS 방식...

1. 그래프 (Graph) 란? 그래프는 실제 세계의 현상이나 사물을 정점(Vertex) 또는 노드(Node) 와 간선(Edge)로 표현하기 위해 사용 예) 집에서 회사로 가는 경로를 그래프로 표현한 예 2. 그래프 (Graph) 관련 용어 노드 (Node): 위치를 말한다. 정점(Vertex) 라고도 함 간선 (Edge): ...