정도영 Tech-Blog 정도영 Tech-Blog

안녕하세요. 위메이드 프론트엔드 지원자 정도영입니다. 제 코드 스타일을 가장 잘 보여드릴 수 있는 링크는 아래와 같습니다. https://github.com/Pre-Team-10/pre-onboarding-8th-3-10/blob/main/src/utils/cache.ts GitHub - Pre-Team-10/pre-onboarding-8th-3-10 Contribute to Pre-Team-10/pre-onboarding-8th-3-10 development by creating an account on GitHub. github.com 위의 링크의 코드는 긴 코드는 아니지만 제 스타일을 가장 잘 압축하여 보여드릴 수 있는 하나의 코드 파일이라고 생각하여 선정하였습니다. 본 코드를 통해서 제 코드 스타..

전체 조 과제 피드백 내용 1. 프론트 개발자의 마음가짐. 프론트는 항상 유저입장에서 생각을 하면서 코드에 대한 고민을 하여야 한다. 특히, 프론트엔드는 유저와 직접적으로 상호작용하는 최접점, 엣지이기 때문에, 다른 프로그래밍 분야보다 긍정적인 사용자 경험이 효율적인 알고리즘, 비즈니스 로직보다 더 우선시 되어야 하는 경향이 있음다. 물론, 긍정적인 사용자 경험 === 효율적인 로직이라는 명제가 일치하는 경우가 많지만, 그에 벗어나는 예외일 경우 불가피한 상황을 제외하고 긍정적인 사용자 경험을 우선해서 소프트웨어를 만들어야 할 것이다. {comments.slice(SLICED_POINT, SLICED_END).map((comment) => ()} 그 예시로 이번 주 과제에서 수행한 페이지네이션 기능을 들..

전체 조 과제 피드백 내용 1. 항상 코드의 응집도를 고려하는 것이 중요하다. 좋은 코드란 같은 관심사를 가진 요소들끼리 잘 '응집'되어 있는 상태를 가진다. 또한, 다른 관심사를 가진 요소들끼리는 잘 흩어져 있고, 혼재되어 있지 않은 '낮은 결합도'의 상태를 갖는 것도 좋은 코드의 요건 중 하나이다. 따라서 '높은 응집도', '낮은 결합도'의 원칙을 따르는 것에 집중하자. 2. 가변변수 활용 최소화. class 같은 모듈 내부에서 필드로 가변변수를 사용해 메소드들이 이 값을 참조해 사용하게 되면 코드 가독성 측면에서 효율이 좋지 않다. 그 이유는 그 가변변수의 값 변화를 계속 추적해야 하며 그 값을 계속 기억하여 코드를 이해해야 하기 때문이다. 또한, 가변변수의 값 변화를 잘못 설계하면 큰 버그가 발생..

1. Redux가 개발된 배경 Redux는 하나의 디자인 패턴으로서 MVC패턴이 가지고 있던 문제점을 해결하기 위해 만들어졌다. 디자인 패턴이란 거장한 것이 아니라 문제를 해결하기 위한 모범 답안 및 사례라고할 수 있는데, 디자인 패턴은 작은 문제를 해결하기 위한 작은 방법부터 거대한 문제를 해결하기 위한 크고 거창한 방법까지 그 종류가 다양하다. 보통 거대한 디자인 패턴은 작은 디자인 패턴 사례들의 집합으로 이루어지며 Redux 역시 기존의 MVC 디자인 패턴이 가지고 있던 문제를 개선하기 위한 디자인 패턴 중 하나이다. 그렇다면 기존 MVC 패턴의 문제점을 파악할 필요가 있다. 이전 포스트에서 기록했듯이 어플리케이션 설계의 근본은 '관심사의 분리'인데, MVC 패턴은 관심사를 Model, View, ..

전체 조 과제 피드백 내용 1. 마크업과 비즈니스 로직은 분리되어야만 함. UI(html의 class, id, tag 등)요소와 비즈니스로직(javascript)가 결합되어버리면 컴포넌트의 재사용성이 많이 낮아진다. SPA 어플리케이션에서 컴포넌트의 주요 속성은 재사용성과 독립성인데, 이 컴포넌트 내부의 비즈니스로직이 html의 UI요소와 결합된다면 해당 컴포넌트를 다른 곳에서 사용하기 힘든 경우가 발생할 가능성이 크다. 따라서, html에서 정보를 가져오거나 이벤트를 발생시킬 때 class, id, tag 자체의 정보를 가져오는것보다 이벤트리스너에 익명함수를 부착하여 함수의 인자로서 특정 정보를 전달하는 것이 컴포넌트 재사용의 측면에서 더욱 효율적이다. 2. 콜백함수의 인자 작명에서 축약어를 사용하는 ..

1. 깨끗한 코드를 작성하는 법은? 깨끗한 코드를 작성할 때는 관심사의 분리를 뜻하는 SoC (Separation of Concerns)의 법칙을 실천하는 것이 매우 중요하다. 그렇다면 "관심사"란 무엇인가? “관심사"를 간단히 말하면 하나의 모듈이 수행하고자 하는 목적을 말한다. 여기서 모듈이란 함수, 클래스 등의 단위로 해석할 수 있다. 따라서, 관심사의 분리란 각 모듈들이 한번에 여러 관심사를 처리하려고 하지 않고, 하나의 관심사만 처리하도록 분리하는 것을 의미한다. 2. 그렇다면 React에서는 어떻게 관심사 분리가 이루어지는가? 과거 class 컴포넌트를 사용할 때에는 관심사의 분리를 위해 container & presentational 패턴을 주로 사용했다. container 컴포넌트에는 UI..

전체 조 사전과제 피드백 내용 1. axiosError와 try catch 구문을 사용할 때, 그 구조를 명확하게 설계해야 함. 계획없이 무지성으로 try catch를 사용하면 에러 이벤트의 전달이 감지되어 예외처리를 실행해야하는 구문에서 처리가 제대로 되지 않거나 그 구조가 복잡해질 수 있기 때문에 그 에러의 처리와 위임의 구조를 잘 설계해야 할 필요가 있다. try { const { data } = fetchData(); } catch (e) { throw e; // or throw new Error({ e.status, e.message }); // or throw new Error("Axios Error"); } 참고로 catch 문에서 발생하는 에러객체인 'e'를 그대로 throw 하거나 새로운..

1. devServer 요즘 vite나 bun 등 제각의 강점과 빠른 빌드 속도를 가진 다양한 번들링 툴이 개발 및 출시되고있기는 하지만 아직 번들링 생태계에서 가장 큰 비중을 차지하는 것은 webpack이 아닐까 생각합니다. 이 webpack은 webpack.config.js라는 파일 내부에 설치, 지정된 속성이 정의됩니다. 만약 터미널 커맨드로 프로젝트를 설치할 경우에는 보통 webpack.config.js 파일은 숨김처리 되어있기 때문에 우리는 이 파일에 대해 쉽게 접근할 수 없으며, 그 중요성과 존재를 알아차리기 힘들지만 사실 이 파일은 우리가 프로젝트를 만들도록 돕는데 큰 역할을 합니다. 여기서 webpack을 정의하는 속성 중 가장 중요한 요소 중 하나는 devServer가 아닐까 생각합니다...