[프리온보딩] 220508 강의 메모 02 (팁)

팁

어린이은행 ㅋㅋ

경력자와 신입의 가장 큰 차이는 경력자는 이미 신입일 시절에 특정 이슈에 대해 막혀본 경험과 해결한 경험이 있다는 것 (같은 이슈가 나와도 빠르게 해결할 수 있음)

열심히살자

HTML 기본 사용법

div와 span 정도만 알아도 나머지는 다 비슷비슷하다 (형제 태그 느낌)

프론트엔드의 꽃은 다양한 html 태그를 어떻게 적재적소에 활용하나에 있다

비슷한 기능을 하지만 역할을 구분지을 때 쓰는 시맨틱 태그, 헤더 태그, 리스트 태그, 꾸미기 태그, 입력창 태그, 이름도 안 들어본 태그 등 종류가 굉장히 많다

내비게이션 바는 nav 태그

상단 내비든, 하단 내비든, 우측 내비든 nav 태그로 구분지어놓는 게 좋다

div랑 동작은 같지만 이름만 구분해둔 시맨틱 태그임

리스트 형식으로 여러 개 나오는 태그는 ul, li 태그 이용

내비게이션 바의 내용물 버튼들처럼 비슷한 내용들이 여러개 줄줄이 나올 때 ul, li를 사용하는 것이 좋다

위의 요소들은 header 태그로, 아래의 요소들은 footer 태그로 감싸주기

마찬가지로 div와 동작은 같지만 이름만 구분해둔 시맨틱 태그

본문 (주된 내용물) 은 main 태그로 감싸기

<nav>...</nav>
<header>...</header>
<main>
    <section>...</section>
    <section>...</section>
    <section>...</section>
</main>
<footer></footer>

얘네 다 기능은 똑같은데 페이지 내의 요소를 구분하기 위해 사용한다

dl, dt, dd 태그

<dl>
    <dt>dl, dt, dd 태그</dt>
    <dd>설명을 적을 때 주제와 본문을 구분하는 태그이다</dd>
</dl>

dt 태그와 dd 태그가 한 쌍을 이룰 때 사용하는 것이 좋다

설명할 주제 (제목) 은 dt로, 설명 본문은 dd로 감싼 후 이 두 개를 dl로 감싸자

시간 정보는 time 태그

<time dateTime={${'2020-07-22'}}>7월 22일</time>

하이라이트는 mark 태그

<span>하이라이트는<mark>mark</mark>태그</span>

위 첨자, 아래 첨자는 sup, sub

<p>윗 첨자<sup>윗 첨자</sup><p>
<p>아랫 첨자<sub>아랫 첨자</sub></p>

caniuse

Can I use... Support tables for HTML5, CSS3, etc

Can I use... Support tables for HTML5, CSS3, etc

HTML5로 버전업되면서 도태된 태그가 있고 새로이 등장하면서 브라우저에서 지원하지 않는 태그가 있다

HTML, CSS 등 웹 기술의 사용가능 여부를 브라우저별로 알려주므로 한 번씩 찾아보자

Internet Explorer

실무에서는 Internet Explorer를 대응하지 않는다

이후에 나온 브라우저들이나 지속적인 업데이트가 이루어지는 브라우저들 (크롬, 사파리, 파이어폭스 등...) 을 Evergreen Browser 또는 Modern Browser이라 하며, 이러한 브라우저들을 기준으로 작업한다

IE는 온갖 희한한 이슈들이 많아서 IE 대응 기술을 다 익혀놨어야 하는데, 지금은 도태된 수준이라 신경쓸 필요가 없음

요즘은 개발자 도구도 있어서 브라우저에서 바로 코드를 수정해볼 수도 있고 참 편해진 세상이다

백엔드는 정상적인 동작을 안 하면 대부분 개발자 잘못인데, 프론트엔드는 브라우저 이슈도 있음을 염두해야 한다

