dev_lee

1. 들어가기 전에: 왜 필요했나React 18까지 폼을 하나 만들려면 보통 이런 코드가 필요했다.function SignUpForm() { const [email, setEmail] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setIsLoading(true); setError(null); try { const res = await f..

문제 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이(1) 모든 사이클을 찾는다1번부터 n번까지 상자를 순서대로 확인한다. 아직 방문하지 않은 상자가 있으면 해당 상자를 시작점으로 새로운 사이클 탐색을 시작한다.cur이 가리키는 상자를 방문 처리하고, 그 상자 안의 카드 번호(cards[cur - 1])로 다음 상자를 이동한다. 이미 방문한 상자를 만나면 사이클이 완성된 것이므로 while 루프를 종료한다.사이클을 완성할 때마다 해당 사이클의 크기를 cycleSizes에 저장한다.(2) 가장 큰 두 사이클의 곱을 구한다사이클이 1개뿐이라면 1번 그룹 외에 2번 그룹을 만들 수 없으므로 0을 반환한다.cyc..

문제 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이(1) 모든 던전 방문 순서의 경우의 수를 탐색한다던전이 N개일 때 방문 순서는 최대 N!가지이다. 예를 들어 던전이 [A, B, C] 3개라면 ABC, ACB, BAC, BCA, CAB, CBA 총 6가지 순서를 모두 시도한다.DFS로 던전을 하나씩 방문하되, 현재 피로도가 해당 던전의 최소 필요 피로도 이상일 때만 입장한다. 입장 후에는 소모 피로도만큼 현재 피로도를 차감하고 다음 던전을 탐색한다.더 이상 입장 가능한 던전이 없으면 현재까지 방문한 던전 수를 answer와 비교해 최댓값을 갱신한다.(2) 백트래킹으로 모든 경우의 수를 빠짐없이 탐색한다..

문제 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이(1) 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아낸다.[2, 6, 10]이 주어졌을 때 조합해서 만들 수 있는 가장 큰 숫자는 6210이다.각 정수를 문자열로 변환한 뒤 sort를 활용해, 두 문자열을 이어 붙인 결과를 비교하여 내림차순으로 정렬한다. 예를 들어 "6"과 "2"를 비교할 때 "62"와 "26"을 숫자로 변환해 대소를 비교하는 방식이다.(2) 예외처리에 신경쓰자[0, 0, 0]처럼 모든 값이 0인 경우 정렬 후 이어 붙이면 "000"이 되므로, 결과의 첫 번째 문자가 "0"인지 확인하여 "0"으로 반환한다. 그 외의 경우에는 정렬된 ..

해커랭크에 있는 React 문제 중 Data Handling에 관한 문제 CryptoRank ExChange를 풀어보았다. 1. 문제 개요React로 암호화폐 환전 계산기를 만드는 문제이다. 사용자가 USD 금액을 입력하면 각 암호화폐로 몇 개의 코인을 받을 수 있는지 계산해서 테이블에 보여준다. 2. 핵심 요구사항2.1 초기 상태input은 비어있고 에러 메시지 없음Number of Coins 컬럼은 0.00000000 표시 2.2 유효성 검사 (3가지 에러)상황에러 메시지input이 비어있을 때Amount cannot be empty0.01 미만 입력Amount cannot be less than $0.01잔액(17042.67) 초과Amount cannot exceed the available bal..

문제 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이(1) 파일명 정렬 조건을 파악한다.파일명은 우선 HEAD 부분을 기준으로 사전 순으로 정렬한다. 이때, 문자열 비교 시 대소문자 구분을 하지 않는다. MUZI와 muzi, MuZi는 정렬 시에 같은 순서로 취급된다.파일명의 HEAD 부분이 대소문자 차이 외에는 같을 경우, NUMBER의 숫자 순으로 정렬한다. 9 (2) 정규표현식을 이용해 HEAD와 NUMBER를 분리한다."foo9.txt"를 ['foo', '9', '.txt']처럼 HEAD와 숫자 부분으로 분리해야 한다."foo9.txt".split(/(\d+)/); // \d+ : 숫자가 1개 이상 ..

문제 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이(1) 신호등이 모두 노란불이 되는 시간을 구해야 한다. 과연 어디까지 반복해야 할까?각 신호등마다 초록불, 노란불, 빨간불의 시간이 다르다.하지만 모든 신호등은 같은 패턴(초록 -> 노랑 -> 빨강)을 반복한다.따라서 각 신호등의 한 주기(= 초록 + 노랑 + 빨강)를 구한 뒤, 모든 신호등 패턴이 동시에 처음 상태로 돌아오는 시점을 기준으로 보면 된다. 이 시점을 각 주기의 최소공배수(LCM)로 구할 수 있다.(2) 각 신호등의 노란불 구간을 시간축에 표시한다. 각 신호등은 초록(G) 이후 노랑(Y) 구간에서만 조건을 만족한다.따라서 한 주기에서 노란불..

1. 이번 과제 목표레거시 디자인 시스템의 문제점을 파악하고, 현대적인 디자인 시스템으로 마이그레이션해보기 2. Atomic Design2.1 Atomic Design이란?Brad Frost가 제안한 UI 설계 방법론으로, UI를 작은 단위부터 점진적으로 조합하여 큰 화면을 만드는 방식이다. 화학의 원자 → 분자 → 유기체 → 템플릿 → 페이지 개념을 차용하였다. Atomic Design은 재사용성과 일관성을 높이기 위해 컴포넌트를 체계적으로 분류하는 방법이다. 2.2 Atomic Design의 구조1. Atom더 이상 분해할 수 없는 가장 작은 UI 요소buttoninputlabeliconcolortypography확인 특징독립적인 UI 요소상태나 로직이 거의 없음2. Molecule여러 Atom이 결..

내가 정말 좋아하는 추리소설 작가 데이비드 발다치의 신작 경계에 선 남자를 읽어보았다. 데이비드 발다치의 ‘남자 시리즈’에는 두 개의 대표 시리즈가 있다.바로 에이머스 데커 시리즈와 트래비스 디바인 시리즈다.이 책은 트래비스 디바인 시리즈의 두 번째 작품으로,『6시 20분의 남자』에 이은 후속작이다.사실 나는 에이머스 데커라는 캐릭터에 큰 매력을 느꼈던 독자였다.그래서 처음 『6시 20분의 남자』를 읽을 때 새로운 주인공이 등장한다는 점이 조금은 아쉽게 느껴졌던 기억이 있다. 데커 시리즈만을 기다려왔기 때문이기도 하다.하지만 막상 읽어보니 생각이 달라졌다.디바인이라는 인물 역시 충분히 매력적이었다. 모든 것을 기억하는 데커와는 달리, 디바인은 보다 현실적인 감각과 경험을 바탕으로 사건을 파헤친다. 추리의..

1. 이번 과제 목표복잡한 어플리케이션을 프레임워크의 도움 없이 직접 구현하면서 javascript 기본 역량을 강화하기 2. SPA이전 작성 블로그에서 확인 가능![프레임워크 없이 SPA 만들기 정리글] 3. 3주차 스터디 회고3.1 기술적 성장(1) 옵저버 패턴으로 구현한 전역 스토어 — 구독 해제가 필요 없는 이유나는 cartStore, categoryStore, productListStore 세 개의 전역 스토어를 사용했다.공통된 패턴은 옵저버 패턴 + 싱글톤이다. 내가 만든 구조에서, 왜 구독 해제를 따로 하지 않는 설계가 이 프로젝트에서 자연스러운지 생각해보았다. 스토어 구조 요약싱글톤: 전역에 하나의 인스턴스만 존재 (export const cartStore = new CartStore())..