본문 바로가기

프론트엔드164

파이썬 Python | 알고리즘 | 백준 랜선 자르기 ⭕ 파이썬 Python | 알고리즘 | 백준 랜선 자르기➡️ 문제링크https://www.acmicpc.net/problem/1654 ➡️ 문제 탐색하기K개의 랜선을 N개의 동일한 길이로 잘라야 하는데, 그중에서 가능한 랜선의 최대 길이를 구하는 것이 목적이다. 이때 필요한 랜선의 수 N보다 많이 만들어도 상관없다. 따라서 이 문제는 "N개 이상의 랜선을 만들 수 있는 최대 길이"를 구하는 문제로 정의할 수 있다.단순한 방법으로 접근하였을 때, 가장 긴 랜선의 길이에서부터 하나씩 줄여가면서 N개 이상의 랜선을 만들 수 있는지 확인하려고 하였다. 랜선의 길이가 수백만까지 커질 수 있기 때문에, 매번 확인하는 방식으로는 시간 내에 문제를 해결할 수 없었다. 범위 내에서 최대값을 찾는 문제이므로, 이진 탐색을.. 2024. 8. 20.

ㄷ파이썬 Python | 알고리즘 | 백준 먹을 것인가 먹힐 것인가 ⭕ 파이썬 Python | 알고리즘 | 백준 먹을 것인가 먹힐 것인가➡️ 문제링크https://www.acmicpc.net/problem/7795 ➡️ 문제 탐색하기가장 구현하기 쉬운 방법은 A의 모든 원소와 B의 모든 원소를 비교하는 것이지만, 시간 복잡도는 O(N * M)이며, N과 M이 최대 20,000일 때는 400,000,000번의 연산이 필요하게 된다. 이는 실제 시간으로 4초 이상 걸릴 수 있어 비효율적이라고 판단하였다.문제에서 주어진 조건을 고려할 때, 보다 효율적인 방법이 필요하다고 생각하였다.집합 A와 B를 오름차순으로 정렬하면, B에서 A의 원소보다 작은 원소들을 빠르게 찾을 수 있게 된다. 정렬 자체의 시간 복잡도는 O(N log⁡N) 및 O(M log⁡M)이다.정렬된 B에서 A의 .. 2024. 8. 19.

파이썬 Python | 알고리즘 | 백준 숫자 카드 2 ⭕ 파이썬 Python | 알고리즘 | 백준 숫자 카드 2➡️ 문제링크https://www.acmicpc.net/problem/10816 ➡️ 문제 탐색하기상근이가 가진 카드에서 특정 숫자들이 몇 개 있는지를 알아내야 한다.카드의 개수(N)와 구해야 할 숫자의 개수(M)가 최대 500,000개까지 될 수 있다. 카드의 숫자 범위는 -10,000,000에서 10,000,000 사이이다.각 숫자의 개수를 세는 방법은 각 쿼리마다 O(N)의 시간 복잡도를 가지며, M개의 쿼리에서 총 시간 복잡도가 O(M*N)으로 시간 초과가 발생한다.카드 리스트를 정렬한 후, bisect_left와 bisect_right를 활용하여 각 숫자의 개수를 효율적으로 찾을 수 있다.카드 리스트 정렬: O(N log N)각 쿼리 처리.. 2024. 8. 18.

파이썬 Python | 알고리즘 | 백준 수 찾기 ⭕ 파이썬 Python | 알고리즘 | 백준 수 찾기➡️ 문제링크https://www.acmicpc.net/problem/1920 ➡️ 문제 탐색하기리스트에서 특정 값이 존재하는지 확인해야 한다.처음 문제를 접했을 때 가장 먼저 생각한 방법은 리스트를 순차적으로 탐색하며 값을 확인하는 선형 탐색(Linear Search) 방법이었다. 리스트의 각 요소를 하나씩 확인하여 찾고자 하는 값이 있는지 판단하는 방식으로, 구현이 매우 간단하다. 그러나, 입력 크기 N과 M이 최대 100,000까지 주어지므로 선형 탐색의 시간 복잡도 O(M*N)은 매우 비효율적이라는 생각이 들었다. N=100,000, M=100,000이라면, 총 10억 번의 비교 연산이 필요하게 된다. 따라서, 시간제한 1초를 초과하게 된다.다음.. 2024. 8. 17.

