React 공식문서를 보면 아래와 같이 설명하고 있다.

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 출처 - React 공식 문서

V8 자바스크립트 엔진의 등장으로 JavaScript로 desktop APP이나 mobile APP과 유사한 UX를 제공할 수 있는 Web APP을 만들 수 있게 되었다. 또한 과거 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동하면서 새로운 HTML 페이지를 server에 요청할 필요없이 사용자가 보는 HTML 구조(DOM)을 조작할 수 있게 되었다.

React.js는 이런 JavaScript의 클라이언트 사이드 라이브러리로 클라이언트 사이드 JavaScript 코드를 작성하는데 도움이 된다.

즉, React는 모던하고 리액티브한 사용자 인터페이스(UI)를 구축하게 해주는데, 그 과정에서 더 높은 레벨의 문법(syntax)를 제공한다. 이 문법을 통해 코드를 선언적(Declative)이고 컴포넌트 중심적인 방법(component-focused approach)으로 작성할 수 있게 해준다.

React 특징 3가지

1. 선언형 프로그래밍
2. 컴퍼넌트 시스템
3. 멀티 플랫폼 지원

선언형 프로그래밍

JavaScript만 사용한다면, createElement()로 요소를 생성하고 textContent로 안에 내용을 넣고, className으로 클래스를 추가하고, addEventListener()로 이벤트를 연결하고 등등... 모든 단계들이 서술되어야 한다. 이건 명령적 프로그래밍(Imperative Programming) 방식으로 단순히 이어지는 행동들을 단계별로 설명하는 방식이다. 이런 접근은 모든 핵심적인 세부사항을 처리해줘야 하고 높은 확률로 반복적인 코드들을 작성하게 된다. 하지만 React.js를 사용하면 아래와 같이 구조적으로 한 눈에 알아볼 수 있는 코드를 작성할 수 있다. < Post >라는 컴포넌트 안에 필요한 HTML 구성 요소들이 들어있고 React는 이런 컴포넌트들의 조합을 이용하는 것이다.

imoprt Post from './components/Post';

function APP(){
  return (
    <div>
        <h1>Post Lists</h1>
        <Post title='post title' content='post content' />
    </div>
  )
}

export default App;

React는 이처럼 작은 컴포넌트로 나누어 작업하는 방식으로 보면 된다. 각각의 컴포넌트(js, ts 등)들은 명확한 작업을 가진다.

그리고 그 코드들을 React 라이브러리가 훅 등을 이용한 선언적 코드를 해석해 화면에 랜더링한다.

즉, JavaScript에서 작성했어야했던 createElement()로 요소를 생성하는 등의 낮은 레벨의 지시사항(low level instriction)은 React에서는 직접 작성하지 않고, React 라이브러리에 의해 작성된다. 이로 인해, React를 사용하면 복잡한 사용자 인터페이스를 훨씬 더 쉽게 구축할 수 있는 것이다.

컴퍼넌트 시스템

멀티 플랫폼 지원

2. Airbnb JavaScript Style Guide

3. Google JavaScript Style Guide

4. NHN FE개발랩

기본적인 React Webpack Babel 설정을 연습, 기록한다.

프로젝트 구성

• 프로젝트의 메타 정보를 관리할 pakage.json 파일을 프로젝트 루트에 생성한다.

$ npm init --yes

React 기본 프로젝트 코드 작성

1. react와 react-dom package를 설치한다.

$ npm i react react-dom

2. 프로젝트 폴더 구성

Webpack 설정

1. webpack package 설치

• Webpack 개발 서버 환경을 구성하기 위한 의존 패키지를 설치한다.
• 개발 서버에서만 사용할 것이므로 -D 속성을 붙여준다.

$ npm i -D webpack webpack-cli webpack-dev-server dotenv rimraf

2. 환경 변수 추가

• 프로젝트 루트 위치에 .env파일을 생성하고 전역 환경 변수를 설정한다.
• 이 .env는 git repository에 올라가지 않도록 .gitignore에 추가한다.
• 환경변수는

PORT=3500

3. Webpack 폴더 구성

.
├── config/
│   ├── webpack.config.dev.js
│   └── webpack.config.server.js
├── dist/
├── src/
├── package-lock.json
└── package.json

