항해 플러스

지금까지의 회고쳇바퀴 같은 변명스트레스를 조금이라도 줄이고자 일-집-운동 이라는 루틴한 삶을 살고 있는데, 이제와서 생각해보니 도전을 하지 않겠다 하는 변명이었던 것 같습니다. 항해 플러스 참여 계기올해는 꼭!올해는 꼭 삶에 변화를 주어, 더 나은 방향으로 개선되었으면

토요일 당일에 부여된 과제가 너무 재미있어보여서 1일차부터 바로 코드를 작성해봤습니다. OT나 발제, 네트워킹을 가지지 못했던 반작용으로 완성하고나니 3시간이 지나있었습니다.구체적인 내용은 작성하기 너무 방대하여 간략히 기록하자면,간단한 CSS나 HTML이 텍스트 더미

기본과제 완료1~2일차를 거쳐서 해결되지 않은 오류가 수정되었습니다.팀원의 도움으로 키워드를 받아 한줄한줄 테스트 코드를 뜯고 씹고 하니까, 제 실수가 어디인 지 확실하게 알게되었습니다.빠른 구현이 요구되던 회사와는 다른 느낌으로, 거의 처음으로 주어진 테스트를 하나씩

4일차까지 해결되지 않던 오류를 해결했습니다.기분이 참 좋았습니다. 😊😊오늘 오픈 세션 중에는 Router에 대한 Q&A가 많아, SPA에서의 확장 가능한 Router의 중요성에 대하여 설명해주셨습니다. 처음 SPA 형태로 index.html 하나만을 가지고, 라우

이번 주차를 지나며 겪었던 문제가 무엇이었나요?테스트 도구에 대한 접근이 어색하였습니다. (첫 PR)첫PR구현이나 배포는 다해놓고 정작 basic에 해당하는 테스트도 통과하지 못하는 상황이 당혹스러웠습니다.화살표 함수의 불필요한 래핑으르 하는 습관이 있다는 걸 알았습니

어제 발제시간부터 흥미로운 주제에 대하여 코딩의욕이 솟았습니다. 수년째 React를 사용하면서도, 내부적으로 어떤 방식으로 Virtual DOM을 구현하는 지, 어떤 방식으로 실제 HTML에 내용이 반영되는 건 지, 궁금해하다가도 결국 업무가 우선되어 보지 않았던 부분

이번 과제는 '문제에 답이 있다' 와 같은 적절한 가이드를 통해 답을 유도하고 있어서, 1주차 보다는 그래도 빠르게 해결했습니다.그래서 오늘은 이 깔끔한 테스트 코드를 기반으로 어떤 로직을 이해해야 할 지를 정리해보려고합니다.가상 DOM, JSX 변환, props, c

프레임워크 없이 SPA 만들기 13일차 과제를 하면서 구현했던 것들 중 배포 단계에서 URL의 처리 과정을 기록하였습니다. 다른 기능들은 앞선 일차에 수행하였습니다.

이번 주차를 지나며 겪었던 문제가 무엇이었나요?이번 과제는 저번주와 다르게 테스트 코드의 순서대로 차근차근 진행했습니다.테스트 코드 중 위임함수를 세팅하는 부분에서 오류가 있었습니다.문제를 해결하기 위해 어떤 시도를 하셨나요?테스트 코드를 하나씩 분리해서 테스트하였습니

이번주 과제는 이미 React에 구현되어있는 훅들을 직접 구현해보는 과제였습니다. 먼저 얕은 비교(shallowEquals)와 깊은 비교(deepEquals)를 하는 함수를 만들고, useRef, useCallback, useMemo Hooks를 구현하였습니다.그리고

멘토링 정리 금주는 주중 출장으로 인해 주말에 과제를 모두 처리하고, 멘토링을 받는 오늘 배포과제 까지 완료했습니다. 직면한 문제 과제를 진행하면서 직면한 문제는 환경 오류 2, 테스트 오류 1 이었습니다. 저장 시 eslint와 prettier 충돌 오류 커밋 시

항해 플러스 프론트엔드 - 요청할 때마다 증식하는 선원들이제 3년차 개발에 접어든 초짜 개발자로서 항해 플러스를 신청하게 된 이유와, 첫 번째 챕터를 무사히 종료하면서 과정에서의 경험을 공유 및 기록해보고자 합니다. 먼저, 항해 플러스 프론트 엔드 과정을 신청하게 된

항해 플러스 프론트엔드 - 클린코드와 리팩토링이번 주차 과제는 정상 동작은 하지만, 코드의 컨벤션이 정해지지 않은, 들여쓰기나 띄어쓰기, 변수와 함수명 등이 일관성이 없는 상태의 코드를 다른 사람이 보더라도 별도의 설명없이 로직을 이해할 수 있는 코드로 리팩토링하는 것