파이썬 Python | 알고리즘 | 백준 사과 담기 게임 ⭕ 파이썬 Python | 알고리즘 | 백준 사과 담기 게임➡️ 문제링크https://www.acmicpc.net/problem/2828 ➡️ 문제 탐색하기바구니의 초기 위치와 크기가 주어졌을 때, 사과가 떨어지는 위치에 따라 바구니를 최소한으로 이동시키는 문제이다. 불필요한 이동을 최소화하여 최종 이동 거리를 계산하는 것이 목표이다.사과가 바구니 안에 떨어지는 경우: 바구니가 이미 사과의 위치를 포함하고 있다면 바구니를 움직일 필요가 없다. 이동 거리는 0이 된다. 사과가 바구니 왼쪽에 가깝게 떨어지는 경우: 바구니를 왼쪽으로 이동시켜야 한다. 이때, 사과와 바구니의 왼쪽 끝 간의 거리만큼 바구니를 이동시키면 된다. 사과가 바구니 오른쪽에 가깝게 떨어지는 경우: 바구니를 오른쪽으로 이동시켜야 한다. 이.. 2024. 8. 16.

파이썬 Python | 알고리즘 | 백준 거스름돈 ⭕ 파이썬 Python | 알고리즘 | 백준 거스름돈 ➡️ 문제링크https://www.acmicpc.net/problem/14916 ➡️ 문제 탐색하기2원과 5원 동전만을 사용하여 특정 금액을 거슬러 주는 문제이다. 가장 직관적인 방법은 큰 단위의 동전을 우선적으로 사용하는 것이다. 14원을 거슬러 준다고 가정하면, 처음에 5원으로 최대한 많이 나누어 보면 5원 세 개를 사용하면 15원이 되지만, 14원을 넘으므로 5원 두 개를 사용하면 10원이 되고, 남은 4원을 2원 두 개로 거슬러 줄 수 있다. 6원을 거슬러 준다면, 5원 하나를 사용하면 1원이 남아 불가능하지만, 2원 세 개를 사용하면 가능하다.조건2원과 5원 동전만 사용하여 거스름돈을 주어야 한다.가능한 적은 개수의 동전을 사용해야 한다.그리.. 2024. 8. 15.

파이썬 Python | 알고리즘 | 백준 컵홀더 ⭕ 파이썬 Python | 알고리즘 | 백준 컵홀더➡️ 문제링크https://www.acmicpc.net/problem/2810 ➡️ 문제 탐색하기극장의 한 줄에 있는 좌석의 정보가 주어졌을 때, 모든 사람이 컵홀더를 사용할 수 있는 최대 사람의 수를 구하는 문제이다.일반석(S)의 경우, 각 좌석마다 컵홀더가 하나씩 배치되는 것이 당연하다. 이를 바탕으로 초기 계산은 각 좌석 수 + 1로 설정하였다.커플석(L)은 두 개씩 쌍으로 주어지므로, 하나의 커플석 쌍당 하나의 컵홀더가 필요하다. 따라서 커플석 두 개당 하나의 컵홀더만 필요하다는 점을 고려하여 컵홀더 수를 줄였다. 커플석 두 개당 하나의 컵홀더가 필요하다는 점에서 커플석의 수를 2로 나누는 것이 합리적이다.좌석의 수 N과 계산된 컵홀더 수 중 작은.. 2024. 8. 14.

파이썬 Python | 알고리즘 | 백준 거스름돈 ⭕ 파이썬 Python | 알고리즘 | 백준 거스름돈➡️ 문제링크https://www.acmicpc.net/problem/5585 ➡️ 문제 탐색하기그리디(Greedy) 알고리즘: 그리디 알고리즘은 매 순간 최적의 선택을 하여 전체 문제의 최적해를 찾아가는 방식이다. 이 문제에서 그리디 알고리즘을 사용하는 이유는 화폐 단위가 배수 관계로 화폐 단위가 큰 것부터 사용하여 최적의 해를 빠르게 구할 수 있기 때문이다. 큰 단위의 동전부터 차례대로 선택하지 않으면, 더 많은 동전을 사용하게 되어 비효율적인 해를 도출할 수 있다. 따라서, 동전 단위를 큰 것부터 작은 것 순서대로 리스트에 저장하고, 순차적으로 거슬러 주는 방식을 사용한다. 큰 단위의 동전부터 사용하면 최적의 해를 보장할 수 있는 이유는, 큰 단위.. 2024. 8. 13.