4. 개발용 webpack 구성 파일 작성

• webpack.config.dev.js
• webpack.config.server.js

webpack.config.dev.js

require('dotenv').config();

const path = require('path');
const __ROOT = process.cwd();
const webpack = require('webpack');
const serverConfig = require('./webpack.config.server');

module.exports = {
  target: 'web',
  context: __ROOT,
  mode: 'development',
  devtool: 'eval',
  devServer: serverConfig,
  entry: {
    main: path.join(__ROOT, './src/index.js'),
  },
  output: {
    path: path.join(__ROOT, './public'),
    filename: 'js/[name].bundle.js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/',
  },
    resolve: { extensions: ['.js', '.jsx', '.json'] },
    plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        },
      },
    }),
  ],
};

webpack.config.server.js

const path = require('path');

module.exports = {
  // 정적 콘텐츠를 제공 할 위치를 서버에 알립니다.
  contentBase: path.join(process.cwd(), './public'),

  // 요청을 수신할 포트 번호를 설정합니다.
  port: process.env.PORT,

  // 인덱스로 설정할 파일 이름을 설정합니다.
  index: 'index.html',

  // 컴파일러 오류 또는 경고가있을 때 브라우저 화면에 오류 내용을 덮어씁니다.
  overlay: true,

  // 생성된 파일의 gzip 압축을 사용합니다.
  compress: true,

  // Hot Module Replacement 기능을 활성화 합니다.
  hot: true,

  // contentBase 옵션에서 제공하는 파일을 감시하도록 서버에 설정합니다.
  // 활성화 되면 파일 변경으로 전체 페이지 다시 로드 합니다.
  watchContentBase: true,

  // 알려진 바에 의하면 node_modules를 watchOptions 항목에서 제외하지 않을 경우
  // CPU 과부하 문제가 발생할 수 있습니다.
  // https://github.com/facebookincubator/create-react-app/issues/293
  watchOptions: {
    ignored: /node_modules/,
  },

  // Webpack Dev Server의 자체 로그는 일반적으로 유용하지 않습니다.
  // 로그를 보지 않도록 설정하거나, 너무 장황하지 않도록 'silent' 값을 설정합니다.
  clientLogLevel: 'none',

  // 터미널에 오류 정보만 간략히 표시하도록 설정합니다.
  stats: 'errors-only',

  // HTML5 History API를 사용하는 경우, index.html 페이지가 404 응답 대신 제공 되어야 합니다.
  historyApiFallback: true,

  // 실제 디스크에 파일을 쓰기합니다. (파일 생성)
  writeToDisk: true,
};

1. 홈 디렉토리(~) 폴더 안 .ssh 폴더(숨긴 풀더)로 이동

   • 홈 디렉토리(~) 폴더는 window의 경우, c: / 사용자 / 사용자 아이디 폴더에 해당한다.
   • ~폴더 안에 .ssh 폴더가 없다면 생성한다.

# .ssh 폴더 생성 명령어
$ mkdir ~/.ssh

# .ssh 폴더 안으로 이동 명령어
$ cd ~/.ssh

2. 계정별 ssh key 생성

• userA 대신 해당 계정을 구분할 이름을 넣어주면 된다.
• userA가 사용할 github 아이디@email.com는 userA가 github에서 로그인할 때 사용하는 계정을 넣어준다.

# userA 계정에 대한 ssh key 생성
$ ssh-keygen -t rsa -C "userA가 사용할 github 아이디@email.com" -f "id_rsa_userA"

• userB 대신 해당 계정을 구분할 이름을 넣어주면 된다.
• userB가 사용할 github 아이디@email.com는 userB가 github에서 로그인할 때 사용하는 계정을 넣어준다.

# userB 계정에 대한 ssh key 생성
$ ssh-keygen -t rsa -C "userB가 사용할 github 아이디@email.com" -f "id_rsa_userB"

• 이 때, 아래와 같이 비밀번호를 설정하라고 뜨는데 굳이 설정하지 않을 거라면 그냥 엔터를 눌러 넘어가면 된다.

  Enter passphrase (empty for no passphrase):

3. 생성된 ssh key 확인

위와 같이 ssh key를 생성하고 나면 .ssh 폴더 안에

