FrontEngineer JungBam

1. 리팩토링이란? 소프트웨어 기능을 보존하면서 설계, 구조 및 구현을 개선 리팩토링을 할때에 기능을 추가하거나 버전을 업그레이드하는 것은 금지임. 기존의 코드를 개선하는 것이지 기능을 개선하는 것이 아니라는 것을 확실히 알아야 함. 2. 리팩토링을 하는 이유 - 유지보수가 용이해짐.(각각의 코드가 고유한 일을 수행하는 것이 보장됨.) - 추상화, 설계가 좋아짐에 따라 코드를 이해하고 의도를 파악하기 쉬워짐. - 기능추가, 확장이 용이해짐. - 버그를 수정하는 것이 빨라짐. 그럼 처음부터 설계하고 클린코드로 작성하면 되잖아? ☞ 개발 초기 설계는 최소한의 설계이지 완벽한 설계가 될 수 없음. 또한, 프로젝트가 커지면 커질수록 기능이 하나가 추가되더라도 매번 각각의 기능을 분리해서 추가하는 것은 어려움. ..

import React from "react"; const ErrorBoundary = (ProtectedComponent: React.ComponentType) => { return class Boundary extends React.Component { state = { hasError: false, }; static getDerivedStateFromError(error: Error) { return { hasError: true }; } componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { this.setState({ hasError: true, }); } render(): React.ReactNode { const { hasEr..

폰트 적용시점 때문에 내가 의도하지 않은 이슈가 생김. 웹폰트의 문제는 두가지로 정의할 수 있는데 FOUT(Flash of Unstyled Text)와 FOIT(Flash of Invisible Text)이다. 쉽게 말하면 FOUT는 웹 폰트가 다운로드 되기 전부터 컨텐츠가 노출되어 웹폰트가 적용되지 않은 텍스트가 노출되었다가 웹폰트로 적용되는 현상을 이야기하고 FOIT는 웹 폰트가 다운로드 될때까지 대기했다가 컨텐츠가 노출되어 내가 처음에 레이아웃과 함께 컨텐츠를 노출하고자 할때 에러사항이 있다. 이런 점들을 어떻게 개선시킬까? 고민하다가 유동균님의 강의에서 해당 방법을 찾을 수 있었다. 1. 폰트 적용 시점 컨트롤 하기 2. 폰트 파일 사이즈 줄이기 1. 폰트 적용 시점 컨트롤 하기 이 부분은 @fo..

const combine = (input1: number | string, input2: number | string) => { let result; if (typeof input1 === "number" && typeof input2 === "number") { // 런타임 타입검사 result = input1 + input2; } else { result = input1.toString() + input2.toString(); } return result; }; const combinedAges = combine(30, 25); console.log(combinedAges); const combinedName = combine("A", "B"); console.log(combinedName); 공식문..

enum ERROR { SUCCESS = 200, EXPRIES = 401, NONE = 403, } const person: { name: string; age: number; hobbies: string[]; status: ERROR; } = { name: "Max", age: 30, hobbies: ["운동", "요리"], status: 200, }; if ((person.status = ERROR.SUCCESS)) console.log(1); enum을 구글링을 하면 많은 JAVA에서의 enum에 대한 결과가 나온다. enum은 무엇일까? 공식문서에서 보면 "이름이 있는 상수들의 집합을 정의할 수 있습니다. 열거형을 사용하면 의도를 문서화 하거나 구분되는 사례 집합을 더 쉽게 만들수 있습니다. T..

const person: { name: string; age: number; hobbies: string[]; // 배열 role: [number, string]; // 튜플 } = { name: "Max", age: 30, hobbies: ["운동", "요리"], role: [2, "author"], }; // 튜플로 지정하더라도 push는 되어버림.. person.role.push("하이"); person.role.push(1); console.log(person.role); // 하지만 데이터의 길이는 고정되어짐. // person.role = [2,'하이','하이'] // 에러 위의 코드에서 person 객체의 hobbies는 문자열 배열이나 role은 튜플을 이야기한다. 튜플은 파이썬에서는 셀 ..

전역상태 관리 툴로 많이 사용되는 redux는 본인만의 흐름이 있어 처음에 접할 때에는 어려움이 있으나, 사실 흐름만 읽고 나면 어렵지 않다. (기본적으로 context API와 reducer를 접한 후에 redux를 공부하기를 추천한다.) redux를 이해할 때에 가장 쉽게 비유되는 것이 은행이다. 돈을 맡기고 돈에 대한 모든 과정은 은행에서 처리를 해준다. 은행에서 돈을 뽑기 위해 우리는 창구나 ATM 기기를 이용한다. redux도 이러한 흐름에서 이해해보자. 먼저 우리는 관리하고 싶은 상태를 은행인 store에 맡긴다. 이 은행은 자신의 정보를 사용할 수 있는 은행서버를 갖고 있고 이 은행 서버는 곧 provider라고 생각하면 된다. 이 provider를 통해서 store가 구독을 원하는 컴포넌트..

퍼블리싱 수업을 받을 때 '시맨틱적이지 않아요.' 라는 리뷰를 받은 적이 있었다. 그 때의 나는 위의 그림과 달리 모든 요소들을 div 요소로 작성했었고 내 생각과 같은 결과물이 나왔기 때문에 이게 뭐가 문제지? 라는 생각을 했었다. 왜 html 요소를 시맨틱적으로 작성하라고 하는걸까? 시맨틱 태크란? 각 태그 요소에 의미가 부여된 이름이 있는 것이라고 생각하면 된다. 앞서 이야기 했듯이 위의 요소들을 모두 div 요소로 바꾼다고 해서 결과가 달라지거나 에러가 나지 않는다. 그런데 왜 시맨틱적으로 작성을 해야될까? html5에서 적용된 이유를 살펴보면 된다. ① 태그를 시맨틱적으로 작성한다면 흐름을 이해하기가 편하다. 즉, header 다음 main 다음 footer 라는 기본적인 흐름 안에서 작성이 된..