질문과 검색 잘하는 법

한국어로 검색하지 않기

• 한글로 검색하지 마세요
• 네이버나 다음 같은 곳에 검색하지 마세요

위의 두 가지 중 하나라도 지키지 않으면 검색 결과가 현저히 적게 나온다

검색 결과의 50% 이상이 영어이고, 한국어 검색 결과는 2.6%이므로 영어로 검색하면 대충 20배의 결과를 얻을 수 있다

검색 결과의 질 뿐만 아니라 양도 영어 검색 결과가 훨씬 좋으므로, 영어 잘해서 손해볼 것 없다

유창한 회화를 할 필요는 없고 검색만 잘 하면 된다

에러가 나오면 에러 로그를 잘 읽어보기

빨간건 배경이오 까만건 글씨다 이러면 안됨

진짜 무서운 에러는 로그도 안 찍히는 에러다

로그가 있으면 해결할 방법이 있다는 것이므로 로그를 잘 읽어보자

오픈소스 라이브러리는 레포지토리 잘 살펴보기

정말 최근 (일주일 사이) 에 올라온 이슈도 찾을 수 있다

나 말고 다른 사람이 비슷한 이슈를 겪었고 해결책을 찾아갔을 가능성이 높으므로, Issue 탭에 한 번씩 검색해 보자

외에도 fork나 stars 횟수, closed된 이슈 개수나 댓글 개수 등으로 이 라이브러리가 관리가 잘 되고 있는지, 인기가 많은 지 여부도 알 수 있다

관리 여부도 대개 README 같은 곳에 적혀있으므로, 만약 업데이트가 잘 되지 않는 라이브러리라면 README를 한 번 읽어보고 다른 사람이 포크해서 업데이트하는 레포지토리가 따로 있는지 살펴보자

내가 포크해서 추가적인 기능 구현이나 업데이트를 진행하고 풀 리퀘스트를 날리면 그것이 또 오픈소스의 매력인 것이다

00가 안돼요 ㅠㅠ 이런 질문 하지않기

쓰레기같은 질문을 하면 스레기같은 답변을 받을 확률이 높다

질문을 할 때는 현재 상황을 정확히 설명하고, 답변을 달아줄 사람이 알아야 할 정보를 다 제공해주자

예를 들어, 버튼 태그가 작동을 안 할 때

• 버튼이 작동이 안 돼요 ㅠㅠ ⇒ 구린 질문, 질문을 안한거나 진배없음, 수건으로 모니터나 닦기
• (화면 캡쳐 스크린샷 첨부, 콘솔 열어서 에러 메시지 스크린샷 첨부) 를 의도해서 ~한 코드를 작성하였는데 ~~한 오류가 나왔다 ⇒ 좋은 질문

에러 재현 절차나 테스트 / 구현 환경을 정확하게 설명하면 더 좋다

• 테스트 환경: M1 Mac, Chrome
• 재현 절차: 1. ~ 2. ~
• 재현 결과: ~

이 정도면 답변을 해줄 사람도 굳이 오류를 재현하기 위해 시간을 투자할 필요 없고, 질문글 하나만으로 상황파악이 되고 해결법을 바로 제시할 수 있다

핑퐁식 대화법은 전혀 좋지않다 애인이랑이나 하자

이미지 최적화

이미지 한 장 용량만 20메가면 노트북은 몰라도 휴대폰같은 셀룰러 데이터 환경에선 로딩이 훨씬 오래 걸리고, 데이터도 많이 잡아먹는다

콘텐츠 작성자는 대개 이미지 용량 따위 신경쓰지 않으므로 (이미지 잘 보이기만 하면 장땡임) 이러한 용량 문제 해결은 프론트엔드 담당의 몫이...지만 사진을 매번 용량 줄이는 것도 노가다이므로 보통은 서버 측 담당자가 컨텐츠 업로드 로직에 끼워넣어 자동화한다

