전체 글

프론트엔드 테스트프론트엔드 테스트에 대해테스트 코드는 주로 백엔드 영역에서 작성된다는 인식이 강하다.이 때문에 프론트엔드 개발을 해오면서 테스트에 대해 명확한 기준을 갖지 못한 채 작업해왔다.테스트의 필요성은 인지하고 있었지만, 항상 우선순위에서 밀렸고 실제로 시간을 내어 학습하거나 적용하지는 못했다.최근 프론트엔드 테스트의 역할과 가치에 대해 다시 생각하게 되었고, 이를 피하지 않고 제대로 이해해보고자 테스트에 대한 학습을 시작하게 되었다.단위 테스트 (Unit Test)단위 테스트는 단순히 함수 하나, 컴포넌트 하나가 잘 동작하는지를 확인하는 테스트다.예를 들어 Textfield 컴포넌트를 만든다고 가정해보면, 생각보다 고려할 게 정말 많다.라벨 유무필수 여부패딩, 아이콘 위치placeholder, ..

리액트 훅의 변화리액트 훅은 처음 등장했을 때 클래스 컴포넌트의 라이프사이클을 대체하는 편의 API로 받아들여졌습니다.하지만 React 18 이후의 흐름을 보면, 훅은 단순한 문법 요소를 넘어 리액트가 어떤 방식으로 UI를 설계하도록 유도하는지를 보여주는 설계 도구로 사용되고 있습니다.이 글에서는 useEffect와 useEffectEvent를 중심으로,리액트가 effect 중심 설계에서 벗어나고 있는 방향을 정리해보려 합니다.🧐 TL;DRuseEffect는 모든 로직을 넣는 공간이 아니라, 외부 시스템과 동기화하기 위한 훅이다.의존성 배열 문제는 실수가 아니라 useEffect의 구조적 한계에서 비롯된다.useEffectEvent는 effect의 재실행 조건과 최신 props/state 참조를 분리하..

탐욕 알고리즘 (Greedy)탐욕 알고리즘(Greedy) 이란?탐욕 알고리즘은 말 그대로 "현재 상황에서 당장 가장 좋아 보이는 것만을 선택" 하는 알고리즘이다.미래를 깊게 고민하지 않고, 지금 이 순간의 이익만을 좇는다고 하여 '탐욕(Greedy)'이라는 이름이 붙었다.현실 세계에서는 최적의 해를 구하기 어려울 때, 근사해를 빠르게 구하기 위한 방법으로 주로 사용된다.코딩테스트에서의 탐욕 알고리즘코딩 테스트에서 탐욕 알고리즘 문제가 출제된다는 것은 탐욕적 선택이 항상 최적해로 이어지는 특수한 구조의 문제라는 의미이다.따라서 다음 두 조건을 확인하는 것이 중요하다.탐욕 알고리즘이 성립하는 조건탐욕적 선택 속성 (Greedy Choice Property)현재 단계에서 최선의 선택을 하는 것이 전체 최적해로..

정렬(Sorting) 알고리즘1. 선택 정렬 (Selection Sort)선택 정렬이란?선택 정렬은 이름 그대로 "매 단계에서 가장 작은(혹은 가장 큰) 원소를 선택해서 올바른 위치로 보내는" 정렬 방식이다.전체 데이터 중에서 가장 작은 값을 찾아 맨 앞에 놓고, 그다음 작은 값을 찾아 두 번째에 놓고 ... 이 과정을 끝까지 반복한다.특징: 정렬이 완료된 '앞쪽' 부분은, 그 이후의 어떤 과정에서도 위치가 다시 변경되지 않는다. (자리가 확정)선택 정렬 동작 방식선택 정렬(오름차순)은 다음과 같은 두 가지 단계를 반복하며 진행된다.아직 정렬되지 않은 부분(unsorted part)에서 가장 작은 값과 그 인덱스를 찾는다.찾은 가장 작은 값을 아직 정렬되지 않은 부분의 맨 앞 원소와 교체(swap)한다...

