전체 글 63

[원티드 25.3 프리온보딩 3회차]타입 시스템, 테스트 코드 기준

📌 발표 요약 (타입 시스템과 트레이드오프)1. JavaScript vs TypeScript의 타입 시스템 비교구분JavaScriptTypeScript타입 시스템동적 타입 (Dynamic), 약타입 (Weakly Typed)정적 타입 (Static), 강타입 (Strongly Typed)타입 검사 시점런타임 (Runtime)컴파일 타임 (Compile Time)형 변환암묵적 형변환 허용 (암묵적 변환 다수)명시적 형변환 필요 (타입 명확)예시"2" + 3 // "23" (문자열 덧셈됨)add(2, "3") 에러 (형 일치하지 않음)결과 예측 가능성낮음 (예상 외의 결과 많음)높음 (형 검사로 안정성 확보)2. Typing - Static vs Dynamic / Strong vs Weak기준설명Stati..

[프로젝트] Turborepo로 모노레포 구성하기/ 내 프로젝트의 방향과 선택한 기술 스택

앞으로 진행할 프로젝트 개요최근 나는 오픈소스 프로젝트를 진행하면서 여러 개의 패키지를 함께 관리해야 하는 상황에 놓였다. 이 프로젝트에서는 다음과 같은 요소들을 포함할 계획이다:스크립트 오픈소스 (script-lib)HTML에서 태그로 간편하게 사용 가능한 라이브러리번들링하여 CDN 배포 가능React 라이브러리 오픈소스 (react-lib)재사용 가능한 React 컴포넌트다양한 환경에서 활용할 수 있도록 번들링퍼블릭 사이트 (docs)Next.js 기반의 문서 및 데모 페이지 (SSR 지원)오픈소스를 소개하고 가이드 제공백엔드 서버 (backend)Python 기반 Flask API 서버컨테이너화하여 실행기본 설정 패키지 (eslint-config, typescript-config, ui)eslin..

프로젝트 2025.03.07

[토이프로젝트]프론트엔드 취업을 위한 토이프로젝트를 시작하기 전 준비할 이야기들

나는 이제 프론트엔드 재취업을 위한 토이프로젝트를 시작하려고 한다. 내가 기존에 토이프로젝트를 할때는 다양한 아이디어에 맞춘 토이프로젝트를 진행하곤했다. 단지. 즐거움을 위해. 그런데 지금은 취업을 위해 진행해야한다는 점이다. 그러기 위해선 어떤 다른 전략을 가져야 할까?  1. 내가 신입인가 경력인가? 사실 난 2년을 채 못채운 경력을 가지고, 1년정도의 공백이 있다. 괴로울 수밖에 없다. 중고신입으로도, 경력으로도 준비해야하는 상황이기 때문이다. 기술면접은 신입으로서도 준비해야하고, 개인 포트폴리오와 회사 프로젝트 진행경험이 있는 경력으로서도 준비해야한다.그리고 토이프로젝트는 개성적인 프로젝트보다, 회사에서 원하는 기술스택을 깊이있게 이해하는 채로 활용하고최적화를 잘 해내야한다.  2. 어떤 기술스택..

프로젝트 2025.03.02

[React,최적화]React에서 useEffect 없이 상태값 자동 업데이트 이해하기

1. 상태값이 연산될 경우, useEffect가 필요 없다React에서는 useState의 값이 변경되면 자동으로 컴포넌트가 리렌더링되며, 내부의 연산도 함께 업데이트됩니다. 따라서 상태 값을 기반으로 하는 연산은 별도의 useEffect 없이도 자동으로 반영됩니다.✅ 필요 없는 경우 (자동 업데이트)useState 값이 변경되면, 이를 기반으로 한 변수도 자동으로 업데이트됩니다.const [count, setCount] = useState(0);const doubled = count * 2; // 자동 업데이트count가 변경될 때마다 doubled 값도 새롭게 계산되므로 useEffect가 필요 없습니다.또한, 리스트 필터링과 같은 경우에도 useEffect 없이 상태를 기반으로 한 연산을 바로 사용..

개발공부/React 2025.02.22

[dfs] 프로그래머스 피로도 문제 풀이

1. 재귀방식 DFS(깊이 우선 탐색) 활용DFS를 사용하면 모든 방문 순서의 경우를 탐색할 수 있습니다.현재 던전을 방문할 수 있는지 확인합니다.방문했다면 피로도를 갱신하고 다음 던전 탐색을 진행합니다.탐색이 끝난 후 원래 상태로 되돌리는 백트래킹을 수행합니다.2. 반복문을 활용한 DFS (스택을 사용한 방법)재귀 호출 없이 반복문과 스택을 활용하여 DFS를 구현할 수도 있습니다.stack을 사용하여 DFS 탐색 상태(현재 피로도, 방문한 던전 개수, 방문 여부)를 저장합니다.DFS처럼 탐색을 진행하되, 탐색 상태를 스택에 저장하면서 모든 경로를 탐색합니다.최대로 방문할 수 있는 던전 개수를 구합니다.DFS 재귀 풀이function solution(k, dungeons) { let maxVisitCo..

[프로그래머스]옹알이(1)

https://school.programmers.co.kr/learn/courses/30/lessons/120956 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr내 답function solution(babbling) { var answer = 0; let count = 0 for(i=0;i  다른 사람 풀이(의도에 맞는) 더보기더보기function solution(babbling) { var answer = 0; const regex = /^(aya|ye|woo|ma)+$/; babbling.forEach(word => { if (regex.test(word)) answer+..

[Javascript]JavaScript 이터러블과 이터레이터

JavaScript에서 데이터를 순회할 때 이터러블(iterable)과 이터레이터(iterator) 개념을 이해하는 것이 중요합니다. for...of, 스프레드 연산자(...), Array.from() 등이 이터러블 프로토콜을 기반으로 동작하기 때문입니다. 오늘은 이터러블과 이터레이터의 개념부터, 내부 동작 방식, 그리고 실전 예제까지 확실하게 이해해보겠습니다! 🔥1️⃣ 이터러블(Iterable)과 이터레이터(Iterator)란?✅ 이터러블(Iterable) 객체이터러블 객체란 Symbol.iterator 메서드를 구현한 객체입니다. 즉, Symbol.iterator를 호출하면 이터레이터(Iterator) 객체를 반환해야 합니다.const myIterable = { data: ['A', 'B', 'C..