파이썬 Python | 알고리즘 | 백준 덩치 ⭕ 파이썬 Python | 알고리즘 | 백준 덩치➡️ 문제링크https://www.acmicpc.net/problem/7568 ➡️ 문제 탐색하기두 사람 A와 B의 덩치가 각각 (x, y), (p, q) 일 때, x > p 그리고 y > q이라면 우리는 A의 덩치가 B의 덩치보다 "더 크다"라고 판단한다. 같은 방식으로 다른 사람들과 비교하여 자신의 덩치가 몇 번째인지 등수를 매긴다. 최대 N이 50이므로 O(N^2) 복잡도, 연산 약 2,500개로 시간복잡도 1초 안에 충분히 해결 가능하다. 입력 범위를 항상 잘 살피자! 이렇게 모든 경우의 수를 탐색해보는 알고리즘을 완전탐색 또는 브루트포스라고 한다. ➡️ 코드 설계하기사람의 수 N과 각 사람의 몸무게와 키를 입력받는다.각 사람의 몸무게와 키를 리스트.. 2024. 8. 11.

파이썬 Python | 알고리즘 | 백준 나무 조각 ⭕ 파이썬 Python | 알고리즘 | 백준 나무 조각➡️ 문제링크https://www.acmicpc.net/problem/2947 ➡️ 문제 탐색하기1부터 5까지의 숫자가 적힌 나무 조각을 1, 2, 3, 4, 5 순서로 정렬해야 한다. 인접한 두 조각만 바꿀 수 있고, 바뀔 때마다 현재 순서를 출력해야 한다.버블 정렬을 직접 구현하는 문제라고 생각한다. 버블 정렬은 인접한 두 원소를 비교하여 정렬하는 알고리즘으로, 시간 복잡도는 O(n^2)이다. 하지만, 항상 5개의 조각만 다루고, 각 단계를 출력해야 하는 요구사항 때문에 버블 정렬이 오히려 적합하다고 생각한다.(N-1) + (N-2) + ... + (2) + (1) = N(N-1)/2 단순 구현 문제는 시간복잡도를 계산할 만큼 빡빡하게 나오는 일이.. 2024. 8. 10.

파이썬 Python | 알고리즘 | 백준 커트라인 ⭕ 파이썬 Python | 알고리즘 | 백준 커트라인➡️ 문제링크https://www.acmicpc.net/problem/25305 ➡️ 문제 탐색하기구현 문제로 분류되어 있다. 구현 문제란 문제의 조건을 코드로 직접 구현해야 하는 유형을 말한다. 구현 문제는 구현을 해야 하는...?n명의 학생 점수가 주어지고, 상위 k명까지 상을 받는다.즉, 점수를 내림차순으로 정렬하여 k번째 점수를 출력하면 된다. ➡️ 코드 설계하기입력을 읽어 들인다. 입력은 첫 줄에 n과 k, 다음 줄에 각 학생의 점수로 주어진다.input().split()을 통해 공백을 기준으로 데이터를 나누고, 첫 번째와 두 번째 요소를 각각 N과 k로 변환한다.나머지 데이터를 scores 리스트에 정수형으로 변환하여 저장한다.점수를 리스트에.. 2024. 8. 9.

파이썬 Python | 알고리즘 | 백준 생일 ⭕ 파이썬 Python | 알고리즘 | 백준 생일➡️ 문제링크https://www.acmicpc.net/problem/5635 ➡️ 문제 탐색하기모든 학생을 서로 비교하며 가장 나이가 많은 학생과 가장 어린 학생을 찾는 방식은 O(N^2) 시간 복잡도를 가지므로, N이 작을 때는 효율적이지만 N이 커질수록 비효율적인 방식이 된다. 따라서 학생 리스트를 정렬한 후, 첫 번째와 마지막 학생을 출력하는 방식으로 O(N log N) 시간 복잡도를 가지는 정렬 알고리즘을 선택했다.생일 정보는 '이름, 일, 월, 연도' 형태로 주어지며, 이를 2차원 배열로 저장하여 정렬한다. 정렬 기준은 연도 -> 월 -> 일 순으로 오름차순 정렬하여 생일이 빠를수록 배열의 앞쪽에 오게 한다.입력 데이터는 행 * 4열의 2차원 .. 2024. 8. 8.