예를 들어 인스타그램같은 경우, 이미지를 업로드할 때 자동으로 이미지를 크기조정하여 크기별로 서버에 다 저장해두고, 맞춤형으로 송신한다

squoosh

Squoosh

Squoosh

이미지의 퀄리티나 색상정보 (색상 수 등) 등을 조절하면서 용량을 줄일 수 있는 웹사이트

사진의 퀄리티를 before / after 을 통해 육안으로 확인할 수 있으므로 편집이 편리하다

webp

webp 파일은 용량이 작은 장점이 있으나 특정 브라우저에서 지원이 안 되므로 주의

jpg

색상이 다양한 실제 사진 등에 적합하다

DSLR 카메라 등으로 저장할 때 raw 파일 말곤 거의 다 jpg로 저장되며, 원본을 망가트리며 용량을 줄인다

png

실제 사진보다는 클립아트나 일러스트레이션 등 색상정보가 적은 이미지에 적합하다

어지간한 이미지는 png로 충분하며, 왠만하면 원본이 망가지지 않는다

gif

무슨짓을 해도 png보다 용량이 훨씬 크거나, 품질이 매우 망가지므로 움직이는 사진 외에는 아예 쓰지 않는다

용량을 줄이려고 하다 보면 사진 색상이 완전히 망가지거나 픽셀이 깨져버린다

svg 파일 수정하기

정말 많이 쓰는 svg의 코드 용량을 줄여보고 수정해보자

담당자에게 재작업을 요청해야 하는 상황

<svg ...>
    <pattern ...>
        <image xlink:href="data:image/png:base64, asdsadasdsadasdsad" />
    </pattern>
</svg>

• svg 파일 내에 image 태그와 함께 base64로 인코딩된 이미지 파일이 들어있는 경우

<svg ...>
    ...
    <path id="패스 어쩌구" d="asdasdasdasd" />
    ...
</svg>

• 쓰지 않는 패스가 있거나, 패스가 한국어로 적혀있음

눈으로 보고 확인 후 디자이너에게 새 파일 요구해야 한다

svg currentcolor 지정

상위 요소에서 색상 속성 상속받을 수 있어서 편하고 좋다

그외 팁

npm vs yarn?

요즘은 큰 차이 안 난다

npm 4 때까지만 해도 yarn이 좀 더 좋았는데 npm 5로 업데이트되면서 이제 별 차이 없어졌다

package.json에 정의된 의존성 모듈을 설치하고, package-lock.json 또는 yarn.lock에 의존성 정보를 저장하는 것 뿐

다만 프로젝트별로 yarn 쓸지 npm 쓸 지 명확히 정해놓고 써야 한다

공개 API 이용하여 날씨앱 만들기

날씨앱

컴포넌트명 중복되지 않게 조심하기

중복되면 계속 오류가 나온다 (당연하게도)

RapidApi

API Hub - Free Public & Open Rest APIs | RapidAPI

API Hub - Free Public & Open Rest APIs | RapidAPI

등록된 API 정보를 볼 수 있는 서비스

날씨앱, 항공정보앱 등 외부 API를 사용하고자 할 때 검색하면 데이터 형식까지 같이 볼 수 있다

폴더 구조

• 서버에서 데이터를 가져오는 함수는 services 폴더에 저장하기
• 타입스크립트 타입 (type, interface) 파일은 types 폴더에 저장하기
• 커스텀 훅은 hooks 폴더에 저장하기
• 여러 페이지에서 공통적으로 사용하는 컴포넌트는 components 폴더
• 한 페이지에서만 사용하는 컴포넌트는 pages/[페이지 컴포넌트 이름] 폴더로 분리

useMount (react-use)

useEffect(() => {
    //
}, []);

useMount(() => {
    //
});