• id_rsa_userA
• id_rsa_userA.pub
• id_rsa_userB
• id_rsa_userB.pub

이 4개의 파일이 생성되었을 것이다.

.pub이 붙은 파일은 공개키(public key)이다. 붙지 않은 파일은 비밀키(private key)이다.

ssh-agent에 ssh key의 비밀키를 등록

• 현재 폴더가 ~/.ssh 여야 한다.

$ ssh-add id_rsa_userA
$ ssh-add id_rsa_userB

• 만약 이때 오류가 발생한다면

  $ eval "$(ssh-agent -s)"

  로 초기화를 해준다.

Github에 ssh key의 공개키를 등록

userA

1. userA github 계정에 로그인한다. 여기에 userA 계정의 ssh key 공개키를 등록할 것이다.

2. 우측 상단의 프로필 이미지를 클릭 > Settings 클릭

3. 좌측 메뉴 중 SSH and GPG keys 클릭 > New SSH key 클릭

4. Title엔 해당 ssh keys를 구분할 이름을 정해준다. ex) userA - desktop MAC

5. Key엔 ssh key의 공개키를 복사해 붙여 넣어준다.

// ssh key의 공개키 확인
$ cat id_rsa_userA.pub

• ssh-rsa로 시작하는 공개키가 나오는데 ssh-rsa를 포함해 복사해 붙여 넣는다.

6. Add SSH Key 클릭

7. userB github 계정에 로그인한다.

userB

1. userA 와 동일하게 진행해준다.

config 파일 설정

1. .ssh 폴더 안에 config 파일을 생성한다.

• 안에 내용을 적을 것이므로 vi로 생성하면 바로 내용을 적을 수 있다.

$ vi ~/.ssh/config

2. config 안에 아래와 같이 작성한다.

   # 여기는 주석이다. - userA 깃험 계정 - for work
   Host github.com-userA
    HostName github.com
    IdentityFile ~/.ssh/id_rsa_userA
    User userA
   

여기는 주석이다. - userB 깃헙 계정 - for study

Host github.com-userB HostName github.com IdentityFile ~/.ssh/id_rsa_userB User userB

## 폴더 별 path 설정
1. ~/.gitconfig 파일을 열어 아래의 정보를 삭제한다.

+ 이는 Global로 설정해둔 user의 정보이다.

[user] email = userG@email.com name = userG

2. 그리고 ~/.gitconfig 파일을 맨 아래에 아래의 정보를 추가한다.

[includeIf "gitdir:~/userA계정을 쓸 폴더의 경로"] path = .gitconfig-userA

[includeIf "gitdir:~/userB계정을 쓸 폴더의 경로"] path = .gitconfig-userB

3. path에 정의한 각각의 .gitconfig-계정명 파일을 만들고 내용을 입력한다.

### userA path
+ path가 .gitconfig-userA이므로 ~/.gitconfig-userA에 생성해야 한다.
+ 생성한 파일엔 아래와 같은 내용을 입력한다.

[user] email = userA@email.com (여기는 해당 폴더에서 사용하고자하는 github 계정의 이메일을 입력한다.) name = userA

[github] user = 여기는 반드시 github 프로필의 이름을 넣어줘야 한다.

### userB path
+ userA와 동일하다.

