dev_lee

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())..

1. 이번 과제 목표const 수강생 = { Storybook + Chromatic을 활용한 시각적 회귀 테스트 작성해보기: false, Playwright를 활용한 e2e 테스트 작성해보기: false,}expect(테스트 코드 익숙해지기(수강생)) .toEqual({ Storybook + Chromatic을 활용한 시각적 회귀 테스트 작성해보기: true, Playwright를 활용한 e2e 테스트 작성해보기: true, }) 2. E2E테스트 2.1 E2E 테스트란?End-to-End 테스트는 사용자의 관점에서 소프트웨어의 전체 시스템을 테스트하는 과정을 말한다. 이 테스트는 사용자의 실제 사용 사례를 모방하여 소프트웨어의 모든 구성 요소와 그 상호작용이 의도한 대로 작동하는지 확인한다. E..

1. 이번 과제 목표const 수강생 = { 테스트를 작성해본 경험이 없다면, 테스트를 작성하는 패턴 익숙해지기: false, 테스트 작성에 익숙해졌다면, 잘 작성하는 테스트는 어떻게 작성하는지 공부하기: false, 테스트 작성시 고려해야 하는 여러가지 이슈에 대해 학습하기: false,}expect(테스트 코드 익숙해지기(수강생)) .toEqual({ 테스트를 작성해본 경험이 없다면, 테스트를 작성하는 패턴 익숙해지기: true, 테스트 작성에 익숙해졌다면, 잘 작성하는 테스트는 어떻게 작성하는지 공부하기: true, 테스트 작성시 고려해야 하는 여러가지 이슈에 대해 학습하기: true, }) 2. 테스트 2.1 테스트란?프로그래밍에서 테스트는 소프트웨어 개발 과정의 중요한 부분으로, ..

항해가 끝난 지 어느덧 2주 정도가 지났다.앞선 항해 회고에서도 이야기했듯, 항해 과정 동안 정말 많은 기술과 개념들을 접했다. 짧은 시간 안에 다양한 내용을 배우다 보니, 다시 한 번 차분히 복습하며 정리할 필요성을 느끼게 되었다.혼자 공부하는 것보다는 여러 명이 함께하는 편이 동기부여도 되고, 서로 다른 시각에서 배울 수 있는 점도 많다고 생각했다. 그래서 항해를 함께 수강했던 민석님과, 회사에서 같은 프론트엔드 개발자로 일하고 있는 연정님, 현주님과 함께 스터디를 시작하기로 했다.스터디 주제는 항해에서 배운 내용을 중심으로 하되, 각자 공부하고 싶은 개념이나 진행해보고 싶은 프로젝트가 있다면 그 내용도 중간중간 포함시키는 방식으로 진행하기로 했다. 또한 항해에서 특히 좋았던 활동이었던 데일리 스크럼..

10주간의 항해 과정이 끝이 났다.사전 스터디를 포함하면 약 4개월 동안 진행된 여정이었다.결론부터 말하자면, 항해에 참가한 것에 대해 100% 만족한다.스스로의 성장을 갈망했고 이직을 고민하던 시점이었기에, 항해는 내게 정말 필요했던 교육이었다.이번 글에서는 8월 항해 신청부터 12월 항해 종료까지의 타임라인을 간략하게 회고하며 이야기를 마무리해보려고 한다. 항해를 처음 알게 된 건 회사에서 백엔드 기수를 수강 중이던 분의 추천 덕분이었다.교육 내용이 꽤 만족스럽다며 적극적으로 권해주셨고, 옆에서 노션으로 정리된 학습 자료와 멘토링·과제 피드백 과정을 지켜보며 체계적인 교육이라는 인상을 받았다.(이 자리를 빌려 서희님께 감사 🙇‍♂️)그렇게 항해 7기에 사전 신청을 완료한 뒤, 회사에서 가장 친한 동..

1. 이번 과제 목표const 수강생 = { SSR을_직접_구현할_수_있음: false, SSG를_직접_구현할_수_있음: false, 프론트엔드_프로젝트_배포프로세스를_이해함: false, 인프라_레벨_최적화_개념을_이해함: false, CDN_및_캐싱_전략을_수립할_수_있음: false}expect(인프라_레벨_성능_최적화_학습(수강생)) .toEqual({ SSR을_직접_구현할_수_있음: true, SSG를_직접_구현할_수_있음: true, 프론트엔드_프로젝트_배포프로세스를_이해함: true, 인프라_레벨_최적화_개념을_이해함: true, CDN_및_캐싱_전략을_수립할_수_있음: true, }) 2. SSR2.1 SSR (Server Side Rendering)서버..

1. 이번 과제 목표const 수강생 = { 단일책임원칙이_적용된_좋은폴더구조를_안다: false}expect(관심사분리_폴더구조학습(수강생)) .toEqual(수강생.단일책임원칙이_적용된_좋은폴더구조를_안다 === true 2. 관심사의 분리2.1 관심사의 분리란?언어, 모듈, 파일, 함수, 클래스 등 특정 계층이 구분가능한 하나의 명확한 역할만을 수행하도록 설계함으로써, 코드의 가독성과 유지보수성을 향상시키고자 하는 행위2.2 Atomic 디자인 패턴UI를 어떻게 조립할 것인가?분리 기준UI의 형태 / 재사용 단위시각적 구성과 조합 관계레벨Atom → Molecule → Organism → Template → Page강점디자인 시스템, UI 일관성에 강함디자이너와 협업하기 좋음버튼, 인풋, 카드 ..

1. 이번 과제 목표const 개발자 = { 디자인_패턴을_프론트엔드에_적용할_수_있음: false, 데이터_계산_액션을_구분할_수_있음: false, 도메인_중심으로_코드를_구조화할_수_있음: false}expect(도메인_로직_분리_학습(개발자)) .toEqual({ 디자인_패턴을_프론트엔드에_적용할_수_있음: true, 데이터_계산_액션을_구분할_수_있음: true, 도메인_중심으로_코드를_구조화할_수_있음: true }) 2. 디자인 패턴과 함수형 프로그래밍2.1 디자인 패턴소프트웨어 개발에서 반복적으로 등장하는 문제를 해결하기 위해 만들어진 일종의 “재사용 가능한 설계 템플릿”.무슨 문제를 해결하는지어떤 구조로 해결하는지언제 사용해야 하는지를 알려주는 검증된 설계 방식...