파이썬 Python | 알고리즘 | 백준 단어 정렬 ⭕ 파이썬 Python | 알고리즘 | 백준 단어 정렬➡️ 문제링크https://www.acmicpc.net/problem/1181 ➡️ 문제 탐색하기우선, 몇 개의 단어를 처리할지를 미리 알아야 하기 때문에 단어의 개수를 먼저 입력받는 것이 필요하다. 처음에는 단어를 리스트에 저장하려 했으나, 문제 조건에서 중복을 제거하라는 것을 보고 set을 사용하도록 변경했다. set은 중복을 자동으로 제거하는 특성이 있다. 따라서, 단어를 하나의 리스트에 저장하는 대신, 중복된 단어를 제거하기 위해 set을 사용한다. set에 원소 하나를 추가하는 시간복잡도는 O(1)이다. N개의 단어들을 set에 넣어야 하므로 , 총 시간복잡도는 O(N)이다. N은 최대 20,000개로 연산 20,000번은 시간 2초내에 충분.. 2024. 8. 7.

파이썬 Python | 알고리즘 | 백준 나이순 정렬 ⭕ 파이썬 Python | 알고리즘 | 백준 나이순 정렬➡️ 문제링크https://www.acmicpc.net/problem/10814 ➡️ 문제 탐색하기2차원 배열을 사용하여 0번째 인덱스에 나이(age)를, 1번째 인덱스에 이름(name)을 저장하고, 나이끼리 비교하면 될 것 같았다. 하지만, 분명 2차원 배열보다 더 좋은 방법이 있을 것 같다는 고민이 들었다. 찾지 못했다. ㅎㅎ 그렇지만 시간복잡도에 있어서 여유 있다고 생각된다. ➡️ 코드 설계하기우선, 회원의 수를 정하기 위한 숫자를 input() 함수를 사용하여 입력받는다.한 줄씩 나이와 이름을 입력받아 2차원 배열 [나이, 이름]에 저장하는 방식으로 설계했다.나이순으로 정렬하는 방법을 고민했는데, sort 함수를 사용하면 어떨지 생각해 봤다... 2024. 8. 6.

파이썬 Python | 알고리즘 | 백준 일곱 난쟁이 ⭕ 파이썬 Python | 알고리즘 | 백준 일곱 난쟁이➡️ 문제링크https://www.acmicpc.net/problem/2309 ➡️ 문제 탐색하기난쟁이의 수가 9명으로, input의 크기가 매우 작습니다. 7명을 선택하는 모든 경우의 수를 탐색할 수 있을지 생각 해봅시다. 이렇게 모든 경우를 탐색하는 것을 완전 탐색이라고 부르며, 완전탐색은 보통 input의 크기가 작을 때 사용 할 수 있습니다. 9명의 난쟁이 중 2명의 난쟁이를 선택하는 모든 경우의 수는 9 * 8로, 총 72가지입니다. 한 가지 경우에 대해 정답인지 판단하기 위해서는 난쟁이의 키의 합을 구하는 단순 연산만 필요합니다. 따라서 2초의 시간 제한안에 아주 넉넉하게 완전 탐색이 가능합니다. 코딩테스트에서는 1억번의 연산이 대략 1.. 2024. 8. 5.