## 폴더별로 다른 github 계정이 적용되는 지 확인
### userA를 사용하는 폴더에서 아래 명령어 입력
+ userA 계정의 이름과 이메일이 나온다면 적용이 된 것이다.
```bash
$ git config user.name
$ git config user.email

userB를 사용하는 폴더에서 같은 명령어 입력

• userB 계정의 이름과 이메일이 나온다면 적용이 된 것이다.

만약 위 명령어 입력 시 아무 것도 나오지 않는다면 위에 설정에 잘못된 곳은 없는 지 다시 확인한다. 특히 path 경로나 파일 이름, 계정 이름 등 대소문자까지 모두 일치해야함을 주의하자.

SSH를 이용한 git clone

git repository clone 옵션 중 SSH의 주소는 아래와 같은 형식이다.

• git@github.com:userA/repositoryName.git

이때, 이걸 그대로 git clone 하면 안 된다. git@github.com 뒤에 -userA 와 같이 사용자 이름을 붙여줘야 한다. 이건 위에서 $ git config user.name해서 나온 사용자 이름을 붙여주면 된다.

처음 repository clone 시,

# 처음 repository clone 시 설정
$ git clone git@github.com-userA:userA/repositoryName.git

이미 repository가 clone 되었을 시,

이미 clone된 repository에 설정을 변경해주고 싶다면 아래와 같이 set-url을 이용하면 된다.

# 이미 clone된 repository의 설정 변경
$ git remote set-url origin git@github.com-userA:userA/repositoryName.git

1. < img > 태그 + position: absolute
2. < img > 태그 + object-fit
3. < div > 태그 + background-image: url();

1. < img > 태그 + position: absolute

이미지를 컨테이너로 한 번 감싼 후, 가운데 정렬한 뒤 컨테이너 크기를 벗어나는 이미지 부분을 자르는 방법. < img > 요소에 top과 left, translate 등의 속성으로 이미지의 위치를 조절할 수 있다.

1. < img > 태그를 < div class='container' > 태그로 감싼다.
2. < div class='container' > 태그 와 < img > 태그에 CSS 속성을 추가한다.

< div class='container' > CSS 속성

• width와 height는 렌더링하고 싶은 이미지의 크기를 설정한다.
• overflow: hidden;는 < div class='container' > 태그를 넘어가는 부분의 이미지는 잘라준다.
• position: relative;는 < img > 태그에 position: absoulte를 해줄텐데 절대적인 위치의 기준점이 < div class='container' >이 되도록 설정한다.

< img > CSS 속성

• positon: absoulte;는 position: relative 속성을 가지는 가장 가까운 요소를 기준으로 절대적인 위치를 가지도록 한다.
• width: 100%;는 삽입된 이미지의 가로세로비를 유지한 채, 가로폭을 기준으로 세로 길이가 잘리도록 한다. 이때, 가로 길이는 < div class='container' >에 설정한 width이다.
• height: 100%;는 삽입된 이미지의 가로세로비를 유지한 채, 세로폭을 기준으로 가로 길이가 잘리도록 한다. 이때, 세로 길이는 < div class='container' >에 설정한 height이다.
• width: 100%;와 height: 100%; 를 모두 입력하면 삽입된 이미지의 가로세로비가 망가지더라도 < div class='container' >에 설정한 width와 height 길이만큼 늘어난다.
• top: 50%;, left: 50%;, transform: translate(-50%, -50%);는 < img >태그를 < div class='container' > 안에서 가운데 정렬시킨다.

.container {
  width: 원하는 px 혹은 rem 혹은 em;
  height: 원하는 px 혹은 rem 혹은 em;
  overflow: hidden;
  position: relative;
}

.container > img {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

장점

• IE(Internet Explorer)에서도 호환된다. (Can I use?)

단점

• < img > 태그를 불필요하게 < div class='container' >와 같은 태그로 한 번 감싸줘야 한다.
• 설정해줘야하는 CSS 속성이 많다.

2. < img > 태그 + object-fit

object-fit 속성을 이용해 이미지의 크기를 조절하는 방법 object-position 속성을 사용해 이미지의 위치를 조절할 수 있다.

object-fit 속성은 < img > 요소나 < video > 요소와 같은 대체 요소의 콘텐츠 크기를 조절하는 속성이다. object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있다.

• 출처 - MDN

장점

• object-fit 속성 하나면 간편하게 이미지 크기를 설정할 수 있다.

단점

• IE(Internet Explorer)에서는 지원하지 않는다. (Can I use?)

3. < div > 태그 + background-image: url();

이미지를 < div > 태그에 background-image 속성을 이용해 배경 이미지로 삽입하는 방법이다. background-size 속성으로 크기를 조절한다. background-position 속성을 이용해 이미지의 위치 조정이 가능하다.

장점

• IE(Internet Explorer)에서도 호환된다. (Can I use?)

단점

아래의 단점은 이미지가 콘텐츠가 아닌 꾸미는 용도인 배경 이미지로 삽입하려는 의도였다면 무관하다.

• 이미지를 삽입한 것인데 < img > 태그를 사용할 수 없어 UX나 SEO, 웹 접근성 측면에서 좋지 않다.
  • UX의 경우, < img > 태그에서 지원되는 이미지 복사 및 저장 기능을 사용할 없고 drag and drop 기능도 적용되지 않는다.
  • SEO나 웹 접근성 측면에선, 이미지가 < div > 태그로 인식되기 때문에 시맨틱한 마크업이라고 볼 수 없다.

웹 접근성을 처음 접한 것은 프론트 엔드 개발을 시작하면서였다. 그러다보니 항상 개발자의 입장에서 웹 접근성을 고려해왔다. 하지만 사용자의 입장에서도 웹 접근성에 대해 고려해야할 점이 있다고는 생각하지 못했었다. Instagram 게시 시, 대체 텍스트가 그 예이다. 지금까지 Instagram을 자주 사용했지만 사진에 대체 텍스트를 넣은 적은 없었다. Imgar 프로젝트를 하면서 대체 텍스트에 대해 여러 가지 고민을 할 기회가 있었고, 그 과정에서 Instagram의 사진에 대체 텍스트를 넣을 수 있다는 사실을 알게 되어 정리해둔다.

Instagram 대체 텍스트

인스타그램에서 대체 텍스트는 아래와 같은 상황에서 필요하다.

1. 네트워크 오류로 사진을 불러올 수 없을 때 동일한 정보를 주기 위해
2. 스크린 리더 사용자에게 동일한 정보를 주기 위해

Instagram 자동 대체 텍스트

Instagram에서는 게시글 등록 시 자동으로 대체 텍스트를 생성해 제공한다. 하지만 이는 정확하지 않을 수 있다. 가장 좋은 방법은 사진을 게시하는 사용자가 사진에 대한 자세한 설명을 제공하는 것이다.

이미지를 업로드 또는 게시한 사람이 대체 텍스트를 포함하지 않을 경우 Facebook의 자동 대체 텍스트(AAT) 기술을 통해 컴퓨터 비전과 인공 지능이 사용되어 이미지에 대한 설명이 자동으로 생성됩니다. 자동 대체 텍스트는 완전하지 않을 수도 있습니다. 하지만 직접 업로드 또는 게시하는 이미지에 대한 대체 텍스트를 수정할 수 있습니다. 출처 - Facebook에서 자동 대체 텍스트는 어떻게 작동하나요?

Instagram에 적용된 대체 텍스트 확인

Instagram 웹 버전에서 확인해보면, img 요소의 alt속성에 대체 텍스트가 들어가 있는 것을 확인할 수 있다.

게시글 등록 시 대체 텍스트 추가

게시글 등록 시, 고급 설정 > 대체 텍스트 입력 > 사진에 대한 자세한 설명 추가

이미 등록된 게시글에 대체 텍스트 추가

게시글 수정 시, 수정 > 사진 우측 아래 대체 텍스트 수정 > 사진에 대한 자세한 설명 추가

import { ReactComponent as upIconSVG } from '../../assets/Icon/UpIcon.svg';

위와 같이 UPIcon.svg 파일을 upIconSVG라는 이름의 React 컴포넌트로 불러와 JSX로 렌더링하려고 했더니 아래와 같이 JSX.IntrinsicElements 형식에 upIconSVG 속성이 없다는 오류가 발생했다.

문제 이유

처음엔 webpack 설정에 문제가 있나 고민했는데 찾아낸 이유는 아주 간단했다. Element가 < upIcon />과 같이 소문자로 시작하여 문제가 되었던 것이다. 소문자로 시작하는 경우, React에서 내장 컴포넌트로 해석되는데 upIcon은 import한 컴포넌트이기 때문이다.

Element가 소문자로 시작하는 경우

< div >나 < span > 같은 내장 컴포넌트라는 것을 뜻하며 'div'나 'span' 같은 문자열 형태로 React.createElement에 전달된다.

Element가 대문자로 시작하는 경우

< Foo /> 와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일 되며 JavaScript 파일 내에 사용자가 정의했거나 import한 컴포넌트를 가리킨다.

문제 해결

import { ReactComponent as UpIconSVG } from '../../assets/Icon/UpIcon.svg';

위와 같이 대문자로 시작하도록 바꿔주니 정상작동했다.

참고 자료

React 공식문서 > JSX 이해하기 > React Element의 타입 지정하기

오른쪽에서 타입스크립트의 인터페이스(interface)로 객체의 속성과 속성의 타입을 정의했다. 그리고 ImageCard 컴포넌트 테스트를 위해 더미데이터인 imageInfo 객체를 만들어 props로 넘겨줬더니 아래와 같이 타입이 일치하지 않다는 오류가 발생했다.

ImageInfo의 type 속성의 경우 문자열 리터럴 타입(string literal types)을 이용해 'image/jpeg' 혹은 'video/mp4'만을 허용한다. 그래서 더미데이터인 imageInfo의 type 속성에 'image/jpeg'로 넣어줬는데 오류가 발생한 것이다.

문제 이유

자세히 읽어보니, 더미데이터인 imageInfo의 type 속성에 넣어준 'image/jpeg'는 string 타입이고, 인터페이스인 ImageInfo의 type 속성에 정의된 타입은 문자열 리터럴 타입(string literal types)이기 때문이었다.

해결 방법

처음 접근(좋은 방법X)

처음엔 더미데이터인 imageInfo의 type 속성에 'image/jpeg'를 그냥 넣어줬더니 타입스크립트가 string으로 타입추론을 해서 문제가 되었다고 판단했다.

const imageInfo = {
  id: 'id1234';
  description: 'null';
  type: 'image/jpeg' as const;
  hasSound: false;
  imageWidth: 100;
  imageHeight: 300;
  bandWidth: 400;
} 

그래서 타입 추론을 'image/jpeg'라는 리터럴 타입을 가지도록 as const로 타입 단언(type assertion)을 해주었다. 타입스트립트에서 const로 선언한 경우, 리터럴 자체로 타입을 추론하기 때문에 'image/jpeg'는 string 타입이 아닌 'image/jpeg'라는 리터럴 타입으로 추론이 되게 된다.

적절한 방법

위의 방법으로 오류는 해결할 수 있지만, 임시방편일 뿐이다. 데미데이터인 imageInfo의 type 속성만이 아니라 다른 속성들도 ImageInfo 인터페이스 타입을 만족해야하는 상황이므로, 데미데이터인 imageInfo의 타입 자체를 imageInfo 인터페이스 타입임을 명시하는 것이 적절하다.

const imageInfo: ImageInfo = {
  id: 'id1234',
  description: 'null',
  type: 'image/jpeg',
  hasSound: false,
  imageWidth: 100,
  imageHeight: 300,
  bandWidth: 400,
};

react-router-dom을 이용한다.

import { Route, Switch, Redirect, NavLink } from 'react-router-dom';

<Router>
  <Switch>
    <Route path={['/', '/tab1']} exact>
      / 혹은 /tab1에서 보여줄 돔 요소
    </Route>
    <Route path="/tab2">
      /tab2에서 보여줄 돔 요소
    </Route>
    <Route path="/tab3">
      /tab3에서 보여줄 돔 요소
    </Route>
  </Switch>
</Router>

문제점

탭을 누르는 것 뿐인데 path가 바뀌어서 마케팅 팀 쪽에서는 클릭 수에 대한 정보를 정확하게 파악할 수 없게 된다.

api를 가져다 쓰는 데 api가 있는 서버의 주소와 api를 가져오는 클라이언트의 주소가 달랐기 때문

해결 방법

서버와 클라이언트 사이에 proxy를 둬서 해결 할 수 있다.

Webpack의 proxy 기능

Webpack에서는 Proxy 기능을 지원해 준다. package.json 파일에 서버의 루트를 추가해주면 된다.

{
  "proxy": "api를 가져오고자 하는 서버의 루트 URL(http://xxx)"
}

• 코딩테스트 연습 > 위클리 챌린지 > 퍼즐 조각 채우기

문제 접근

1. 빈 공간의 블록 모양을 파악한다. (회전 고려X)

2. 퍼즐 조각의 모양을 파악한다. (4방향 회전을 모두 고려한다.)

3. 퍼즐 조각과 일치하는 빈 블록 모양이 있는 지 확인한다.

   • 일치한다면, 이후의 퍼즐 조각은 해당 빈 블록은 비교하지 않는다. (해당 빈 블록은 이제 채워진 상태이다.)

   • 일치하지 않는다면, 다음 빈 블록 모양과 비교하거나 다음 빈 블록 모양이 없다면 다음 퍼즐 조각으로 넘어간다.

• 빈 공간의 블록 모양은 회전을 고려하지 않는 이유 : 퍼즐 조각을 4방향으로 돌려 빈 공간과 일치하는 지 확인할 것이기 때문

문제 풀이

getShape(arr, baseX, baseY)

arr[baseX][baseY]를 기준으로 arr[baseX][baseY]와 같은 value를 가지는 인접한 칸의 행과 열의 좌표를 구한다.

// 하나의 모양의 좌표들 구하기
const getShape = (arr, baseX, baseY) => {
  const shape = [];
  const value = arr[baseX][baseY];

  const dx = [1, 0, -1, 0];
  const dy = [0, 1, 0, -1];

  // value값과 같은 인접한 좌표들을 탐색
  const bfs = (x, y, value) => {
    if (arr[x][y] !== value) return;

    shape.push([x - baseX, y - baseY]);
    arr[x][y] = value ? 0 : 1;

    for (let i = 0; i < 4; i++) {
      const nx = x + dx[i];
      const ny = y + dy[i];
      if (
        nx >= 0 &&
        nx < arr.length &&
        ny >= 0 &&
        ny < arr.length &&
        arr[nx][ny] === value
      ) {
        bfs(nx, ny, value);
      }
    }
  };

  bfs(baseX, baseY, value);

  return shape;
};

findShapes(arr, value)

arr 에서 value 값을 가지는 모양들을 찾는다. arr를 돌면서 모양의 시작 지점을 찾아 getShape()함수를 호출해 찾은 shape들의 배열을 리턴한다.

const findShapes = (arr, value) => {
  const shapes = [];

  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[i][j] === value) {
        shapes.push(getShape(arr, i, j));
      }
    }
  }

  return shapes;
};

getRotatedShapes(shape)

모양의 좌표값들을 오른쪽으로 90도 180도 270도로 회전했을 때 좌표값을 구한다.

const getRotatedShapes = shape => {
  const rotatedShapes = [shape];

  for (let i = 0; i < 3; i++) {
    const lastShapeIdx = rotatedShapes.length - 1;

    rotatedShapes.push(
      rotatedShapes[lastShapeIdx].map(([x, y]) => [-y || 0, x])
    );
  }

  return rotatedShapes;
};

normalizeShape(shape)

회전시킨 모양의 좌표들을 모두 (0,0)을 기준으로 좌표값을 가지도록 변환한다. (음의 좌표값이 없도록 정규화한다.)

const normalizeShape = shape => {
  const [row, col] = shape.reduce(
    (acc, cur) => [Math.min(acc[0], cur[0]), Math.min(acc[1], cur[1])],
    [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]
  );

  return shape
    .map(([r, c]) => [row < 0 ? r - row : r, col < 0 ? c - col : c])
    .sort()
    .flat()
    .join('');
};

solution()

puzzleShapes

table에서 퍼즐들의 모양을 회전가능한 경우의 수를 모두 고려하여 구한다.

blankShapes

game_board에서 빈 공간의 모양을 구한다. (이 때는 회전가능한 경우의 수까지 고려하지 않아도 된다.)

blankShapes.forEach()

game_board의 빈 공간들이 table에서 가져온 블록들의 경우의 수 중에 존재하는 지 확인 후, 존재한다면 그 블록은 다음부턴 확인하지 않고, 그 블록의 칸수만큼 answer에 더해준다.

function solution(game_board, table) {
  const PUZZLE_VALUE = 1;
  const BLANK_VALUE = 0;

  const puzzleShapes = findShapes(table, PUZZLE_VALUE)
    .map(shape => getRotatedShapes(shape))
    .map(rotatedShape => rotatedShape.map(shape => normalizeShape(shape)));

  const blankShapes = findShapes(game_board, BLANK_VALUE).map(shape =>
    normalizeShape(shape)
  );

  let answer = 0;
  blankShapes.forEach(shape => {
    for (let i = 0; i < puzzleShapes.length; i++) {
      if (puzzleShapes[i].includes(shape)) {
        puzzleShapes.splice(i, 1);
        answer += Math.floor(shape.length / 2);
        break;
      }
    }
  });

  return answer;
}

카카오 이모티콘 샵을 마크업과 라이트 하우스를 기반으로 분석한 뒤, 개선점이 있다면 개선 방법까지 반영하여 html, css로 구현해보았다.

프로젝트 진행 이유

현재 이미 서비스 중인 웹 사이트를 분석하여 왜 지금과 같이 마크업을 했는지, 같은 기능을 다르게 구현할 수는 없었는지를 고민할 수 있었다.

카카오 이모티콘 샵을 선택한 이유

✔ 직접 사용해 보았을 때, 이미지가 주 컨텐츠인만큼 이미지가 늦게 로딩되는 경우 그 공백이 눈에 들어왔다.

✔ Light House 분석 결과 Performance도 다른 웹 사이트에 비해 점수가 낮아서 이를 개선해보고 싶었다.

• 카카오 이모티콘 샵 Light House 결과⬇️

  

• 개발자 도구 > 네트워크 패널로 확인한 로딩 속도⬇️

  

목표

✔ 카카오 이모티콘 샵의 메인 페이지를 마크업, 접근성, 성능 관점에서 분석하고 개선하기

✔ 개선 후 Light House 분석 결과를 비교해 유의미한 변화 확인

역할 분배

✅ HTML 마크업 ✅ 헤더 및 네비게이션 구현 ✅ 인기 이모티콘 콘텐츠, 스타일 콘텐츠 구현 ✅ 신규 이모티콘 콘텐츠, 푸터 영역 구현

HTML 마크업은 시맨틱한 마크업을 중점으로 다같이 의논하며 진행했고 내가 온전히 맡은 부분은 인기 이모티콘 콘텐츠와 스타일 콘텐츠 구현이었다.

나의 주안점

• 시맨틱 마크업
• 이미지 성능 최적화
• WCAG 기반 접근성 개선
• 반응형 구현

이미지 성능 최적화

기존 사이트의 문제점

✔ 현재 카카오 이모티콘 샵에서 사용하는 이미지 포맷은 모두 png 혹은 gif이다.

이들은 무손실 포맷으로 다른 포맷에 비해 파일 크기가 크다. 위의 카카오 이모티콘 샵 Light House 결과에서 이미 확인할 수 있듯이 크기가 큰 이미지 파일을 다운로드 시 전체 페이지 로딩 시간을 지연시킨다.

이미지 파일 포맷 변경

✔ 대부분의 웹 사용자들이 크게 구분하지 못할 정도의 화질 저하로 이미지 로딩 속도를 올릴 수 있다면, 그 편이 사용자 경험에 더 유리하다고 판단했다.

1. Webp로 변환

png 대신 WebP로 변환하여 파일 크기를 25~35%로 줄였다.

• png와 webP 파일 크기 비교⬇️ 웹 사이트에서 보다 빠르게 이미지를 읽을 수 있도록 개발된 압축포맷이다. 손실 압축(JPEG)와 비손실 압축(PNG, GIF)를 모두 지원하며, 모두 약 30% 정도 용량을 줄여 빠른 웹 사이트 로딩이 가능하다. 하지만 WebP를 지원하지 않는 브라우저들도 있어 그런 경우엔 태그를 이용해 png 파일로 보이도록 설정해주었다.

  <picture class="popularEmoticon__img">             
      <source
        type="image/webp"
        srcset="./images/popularEmoticon/optimization/tiny-big-bean_thumbnail.webp"
      />
      <source
        type="image/png"
        srcset="./images/popularEmoticon/tiny-big-bean_thumbnail.png"
      />
      <img
        class="popularEmoticon__img"
        alt="뽀시래기 짱큰콩 썸네일"
        src="./images/popularEmoticon/tiny-big-bean_thumbnail.png"
      />
    </picture>

Mp4로 변환

gif의 경우 Mp4로 바꿔주어 용량을 줄였다. WebP로도 변환하여 Webp가 지원되지 않으면 Mp4로 나오도록 했으면 더 좋았을 것 같다.

<video 
       autoplay loop muted playsinline
       class="popularEmoticon__img popularEmoticon__img__hover">
    <source
            type="video/mp4"
            src="./images/popularEmoticon/optimization/tiny-big-bean_hover.mp4"/>
  뽀시래기 짱큰콩 썸네일
</video>