코공기(코딩 공부 기록) 코공기(코딩 공부 기록)

0. 시작하며어느새 항해의 마지막 주차가 되었습니다ㅜ자세한 회고는 발표 자료에 첨부해두었지만 WIL로서의 회고 정도만 여기에 적어보겠습니다! 저번 주차 과제는 너무 어려워서 BP를 못받을 줄 알았는데 받아서 너무 기뻤습니다! 그리고 마지막 주차 과제는 저번 주차를 겪고 나니 너무 선녀였고 행복했습니다.. 하지만 뭔가 생각해보지 못했던 주제들에 대해 사고가 확장되는 좋은 과제였습니다.단순히 최적화만 해야지!가 아닌, 왜 해야 하고 어떤 걸 기준으로 할지 명확히 생각해볼 수 있는 시간이었습니다! 1. 과제10주차의 주제는 "코드 관점의 성능 최적화"였습니다. (1) 기본 과제(2) 심화 과제마지막 주차의 과제는 기본과 심화과 포함된 과제로, 성능 최적화를 진행하는 것이었습니다.## 과제 요구사항- 배포 후 ..

1. 최적화에 대하여"일단 돌아가게 만들고, 나중에 최적화하자"너무 익숙한 마인드인데 대부분의 개발자가 이렇게 진행하고 있지 않을까 싶다ㅎㅎ 약간의 변명을 하자면, 너무나 잦은 수정과 변경이 있지만 개발 일정은 조정되지 않아 돌아가게 만드는 게 최우선이 될 수밖에 없는 때가 많은 것 같다. 문제는 그 나중이 영영 오지 않는다! 그러므로 중요한 건 성능 최적화를 나중에 할 일이 아니라 개발 과정의 일부로 생각하는 것이다.물론 모든 걸 완벽하게 최적화할 순 없겠지만 이런 마인드 셋은 장기적으로 큰 차이를 만들어낸다. 단, premature optimization은 조심해야 한다.premature은 시기상조라는 뜻으로, 너무 성급한 최적화를 진행해 코드의 복잡도만 가중시키는 것을 의미한다. (1) 자기 점검-..

0. 시작하며이번 과제 난이도가 정말 역대급이었습니다.하지만 난이도뿐만 아니라 이번주에 저녁 일정과 야근이 있었고 너무 어려운 나머지 과제를 포기할까까지 고민했던 과제입니다... 처음에 발제를 듣고 기본 개념들을 정립하는 과정 속에서는 아, 정말 코치님 말씀처럼 서버 설정과 초기 세팅만 잘해두면 하루만에 가능할 수도 있겠다(기능은 기존에 구현되어있으니까) 싶었는데 테스트를 통과하는 게 너무너무너무*10000 어려웠습니다ㅜ 100% 저의 힘으로 구현한 코드가 아닌, AI와 6기 수료생분들의 코드를 참고해서 구현했기 때문에 더더욱 아쉬움이 있습니다.그래서 가오걸로서 일부를 다시 구현했습니다. 1. 과제9주차의 주제는 "성능최적화: SSR, SSG, Infra"였습니다. (1) 기본 과제기본 과제는 Vanil..

1년 전, SSR, SSG, CSR에 대해 공부하고, 관련 회사 과제를 진행하며 알게 된 내용을 정리한 적이 있다.이 내용을 기반으로 확장한 내용으로 정리해보고자 한다. [SPA] 서버 사이드 렌더링이란?1. 서버 사이드 렌더링(Server Side Rendering)서버 사이드 렌더링이란, 말 그대로 웹 페이지의 HTML을 서버쪽에서 렌더링하여 클라이언트에게 전달하는 방식을 의미한다.서버에서 HTML 파일을 미리 생성chaeng03.tistory.com [Vue] ClientOnly로 client side / server side 이해하기nuxt에서는 client side로만 렌더링할 수 있도록 ClientOnly라는 컴포넌트를 제공하는데오늘은 과제를 진행하던 중 ClientOnly를 사용하며 알게 된..