카카오테크캠퍼스 2기 | STEP2 | 27일차(24-07-30) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 27일차(24-07-30) 회고📝 에러 핸들링지난주 리뷰를 통해 서버에서 전달하는 에러 메시지를 활용하는 방법에 대해 고민하게 되었다. 기존에는 fetch를 사용하여 에러를 처리했지만, 서버에서 전달하는 에러 메시지를 활용하면 사용자에게 더 구체적이고 유용한 피드백을 제공할 수 있다는 점을 알게 되었다. 특히, axios를 사용하여 인터셉터를 통해 에러를 처리하는 방법이 더 효율적일 것이라는 피드백에 특히 집중했다.fetch와 axios의 차이점fetch는 브라우저 내장 API로서 가볍고 간편한 비동기 요청 처리 방법을 제공한다. 예를 들어, fetch를 사용하여 HTTP 요청을 보내는 코드는 다음과 같다.fetch('') .then(response => r.. 2024. 7. 30.

카카오테크캠퍼스 2기 | STEP2 | 26일차(24-07-29) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 26일차(24-07-29) 회고📝 비동기 요청기존 코드에서는 mutate 함수를 사용하여 비동기 요청을 처리했지만, 코드 리뷰를 통해 mutateAsync를 사용하라는 제안을 받았다. 이를 통해 mutate와 mutateAsync의 차이점을 명확히 이해하게 되었고, 어떤 상황에서 mutateAsync가 더 유용한지 고민하게 되었다. 특히 비동기 요청을 처리하는 코드의 가독성을 높이기 위해 async/await 구문을 사용하는 것이 더 나은 선택인지 깊이 생각해보았다. 콜백 함수와 비교했을 때 mutateAsync를 사용하면 코드가 더 직관적으로 보일 수 있다는 점이 특히 중요했다.처음 mutateAsync를 사용해보면서 이를 제대로 이해하고 코드에 적용하는 데.. 2024. 7. 30.

카카오테크캠퍼스 2기 | STEP2 | 25일차(24-07-26) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 25일차(24-07-26) 회고📝 Test code질문 1: Test code를 작성해보면서 좋았던 점과 아쉬웠던 점에 대해 말해주세요.테스트 코드 작성은 처음에는 막막한 과정이었다. 특히 404 에러나 모듈을 찾을 수 없는 에러 등 예상치 못한 문제들이 발생하면서 어려움을 겪었다. 이러한 문제를 해결하기 위해 생성형 AI와 문서를 참고하여 많은 시간을 투자했지만, 스스로 해결했다기보다는 따라 했다는 느낌이 강하게 들었다. 테스트 결과가 방대하고 복잡하여 해석하기 어려운 점도 큰 문제였다. 하지만, 이러한 과정을 통해 Jest 도구와 다양한 테스트 기술을 접할 수 있었고, 문제를 파악할 수 있는 능력을 키울 수 있었다는 점에서 긍정적인 경험이었다. 📝 컴포넌.. 2024. 7. 30.

카카오테크캠퍼스 2기 | STEP2 | 24일차(24-07-25) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 24일차(24-07-25) 회고📝 통합 테스트Weather 컴포넌트를 통합 테스트할 때, 실제 API와 Mock API를 어떻게 활용할지 결정하는 것이 가장 큰 고민이었다. 실제 API를 사용하면 서버의 응답을 직접 테스트할 수 있지만, 네트워크 상태와 서버의 가용성에 영향을 받을 수 있다는 점이 걱정되었다. 반면, Mock API를 사용하면 외부 의존성을 제거할 수 있지만, 실제 서버의 동작을 확인할 수 없다는 점이 문제였다.실제 API 테스트실제 API를 사용하여 Weather 컴포넌트를 테스트하면서, 서버가 실제로 응답하는 데이터를 확인할 수 있었다. 하지만 테스트 중 네트워크 상태에 따라 결과가 달라지는 경우가 발생했고, 서버가 불안정할 때 테스트가 실.. 2024. 7. 30.

카카오테크캠퍼스 2기 | STEP2 | 23일차(24-07-24) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 23일차(24-07-24) 회고📝 Given-When-Then 기법Given-When-Then 기법은 Behavior Driven Development(BDD)에서 자주 사용하는 패턴으로, 테스트 시나리오를 명확히 하는 데 큰 도움이 된다. 이 기법을 통해 테스트 코드 작성 시 각 단계를 명확히 구분할 수 있다.Given: 테스트의 초기 상태나 조건을 설정한다.When: 테스트 대상이 되는 행동을 수행한다.Then: 행동의 결과를 확인한다. 📝 단위 테스트 작성 아래는 유틸리티 함수인 formatDate 함수를 테스트하는 예제이다. Given-When-Then 기법을 사용하여 작성되었으며, formatDate 함수가 주어진 날짜 객체를 올바른 형식으로 변환하.. 2024. 7. 29.

카카오테크캠퍼스 2기 | STEP2 | 22일차(24-07-23) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 22일차(24-07-23) 회고📝 react-hook-form처음에는 모든 폼 필드를 제어 컴포넌트로 구현했다. 입력값을 useState로 관리하고, 변화가 있을 때마다 상태를 업데이트하는 방식이었다. 이 접근 방식에는 두 가지 주요 문제가 있었다.폼이 커질수록 상태와 이벤트 핸들러가 많아지면서 코드가 매우 복잡해졌다.각 입력값 변화마다 전체 폼 컴포넌트가 리렌더링 되어 성능 문제가 발생했다.React Hook Form 라이브러리를 알게 되었고, 이 라이브러리가 제어 컴포넌트의 문제를 해결해 줄 수 있다는 것을 알게 되었다. React Hook Form은 폼 상태 관리를 훨씬 간단하게 만들어주고, 불필요한 리렌더링을 줄여준다. 📝 useForm 훅 사용use.. 2024. 7. 24.

카카오테크캠퍼스 2기 | STEP2 | 21일차(24-07-22) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 21일차(24-07-22) 회고📝 Object와 MapObject와 Map은 모두 자바스크립트에서 키-값 쌍을 저장하는데 사용되는 자료구조이다. 📝 Object키 타입: 문자열 또는 심볼만 키로 사용할 수 있다. 이는 Object가 본질적으로 딕셔너리와 같은 역할을 하기 때문이다.데이터 삽입: 프로퍼티로 데이터를 삽입한다. 하지만 이는 상속된 속성으로 인해 의도치 않은 문제가 발생할 수 있다.obj.key = value;편의 기능: 내장된 편의 기능이 부족하여 데이터 관리가 불편할 수 있다. 예를 들어, size()와 같은 기능이 없다.반복: for...in 문을 사용하여 반복할 수 있지만, 이는 상속된 속성까지 포함될 수 있어 혼란을 야기할 수 있다. 이.. 2024. 7. 23.

카카오테크캠퍼스 2기 | STEP2 | 20일차(24-07-19) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 20일차(24-07-19) 회고📝 type, interface타입스크립트를 사용하면서 type과 interface 둘 다 객체의 형태를 정의하는 데 사용된다는 것을 알게 되었다. 그러나 왜 두 가지 방식이 모두 필요한지에 대해 명확하게 이해하기 어려웠다. 인터넷에서 type과 interface의 차이에 대해 찾아보았지만, 명확한 답을 얻기 쉽지 않았다. 어떤 글에서는 둘의 차이가 거의 없다고 하고, 어떤 글에서는 특정 상황에서만 interface를 사용해야 한다고 주장했다. 공식 문서를 읽어봐도 그 내용이 쉽게 다가오지 않았다.ThemeData, RankingFilterOption, ProductOptionData와 같은 데이터 구조를 정의하면서 type과 i.. 2024. 7. 23.

카카오테크캠퍼스 2기 | STEP2 | 19일차(24-07-18) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 19일차(24-07-18) 회고📝 URL 생성 함수 (URLSearchParams 객체 활용)API 엔드포인트를 문자열로 직접 조합하는 방식이 너무 복잡하게 느껴졌다. 쿼리 파라미터가 많아지고 복잡해질수록 이를 관리하기 어려웠고, URL 인코딩과 같은 세부적인 처리를 수동으로 해야 해서 실수할 가능성도 높았다.URLSearchParams 객체를 활용하여 쿼리 파라미터를 쉽게 관리할 수 있도록 했다. 이를 통해 URL 인코딩 문제도 자동으로 해결되었고, 코드 안정성도 높아졌다. 아래와 같은 함수로 URL 생성 로직을 분리했다.const getThemesProductsPath = ({ themeKey, pageToken, maxResults }: RequestPa.. 2024. 7. 18.

카카오테크캠퍼스 2기 | STEP2 | 18일차(24-07-17) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 18일차(24-07-17) 회고📝 Chakra UI음 Chakra UI를 사용하게 되면서, 얼마나 쉽게 사용할 수 있을지, 그리고 생산성이 얼마나 향상될지에 대해 궁금했다. 새로운 라이브러리를 배우는 과정에서 초기에는 다소 어려움이 있었지만, Chakra UI의 공식 문서와 다양한 튜토리얼을 통해 기본 사용법을 익히는 데 많은 도움이 되었다. 또한 예제 코드를 직접 실행해 보며 실습을 통해 이해도를 높였다. Accordion 컴포넌트Chakra UI의 Accordion 컴포넌트는 상품 상세 정보를 깔끔하고 쉽게 표현할 수 있었다. AccordionItem, AccordionButton, AccordionPanel 등의 컴포넌트들을 조합하여 아코디언의 기본 구조.. 2024. 7. 17.

카카오테크캠퍼스 2기 | STEP2 | 17일차(24-07-16) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 17일차(24-07-16) 회고📝 모듈화멘토님 코드: initInstance 함수를 통해 axios 인스턴스 생성 로직을 캡슐화하여 재사용성을 높였다. 이 함수는 AxiosRequestConfig 타입의 객체를 인자로 받아, 기본 설정과 함께 새로운 Axios 인스턴스를 생성하고 반환한다. 이렇게 하면 필요에 따라 다른 설정(예: baseURL, headers, timeout)을 가진 여러 Axios 인스턴스를 쉽게 생성하고 관리할 수 있다.import { AxiosInstance, AxiosRequestConfig } from 'axios';import axios from 'axios';const initInstance = (config: AxiosReque.. 2024. 7. 17.

카카오테크캠퍼스 2기 | STEP2 | 16일차(24-07-15) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 16일차(24-07-15) 회고📝 페이징 응답 타입 일반화과제 진행 중 페이징 처리를 위한 응답 데이터 타입을 정의해야 했다. 처음에는 각 페이지별로 개별 타입(ThemeProductResponse)을 만들었지만, 모든 페이지에서 응답 데이터 구조가 동일하다는 것을 깨달았다. 이대로라면 중복 코드가 발생하고, 유지보수가 어려워질 것이 걱정되었다.// 초기 코드 (개선 전)export type ThemeProductResponse = { products: ProductData[]; nextPageToken?: string; pageInfo: { totalResults: number; resultsPerPage: number; };};재사용성을 .. 2024. 7. 17.

카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고📝 커스텀 훅(Custom Hook) 및 유틸 함수(util function)프로젝트를 처음 접했을 때, 'hook' 폴더와 'util' 폴더로 파일이 구분된 것을 보고 왜 이렇게 나누는지 궁금했다. 처음에는 단순히 파일을 정리하기 위한 것이라고 생각했지만, 실제로는 각 폴더가 다루는 내용과 역할이 다르다는 것을 깨달았다.hook 폴더: 주로 상태 관리를 위해 커스텀 훅을 모아놓은 폴더이다. 리액트 컴포넌트에서 공통적으로 사용하는 상태 로직을 추출하여 재사용 가능하게 만든 함수들이다.util 폴더: 상태와는 무관하게, 자주 사용되는 로직이나 기능을 함수로 모듈화한 유틸리티 함수들을 모아놓은 폴더이다. 일반적으로 입력을 받아 변환된.. 2024. 7. 17.

카카오테크캠퍼스 2기 | STEP2 | 14일차(24-07-11) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 14일차(24-07-11) 회고📝 API 요청 - axios초기 API 연동 단계에서는 각 요청마다 base URL과 헤더를 일일이 명시했다. 특히 여러 API 엔드포인트를 사용하는 경우 코드 중복이 심했고, 인증 토큰을 수동으로 관리하면서 실수 가능성과 코드 복잡도가 높아졌다.// 초기 코드 (개선 전)axios.get('https://api.example.com/data', { headers: { 'Content-Type': 'application/json', },});해결 방안 1: axios 인스턴스axios 인스턴스를 생성하여 base URL과 공통 헤더를 통합 관리했다. 이를 통해 코드 중복을 제거하고 설정 변경 시 단일 지점에서 관리할 수.. 2024. 7. 17.

카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고📝 함수 추상화 API 호출 로직이 컴포넌트에 결합되어 재사용성이 떨어졌다.const { data, isLoading, error } = useQuery( ['rankingProducts', filterOption], () => fetchRankingProducts(filterOption), { keepPreviousData: true },);개선 코드: useFetchRankingProducts라는 커스텀 훅을 API 파일에 정의하여 useQuery 로직을 캡슐화하였다. // api.jsexport const useFetchRankingProducts = (filterOption) => { return useQuery( .. 2024. 7. 17.

이전 1 2 3 4 ··· 6 다음

티스토리툴바