분류 전체보기 (60) 썸네일형 리스트형 [항해플러스] 5주차 회고 - 디자인 패턴과 함수형 프로그래밍 1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 과제는 컴포넌트 안에 모든 로직이 섞여 있는 상태였기 때문에, 비즈니스 로직과 UI를 분리하는 작업이 필요했다. 하지만 어디까지 로직을 분리해야 하는지, 어떤 기준으로 models/hook/component를 나눠야 하는지 명확히 판단하기가 어려웠다.특히 cart, product, coupon처럼 서로 엮여 있는 도메인들을 feature 단위로 나누는 것이 좋을지, 엔티티 중심으로 나누는 것이 좋을지 처음에는 많은 혼란이 있었다.2. 시도컴포넌트 내부 상태와 로직을 useCart, useProducts, useCoupons로 분리해 각각의 책임을 나누어 보았다.할인율 계산, 장바구니 총액 계산 같은 순수 계산 로직은 models 폴더로.. [항해플러스] 4주차 회고 - 클린코드와 리팩토링 Weekly I learned 4주차 회고 - 클린코드와 리팩토링 🔧 문제이번 주에 코드를 리팩토링하면서 가장 아쉬웠던 점은전역 상태(cartState)를 그냥 아무 고민 없이 사용했다는 것이었다.편하니까 쓰고, 계속 이어서 쓰게 됐는데, 어느 순간 상태 흐름이 꼬이기 시작했다.또, 구조를 바꾸고 싶은 마음에 기존 코드의 흐름을 완전히 이해하지 못한 채 작업을 시작했던 것도 문제였다.기능은 동작하는데 뭔가 마음이 찜찜했고, 중간에 로직을 몇 번 다시 뜯어보면서 ‘아 이걸 왜 이렇게 짰지?’ 싶은 순간도 많았다.🔍 시도하나의 파일에 다 모여 있던 이벤트 핸들러들을 기능 단위 함수로 분리(handleCartAdd, handleCartClick, handleQuantityChange, handleCartR.. [항해플러스] 3주차 회고 - React, Beyond the Basics React, Beyond the Basics feat) React 성능 최적화 & Context 리팩토링✅ Keep (계속 유지하고 싶은 나의 방향)React.memo, useMemo, useCallback 등 리렌더링 최적화를 위한 도구들을 실제로 의도적으로 적용해본 경험.테스트 기반으로 성능 이슈를 직접 확인하고 구조를 리팩토링한 흐름. 테스트 없었으면 놓쳤을 문제들도 있었을 것 같다.유지보수와 확장성을 고려하여 기능 단위로 폴더를 나누고, 각 도메인마다 Context/Provider/hooks/UI를 분리한 구조로 설계했다.특히 useItems, useComplexForm 등 커스텀 훅으로 UI와 로직을 분리한 점이 코드 가독성이나 응집도 면에서 효과적이었던 것 같다. 이번 과제를 하며 "내가 왜 .. [항해플러스] 2주차 회고 - 프레임워크 없이 SPA 만들기 ✍️ 1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)처음으로 React 없이 가상 DOM부터 diff 알고리즘, 이벤트 위임 시스템까지 직접 구현해보는 과제를 하며 전체 렌더링 흐름에 대한 감이 잡히지 않아 막막했다.특히 createVNode → normalizeVNode → createElement → updateElement까지의 흐름이 머릿속에 명확히 정리되지 않아서 함수 하나하나를 어디에서 왜 호출하는지를 파악하는 데 시간이 오래 걸렸다.또한 이벤트 시스템을 만들면서 setupEventListeners의 등록 방식과 addEvent, removeEvent의 연결 구조, 그리고 root 기준 이벤트 위임 시 중복 등록 방지를 어떻게 처리할지도 고민이 많았다.✍️ 2. 시도흐름을 따.. [항해 플러스] 1주차 회고 - 바닐라 JS로 SPA 구조 직접 구현해보기 바닐라 JS로 SPA 구조 직접 구현해보기이번 주는 프레임워크 없이 순수 JavaScript로 SPA(Single Page Application)을 직접 구현하며라우터, 상태 관리, 이벤트 위임, 정적 호스팅 배포까지 웹앱의 핵심 동작을 체감해본 한 주였다.✅ Keep – 이번 주에 잘한 점 / 계속 유지하고 싶은 시도React 없이 상태 기반 렌더링 구조를 직접 구성해보며 프레임워크가 감춰주던 내부 동작 원리를 이해함createRouter()를 직접 구현해 라우팅 흐름의 본질을 체험했고, 라우트 등록 시 guard, redirect, render로 역할을 분리해 설계함**기능 중심 폴더 구조(FSD)**를 적용하여 features, app, shared로 각 폴더의 책임을 명확히 나눔페이지 전환 등의 .. You don't know JS Part 1 - Chapter 3 공부 기록하기 1. 이터레이션 이터레이터 패턴(iterator pattern) : 데이터를 덩어리 단위로 표준화된 방법을 사용해 각각 처리할 수 있음. 데이터 전체를 일정 단위로 쪼개어 조각들을 차례대로 순회하며 점진적으로 처리하면 좀 더 범용적이고 유용할 거라는 아이디어에서 출발함. 이터레이터 패턴에는 처리할 데이터를 참조하는 데이터 구조인 이터레이터(iterator)가 정의됨. 이터레이터는 next()라는 메서드를 지원하며, next()를 호출할 때마다 관계형 데이터베이스에서 질의 결과에 해당하는 레코드(record)나 줄(row)와 같은 데이터 조각이 차례대로 반환됨. 이터레이터 패턴에서는 데이터를 전부 처리했음에도 불구하고 또 다른 작업을 시작할 때 특별한 값을 사용하거나 예외를 발생시켜 반복 작업이 종료되었다.. 늘 긴장되지만 오히려 좋아~ feat. 동료 평가를 통해 찾은 앞으로의 성장 방향 얼마 전 회사에서 동료 평가를 받았다. 피드백을 받을 때마다 살짝 긴장되고, 막연한 두려움이 들기도 한다. 내가 생각한 모습과 다른 평가가 나오면 어떡하지? 혹은 사람들이 날 별로라고 생각하면 어쩌지? 하는 걱정들이 앞서는 것 같다. 하지만 생각해보면 이런 두려움은 불확실성에서 비롯된 것일 뿐, 막상 피드백을 받으면 생각보다 별거 아니라는 걸 깨닫는다. 오히려 내가 잘하는 점과 부족한 점을 명확히 알 수 있어 성장의 기회가 된다. 이번 동료 평가를 통해 내 성장 과정을 돌아보고, 앞으로 나아갈 방향을 정리할 수 있어 의미 있는 시간이었다. 1. 동료들이 본 나의 강점😊 빠른 학습 능력과 신속한 개발 처리 능력동료들은 내가 새로운 기술을 빠르게 습득하고, 이를 신속하게 실제 업무에 적용하는 능력.. You don't know JS - Chapter 2 공부 기록하기 함수함수 선언(function declation)과 함수 표현식(function expression)의 차이 함수 선언 : 함수 a는 식별자 a와 실제 함수를 나타내는 값의 연관이 컴파일 단계에서 맺어짐 함수 표현식 : 함수와 함수 식별자가 코드가 실행되기 전까지는 관계를 맺지 않음 JS에서 함수는 객체의 한 종류. 모든 프로그래밍 언어에서 함수를 값으로 취급하지는 않지만 JS 같이 함수형 프로그래밍 패러다임을 지원하는 언어에서는 함수를 값으로 취급하는 게 필수 함수는 값이므로 함수를 객체의 프로퍼티로 할당할 수 있다. var whatTosay = { greeting(){ console.log('안녕하세요!'); }, question(){ console.log('이.. 이전 1 2 3 4 ··· 8 다음