0. 시작하며저번 주차는 처음으로 발제를 녹화본으로 봤습니다.그 이유는 갑작스러운 사촌 오빠의 장례식으로 인해서였고 광주에서 서울로 돌아오는 ktx 안에서 발제 녹화 영상을 보면서 돌아왔습니다. 마음은 잘 이겨냈고 과제를 월요일부터 시작하게 되는 경험을 했습니다.그리고 이번주는 사이버대 시험기간이라 매일 퇴근 후 시험 보고 과제를 진행하려 하니 더욱 쉽지 않았습니다. 그렇지만 이제 사이버대는 종강입니다!😊다들 건강하세요! 1. 과제8주차의 주제는 "기능 중심 아키텍처와 프로젝트 폴더구조"였습니다. (1) 기본 과제기본 과제는 레거시 코드에 전역상태관리 적용 및 FSD를 기반으로 폴더 구조를 설계하고 코드를 분리하는 것이었습니다.## 과제 체크포인트### 기본과제#### 목표 : 전역상태관리를 이용한 적..

1. FSD(Feature-Sliced Design)FSD란 Feature-Sliced Design 즉, 기능 분할 설계라는 뜻으로, 프론트엔드 애플리케이션 구조를 위한 아키텍처 방법론이다.FSD 아키텍처의 핵심은 코드를 3가지 차원으로 분리하여 예측 가능한 구조를 위한 컨벤션을 제공함으로써 높은 응집도와 낮은 결합도를 유지하는 데 있다.더보기🤔 응집도와 결합도가 뭘까?- 응집도가 높다는 것은 관련 기능이 함께 모여있다는 의미이다.- 결합도가 낮다는 것은 서로 다른 부분이 독립적으로 작동할 수 있다는 의미이다. 즉,응집도는 비슷한 것끼리 모여있다!(응집)결합도는 다른 요소들끼리 합쳐져있다!(결합)이므로 응집도는 높을수록 좋고 결합도는 낮을수록(의존성이 줄어들수록) 좋다. (1) 왜 FSD인가?왜 많은 ..

0. 시작하며저번 주차도 BP를 받았습니다!어쩌다보니 벌써 4번째 BP인데요,저번 주차는 열심히 Before 패키지의 문제점을 분석한 것과 After와의 차이점을 정리한 점을 좋게 봐주신 것 같습니다!1. 과제7주차의 주제는 "디자인 패턴과 함수형 프로그래밍 그리고 상태 관리 설계"였습니다.(1) 기본 과제기본 과제는 custom hook과 util 함수, 컴포넌트에서 비즈니스 로직을 적절하게 분리하는 것입니다.### 기본과제- Component에서 비즈니스 로직을 분리하기- 비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기- 뷰데이터와 엔티티데이터의 분리에 대한 이해- entities -> features -> UI 계층에 대한 이해- Component에서 사용되는 Data가 아닌 로직들은 hoo..

지나가며 듣고 정처기 공부할 때 공부했던 디자인 패턴.이걸 드디어 활용해볼 때가 되었다!!! 1. 디자인 패턴(Design Pattern)-개발자의 족보!디자인 패턴은 소프트웨어 설계에서 반복적으로 등장하는 문제를 해결하기 위한 검증된 설계 방법의 모음이다.즉, 많은 개발자들이 이미 겪어온 문제들에 대해 “이렇게 하면 잘 되더라”하는 최적 관례(Best Practice) 를 정리한 모음집이다. 정처기 공부한 사람들은 아는 => 기억하자 생구행(1) 생성 패턴(Creational Patterns)-객체 생성이 복잡할 때객체 생성 방식에 대한 문제를 해결한다.(1-1) Singleton객체를 프로그램 전체에서 단 하나만 존재하게 보장하는 패턴이다.주로 store같은 전역 관리 요소(하나만 있어야 하니까!)에..