항해 플러스 프론트엔드 - 일주일에 하루 실패하는 코드월요일에 대부분의 리팩토링이 끝나고, 화요일에 가벼운 마음으로 일어나 수영갈 준비를 했습니다. 잠깐 켜져있는 PC에 지문인식으로 화면은 키고, 열려있던 VSCode 화면을 바라봤는데, 어제까지만 해도 문제가 없던 코

코드 컨벤션의 경우 어느정도 대세를 따르는 룰이 몸에 베어있어 팀 토의 없이 작성했던 룰과 팀 컨벤션을 다시한번 정하고 나서의 룰이 크게 차이가 없었습니다. 다만, 진행을 하면서 디렉토리 구조를 잘 짜는 방법에 대하여는 여러번 고민을 하게 되었고, 멘토링 시간에도 테

항해 플러스 프론트 엔드 - 클린코드와 리팩토링이번 클린코드와 리팩토링 과제를 마치며 해당 과제 간 느꼈던 문제와 경험을 기록해보고자 합니다. 먼저, 이번 리팩토링 과제는 사실 현재 업무와 가장 밀접한 상황이 주어졌습니다.고의적 더티 코드를 기반으로,직관적인 변수와 함

항해 플러스 프론트엔드 - 디자인 패턴과 함수형 프로그래밍이번 주차는 디자인 패턴과 함수형 프로그래밍이라는 주제로, 기능은 모두 구현이 되어있는 React 기반의 프로젝트 내에서, 순수 함수와 액션 함수들을 구분하여 분리를 하는 과정을 학습하는 내용이었습니다.소프트 웨

기본 과제 중 함수 관련된 분리를 마무리하고, 심화 과제의 커스텀 훅을 만들어 보았습니다. 그리고, 전체적으로 모든 파일이 한개의 컴포넌트에 있는 상태여서 한번 Page별 컴포넌트 방식으로 리팩토링했습니다. 이에 따라, 훅들을 전역적으로 사용하기 위해 Context A

항해 플러스 프론트엔드 - 디장인 패턴과 함수형 프로그래밍이번 과제는 평소에는 약간 간과한 함수들의 분류에 대하여 집중적으로 학습하는 시간이었습니다. 디자인 패턴 자체는 발제 시간을 통해서 학습을 하였습니다. 싱글톤이나 팩토리 등등.. 코딩을 배우면서 한번씩은 들어본

항해 플러스 프론트엔드 - 관심사 분리와 폴더구조단일 파일로 구현된 페이지 컴포넌트 파일을 FSD 기법을 적용해 코드를 분리하여 관심사를 분리하는 것을 목표합니다. 🏗️ FSD (Feature-Sliced Design)란? 기능(Feature) 중심으로 코드를 Lay

항해 플러스 프론트엔드 - 관심사 분리과 폴더구조어제까지해서 관심사를 모두 분리하고 남은 page 코드입니다. props를 완전히 없앴으며, view만 있는 item 정도만 받아서 수행하는 것으로 변경했습니다.회사에서 자주 사용하던 패턴인데, URL을 구성하는 Path

항해 플러스 프론트 엔드 - 관심사 분리와 폴더구조테오는 FSD가 정설은 아니다, 완벽한 아키텍쳐가 아니다 라고, 혹시나 맹신을 하게 될까봐 걱정하는 말을 발제와 공통 세션, 멘토링에서 자주 언급을 하셨습니다만, 이 나누고 옮기는 과정을 경험하는 것 자체에 대한 의의가

항해 플러스 프론트엔드 - 2챕터 회고이번 챕터의 경우 실질적으로 현재 업무에 가장 도움이 되는 과정이었던것 같습니다. 지금 담당하는 업무 중 하루에 1/4는 기존 솔루션 쪽 작업을 하는 수준으로 스파게티 코드를 항상 보고 있는 상황입니다.코드에 사용된 변수가 해당 파

항해 플러스 프론트엔드 - 프론트엔드 테스트 코드## 테스트 코드 드디어 시작된 프론트 엔트 테스트 코드 작성 과제입니다. 함수가 대충 어떤 역할을 해주는 지만 알지, 이걸 실제 로직을 고려한 테스트 코드로는 작성해본 적이 없기에, 이전 1, 2챕터보다 더 어렵게 느