핵심 자료구조 알아보기1. 자료구조(Data Structure) 개요자료구조란?자료구조는 '데이터를 효율적으로 담고 관리하기 위한 구조'이다.데이터 수가 많아질수록 '어떻게' 저장하고 구성하느냐에 따라 프로그램의 성능이 크게 좌우되기 때문에 효율적인 자료구조가 필요하다.자료구조의 필요성100만 명의 사용자 정보가 있고, 이 중에서 특정 id를 가진 사용자를 찾는 작업이 하루에 1억 번 발생한다고 가정해보자.만약 이 데이터를 단순한 배열(Array)에 [user1, user2, ...]처럼 아무 순서 없이 저장했다면 어떨까?원하는 사용자를 찾기 위해 배열을 처음부터 끝까지 훑어야 하므로, 최악의 경우 100만 번의 비교가 필요하다. ($O(N)$)하지만 id를 key로 사용하는 Map 객체나 트리(Tree..

JavaScript 기본 문법 문제 풀이1. JavaScript 입출력 문제 풀이2557. Hello Worldconsole.log() 함수를 이용해 원하는 변수 혹은 상수를 출력할 수 있다.풀이console.log('Hello World!');1000. A+B입력받은 문자열 데이터를 정수로 변환한다.이후 덧셈을 수행한 결과를 출력한다.풀이const fs = require('fs');// const input = fs.readFileSync('/dev/stdin').toString().split(' ');const input = fs.readFileSync('input.txt').toString().split(' ');let [a, b] = input.map(Number);console.log(a + b..

코딩 테스트 개요 및 JavaScript 문법0. 개요지금까지 파이썬(Python)으로 알고리즘을 공부하고 코딩 테스트를 치러왔다. 파이썬은 처음 배운 프로그래밍 언어였고, 그만큼 가장 익숙했기 때문이다.하지만 프론트엔드 개발자를 준비하는 지금, 자연스럽게 실무와 프로젝트에서 JavaScript와 TypeScript의 비중이 높아졌고, 파이썬은 상대적으로 멀어지게 되었다.또한 많은 기업이 개발 직무에 사용하는 언어(Stack)로 코딩 테스트 언어를 제한하기 시작했다. 특히 프론트엔드 직무는 JavaScript 로 지정된 경우가 많다.이에 대비하고자 JavaScript로 알고리즘을 공부하고 코딩 테스트를 준비하려 한다.1. 코딩테스트 알아보기알고리즘 공부를 시작하기 전에, 효율적인 준비를 위한 몇 가지 전..

📢 '이것이 코딩 테스트다 with 파이썬' 책을 공부하고 복습하기 위해 작성했습니다.https://imhihi.tistory.com/entry/%EC%9D%B4%EC%BD%94%ED%85%8C-03-%EA%B5%AC%ED%98%84Implementation [이코테] 03. 구현(Implementation)📢 '이것이 코딩 테스트다 with 파이썬' 책을 공부하고 복습하기 위해 작성했습니다. 구현(Implementation) 머릿속에 있는 알고리즘을 소스코드로 바꾸는 과정 완전 탐색: 모든 경우의 수를 주저 없이imhihi.tistory.com문제https://school.programmers.co.kr/learn/courses/30/lessons/60059 프로그래머스SW개발자를 위한 평가, 교육..

📢 '이것이 코딩 테스트다 with 파이썬' 책을 공부하고 복습하기 위해 작성했습니다.2023.12.16 - [Algorithm] - [이코테] 03. 구현(Implementation) [이코테] 03. 구현(Implementation)📢 '이것이 코딩 테스트다 with 파이썬' 책을 공부하고 복습하기 위해 작성했습니다. 구현(Implementation) 머릿속에 있는 알고리즘을 소스코드로 바꾸는 과정 완전 탐색: 모든 경우의 수를 주저 없이imhihi.tistory.com문제https://school.programmers.co.kr/learn/courses/30/lessons/60057 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프pr..