useEffect의 의존성 인자에 아무것도 안 넣었을 때 (컴포넌트가 마운트되었을 때만 동작) 와 같은 역할을 하지만, 그렇게 사용하면 함수의 의미를 알기 약간 어려우니 직관적으로 보이게 하기 위해 useMount를 사용하면 이름만으로 ‘마운트되었을 때만 실행하는구나' 알 수 있다

그 외에도 컴포넌트가 언마운트되었을 때 실행하는 useUnmount도 있다

dayjs

날짜 관련 라이브러리

moment.js 도 있긴 한데 얘는 용량이 과도하게 크다

dayjs는 용량이 매우 가벼움

Typescript 팁

propTypes?

린터에서 계속 오류를 일으키는 propTypes

사실 prop으로 받아오는 인자들의 타입만 잘 지정해주면 해결된다

prop-types 라이브러리를 설치해서 validate하면 해결된다고들 하는데, 그런 식으로는 잘 해결하지 않음

타입지정만 잘 해주자 (타입스크립트 짱.)

타입스크립트가 특정 문제에 대하서 쫌 꼬장을 부려서 문제지 그런 부분들만 잘 대처하면 그렇게 어려운 언어는 아니다

타입스크립트 타입 정의 형식

const testFunc = (testProps: ITestPropsType) : ITestReturnType => {
    return ( 어쩌구 );
}

함수의 반환값 타입 (예시에서 ITestReturnType) 은 필수로 명시해줄 필요가 없지만, 받아오는 인자의 타입 (예시에서 ITestPropsType) 은 반드시 명시를 해주어야 한다

interface ITestPropsType {
    test1: string | undefined;
    test2?: string;
    test3: 'value1' | 'value2' | 'value3' | 'value4';
    onClick?: (e: MouseEvent<HTMLButtonElement>) => void
}

위의 예시 interface에서 test1의 타입은 문자열 (string) 이 될 수도 있고, undefined가 될 수도 있다

test2는 물음표가 붙어 있으므로 해당 타입의 변수 내에 존재해도 되고 존재하지 않아도 된다

test3은 4가지 문자열 중 하나가 될 수 있다는 뜻 (이 이외의 다른 문자열을 넣으려고 하면 오류가 난다)

onClick은 MouseEvent 타입의 인자를 받아 void를 반환한다는 뜻

여기에 적은 모든 조건이 들어맞아야 타입스크립트 타입 관련 오류가 발생하지 않는다

const testFunc = ({ test1, test2, test3 }: ITestPropsType) => ...

구조분해 할당을 사용해서 타입을 지정해도 된다

extends

interface ITestPropsType {
    test1: string | undefined;
    test2?: string;
    test3: 'value1' | 'value2' | 'value3' | 'value4';
    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
}

이런 형식의 인터페이스 타입이 있다고 하자

interface ITestPropsExtendType {
    test1: string | undefined;
    test2?: string;
    test3: 'value1' | 'value2' | 'value3' | 'value4';
    test4: string;
    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
}

이 인터페이스 타입은 test4를 제외하면 ITestPropsType과 완전히 같다

중복되는 코드를 두번 쓸 필요는 없다

interface ITestPropsExtendType extends ITestPropsType {
    test4: string;
}

이렇게 적으면 ITestPropsType의 속성들을 전부 상속받기 때문에 중복되는 코드를 쓸 필요가 없다

type 선언 시 key 타입 지정하기

interface ITestProps {
    [key: string]: string;
}

const a: ITestProps = {
    test1: 'asdasd',
    test2: 'asdasdasd',
    test3: 'asdasdasdasd',
}

키값이 문자열이기만 하면 뭐든 상관없다

type 선언 시 배열 넣기

interface ITestProps {
    test1: string[];
    test2: (string | undefined)[]
}

test1은 문자열 배열이고, test2는 문자열 또는 undefined로 이루어진 배열이다

JSON to TS

JSON to TS - Visual Studio Marketplace

JSON to TS - Visual Studio Marketplace

JSON 형식의 객체를 타입스크립트 Type으로 변환해준다