항해 플러스 프론트엔드 - 프론트엔트 테스트 코드이번주차 과제는 드디어 고대하던 테스트 코드의 작성이었습니다. 프론트엔드의 단위 테스트와 통합 테스트 영역이 어떻게 작성되어야 하는 지 테스트 코드의 기능들과 친해지는 과정을 경험하였습니다. 코드의 가장 작은 단위(함수,

항해 플러스 프론트엔드 - 프론트엔드 테스트 코드이번 챕터의 과제는 이전 6주 간의 과정보다 더 배경지식이 없는 상태로 진행을 하였습니다.물론 용어나 명칭, 어떤 역할인 지에 대한 것을은 지식으로써 접해봤지만, 실제로 바닥부터 작성하는 것은 처음이었던 경험이었습니다.

항해 플러스 프론트엔드 - 인프라 관점의 성능 최적화이번 주차 과제의 목표는 가끔씩 회사에서도 해왔던 업무인, AWS와 관련된 서비스를 통해 프론트엔드 개발로써 프로젝트 배포를 자동화하는 과정과 CloudFront와 연동하여 CDN 캐싱전략까지 자동화하 것 이었습니다.

항해 플러스 프론트엔드 5기 과정을 수료하게 되어 과정 마지막으로 후기를 작성해봅니다. 과정에 어떤 것을 배우고 어떤 분들께 도움이 될 지 간략하게 나마 남겨봅니다. 방향성을 고민중이신 주니어 개발자분들께 도움이 되었으면 합니다.

항해 플러스 백엔드 - 개강항해 플러스 백엔드(슬금슬금 프론트에 넣어버리는 로직들)작성일 기준 2년 4개월차 풀스택 주니어 개발자로 내세우고 소개했었지만, 업무 비중은 사실 프론트가 6, 백엔드가 3, 그리고 서버 세팅이 1인 "한 우물만 파지 못한" 개발자라고 생각이

항해 플러스 백엔드 - TDD로 개발하기 드디어 시작된 백엔드 과정에서는 지난번 프론트엔드의 3챕터였던 테스트과 TDD를 학습했습니다.지난번 작성했던 Node.js의 테스트 과정과 크게 다른 점은 없었습니다. 오랜만에 써보는 Java 문법과 처음 제대로 사용해보는 In

항해 플러스 백엔드 - 서버구축 설계이번 주차는 시나리오에서 요구하는 기능들이 동작하기 위한 설계를 하는 과정이었습니다. 시나리오의 분석 결과를 바탕으로 Sequence Diagram, Class Diagram, Entity Relationship Diagram(ER

항해 플러스 백엔드 - 소프트웨어 설계이번 주차는 백엔드 구조 설계 중 다양한 아키텍처에 대하여 학습하고, 이중 프로젝트에 적절한 방법을 적용하고, 일관된 레이어의 흐름을 바탕으로 실제로 기능을 TDD를 활용하여 구현하는 것을 목표로 하였습니다.핵심 개념: 의존성 규칙

항해 플러스 백엔드 - 데이터베이스 기본이번 주차는 기존 DB설계로 적절한 index를 지정하여 쿼리의 병목현상이나 특정 기능에 대한 조회 개선을 목표로 하는 과정이었습니다.기본적으로 DB는 중복을 없애고, 동일한 정보를 갖는 데이터의 정합성을 보장해야합니다.하지만,

데이터베이스 심화 - 이번 주차는 전 주차에 설계 및 Index가 적용된 DB를 기반으로 동시성 문제가 발생하는 비즈니스 로직을 식별하고, 해당 로직에 대한 DB 관점의 Lock을 통한 동시성 제어를 구현하는 것이 목표였습니다.동시성은 여러 작업이 독

이번 주차는 동시성 제어에서 한단계 더 나아가 Redis를 활용한 분산락에 대하여 학습하고, 프로젝트에 필요한 부분을 식별하여 적용하는 과정이었습니다.또한, RedissonCacheManager 및 @Cacheable를 적용하여 캐싱을 통한 무거운 쿼리를 갖는

대용량 트래픽 & 데이터 처리 적용된 Redis의 자료 구조를 이해하고, 이를 활용해 실시간 랭킹, 선착순 쿠폰 발급과 같은 기능을 어떻게 설계할 수 있는 지 학습하는 과정이었습니다.좋습니다. 주신 내용을 바탕으로 블로그 글 형식으로 깔끔하게 요약해드리

Saga패턴,Outbox Redis를 이용한 실시간 집계처리에 대하여 트랜젝션이 완료된 이후에 정합성이 보장되도록 집계하는 것과 외부 Mock API를 동시에 호출하여 주요 로직과 분리를 보장하는 내용을 실제로 구현하는 것이었습니다.또한,

Kafka이번 주차는 현재 프로젝트에 분산 환경을 대응하기 위한 Kafka에 대한 개념을 학습하는 과정이었습니다.Cluster: Kafka Broker로 이루어진 집합Producer: 메세지를 Topic/Broker에 Partition으로 발행하는 서비스Consumer

또 다시 한번 10주 간의 항해를 마쳤습니다. 이번 수료 회고도 다음 백엔드 과정을 듣는 분들에게 도움이 되는게 더 중요할 것으로보여, 백엔드 과정의 각 챕터별 내용에 대하여 후기를 남기고자 합니다. 10주간의 노력으로 회고상과 베스트팀을 달성하는 경험을 했습니다.