반응형 프론트엔드/카카오테크캠퍼스 2기37 카카오테크캠퍼스 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. 카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고📝 타입 추론# 기존 코드const items: Item[] = getItems();# 수정 코드const items = getItems();처음에는 getItems() 함수가 반환하는 값의 타입을 명시적으로 지정하는 것이 안전하다고 생각했다. 하지만 코드가 길어지면서 타입 어노테이션이 불필요하게 복잡해 보였다.TypeScript의 타입 추론 기능을 활용하여 items 변수의 타입을 생략했습니다. getItems() 함수의 반환 타입이 명확하기 때문에 TypeScript 컴파일러가 자동으로 items 변수의 타입을 Item[]으로 추론한다. 코드를 간결하게 유지하면서도 타입 안정성을 확보할 수 있었다.타입 추론에 대한 이해가 부족.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고📝 Context API 사용한 인증 관리Context API 사용 방법createContext 메서드를 사용하여 context를 생성한다.생성한 context를 사용할 컴포넌트에 값을 전달하기 위해 Provider로 감싼다.Provider의 프로퍼티인 value에 전달할 데이터를 넣는다.Provider의 value에 담은 데이터를 전달할 때는 두 가지 방식이 있다: Consumer 컴포넌트와 useContext 훅. 이번 프로젝트에서는 useContext 훅을 사용했다.Context 생성Context는 전역적으로 사용할 값을 제공하기 위해 사용된다.export const AuthContext = createContext(unde.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고📝 React 네이밍 규칙모든 파일과 폴더를 컴포넌트에 맞추어 PascalCase로 작성하다 보니, 어떤 기능을 하는지 파악하기 어려웠다. 예를 들어, 컴포넌트와 유틸리티 파일이 같은 형식으로 작성되어 구분이 쉽지 않았다. 이러한 문제를 해결하기 위해, 폴더와 파일 네이밍 규칙을 좀 더 세분화할 필요가 있었다.폴더 및 파일 네이밍 규칙디렉토리 폴더명컴포넌트 폴더: PascalCase (대문자로 시작) - 컴포넌트임을 한눈에 파악할 수 있도록예: Header, Footer, UserProfile일반 폴더: CamelCase (소문자로 시작)예: components, services, utils서브폴더: CamelCase (소문자로 .. 2024. 7. 10. 카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고📝 type 및 interfaceTypeScript를 학습하면서 헷갈렸던 부분 중 하나는 type과 interface의 차이점이었다. 처음에는 둘 다 비슷한 역할을 하는 것 같아 어느 상황에서 어떤 것을 써야 할지 혼란스러웠다. 그래서 둘의 차이점을 명확히 이해하고자 공부하게 되었다.typetype은 모든 타입을 선언할 때 사용할 수 있다. 기본 타입뿐만 아니라 복합 타입(union, intersection)도 선언할 수 있다.확장 불가능한 타입을 선언하고 싶다면 type을 사용한다.type StringOrNumber = string | number;interfaceinterface는 객체에 대한 타입을 선언할 때 사용할 수 있다... 2024. 7. 10. 카카오테크캠퍼스 2기 | STEP2 | 8일차(24-07-03) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 8일차(24-07-03) 회고📝 OutletReact Router를 처음 접하고 사용하면서 고민을 하게 되었다. 라우팅 구조를 어떻게 더 효율적이고 관리하기 쉽게 만들 수 있을까 하는 것이었다. 특히, 여러 경로에서 공통으로 사용되는 레이아웃을 어떻게 처리할지에 대한 고민이 많았다. 초기 구현처음에는 각 경로에 대해 개별적으로 컴포넌트를 렌더링하는 방식으로 설정하였다.각 경로마다 일일이 컴포넌트를 정의해주어야 한다.import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';import Footer from '@/components/Footer';import Header from '@/co.. 2024. 7. 9. 카카오테크캠퍼스 2기 | STEP2 | 7일차(24-07-02) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 7일차(24-07-02) 회고📝 Git/Github 세팅프로젝트 디렉토리로 이동작업 환경에서 프로젝트 파일을 관리하는 위치이다. 이 위치는 프로젝트 파일을 한곳에서 접근하고 관리할 수 있는 곳이다.C:\\Users\\User\\Desktop\\workspaceGit 저장소 클론기존에 작업한 레퍼지토리도 있지만(https://github.com/sugoring/react-gift-react-foundation), 새로운 프로젝트에서 실행하는 방법을 익히고 싶어서 해당 레퍼지토리(https://github.com/kakao-tech-campus-2nd-step2/react-gift-ui-flow)를%EB%A5%BC) 클론했다.네트워크 상태가 불안정하여 클론 속도가.. 2024. 7. 9. 카카오테크캠퍼스 2기 | STEP2 | 6일차(24-07-01) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 6일차(24-07-01) 회고📝 설정 관련 PR 리뷰ESLint 설정ESLint 설정은 프로젝트를 진행하면서 워닝/에러가 표시되는 부분을 확인하고 필요한 설정을 추가해 나가는 방식이 좋음.설정 파일 종류: .eslintrc.json, .eslintrc.cjs, .eslintrc.js 등 다양한 파일 이름이 있는데, 이는 작성 방식과 빌드 크기에 차이가 있을 수 있으나 큰 영향을 미치지 않음.ESLint와 Prettier 설정ESLint: JavaScript/TypeScript 코드를 일정한 규칙에 따라 작성하도록 돕는 도구. (예: 사용되지 않는 변수 경고, import문 순서 경고)Prettier: 코드 포매팅 도구로, 코드의 모양을 예쁘게 만들어 줌. (예.. 2024. 7. 8. 카카오테크캠퍼스 2기 | STEP2 | 5일차(24-06-28) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 5일차(24-06-28) 회고📝 StorybookStorybook은 컴포넌트의 다양한 상태를 직접 눈으로 확인할 수 있는 환경을 제공한다. 버튼의 색상이나 크기를 변경하면서 실시간으로 UI 변화를 확인할 수 있었다. UI의 일관성을 유지하는 데 도움이 되고, 컴포넌트를 개발할 때 오류를 줄이고 효율적으로 작업할 수 있다.다양한 상태에서 컴포넌트가 어떻게 보이는지 미리 확인할 수 있어 디자인의 일관성을 유지하는 데 도움을 주었다. 실시간으로 UI를 조정할 수 있어 사용자 경험을 개선할 수 있었다. 📝 Storybook 설치 및 설정설치 명령어Storybook을 처음 설치할 때, 타입스크립트로 설정하기 위해서 package.json 파일을 열어 의존성에 타입.. 2024. 7. 1. 카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고📝 ESLint, Prettier (Airbnb)1. typescript-eslint 설정eslint와 typescript는 각각의 parser를 사용하여 다른 AST(Abstract Syntax Tree)을 생성하기 때문에, 이를 해결하기 위해 typescript-eslint를 설정하였다.다양한 설정 파일을 다루는 것이 어려웠으나, 최종적으로 최신 버전으로 설치하는 것이 가장 좋다는 결론에 도달하였다.npm install --save-dev eslint TypeScript와 ESLint의 통합을 위해 필요한 typescript-eslint 관련 라이브러리를 설치하였다.npm install --save-dev @typescript-.. 2024. 7. 1. 카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고📝 tsconfig.jsontsconfig.json을 파일에 관하여, 문제가 생겼을 때 검색해서 나온 대로 설정했을 뿐, 정확히 무엇을 하고 있는지 이해하지 못했다. 🤷♂️tsc 사용하기tsconfig.json을 만들지 않고도 tsc를 사용할 수 있다는 사실을 알았다. tsc 명령어를 통해 원하는 .ts 파일을 .js로 컴파일할 수 있었다.$ tsc hello.ts tsc는 tsconfig.json 파일 없이도 바로 사용할 수 있었다. 그렇다면 왜 tsconfig.json을 설정해야 할까? 🤔 매번 명령어에 옵션을 주는 것이 번거롭고, 프로젝트에서 일정한 설정을 유지하기 위해서였다.vscode는 기본적으로 TypeScript에.. 2024. 7. 1. 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고📝 Create React AppBabel을 사용하여 트랜스파일링하고, Webpack으로 파일들을 번들링 하는 구조자바스크립트 기반으로, 최근에는 다양한 언어를 이용하여 자바스크립트의 한계를 극복하는 번들러와 트랜스파일러가 등장하고 있다. 자바스크립트는 싱글 스레드 언어로, 프로젝트 규모가 커지면 빌드 시간이 증가하여 개발 생산성이 저하될 수 있다.이러한 문제를 해결하기 위해 새로운 도구들이 등장하였다.번들러 Webpack > Vite개발 단계에서는 esbuild를 통해 빌드하고, 프로덕션에서는 rollup을 통해 번들링 한다. 현재는 rollup을 통해 프로덕션 빌드를 진행하지만, 추후 esbuild가 발전하면 프로덕션 빌드도 e.. 2024. 7. 1. 카카오테크캠퍼스 2기 | STEP2 | 1일차(24-06-24) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 1일차(24-06-24) 회고📝 과제 수행 기록조별 그라운드 룰 설정 & 다짐 공유하기스케줄 결석 시 반드시 팀원들에게 알리기 📢 (결석 사유는 공유하지 않아도 됩니다).플래너는 매일 스케줄 📅, 학습일지 제출 📝, 과제 제출 마감일 등을 슬랙에 공유합니다.금요일은 21:00까지 학습 일지를 제출해야 합니다 ⏰. Git/Github 학습하기소스트리를 많이 사용하여 익숙해졌습니다. Git 명령어로 사용해야 하는 이유는 무엇인가요?프로젝트 디렉토리로 이동: 작업을 시작하기 전에 프로젝트 디렉토리로 이동했습니다.PS C:\\Users\\User> cd C:\\Users\\User\\Desktop\\workspace Git 저장소 클론: 프로젝트의 초기 코드베이.. 2024. 6. 25. 카카오테크캠퍼스 2기 | 10주차(24-06-10 ~ 24-06-16) 회고 ⭕ 카카오테크캠퍼스 2기 | 10주차(24-06-10 ~ 24-06-16) 회고불변성을 유지하는 방법을 배우면서, 참조 타입의 값을 변경할 때 원본을 수정하지 않고 새로운 배열이나 객체를 생성하는 중요성을 깨달았습니다. 🧩 이를 통해 상태 변화가 명확해지고, 디버깅이 용이해졌습니다.클래스 컴포넌트와 함수형 컴포넌트의 차이점을 이해하고, Hook을 사용하여 함수형 컴포넌트에서도 상태와 생명주기 관리를 할 수 있게 된 것은 큰 수확이었습니다. useEffect를 통해 생명주기 메서드를 대체하고, 상태 변경에 따른 컴포넌트의 재렌더링을 관리할 수 있었습니다. 🔄이 프로젝트를 통해 React의 기본 개념과 상태 관리, 불변성 유지의 중요성을 명확하게 이해할 수 있었으며, 이를 통해 더욱 효율적이고 안정적인 .. 2024. 6. 19. 카카오테크캠퍼스 2기 | 9주차(24-06-03 ~ 24-06-09) 회고 ⭕ 카카오테크캠퍼스 2기 | 9주차(24-06-03 ~ 24-06-09) 회고"함수(또는 메서드)가 한 가지 일만 하도록 최대한 작게 만들어라"라는 요구사항에 맞추기 위해 최대한 노력했습니다. TodoApp(src\components\TodoApp\TodoApp.jsx) 컴포넌트를 더 작은 단위로 분리하여 상태 관리를 보다 효율적으로 하려고 시도했습니다. 이를 위해 상태를 저장하는 부분을 여러 컨테이너로 분리했으나, 이 과정에서 각 컨테이너 간에 상태가 공유되지 않는 문제점이 발생했습니다. 😓이 문제를 해결하기 위해 CONTEXT API를 사용할 수 있다는 것을 알게 되었습니다. 하지만 아직 CONTEXT API에 대한 공부가 충분히 이루어지지 않아, 이를 적용하는 데 어려움을 겪었습니다. 앞으로 고급.. 2024. 6. 19. 카카오테크캠퍼스 2기 | 8주차(24-05-27 ~ 24-06-02) 회고 ⭕ 카카오테크캠퍼스 2기 | 8주차(24-05-27 ~ 24-06-02) 회고이번 한주는 실력적으로 스스로에게 만족하지 못했지만, 하루하루 조금씩 발전하는 나를 발견한 순간들이 있었다 😊. 이런 경험을 통해 반복 학습의 중요성을 다시금 느꼈다 📚.아직 자바스크립트가 많이 부족한 상황이다. 요즘 집중력이 떨어지면 자꾸 포기하거나 다음으로 미루게 되는데, 이는 자바스크립트를 제대로 활용하지 못하게 하는 원인 중 하나다. 문제를 찾아보고 답을 알게 되어도 내 코드에 적용하는 데 어려움을 겪고 있다 😔. 모든 것이 아주 느리게 진행되는 것 같다 🐢.곧 STEP 2가 시작되는데, 모르는 것은 무조건 알고 이해하자고 다짐했다 💪. 2024. 6. 11. 이전 1 2 다음 반응형
