본문 바로가기

All

(76)
FSD 폴더 구조란? 1. FSD(Folder-by-Feature Structure)기능별로 프로젝트를 나누어 관리하는 구조를 말한다.각 기능이 독립된 모듈로 관리되도록 구성되며 UI, 데이터 모델, API 호출, 상태관리를 독립적으로 구현할 수 있다. FSD 폴더 구조를 사용하면, 각각의 기능이 독립적으로 동작할 수 있어 유지보수와 확장이 쉬워진다.주로 대규모 프로젝트에서 사용된다. 2. FSD 폴더 구조  FSD의 폴더 구조는 Layers > Slices > Segments로 구성되어 있다.1) Layer역할에 따라 나뉜 폴더 그룹을 의미한다.총 7가지 레이어가 존재한다. - App 레이어전역 설정과 초기화 설정을 관리하는 최상위 레이어이다.상태 관리 설정, 라우팅 설정, 스토어 초기화, 다국어 설정, 글로벌 설정 등이 ..
[99클럽] 코딩테스트 스터디, 2일차 TIL - 비기너 1. 문제 풀이1) 문제 :  크기가 작은 부분 문자열, 프로그래머스 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return 하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개입니다.  2) 해석 - t에서 p와 길이가 같은 부분문자열 찾기- t부분 문자열이 p의 숫자보다 작거나 같은 숫자의 횟수 return   3) 풀이function solution(t, p) ..
클린코드(CleanCode)란 무엇인가? (feat. Prettier, ESLint) 항해 플러스에서 클린 코드 과제를 진행하기에 앞서,클린코드가 과연 무엇인지 정리하게 위해 포스팅을 작성한다. 이어 prettier, eslint 등 클린 코드와 관련 있는 것들에 대해서도 자세히 알아보려 한다. 1. 클린코드 (Clean Code)클린 코드는 말 그대로 읽기 쉽고 이해하기 쉬운 코드를 작성하는 것을 말한다.코드 자체가 가독성 있고, 유지보수가 쉽도록 작성되어야 한다는 것이다.  기본적으로 클린 코드는 다음과 같은 특징을 가져야 한다. 1) 클린 코드 특징- 가독성 : 읽기 쉽고 이해하기 쉬워야 한다.- 유지보수성 : 수정사항에 대응하기 쉬우며, 독립적이어야 한다.- 확장성 : 새로운 기능을 추가할 때, 기존 코드를 크게 수정하지 않아야 한다.- 견고성 : 에러를 발견하기 쉽고, 에러가 발..
[항해99] 항해 플러스 프론트엔드 3주차 과제 후기 (feat. Hooks 구현하기) 벌써 항해 플러스 3주 차 과제가 끝났다.2주 차 과제 후기가 없는 이유는 아파서 제대로 못했기 때문,,그래서 3주 차부터는 다시 힘들게 시작했다! 이번 포스팅부터는 과제를 어떤 식으로 진행했고, 느낀 점이 무엇인지 위주로 작성하려 한다 1. 항해 플러스 3주차 과제 진행3주차 과제는 react hooks을 직접 구현하는 것과 메모이제이션 기법을 사용해 성능최적화를 하는 것이였다.역시나 이 전 주차처럼 막막했지만, 그대로 열정을 가지고 시작해봤다! 1) 과제 스터디1주차 과제를 끝내고 난 후에, 뭔가 너무 급하게 마무리 했다는 생각이 들었다.제대로 뭔가를 얻어갔다기보다는 과제를 하기에 급급했다고 느꼈다.그래서 과제를 접근하는 방법부터 다르게 해야겠다는 생각이 들었다. 그때 마침 과제 스터디를 진행한다고 ..
[React] React Hooks 항해 플러스 과제를 진행하기 전 React Hooks에 대해서 미리 공부하려 한다.이미 알고 있었고 많이 사용해 본 것들이지만, 공부하면서 새롭게 알게 된 사실들도 있어서 포스팅까지 하게 되었다. 특히 아무 생각 없이 사용했던 방식들을 "왜" 이렇게 써야만 하는지 알 수 있었다! 1. React HooksReact 16.8에 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수들을 말한다.Hooks을 사용하면 클래스 컴포넌트를 작성하지 않고도 React의 다양한 기능을 활용할 수 있다.   1) 등장배경React Hooks는 클래스 컴포넌트에서 발생하던 여러 문제를 해결하기 위해 등장했다. 컴포넌트 간 상태 로직 재사용의 어려움복잡한 컴..
[Javascript] 자바스크립트 디자인 패턴 항해 플러스 과제를 실행하는데 디자인 패턴이 나왔다. 들어만 봤지 실제로 해본 적은 없어서 헷갈리기도 했다.그래서 디자인패턴은 무엇인지, 왜 사용하는지 이번 기회에 한 번 정리해보려 한다.  1. Desing Pattern(디자인 패턴)디자인 패턴은 소프트웨어 개발 과정에서 자주 발생하는 문제들을 해결하기 위한 일반적이고 재사용 가능한 해결책을 말한다. 자바스크립트에서 주로 사용하는 디자인 패턴에는 Module Pattern(모듈 패턴), Observer Pattern(옵저버 패턴), Factory Pattern(팩토리 패턴), Singleton Pattern(싱글톤 패턴), Facade Pattern(퍼사드 패턴), Proxy Pattern(프록시 패턴) 등이 있다.   해당 포스팅에서는 모듈 패턴, ..
[React] VirtualDOM 1. VirtualDOM이 생겨난 배경웹 개발에서 DOM(Document Object Model)은 HTML 문서를 개체로 표현한 구조를 말한다.전통적인 방식으로는 웹 페이지 내용이 변경될 때마다 실제 DOM에 접근해 직접적으로 업데이트를 진행한다.하지만, 이 과정에서 DOM 조작은 성능상의 부담을 줄 수 있다. 이러한 문제를 해결하기 위해 나온 것이 Virtual DOM(가상돔)이다.  1) 렌더링 과정에서의 성능 저하이는 브라우저 렌더링 과정을 알면 이해하기가 편하다.브라우저 렌더링은 DOM 트리 생성 > CSSOM 생성 > 렌더 트리 생성 > 레이아웃 > 페인트 과정을 거치게 된다.DOM을 조작하게 되면, 위의 렌더링 과정이 다시 시작될 수 있다.  즉, 해당 돔의 속성을 다시 그려야 할 수 있는 ..
[항해99] 항해 플러스 프론트엔드 1주차 과제 후기 (feat. 바닐라 자바스크립트로 SPA 만들기 ) 큰 맘 먹고 결제한 항해 플러스 프론트엔드 개강일이 밝았다. 이번에 여러 사람들과 네트워킹도 하고, 좀 더 깊게 자바스크립트를 배우기 위해 항해 플러스를 신청했다. 9월21일이 첫 개강날이었는데, 몸이 아파서 아쉽게 오프라인 참석은 못했다ㅠ그래도 온라인으로 들었던 강의가 인상에 남아 공부할 겸 후기를 남겨본다! 1. 토요일 강의 & OT 우선 순서는 이렇게 진행됐다.처음에 OT랑 어떻게 항해 플러스가 진행되는지 설명해 주고, 그 후 1주차 발제가 이루어졌다.1주차 발제는 "프레임워크 없이 SPA 만들기"였다.  사실 회사에 입사하고 난 후, 바닐라 자바스크립트로 무언가를 만들어 본적이 없다.취준때는 그래도 몇 개 만들었었는데,, 그래서 리액트 없이 SPA 만들기라는 말을 듣자마자 쉽지 않겠다는 생각을 했..