ONE LIFE 2 LIVE

[서평 | 리뷰]　「개발자 기술면접 노트」

Olivia Kim — Fri, 6 Jun 2025 12:38:00 +0900

한빛미디어 서평단 <나는 리뷰어다> 활동을 위해서 책을 협찬받아 작성된 서평입니다.

『연봉 앞자리를 바꾸는 개발자 기술 면접 노트』는 쿠팡과 카카오에서 면접관을 지낸 저자가 직접 쓴 IT 취업 및 이직 가이드북이다. 이 책은 단순히 기술 면접을 대비하는 데 그치지 않고, 개발자로서 커리어를 설계하고 성장할 수 있도록 이력서 작성, 포트폴리오 준비, 회사 선택법, 실무에서 필요한 핵심 기술까지 전 과정을 폭넓게 다룬다.

특히, 면접관의 시선에서 서술된 실질적인 조언이 많아 기존의 ‘지원자 중심’ 면접 대비서와 차별화된다. 실제로 대기업 출신임에도 면접에서 자주 실패하는 사례를 통해, 단순한 스펙이 아닌 실질적 준비와 전략의 중요성을 강조한다.

이 책은 다음과 같은 내용들을 담고 있다.

커리어 관리와 회사 선택

커리어 관리와 회사 선택개발자로서 자신에게 맞는 회사를 찾는 방법부터, 성장 가능성이 높은 회사를 선별하는 기준까지 구체적으로 안내한다. 막연히 ‘좋은 회사’가 아니라, 본인에게 맞는 회사를 찾는 것이 중요하다는 점을 강조한다.

이력서 및 경력기술서 작성법

이력서와 경력기술서 작성 시 실제로 탈락하는 사례와 주의할 점, 그리고 면접관이 주목하는 포인트를 짚어준다. 단순히 경력을 나열하는 것이 아니라, 지원하는 회사와 직무에 맞춰 전략적으로 작성하는 방법을 배울 수 있다.

코딩 테스트와 기술 면접 준비

코딩 테스트 준비를 위한 알고리즘 예제(주로 Java 기반)와, 기술 면접에서 자주 묻는 질문 및 답변 전략을 다룬다. 컴퓨터 공학 기초(CS), 데이터베이스, 네트워크, 운영체제 등 IT 실무에서 반드시 알아야 할 개념도 체계적으로 정리되어 있다.

실전 면접 노하우와 커뮤니케이션

기술 면접을 단순한 ‘문제풀이’가 아니라, 지원자와 면접관이 기술적 흥미와 관심사를 토론하는 자리로 만들어야 한다는 점을 강조한다. 면접관의 심리, 질문의 난이도 변화, 그리고 의사소통 능력의 중요성 등 실질적인 면접 현장의 분위기를 생생하게 전달한다.

성장 마인드와 경력 개발

단기적인 취업·이직뿐 아니라, 장기적으로 개발자로서 성장하는 데 필요한 마인드와 실천법(스터디, 오픈소스 기여, 개인 프로젝트 등)을 제시한다. 저자의 경험을 바탕으로, 꾸준한 자기계발의 중요성을 강조한다.

신입 개발자에게는, 취업 준비의 전체 로드맵을 잡아주고, 실무에서 요구하는 기술과 준비 방법을 구체적으로 제시해준다. 막연한 두려움을 실질적인 준비로 바꿔줄 수 있다.

경력 개발자에게는, 이직을 준비하는 경력자에게는 기술 복기와 커리어 전략 수립에 큰 도움이 된다. 실무에서 겪는 다양한 상황과 그에 대한 대처법, 성장 전략까지 폭넓게 다룬다.

또한 면접관이 어떤 기준과 심리로 지원자를 평가하는지 알 수 있어, 보다 전략적으로 준비할 수 있다. 단순히 ‘문제 정답’을 외우는 것이 아니라, 왜 그런 질문이 나오는지, 어떻게 대화하고 어필할지에 대한 통찰을 얻을 수 있다.

다만, 코딩 테스트 파트의 예제가 Java로 한정되어 있어, 다른 언어를 주로 사용하는 지원자에게는 약간 아쉬울 수 있다. 그러나 알고리즘 자체의 논리는 언어에 상관없이 적용 가능하므로, 큰 제약은 아니라고 생각한다.

『연봉 앞자리를 바꾸는 개발자 기술 면접 노트』는 개발자 취업·이직 준비생에게 실질적이고 현실적인 가이드가 되어줄 책이다. 단순한 ‘문제풀이집’이 아니라, 커리어 전반을 설계하고 성장할 수 있도록 도와주는 나침반 같은 책이다. 개발자로서 더 나은 미래를 꿈꾼다면 꼭 한 번 읽어보길 추천한다.

[JavaScript]　자바스크립트의 실행 컨텍스트(Execution Context) 완벽 정리 (ft. 스코프, TDZ, 호이스팅)

Olivia Kim — Mon, 17 Mar 2025 18:15:16 +0900

실행 컨텍스트란?

실행 컨텍스트(Execution Context)는 자바스크립트 코드가 실행되는 환경을 정의하고 관리하는 개념이다. 여기에는 코드를 실행하는 데 필요한 변수, 함수 선언, this 바인딩 정보 등을 포함하며, 코드가 실행되는 동안 이를 추적하고 관리한다.

자바스크립트는 싱글 스레드 기반으로 동작하므로, 한 번에 하나의 코드 블록만 실행할 수 있다. 하지만 실행 컨텍스트를 콜 스택(Call Stack)으로 관리하면서 여러 코드 블록을 실행할 수 있도록 조율하게 된다.

실행 컨텍스트의 종류

✅ 1) 전역 실행 컨텍스트 (Global Execution Context)

전역 실행 컨텍스트는 코드가 실행될 때 가장 먼저 생성되는 컨텍스트로, 프로그램이 종료될 때까지 유지된다.

전역에서 선언된 변수와 함수는 전역 실행 컨텍스트에 포함되며, 어디서든 접근 가능하다.

브라우저 환경에서는 window 객체, node.js 환경에서는 global 객체가 전역 실행 컨텍스트의 역할을 한다.

✅ 2) 함수 실행 컨텍스트 (Function Execution Context)

함수가 호출될 때마다 새롭게 생성되는 컨텍스트로, 함수 실행이 끝나면 해당 실행 컨텍스트는 콜스택에서 제거된다.

함수 내부의 변수 및 선언된 함수는 해당 컨텍스트 내에서만 접근 가능하다.

✅ 3) eval 실행 컨텍스트 (Eval Execution Context)

eval() 함수 내부에서 실행되는 코드에 대해서는 별도의 실행 컨텍스트가 생성된다.

eval은 보안 및 성능 상의 문제로 사용이 권장되지 않는다.

실행 컨텍스트의 구성 요소

실행 컨텍스트는 다음 3가지 요소로 구성된다.

✅ 1) 환경 기록 (Environment Record)

현재 실행 컨텍스트 내에서 선언된 변수, 함수, this 등을 저장하는 공간이다.

전역 컨텍스트에서는 전역 객체(Global Object)가 환경 기록을 담당하며, 함수 컨텍스트에서는 활성 객체(Activation Object)가 그 역할을 한다.

[참고] 전역 객체와 활성 객체

✨ 전역 객체

전역 실행 컨텍스트가 생성될 때 자동으로 생성되는 객체
전역 환경에서 선언된 변수, 함수, this 바인딩 정보를 저장하는 역할
브라우저 환경에서는 window 객체, node.js 환경에서는 global 객체가 전역 객체 역할을 함
var로 선언한 전역 변수는 전역 객체의 속성으로 저장됨
let과 const로 선언한 전역 변수는 전역 객체의 속성이 아님 (하지만 여전히 전역 환경 기록에는 존재함)

✨ 활성 객체

함수가 실행될 때 생성되는 실행 컨텍스트의 환경 기록을 관리하는 객체
함수 내부에서 선언된 변수, 함수, 함수 선언문 등을 저장하는 역할
실행 컨텍스트가 생성될 때, 활성 객체가 환경 기록을 담당하는 객체로 사용됨
함수가 실행될 때 생성되며, 함수 실행이 끝나면 사라짐
var로 선언된 변수는 활성 객체에 저장되지만, let과 const는 활성 객체의 환경 기록에 저장됨 (TDZ 존재)

[참고] var, let, const의 전역 객체 등록 차이: var는 전역 객체의 속성으로 등록되지만 let, const는 그렇지 않다는 게 무슨 뜻일까?

1️⃣ var는 전역 객체(window/global)의 속성으로 등록되지만, let과 const는 그렇지 않음

var a = "hello";
let b = "world";
const c = "javascript";

console.log(window.a); // "hello" (var는 전역 객체에 등록됨)
console.log(window.b); // undefined (let은 전역 객체에 등록되지 않음)
console.log(window.c); // undefined (const도 전역 객체에 등록되지 않음)

위의 코드를 보면 window.b와 window.c를 출력하면 undefined가 나온다. 변수 자체가 존재하지 않는다면, ReferenceError가 발생했을 것이다. 하지만 전역 실행 컨텍스트에 저장은 되어있지만, 전역 객체의 속성으로는 등록되어있지 않기 때문에 별도의 환경 기록(Environment Record)에 저장된다.

즉, var는 전역 객체(window)에 속성이 추가되지만, let과 const는 전역 실행 컨텍스트에는 존재하되 전역 객체의 속성이 아니다!

여기서 생기는 궁금증: 전역 실행 컨텍스트에 저장은 되어있지만 전역 객체의 속성이 아니라는 게 TDZ 때문인 건가?

TDZ 때문이 아니라, 원래 자바스크립트의 스펙이 let, const는 전역 객체의 속성으로 추가되지 않도록 설계되었다. TDZ는 변수 선언 이전에 해당 변수에 접근하면 발생하는 문제이지, 전역 객체에 등록되지 않는 이유는 아님!

2️⃣ 함수 실행 시 var는 바로 활성 객체에 등록되며 undefined로 초기화됨 /

3️⃣ let과 const는 활성객체의 환경 기록으로 등록되지만, 선언문을 만나기 전까지 TDZ에 있음

function example() {
  console.log(x); // undefined (var는 먼저 환경 기록에 등록되지만 undefined로 초기화됨)
  console.log(y); // ReferenceError (let은 초기화되지 않음)
  
  var x = 10;
  let y = 20;
}

example();

var x는 함수 실행 시 활성 객체에 먼저 등록되고, 초기 값이 undefined로 설정된다. 반면 let y는 함수 실행 시 활성 객체에 등록되지만, 선언문을 만나기 전까지 접근이 불가하다. (TDZ)

즉, var는 함수 실행 시 바로 undefined로 초기화되지만, let과 const는 초기화되지 않고 TDZ 상태에 있다가 선언문을 만나야 사용할 수 있다!

✅ 2) 외부 환경 참조 (Outer Environment Reference)

실행 컨텍스트를 생성한 외부 렉시컬 환경을 참조하는 부분이다.

이를 통해 스코프 체인이 형성되며, 변수를 검색할 때 현재 컨텍스트에서 찾지 못하면 외부 컨텍스트로 탐색이 이어진다.

[내가 보려고 남기는 참고] 실행 컨텍스트 - 스코프 체인 - 클로저

// 클로저 예시 코드
function outer() {
  var secret = "나는 외부 함수의 변수야!";

  return function inner() {
    console.log(secret); //   외부 컨텍스트의 변수에 접근 가능
  };
}

const closureFunc = outer(); // outer() 실행 후에도 secret이 살아 있음
closureFunc(); // "나는 외부 함수의 변수야!"

실행 컨텍스트가 생성되면, 스코프 체인을 따라 변수를 검색한다.
스코프 체인 덕분에 중첩 함수가 외부 함수의 변수에 접근 가능해진다.
실행이 끝나도 클로저를 통해 외부 함수의 변수를 계속 기억할 수 있다.

즉, 실행 컨텍스트가 스코프 체인을 형성하고, 스코프 체인은 클로저가 동작하는 기반이 된다!

✅ 3) this 바인딩 (this Binding)

실행 컨텍스트가 어떤 객체를 참조하는지를 결정하는 요소이다.

전역 컨텍스트에서는 this가 window(브라우저 환경) 또는 global(node.js 환경)을 가리킨다.

함수 호출 방식에 따라 this의 값이 달라진다.

[참고] 자바스크립트의 this

[JavaScript]　자바스크립트의 this

코어자바스크립트 (정재남, 2022) 책과 인프런의 코어자바스크립트 강의를 보고 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. 객체 지향 언어에서의 this 이번주 면접 스터디 발표

oliviakim.tistory.com

실행 컨텍스트의 동작 과정

1. 전역 실행 컨텍스트 생성

가장 먼저 생성되며, 프로그램이 종료될 때까지 유지된다.

2. 함수 실행 컨텍스트 생성 (함수 호출 시)

함수가 호출될 때마다 새로운 실행 컨텍스트가 생성된다.

실행이 끝나면 해당 실행 컨텍스트는 제거된다.

3. 콜 스택(Call Stack)에서 실행 컨텍스트 관리

실행 컨텍스트는 콜 스택을 사용해 관리된다.

현재 실행 중인 컨텍스트는 콜 스택의 최상단(Top)에 위치한다.

실행이 끝난 컨텍스트는 콜 스택에서 제거된다.

실행 컨텍스트와 호이스팅(Hoisting)

✅ 호이스팅이란?

실행 컨텍스트가 생성될 때 변수와 함수 선언을 먼저 메모리에 저장하는 과정이다. (주로 먼저 '끌어올려진다'라고 표현한다.)

코드 실행 전에 식별자 정보를 수집하여 환경 기록(Environment Record)에 등록한다.

var 키워드로 선언된 변수는 undefined로 초기화되며, 함수 선언문은 전체 함수가 저장된다.

✅ 호이스팅 예제

console.log(a); // undefined
var a = 10;
console.log(a); // 10

foo(); // 'Hello'
function foo() {
  console.log('Hello');
}

var a는 환경 기록에 미리 등록되지만, 초기 값은 undefined로 설정된다.

따라서 console.log(a)를 실행하면 undefined가 출력된다

함수 선언문 foo()는 전체 함수가 호이스팅 되므로 정상 실행된다.

[참고] 호이스팅과 TDZ

✨ 호이스팅 개념 다시 정리

자바스크립트에서 변수와 함수 선언이 실행 전에 끌어 올려지는(hoisting) 현상
즉, 코드 실행 전에 변수와 함수가 메모리에 미리 저장되는 과정

⭕ var, 함수 표현식(function(){ }): 호이스팅 될 때 초기화(undefined)까지 함께 수행

✖️ let, const, 함수 선언식(화살표 함수 () => { }): 선언만 호이스팅 되고, 초기화는 실행문을 만날 때 수행(TDZ)

✨ TDZ 개념 다시 정리

let과 const는 선언 전 접근할 수 없는 TDZ(죽은 영역)를 가짐
즉, 변수 선언문을 만나기 전에 변수를 참조하면 ReferenceError가 발생!
결국 호이스팅 자체는 되지만, 초기화가 실행문을 만날 때 수행되기 때문에 접근할 수 없는 것

✨ 왜 TDZ가 발생할까?

스코프 내에서 안전한 변수 접근을 보장하기 위해서!
var는 어디에서 선언되든 재할당, 재선언까지 가능한 전역 스코프이기 때문에 코드가 길어지고 복잡해질 수록 변수를 추적, 제어하기가 어려움
이러한 문제점을 해결하기 위해 나온 변수 선언 키워드가 let, const
따라서 변수가 '어디서 선언되었는지'를 명확히 하고, 의도치 않은 오류를 방지하기 위한 설계가 TDZ

스코프와 스코프 체인

✅ 스코프(Scope)

변수의 유효 범위를 의미하며, 실행 컨텍스트가 변수를 참조할 수 있는 범위를 결정한다.

✅ 스코프 체인(Scope Chain)

실행 컨텍스트에서 변수를 검색할 때, 현재 컨텍스트에서 찾지 못하면 외부 컨텍스트를 참조하는 구조이다.

이를 통해 중첩 함수가 외부 함수의 변수에 접근할 수 있다.

✅ 스코프 체인 예제

var a = 1;

function outer() {
  var b = 2;

  function inner() {
    var c = 3;
    console.log(a, b, c); // 1, 2, 3
  }

  inner();
}

outer();

inner() 함수 내부에서 a, b, c를 출력할 때,

c는 inner()에서 찾는다.
b는 outer()에서 찾는다.
a는 전역 컨텍스트에서 찾는다.

이렇게 변수를 가까운 스코프에서부터 차례로 찾는 과정이 스코프 체인이다.

실행 컨텍스트 최종 정리

자바스크립트 코드가 실행될 때 전역 실행 컨텍스트가 생성된다.
함수가 호출될 때마다 새로운 실행 컨텍스트가 생성된다.
실행 컨텍스트는 환경 기록, 외부 환경 참조, this 바인딩으로 구성된다.
호이스팅을 통해 변수와 함수 선언이 먼저 메모리에 저장된다.
콜스택을 사용해 실행 컨텍스트를 관리하며, 실행이 끝난 컨텍스트는 스택에서 제거된다.

[JavaScript]　SSR, CSR, SSG는 무엇일까?

Olivia Kim — Fri, 7 Mar 2025 00:00:23 +0900

클라이언트 사이드 렌더링 (CSR)

프론트엔드 개발자에게 상대적으로 익숙한 방식은 클라이언트 사이드 렌더링(CSR)이다. CSR은 클라이언트(브라우저)가 웹 페이지를 요청할 때, 서버는 최소한의 HTML만 제공하고 이후 자바스크립트가 실행하면서 페이지를 렌더링하는 방식이다.

예를 들어 리액트, 뷰, 앵귤러와 같은 프론트엔드 라이브러리나 프레임워크들은 CSR을 기본적으로 사용한다. 리액트 프로젝트를 생성하면 index.html파일은 거의 비어 있고, index.js에서 자바스크립트가 동적으로 컨텐츠를 삽입하며 화면을 구성하게 된다.

<!-- index.html -->
<body>
  <div id="root"></div> <!-- React가 이곳에 렌더링 -->
</body>


// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

즉, 초기에는 화면에 보이는 것이 없지만, 브라우저가 자바스크립트를 실행하면서 화면이 렌더링된다.

CSR의 특징

✅ 빠른 상호작용

- 한번 렌더링된 후에는 서버와 추가적인 HTML 요청 없이, 클라이언트에서 빠르게 화면을 변경할 수 있다.

✅ 서버 부하 감소

- 서버에서 매번 HTML을 생성해 주는 것이 아니라, 최소한의 HTML만 제공하면 된다.

❌ 초기 로딩 지연

- 페이지 진입 시 데이터를 가져와 렌더링해야 하므로, 초기 로딩이 느릴 수 있다.

❌ SEO(검색 엔진 최적화)에 불리

- 초기 HTML이 비어 있기 때문에 검색 엔진이 페이지 내용을 제대로 수집하지 못할 수 있다.

서버 사이드 렌더링 (SSR)

서버 사이드 렌더링(SSR)은 클라이언트가 요청을 보낼 때, 서버에서 HTML을 완전히 만들어서 응답하는 방식이다. 즉, 클라이언트가 따로 자바스크립트를 화면에 구성할 필요 없이 서버에서 렌더링한 HTML을 그대로 받아와서 즉시 화면에 표시할 수 있다.

SSR 예제

일반적으로 Next.js와 같은 프레임워크에서 SSR을 지원하며, 서버에서 HTML을 생성하는 방식은 아래와 같다.

// pages/index.js (Next.js)
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return { props: { data } };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

위 코드는 사용자가 페이지를 요청할 때 서버에서 데이터를 가져오고, 미리 HTML을 생성하여 클라이언트에 전달하는 방식이다.

SSR의 특징

✅ 초기 로딩 속도가 빠름

- 서버에서 완성된 HTML을 보내주기 때문에 클라이언트가 별도로 화면을 렌더링할 필요가 없다.

✅ SEO에 유리

- 검색 엔진이 HTML을 제대로 읽을 수 있어 SEO 최적화에 도움이 된다.

❌ 서버 부하 증가

- 모든 요청마다 HTML을 생성해야 하므로, 서버의 부담이 커질 수 있다.

❌ 클라이언트에서 추가 상호작용이 필요할 경우 복잡해짐

- 페이지가 동적으로 변해야 하는 경우 CSR보다 구현이 어렵다.

정적 사이트 생성 (SSG)

정적 사이트 생성(SSG)은 빌드 시점에 미리 HTML을 새성하여 저장해 두는 방식이다. 즉, SSR처럼 매 요청마다 서버에서 HTML을 생성하는 것이 아니라, 페이지를 미리 만들어 두고 클라이언트에게 제공하는 방식이다.

SSG 예제

Next.js에서는 getStaticProps를 사용해 미리 HTML을 생성할 수 있다.

// pages/index.js (Next.js)
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return { props: { data } };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

이 방식은 빌드 시 HTML을 생성하기 떄문에, 요청이 들어와도 서버에서 추가적인 작업 없이 즉시 페이지를 제공할 수 있다.

SSG의 특징

✅ 초기 로딩 속도가 빠름

- 정적 HTML을 제공하므로 즉시 로딩된다.

✅ 서버 부하가 없음

- 서버에서 HTML을 생성하는 작업이 없으므로 부하가 거의 없다.

✅ SEO에 유리

- SSR처럼 미리 HTML이 제공되기 때문에 검색 엔진 최적화가 가능하다.

❌ 동적인 데이터 반영 어려움

- 미리 생성된 HTML이므로, 실시간 데이터를 반영하려면 별도의 API 요청이 필요하다.

SPA와 CSR의 연관 관계

SPA (싱글 페이지 애플리케이션)

하나의 HTML 페이지에서 모든 화면을 관리하는 웹 애플리케이션 구조
페이지 이동 없이 클라이언트에서 동적으로 화면을 변경

CSR (클라이언트 사이드 렌더링)

SPA에서 사용되는 대표적인 렌더링 방식
서버에서 HTML을 받는 것이 아니라, 클라이언트에서 동적으로 렌더링

즉, SPA는 CSR을 사용해서 구현할 수 있는 애플리케이션 패턴이다. 하지만 Next.js같은 프레임워크를 사용하면 SPA에서도 SSR이나 SSG를 적용할 수 있다.

SSR, CSR, SSG 비교 정리

렌더링 방식	초기 로딩 속도	SEO 최적화	서버 부하	동적 데이터
CSR	느림	불리	낮음	매우 유리
SSR	빠름	유리	높음	유리
SSG	매우 빠름	유리	없음	어려움

결국, 각 렌더링 방식은 상황에 따라 적절하게 선택해야 한다.

빠른 사용자 인터랙션이 필요하다면 CSR
SEO 최적화가 중요하다면 SSR
최대 성능과 빠른 로딩이 필요하다면 SSG

모던 웹 개발에서는 CSR, SSR, SSG를 혼합하여 사용하는 것이 일반적이다. 예를 들어 Next.js에서는 CSR, SSR, SSG를 모두 지원하며, 각 페이지마다 적절한 렌더링 방식을 선택할 수 있도록 한다. 따라서 단순하게 하나의 방법만을 추구하는 것보다, 프로젝트의 특성에 맞는 렌더링 방식을 선택하는 것이 중요하다.

[JavaScript]　자바스크립트의 얕은 복사(shallow copy)와 깊은 복사(deep copy)

Olivia Kim — Wed, 5 Mar 2025 00:00:53 +0900

개발을 하다 보면, 자바스크립트에서 객체를 다룰 때 단순한 변수 복사와 다르게 객체의 복사는 사용하는 방식에 따라 예상과 실제 로직의 값이 다르게 나오기도 한다. 이는 객체가 참조 타입으로 지정되기 때문이며, 원본과 복사본이 어떻게 연결되는지에 따라 동작이 달라진다.

특히, 얕은 복사와 깊은 복사의 차이를 이해하지 못하면 원본 객체가 의도치 않게 변경되는 문제가 발생할 수 있다. 이를 올바르게 활용하려면 먼저 원시 값과 객체 값이 메모리에 할당되는 방식을 이해한 뒤, 두 복사 방식의 차이와 사용해야 하는 상황을 명확히 알아야 한다.

그렇다면 자바스크립트에서 데이터가 어떻게 저장되고, 복사될 때 어떤 방식으로 동작하는지 알아보자.

자바스크립트의 데이터 타입

자바스크립트의 모든 값은 원시 타입(Number, String, Boolean, undefined, null, Symbol, BigInt) 또는 객체 타입(Array, Function, RegExp, Set, Map, ...)으로 구분된다. 원시타입에 속하는 값은 변경 불가능한 원시 값이며, 객체 타입에 속하는 값은 가변적이며 참조에 의한 전달 방식을 사용한다.

자바스크립트의 데이터 타입과 관련한 내용은 아래의 링크( )에서 확인할 수 있어 본 글에서는 위와 같이 짧게 정리하고자 한다.

https://oliviakim.tistory.com/193

원시 값 할당 방식

할당 방식

변수에 원시 값을 할당하면, 값 자체가 메모리에 저장된다.

예를 들어 fruit 변수에 '사과'라는 문자열을 할당하면, 메모리에 fruit이라는 키와 '사과'라는 값이 저장된다.

이후, fruit 변수에 '오렌지'를 재할당하면 기존 값을 변경하는 것이 아니라, '오렌지'를 저장할 새로운 메모리 공간이 할당된다.

이처럼 원시 타입 변수는 새로운 값을 할당할 때마다 새로운 메모리 공간을 사용한다. 또한 원시 값을 다른 변수에 할당하면, 값 자체가 복산된다. 즉, 원시 값을 복사한 변수는 원본가 독립적인 값을 가지며, 변경해도 원본에 영향을 주지 않는다.

이처럼 원시 값은 값에 의한 복사 방식으로 메모리에 할당된다.

예시

변수 a에 숫자 5를 할당하면, 메모리에 a라는 변수 공간이 생성되고 값 5가 저장된다.
변수 b에 a를 할당하면, a의 값이 복사되어 b에 저장된다. (b는 a와 독립적인 값 5를 가짐)
따라서 console.log를 실행하면, '초기값 a는 5, b는 5'가 출력된다.
이후, a를 10으로 값을 변경하면, a 변수에 새로운 값 10이 저장된다.
하지만 b는 여전히 초기값 5를 유지한다. b는 a의 값을 복사받았을 뿐, a와 연결되어 있지 않기 때문이다.
따라서 두번째 console.log에서는 'a값을 변경한 후의 값: a는 10, b는 5'가 출력된다.

이처럼 원시 값은 값에 의한 복사 방식으로 전달되므로, 변수 간 독립적인 값을 가지게 된다.

객체 값 할당 방식

할당 방식

반면 객체는 참조(reference) 값으로 저장되며, 변수에는 객체의 메모리 주소가 저장된다. 새로운 변수를 기존 객체에 할당하면 객체의 참조 값(메모리 주소)만 복사되므로 같은 객체를 가리키게 된다. 따라서, 한 변수를 통해 객체의 속성을 변경하면, 같은 객체를 참조하는 다른 변수도 영향을 받는다.

예시(1)

people 변수에 { name: 'jonh', age: 20 } 이라는 객체를 할당하면, 메모리에 people이라는 키와 객체의 값을 바라보는 메모리의 주소값이 저장된다.

이후 people 변수의 name에 'anna'를 재할당하면, name 키의 value값이 anna라는 원시 값의 주소를 바라보도록 수정된다.

이 때 name이라는 key의 value값만 바뀌었을 뿐, name을 감싸고 있는 people 변수의 값의 주소가 변하진 않았다. 즉, 객체 타입의 변수에 할당된 메모리는 동일하게 유지되면서, 해당 주소에 저장된 실제 데이터는 변경될 수 있다는 것이다.

예시(2)

또 다른 예시를 살펴보자. obj_a를 obj_b에 할당하면, 새로운 객체가 생성되는 것이 아니라 동일한 객체를 참조한다. 따라서 obj_a.name을 변경하면, obj_b.name도 함께 변경된다.

얕은 복사

예시 코드 및 개념

얕은 복사는 객체의 참조 값(메모리 주소)만 복사하는 방식이므로, 원본과 복사본이 동일한 객체를 참조하게 된다. 따라서 복사한 객체의 중첩된 속성을 변경하면 원본에도 영향을 미친다.

구현 방법

스프레드 연산자 ({ ...obj })

Object.assign() 메서드

깊은 복사

개념

깊은 복사는 원본 객체뿐만 아니라 내부의 중첩된 객체까지 새로운 메모리 공간을 할당해 복사하는 방식이다. 이로 인해 복사된 객체는 원본과 완전히 독립적으로 동작하며, 어느 한쪽을 수정해도 서로 영향을 주지 않는다.

구현 방법

Lodash의 _.cloneDeep() 메서드

structuredClone() (최신 브라우저만 지원)

이 외에도 재귀적으로 모든 하위 객체를 복사하여 직접 깊은 복사를 구현하거나, JSON.parse(JSON.stringify(obj))를 활용하는 방법도 있다. 단, JSON.parse(JSON.stringify(obj)) 방식은 function, Symbol, undefined, Date, RegExp 같은 데이터 타입을 올바르게 복사하지 못하는 한계가 있어 주의해야 한다.

장점

깊은 복사는 원본과 완전히 분리된 새로운 객체가 생성되므로, 수정해도 원본에 영향을 미치지 않는다. 또한 내부 객체까지 새로운 메모리 공간에 저장되므로, 참조 공유 문제가 발생하지 않는다. 이로 인해 깊은 복사를 사용할 경우 원본 데이터의 무결성을 보호하고 예기치 않은 부작용을 방지할 수 있다.

그렇다면 깊은 복사가 항상 최선의 방법일까? 모든 상황이 그렇지는 않다. 얕은 복사는 메모리 사용량이 적고 속도가 빠르기 때문에, 꼭 필요한 경우가 아니라면 성능 측면에서 더 효율적일 수 있다. 하지만, 중첩 객체까지 복사해야 하거나 원본이 객체라면 원본 데이터의 무결성을 지켜주기 위해 깊은 복사를 사용하는 것이 좋다. 이처럼 상황에 따라 얕은 복사와 깊은 복사 중 어떤 방식이 내 상황에 더 적절한지 판단하고 사용하는 것 또한 중요하다.

[JavaScript]　자바스크립트의 데이터 타입

Olivia Kim — Mon, 3 Mar 2025 00:00:33 +0900

자바스크립트는 동적 타이핑 언어로, 변수 선언 시 타입이 정해지지 않고 변수에 할당된 값(원시 값 또는 객체 값)에 의해 타입이 결정된다. 또한 자바스크립트는 약타입 언어이므로, 타입 에러 대신 암묵적 타입 변환이 발생하게 된다.

이러한 특성은 자바스크립트를 유연한 언어로 만들어 주지만, 동시에 예상치 못한 버그를 초래할 수도 있다. 예를 들어, null과 undefined의 차이를 정확히 알지 못하면 조건문에서 의도치 않은 결과를 얻을 수 있다. 또한 객체를 복사할 때 참조가 공유된다는 사실을 모른다면 한 곳에서의 변경이 예상치 못한 사이드 이펙트를 일으킬 수 있다.

따라서 자바스크립트의 데이터 타입을 제대로 이해하면 변수에 저장되는 값의 특성을 명확히 파악할 수 있어 불필요한 버그를 예방하고, 효율적인 디버깅이 가능해진다. 그렇다면 자바스크립트의 데이터 타입은 어떤 것들이 있을까?

데이터 타입

개요

자바스크립트는 동적 타이핑 언어로, 변수 선언 시 타입이 미리 결정되지 않고, 할당된 값에 따라 자동으로 타입이 결정된다. 따라서 같은 변수라도 다른 타입의 값을 가질 수 있으며, 재할당을 통해 언제든지 타입이 변경될 수 있다.

또한 약타입 언어이므로, 서로 다른 타입 간의 연산이 가능하며, 타입 에러 대신 암묵적 타입 변환이 발생한다.

이러한 특성 때문에 변수 자체는 타입을 가지지 않지만, 변수에 저장된 값은 각각 고유한 타입을 가진다.

데이터 타입의 구분

자바스크립트에서 모든 값은 데이터 타입을 가지며, 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분된다. 원시 타입에 속하는 값은 변경할 수 없는(immutable) 원시 값이며, 객체 타입에 속하는 값은 내부 상태를 변경할 수 있는 가변적(mutable) 객체값이다.

원시 타입에는 Number, String, Boolean, undefined, null, Symbol, BigInt가 포함되며, 이 중 null을 제외한 값들은 typeof 연산자로 타입을 확인할 수 있다. 다만 typeof null이 object를 반환하는 것은 자바스크립트 초기 설계상의 오류로 인해 발생한 예외적인 동작이다.

두 타입의 차이는 값의 저장방식과 불변성 여부에서 나타난다. 원시 값은 한 번 생성되면 변경할 수 없으며, 새로운 값을 만들 경우 기존 값은 그대로 유지된다. 반면 객체 값은 내부 상태를 변경할 수 있다. (따라서 객체 값을 복사할 때 얕은 복사와 깊은 복사의 개념을 고려해야 한다.)

	원시 타입	객체 타입
변경 가능 여부	변경 불가능한 값	변경 가능한 값
변수 할당 시	실제 값 저장	참조 값 저장
다른 변수에 할당 시	값에 의한 전달 (pass by value)	참조에 의한 전달 (pass by reference)

원시 타입

Number: 정수와 부동소수점을 모두 표현한다.
String: 문자열을 나타낸다.
Boolean: 논리적 참(true)와 거짓(false)을 나타낸다.
undefined: 값이 할당되지 않은 상태를 나타낸다.
null: 의도적으로 값이 없음을 나타낸다.
Symbol: ES6부터 도입된 유니크한 식별자 타입이다.
BigInt: ES2020부터 지원되며, 매우 큰 정수를 다루기 위한 타입이다.

객체 타입

Array, Function, Date, RegExp, Map, Set 등 다양한 내장 객체들을 포함한다.
객체는 키-값 형태로 데이터를 저장하며, 변수에 저장되는 값은 실제 객체가 아니라 참조(메모리 주소)이다.

데이터 할당 방식

원시 값의 할당

변수에 원시 값을 할당하면, 실제 값이 복사되어 저장된다.

객체 값의 할당

변수에 객체를 할당하면, 객체의 참조(메모리 주소)가 복사되어 저장된다. 엄밀히 말하면 자바스크립트는 모든 경우에 값에 의한 전달을 사용하지만, 객체의 경우 그 값이 참조이기 때문에 참조에 의한 전달처럼 동작한다.

자바스크립트의 데이터 타입은 단순한 개념이 아니라, 우리가 코드를 더 정확하고 안정적으로 작성할 수 있도록 돕는다. 변수에 저장된 값이 원시 값인지, 객체 값인지 구분하는 것만으로도 불필요한 버그를 줄이고, 예측 가능한 코드를 만들 수 있기 때문이다.

실무에서는 상태 관리, API 데이터 처리, 메모리 최적화 등에서 데이터 타입을 정확히 이해하고 활용하는 것이 중요하다. 특히, 객체를 다룰 때 불변성을 유지하는 방법, 얕은 복사와 깊은 복사 방식 등을 잘 알아두면 복잡한 상태 변화를 다룰 때 실수를 줄일 수 있다.

[방송통신대학교]　방통대 편입, 직장과 병행하며 졸업하는 방법 A to Z (ft. 수강신청, 과제물, 시험 방법)

Olivia Kim — Fri, 28 Feb 2025 15:36:35 +0900

5학년은 실존한다. (바로 나)

들어가기에 앞서:

이 글은 2025년 2월을 기준으로 작성되었습니다. 저는 웹 개발자로, 2022년도에 컴퓨터과학과 3학년에 편입해 내년 2월 졸업을 앞두고 있습니다. 평소 비전공 개발자분들께 방통대를 추천하는 편이고 이번 학기에도 지인 한분이 입학하게 되어 (벌써 4명째 추천 입학..) 학교 생활을 안내드리기 위해 이 글을 작성했습니다.

제게는 직장의 우선순위가 더 높기 때문에, 학교를 효율적으로 다니는데 중점을 두고 있고 글도 일정 관리, 과제물/시험 응시 방법에 중점을 두고 작성되었으니 참고 부탁드립니다. 이하 본문은 평소의 블로그 스타일대로 ~다. 체로 작성합니다.

학교 중요 스케줄 확인하기

✔️ 방송통신대학교(이하 방통대)의 대부분 일정은 온라인으로 진행되기 때문에 일정 관리를 도와줄 사람이 없다. 따라서 학사 일정을 직접 확인하고, 중요한 기한을 놓치지 않도록 신경 쓰는 것이 가장 중요하다.

✔️ 학교의 일정은 학교 홈페이지 > 학사안내 > 학사일정에서 확인할 수 있다. 매 학기마다 챙겨야 하는 중요 일정은 아래와 같다.

1. 수강신청 및 등록금 납부 날짜

✔️ 학교 홈페이지 학사 안내> 공지사항을 보면 더 자세한 일정을 확인할 수 있다. (참고로 방통대의 공지사항 게시판은 중요한 공지들이 모두 올라오기 때문에 수시로 들어가서 확인하는 것이 좋다.)

✔️ 수강신청 시 기본적으로 선택된 과목들이 내역에 있을 것이다. 하지만 해당 내역을 모두 취소하고 듣고 싶은 과목을 수강해도 된다.

✔️ 보통 수강신청 최초 시작일에는 자신이 포함된 학과의 강의만 신청 가능하고, 그다음 날 타과 강의까지 모두 열리는 편이다. 타과 과목도 자유롭게 신청 가능하다.

✔️ 등록금 제출 시 학비, 교재비, 학보대금 등이 기본적으로 체크되어 있다. 학비는 필수지만 나머지의 납부 여부는 자유이다. (학비만 납부하고 교재는 필요한 것만 따로 구매하는 편)

2. 강의를 들을 수 있는 기간

2025년 1학기 형성평가(동영상 강의 수강) 기

✔️ 위에 나와있는 '형성평가 기간'이 바로 강의를 들을 수 있는 기간이다.

✔️ 기간 내 수강신청한 강의를 모두 들어야 하며, 강의 수강 이력은 성적에 포함된다.

✔️ 강의 수강 이력은 수강 신청한 모든 과목을 합쳐 하루에 7개까지만 인정된다.

✔️ 온라인 강의이다보니 일반 대학교처럼 3/2에 개강하는 것이 아니라, 2주 정도 더 일찍 강의가 오픈된다.

3. 중간과제물 제출 기간

2025년 1학기 중간과제물 제출 기간

✔️ 학교 홈페이지 > 학사안내 > 공지사항을 보면 더 자세한 일정과 제출 방법 등을 확인할 수 있으니 공지사항도 같이 확인해야 한다.

✔️ 기간 내 제출하지 않으면 중간과제물 점수는 0점 처리되며, 과제물 마지막 날은 18시까지만 제출 가능하니 유의해야 한다.

4. 기말고사 신청 기간

2025년 1학기 기말고사 신청 기간

✔️ 기말고사 신청 기간은 학사 일정에 나오지 않는다! 학교 홈페이지 > 학사안내 > 공지사항에 '20XX 년 X학기 기말고사 운영 계획 안내' 글을 찾아보면 신청 기간, 신청 방법, 응시 기간에 대해 자세하게 나와있으니 꼭 확인해야 한다.

✔️ 기말고사는 고시된 응시 기간 내 본인이 소속된 지역대학에 가서 오프라인으로 시험을 응시하면 된다.

✔️ 2주간의 금, 토, 일요일 중 시험 날짜와 시험 시간 대는 학생이 고를 수 있다. 단, 각 지역대학별로 선착순이니 유의해야 한다. 늦게 신청하면 원하는 날짜가 다 차있을 수 있다. (날짜를 잘못 적어놔서 뒤늦게 신청해 겨우 자리가 있던 강원도에서 시험을 친 적도 있다. 절대 까먹지 마세요...)

✔️ 방통대는 수강 신청, 기말고사 신청날마다 서버가 터지거나 유명 공연 티켓팅을 능가하는 대기 시간에 걸리곤 했다. 올해는 사이트가 개편되면서 달라질 수도 있지만, 혹시나 대기가 길어진다면 할 일을 하면서 침착하게 기다리면 들어갈 수 있다.

5. 기말고사 기간

2025년 1학기 기말고사 기간: 6/6~6/8, 6/13~6/15

✔️ 5과목 이상일 경우 2개의 차수에 나눠서 볼 수 있고, 그 이하의 경우 한꺼번에 응시해야 한다.

✔️ 2차시로 나눌 경우 같은 날 시간대만 다르게 봐도 되고, 아예 날짜를 다르게 해서 접수해도 된다. (ex. 금요일 4차시에 2과목, 토요일 2차시에 3과목 응시)

✔️ 기말고사는 태블릿으로 객관식 문제를 푸는 방식이다. 학과나 과목에 따라 듣기평가가 있을 수 있다고 한다.

✔️ 공지된 입실 시간에 늦으면 해당 차수에 입실이 불가능하다.

성적 산정 방법

✔️ 100점 만점을 기준으로 점수에 따라 A~F가 부여된다.

강의 수강 진도: 20점 (전부 다 들으면 20점)
중간 성적: 30점 (중간과제물 또는 출석수업 점수)
기말 성적: 50점 (기말과제물 또는 기말고사 점수, 그래서 기말고사가 제일 중요하다.)

강의 듣는 법

✔️ 강의는 유노캠퍼스에서 들을 수 있으며, 강의 수강 인정 갯수는 하루에 최대 7개이다.

✔️ 강의 하단에 퀴즈가 있는데, 기말고사를 준비할 때 도움이 되므로 참고하면 좋다.

과목명을 클릭하면 위쪽에 강의자료, 과제/시험 버튼이 있다.

✔️ 강의자료나 기출문제를 확인하려면 강의 자료 탭을 클릭하면 나온다.

강의자료와 기말고사 기출문제

✔️ 참고로 시험 기출문제는 2019년까지만 공개되고 그 이후는 비공개로 변경되었다.

중간고사_출석수업 듣는 법

비대면 출석수업일 경우

✔️ 출석수업 일주일 전 구체적으로 몇 시 수업인지 확인할 수 있다.

✔️ ZOOM에 입장하면 이름을 이름_학번으로 변경해야 출석 시스템에 의해 출석이 자동 인정된다고 한다. (ex. 홍길동_202212345678)

✔️ 대체로 출석수업 마지막 즈음에 교수님이 출석수업 과제물 안내를 해주신다. 이걸 놓치거나 출석수업 과제물을 제출하지 않으면 출석수업 점수가 인정되지 않는다.

✔️ 즉, ZOOM 출석수업 참여 + 출석수업 과제물까지 제출해야 최종적으로 출석수업 점수가 산정된다.

✔️ 교수님이 출석수업 과제 URL을 주시면서 과제 가이드나 팁을 알려주시기 때문에 그 부분을 설명하실 때 집중해서 잘 들어야 한다.

✔️ 출석수업 과제물 제출 기한은 대체로 수업일로부터 1~2주이다.

✔️ 만약 출석수업에 참여하지 못했거나, 과제를 제출하지 못했다면 다른 지역대학의 다음 출석수업으로 얼른 바꿔서 다시 신청해야 한다. 이때 지역대학별로 수업 날짜, 수업 날짜 변경 기간이 다른데 수업 날짜 변경 가능 기간 내라면 언제든지 신청할 수 있다.

✔️ 모든 과제물은 제출 시 표지가 필수이며, 표지는 방통대에서 제공해 주는 양식이 있다.

✔️ 아래의 링크를 들어가 보면 첨부파일에 출석수업과제물 표지가 있는데, 적혀있는 대로 인적사항을 적고 그 아래에 가이드에 맞춰 과제를 작성하면 된다.

[참고] 출석수업 온라인 제출 방법 및 출석수업자료실 이용 안내

https://regional.knou.ac.kr/regional/2479/subview.do;jsessionid=2A12C3635966FE47DBDC79EA8B397184.545589fbf31b00261?enc=Zm5jdDF8QEB8JTJGYmJzJTJGcmVnaW9uYWwlMkYyMDYyJTJGNzMzOTg3JTJGYXJ0Y2xWaWV3LmRvJTNG

출석수업과제물 온라인 제출 방법 및 출석수업자료실 이용 안내

<div class="con-table" style="box-sizing: border-box; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; margin: 0px; padding: 0px; position: relative; line-height: 1.6; color: rgb(102, 102, 102); font-family: 'Noto Light'; font-size: 18px; font-

regional.knou.ac.kr

대면 출석수업일 경우

✔️ 대면 출석수업은 (아마 대부분) 주말에 해당 지역대학에서 오프라인으로 수업을 듣게 된다.

✔️ 대면 출석수업 또한 수업 후 간단한 과제물이 있다.

✔️ 대면 출석수업 참여가 어려울 경우 출석대체시험으로 대체할 수 있으며, 출석대체시험도 오프라인으로 지역대학에 가서 응시해야 한다.

✔️ 대면 출석수업은 작성자가 아직 들어본 적이 없어 더 아는 팁이 없다.. (올해 대면 과목이 있어서 들어보고 업데이트 예정)

중간고사_과제물 제출하는 법

마이페이지에서는 이 경로로 확인할 수 있다.

✔️ 중간과제물은 학기 시작 직전 미리 공지된다.

✔️ 마이페이지에서도 확인할 수 있고, 학교 홈페이지 > 학사안내 > 공지사항에도 안내된다.

✔️ 마찬가지로 표지를 같이 내야 하는데, 맥 사용자의 경우 한글이 없으면 한글 파일을 컨버터 사이트에서 docx로 변환해 작성하면 된다. (어차피 최종 제출은 pdf로 한다.)

과제물 하단에 교수님이 유의사항을 적어주시니 이를 지켜서 작성해야 한다.

✔️ 과제물의 경우 하단에 있는 유의사항을 꼭 지켜야 한다.

✔️ 제출 전 카피킬러에 들어가서 표절률을 검사하고 제출하는 게 좋다. 방통대 제휴가 되어 있어 무료로 이용 가능하다.

[참고] 2025학년도 1학기 중간과제물 시행 공고 (첨부파일에 중간과제물 서식 있음)

https://www.knou.ac.kr/knou/561/subview.do?enc=Zm5jdDF8QEB8JTJGYmJzJTJGa25vdSUyRjUxJTJGNzM5MDQzJTJGYXJ0Y2xWaWV3LmRvJTNG&epTicket=LOG

2025학년도 1학기 중간과제물 시행공고

고등교육의 기회 제공, 국민교육의 수준 향상, 사회교육의 확대 발전, 분야별 인재양성

www.knou.ac.kr

기말고사_기말고사 보는 법

✔️ 성적의 50% 지분을 차지하고 있는 기말고사는, 교재에 나와있는 문제, 교재 구매 시 포함된 워크북(워크북이 없는 과목도 있음), 2018년까지의 기출문제를 함께 보면서 준비하면 된다.

기말고사_과제물 제출하는 법

✔️ 중간과제물과 동일하다.

✔️ 참고로 컴퓨터과학과는 대부분의 과목들이 기말시험인데, 직장인이 5과목 시험을 모두 준비하는 건 쉽지 않다. 따라서 글 쓰는 게 너무 싫은 게 아니라면 타 학과 과목 중에서 기말 과제물이 있는 과목을 몇 개 섞어 들으면 기말고사 준비 부담이 좀 덜어진다.

방통대를 처음 시작할 때는 직장이랑 병행할 수 있을까 싶어 막막했지만, 중요한 일정과 학습 방법을 익힌 뒤에는 병행하는데 큰 어려움 없이 학업을 이어갈 수 있었다. (예상보다는 어렵지 않은 거지, 사실 일이랑 병행하는 게 엄청 쉽지는 않다.)

특히 기말고사 일정과 과제 제출 기한만 잘 챙겨서 제출한다면 직장과 병행하면서도 충분히 졸업할 수 있다. 이 글이 방통대를 다닐 분들께 작은 도움이 되었기를 바라며, 학교를 잘 졸업해서 좋은 성과를 얻어가셨으면 좋겠다.

[서평 | 리뷰]　「전문가를 위한 리액트」

Olivia Kim — Wed, 26 Feb 2025 00:00:56 +0900

한빛미디어 서평단 <나는 리뷰어다> 활동을 위해서 책을 협찬받아 작성된 서평입니다.

깊이 있는 개발 전문 서적 시리즈로 유명한 오라일리에서 리액트 관련 신간이 출판되었다는 소식을 듣고, 「전문가를 위한 리액트」를 신청했다. 더구나 2024년 12월 말 초판이 나온 신간으로, 최근 빠르게 변화하고 있는 리액트 최신 기술 동향을 잘 반영하고 있을 것이라는 기대감도 있었다. 이 글이 본 책이 어떤 내용으로 구성되어 있는지 궁금한 분들께 도움이 되길 바란다.

「전문가를 위한 리액트」의 목차는 다음과 같다.

입문 지식
JSX
가상 DOM
재조정
자주 묻는 질문과 유용한 패턴 (hooks, state, 최적화, 패턴 등)
리액트의 서버사이드
리액트의 동시성
프레임워크 (remix, next.js)
리액트 서버 컴포넌트
리액트의 대체제 (vue, angular, svelt 등)

목차를 보면 알 수 있듯이, 리액트의 기본 배경지식부터 시작해서 핵심 개념인 JSX, 가상 DOM, hooks, state, 그리고 심화 내용까지 체계적으로 다루고 있다. 책의 본문에는 예시 코드와 함께 필요한 부분에는 시각화 자료들이 함께 있어, 그 내용들을 쉽게 이해할 수 있도록 도와주었다.

이 책에서 특히나 흥미로웠던 점은 두 가지였다. 첫 번째, 리액트뿐만 아니라 리액트를 기반으로 한 next.js와 remix까지 함께 소개한다는 점이다. 넥스트에 대한 자료는 이제 쉽게 찾아볼 수 있지만, 리믹스는 국내에서 대중적으로 사용되지 않기 때문에 한국어 레퍼런스를 찾기가 상대적으로 어렵다. 그런데 이 책에서는 리믹스의 기본 구조와 간단한 사용법을 안내하여 새로운 기술을 한눈에 파악하고 실습해 볼 수 있게 해주는 점이 인상적이었다.

두 번째는, 초급이나 중급 수준을 넘어 리액트의 작동 원리를 심도 있게 탐구할 수 있도록 책이 구성되어있다는 것이다. 초반에 복습한 기본 지식을 바탕으로 중급 및 고급 내용까지 자연스럽게 연결되어, 리액트를 단순히 사용하는 방법을 넘어 내부 동작 원리까지 꼼꼼히 이해할 수 있도록 돕는다.

더불어 이 책은 개발 현장에서 자주 사용하게 되는 코드 최적화, 그리고 다양한 디자인 패턴들을 구체적인 예제와 함께 제시해 실무에도 적용해 볼 수 있도록 구성되어 있다. 또한 신간인 만큼 가장 최신의 내용을 반영하고 있어 이 내용이 최신 내용이 맞는지 비교 검증하며 읽지 않아도 되어서 좋았다. 이와 같은 이유들로 「전문가를 위한 리액트」는 기대한 만큼이나 만족스러웠다. 리액트를 처음 배우거나 프로젝트를 진행해보지 않은 초보자보다는, 초~중급 개발자에게 더 유용할 것 같다. 특히나 리액트의 내부 동작원리와 구조를 체계적으로 이해하고자 하는 분께 추천할만 하다.

[JavaScript]　자바스크립트의 동기, 비동기 프로그래밍의 개념

Olivia Kim — Mon, 24 Feb 2025 10:00:24 +0900

모던 프론트엔드 프레임워크인 리액트나, 뷰에서 대부분의 요청을 비동기로 진행해야 한다는 이야기를 자주 듣곤 한다. 그렇다면 왜? 굳이 비동기 프로그래밍을 해야 할까? 에 대한 궁금증이 생겼다.

따라서 비동기가 뭔지, 왜 비동기 프로그래밍을 하게 됐는지, 어떻게 하는지, 어떤 장점이 있는지를 흐름에 따라서 간단하게 정리해보고자 한다.

동기와 비동기

동기는 어떤 작업을 요청했을 때, 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식이다.

반면 비동기는 어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다리지 않고, 다른 작업을 먼저 수행하고 있다가 요청했던 작업이 종료되면 그에 대한 추가 작업을 진행하는 방식이다.

예시를 들어 설명해보자면 동기는 음식을 주문한 후 그 요리가 완료되어 내게 서빙될 때까지 기다리는 것이다. 나는 음식을 받을 것을 요청했기 때문에 주문한 음식이 준비될 때까지 다른 일은 할 수 없다. 순차적으로 처리되기 때문이다.

하지만 비동기는 음식을 받을 것을 주문한 후, 요리의 완료'만'을 기다리지 않아도 된다. 그동안 이메일을 보내거나 친구와 이야기를 하는 등 다른 작업을 처리할 수 있다. 작업이 독립적으로, 병렬적으로 처리되기 때문이다.

싱글 스레드

그렇다면 원래의 주제인 모던 프론트엔드에서 비동기 프로그래밍을 해야 하는 근본적인 원인은 무엇일까? 바로, 자바스크립트는 싱글 스레드(Single Thread) 언어이기 때문이다.

여기서 스레드는 CPU에서 실행되는 가장 작은 단위로, 프로세스 내에서 독립적으로 실행되는 작업 단위를 나타내는 말이기도 하다. 자바스크립트는 이러한 가장 작은 작업 단위가 하나뿐이다.

작업 단위, 즉 스레드가 하나뿐이면 한 번에 한 가지 일밖에 처리하지 못하기 때문에 비효율적이라는 생각이 들 수 있다. 하지만 오히려 이러한 싱글 스레드 접근 방식은 브라우저라는 용량이 제한된 공간 위에서 실행되어야 하는 자바스크립트를 간단하게 유지하고 스레드 관리에 따른 복잡성을 줄이는데 도움을 준다.

또한 순차적으로 한 번에 한 가지 일밖에 실행하지 못하는 단점을 극복하고 병렬로 작업을 처리하는 비동기 작업을 수행하기 위해서 이벤트 루프라는 것을 사용하는데, 이러한 이벤트 루프를 사용해 비동기 프로그래밍을 구현해 여러 작업을 효율적으로 다룰 수 있다.

이벤트 루프

이벤트 루프란 자바스크립트와 같은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나로, 코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.

즉, 순차적으로 실행할 수 밖에 없는 싱글 스레드의 단점을 극복하고 비동기 프로그래밍을 진행하기 위해 자바스크립트는 이벤트 루프를 사용하는데, 이러한 이벤트 루프는 결국 브라우저의 동작 타이밍을 제어하는 관리자의 역할을 맡는다고 볼 수 있다.

비동기 프로그래밍에서 해당 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트가 구동되는 브라우저, 또는 서버의 node.js가 담당하게 된다. 예를 들어 어떤 함수를 실행하는 것은 자바스크립트가 담당하지만, 함수의 스케줄링 등 그 작업들을 전담하여 처리하는 것은 브라우저나 node.js가 진행한다.

비동기 작업을 마치면 그 함수들이 우측 하단의 콜스택이라는 공간에 쌓여 대기하게 되는데, 이 비동기 함수들을 적절한 시점에 실행시키는 관리자가 바로 이벤트 루프이다. 그럼 적절한 시점인지, 어떤걸 먼저 실행할지 이벤트 루프는 무엇을 보고 판단하게 될까? 바로 마이크로 태스크 큐와, 태스크 큐이다.

마이크로 태스크 큐, 태스크 큐

이 두가지는 이벤트 루프와 관련된 개념으로, 비동기 작업을 처리하고 실행 스택에 추가되길 기다리는 작업을 보관하게 된다. 일반적으로 마이크로 태스크 큐에 있는 마이크로 태스크가 먼저 처리되고 그 후 태스크 큐의 작업 실행이 실행 스택에 추가되게 된다.

마이크로 태스크 큐는 비동기 작업 중 우선 순위가 높은 프로미스나 async/await 등의 작업이 마이크로 태스크 큐에 들어간다. 그 외 일반적인, 대부분의 비동기 작업은 태스크 큐에 보관되는데, setTimeout, setInterval, 이벤트 콜백 등이 있다.

싱글스레드와 이벤트 루프의 상관 관계

이렇게 비동기 작업의 중요도에 따라 보관 공간을 나누고, 어떻게 실행되는지를 위의 그림으로 살펴보자.

먼저 이벤트 루프는, 콜스택이 비어있는지 지속적으로 확인한다.
콜스택이 비어있으면 우선순위가 더 높은 마이크로 태스크 큐를 확인하고, 오래된 큐를 꺼내서 콜스택으로 전달한다.
이를 마이크로 태스크 큐가 텅 비어있을 때까지 수행한다.
마이크로 태스크가 처리된 직후, 렌더링 작업이 필요하면 렌더링이 일어난다.
그 후 태스크 큐를 확인한다.
이전과 마찬가지로 태스크 큐에서 가장 오래된 태스크를 하나 꺼내 콜스택에 전달하면서 이벤트 루프는 비동기 작업을 처리하게 된다.

즉 자바스크립트는 원래 싱글 스레드여서 순차적으로, 동기적으로 작동할 수 밖에 없는데 브라우저에서 제공하는 이벤트 루프를 활용해 비동기적으로 여러 작업을 수행할 수 있다.

비동기 프로그래밍의 구현

이렇게 비동기 프로그래밍을 구현하기 위해서는 코드를 구현하며 자주 사용했을 콜백 함수, 프로미스, async/await을 사용하면 된다. 각각의 내용은 따로 정리할 예정이기 때문에 본 글에서는 이러한 비동기 키워드/기능들을 사용한다 까지만 정리하려 한다.

모던 프론트엔드에서 비동기가 중요한 이유

그래서 이렇게 싱글 스레드의 단점을 극복하면서까지 비동기 프로그래밍을 해야 하는 이유는,

첫째, 비동기 작업 시 필요한 작업만 수행할 수 있어 자원을 효율적으로 사용할 수 있다.

둘째, 마찬가지로 필요한 데이터만 비동기적으로 로드해오면 페이지를 로딩하는 시간이 단축된다.

셋째, 비동기로 요청할 경우 promise를 사용하는데, 프로미스가 제공해주는 기능인 에러 핸들링을 통해 서버 요청 중 오류가 발생해도 애플리케이션을 계속 실행할 수 있다. 따라서 사용자에게 오류 메세지를 표시하거나 대안 작업을 제시할 수 있다.

넷째, 이렇게 부분적으로, 상대적으로 빠르게 로드해올 수 있는 비동기 작업은 웹 애플리케이션의 반응성을 향상시키기 때문에 사용자는 화면의 멈춤 없이 계속 상호작용할 수 있다. 따라서 사용자가 웹 애플리케이션을 더 부드럽게 사용할 수 있고 사용자 경험이 향상되므로, 병렬 처리인 비동기를 활용해 비동기 프로그래밍을 진행한다고 볼 수 있다.

결론적으로, 비동기 프로그래밍은 단순히 작업을 더 효율적으로 처리하는 것 이상의 의미를 지닌다. 싱글 스레드 환경에서 자바스크립트가 비동기 작업을 통해 여러 작업을 동시에 처리할 수 있도록 해줌으로써, 웹 애플리케이션의 성능과 사용자 경험을 크게 향상시킨다. 비동기 방식으로 자원을 효율적으로 활용하고, 빠르게 데이터를 로딩하며, 오류를 처리하는 과정에서 애플리케이션이 중단되지 않고 지속적으로 실행될 수 있게 도와준다.

따라서, 모던 프론트엔드 개발에서 비동기 프로그래밍은 필수적이며, 이를 잘 활용하면 더 빠르고 반응성이 뛰어난 애플리케이션을 구축할 수 있다. 다양한 비동기 처리 기법인 콜백 함수, 프로미스, async/await 등을 적절히 사용하여 복잡한 작업들을 효율적으로 관리하고, 사용자에게 더 나은 경험을 제공하는 데 중점을 두는 것이 중요하다!

[서평 | 리뷰]　「더 나은 웹개발을 위한 가이드」

Olivia Kim — Thu, 20 Feb 2025 15:29:18 +0900

웹 프론트엔드 개발자로서 단순히 개발하는 것에 그치지 않고 사용자 경험과 동료들과의 협업을 고려해 더 나은 코드를 작성하는 방법을 항상 고민하게 된다. 그러던 중 이 책을 알게 되었고,'라이프사이클부터 웹사이트 구축까지' 라는 문구가 표지에 있어 전반적인 내용을 포괄적으로 다룰 것 같아 꼭 읽어보고 싶었다.

「더 나은 웹개발을 위한 가이드」라는 이름처럼 이 책은 HTML, CSS, JavaScript, TypeScript 뿐만 아니라 최신 개발 경향, 다양한 디바이스별 개발 방법까지 폭넓은 주제를 다루고 있어 유익했다. 특정 기술에 깊게 집중하는 대신, 웹 개발의 흐름을 넓은 시각에서 이해할 수 있었다.

특히 요새 개인적으로 많이 사용하는 중인 CSS Grid에 대한 구체적이고 실용적인 설명이 포함되어 있었는데 이 부분이 인상 깊었다. 그리드는 복잡한 레이아웃을 쉽게 구현할 수 있는 강력한 기능을 제공하지만, 기존의 flexbox보다 익숙하지 않아 활용하는데 어려움을 느끼는 때가 있었다. 이 책에서는 그리드의 기본 개념을 설명하면서 예제 이미지를 첨부하여, 그리드가 시각적으로 어떻게 배치되는지 확인할 수 있어 이해하기가 쉬웠다.

또한, 웹에서 모바일 환경을 구현할 때 모바일 디바이스에서 실제 테스트를 하기 전까지는 자판이 어떻게 뜨는지, 화면이 어떻게 보일지 웹 개발자 도구만으로 감을 잡기 어렵다. 하지만 이 책에서는 유저의 휴대폰에서 숫자 전용 키패드를 출력하려면 input에 어떤 속성을 부여해야 하는지 등을 구체적으로 설명해 주었다. 이러한 세부적인 설정은 UX 개선에 직접적인 영향을 미치므로, 실무에서 바로 적용할 수 있어 실용적이었다!

최근 많은 관심을 받고 있는 GPT와 같은 최신 기술을 어떻게 웹 개발 프로세스에 활용할 수 있을지에 대한 내용도 포함되어 있어, 단순히 코드 작성이 아닌 AI 기술을 활용해 웹 개발 기술을 향상시키는 법에 대한 인사이트도 얻을 수 있었다. 이렇게 이 책은 단순히 기술적인 부분에만 집중하지 않고, 웹 개발의 기본 원리와 최신 개발 환경을 쉽게 이해할 수 있도록 구성되어 있다. 이론적인 설명과 함께 예제를 첨부하여 부담 없이 읽을 수 있으면서도 웹 개발에 대한 깊이 있는 이해를 돕는 책이었다.

이 책은 웹개발의 기초부터 최신 기술까지 폭넓게 배우고 싶은 주니어 개발자에게 추천한다. 기본적인 HTML, CSS, JavaScript부터 시작해 실무에서 자주 접하는 기술과 개념들을 전반적으로 익힐 수 있다. 또한, 단순한 기능 구현이 아닌 UX와 협업까지 고려한 웹 개발의 방향성을 고민하는 개발자에게도 유익한 가이드가 될 것이다.

한빛미디어의 후원을 통해 책을 제공받아 작성하였습니다.

[HTML / JavaScript]　canvas 태그로 화면에 그림 그리기

Olivia Kim — Tue, 18 Feb 2025 17:43:14 +0900

캔버스의 개념

HTML5에 새롭게 등장한 요소인 캔버스. 캔버스는 이름처럼 코드를 이용해 그림을 그릴 수 있는 공간을 제공한다.

코드에 단순히 <canvas>라는 태그만 작성하게 되면 화면에 무언가 나타나거나 하지는 않는다. 캔버스라는 영역 위에 자바스크립트를 이용해 하나하나 그림을 그려가야 원하는 결과물을 볼 수 있다.

이런 기능을 활용해 애니메이션, 데이터 시각화 등의 다양한 그래픽 작업에 사용된다.

캔버스의 장점

이러한 캔버스 태그를 사용해 그래픽 작업을 하게 되면, 아래와 같은 장점이 있다.

브라우저 안에서 직접 렌더링하기 때문에 그래픽 성능이 뛰어나다.
또, 요즘의 모던 브라우저는 캔버스 태그를 지원하기 때문에 파이어폭스, 크롬, 엣지 가리지 않고 호환성에 유리하다.
그리고 다양한 그래픽 요소를 사용해 복잡한 화면을 만들 수 있기 때문에 유연성이 높다.

캔버스 사용시 주의사항

캔버스는 그래픽만 다루기 때문에 텍스트 콘텐츠를 포함하지 않는다.

예를 들어서, HTML의 이미지 태그 같은 경우는 alt 속성을 이용해서 해당 이미지가 로딩되지 않았을 때 이 이미지가 어떤 이미지인지 구체적인 대체 텍스트를 덧붙일 수 있다.

시각적으로 화면을 보기 어려운 유저들은 스크린 리더를 사용해 화면에 어떤 버튼이 있는지 귀로 들으며 브라우저를 이용할 수 있는데, 이러한 대체적 요소를 고려하는 것을 접근성이라고 한다.

이미지의 alt 속성 같은 경우, 화면을 보지 못하는 유저들은 alt 속성에 적어둔 글을 이용해 '아, 여기에는 웃고 있는 고양이 사진이 있구나.' 라는 것을 인지할 수 있다.

하지만 캔버스는 접근성을 고려할 수 있는 자체적인 요소가 없기 때문에, 개발자가 적절하게 대체 텍스트를 제공하거나 추가적인 접근성 기술을 사용해야 한다.

캔버스의 실제 사용 예시

현대자동차 캐스퍼 웹 플렛폼을 보면, [내 차 만들기] 페이지의 컨피규레이터에서 캔버스 요소가 사용되었다.

캔버스라는 공간 위해서 자바스크립트 코드로 자동차를 3D로 보여주고 있는데, 마우스를 이용해 상호작용하며 입체적인 요소를 느낄 수 있도록 구현되어있다.

이것을 코드로 구현하기 위해서는 현재 마우스 시각에서 바라보는 카메라 시점, 그리고 해당 차량의 위치 등을 수학적으로 계산해서 그려낸다고 한다.

캔버스의 기본 개념 정리

캔버스의 개념을 다시 정리해보자면 아래와 같다.

캔버스 태그는, 웹 페이지에 그래픽을 그릴 수 있는 강력한 도구이다.
자바스크립트와 결합해서 다양한 시각적 효과를 제공하고, 웹 애플리케이션의 대화형 요소를 강화하는데 유용하게 사용할 수 있다.

[참고] 웹 애플리케이션의 대화형 요소

보드게임 텔레스트레이션과 넷마블의 캐치마인드를 섞은 게임을 웹으로 구현한 갈틱폰이라는 웹사이트에서 대화형 요소라는 의미를 확인할 수 있다. 화면을 보면 그림판처럼 그림을 그릴 수 있는 부분이 있는데, 이 그림을 그리는 부분도 캔버스가 사용되었다.

마우스를 움직이는대로 사용자가 그림을 그릴 수 있는 부분뿐만 아니라 색상을 사용자가 선택해서 다양한 그림을 그릴 수 있도록 제공하는데, 이렇게 사용자와 상호작용할 수 있는 것들을 대화형 요소라고 한다.

또한 이런 드로잉앱뿐만 아니라 간단한 게임, 차트 등도 대화형 요소라고 할 수 있다. 캔버스가 그래픽 공간을 제공하기 때문에, 더 풍부한 대화형 요소를 만들어갈 수 있다.

캔버스의 사용 방법 및 예시

캔버스로 그림을 그려보자(1)

[니떡국 내떡국]이라는 프로젝트를 할 때 디자이너님이 위와 같이 룰렛을 그려주셨고, 캔버스를 이용해 직접 그림을 그릴 수 있다는 사실을 알고 나서 아래와 같이 코드를 구현했다.

// * 룰렛 회전 함수
  const rotate = () => {
    const image = imageRef.current
    if (!image) return

    setDisabled(true) // 버튼 1회만 클릭 가능하도록 state 설정

    image.style.transition = 'initial'
    image.style.transform = 'initial'

    const TOTAL_ROTATION_TIME = 3000 // 룰렛 회전에 소요되는 시간
    const totalDegrees = 3600 // 총 회전할 각도
    const { randomGarnish, randomIdx } = getRandomGarnish()

    if (randomGarnish === 'none') {
      toast({
        description:
          '랜덤 고명 선택 중 오류가 발생했습니다. 팝업 종료 후 룰렛을 다시 클릭해주세요.',
      })
    }

    // OptionGarnishes 배열의 weight을 기반으로 부채꼴(arcurate) 각도 계산
    const arc = optionGarnishes.map((item) => (item.weight / 100) * 360)

    // 랜덤 선택된 고명까지 회전시킬 각도 계산
    let rotationAngle = 0
    for (let i = 0; i <= randomIdx; i++) {
      rotationAngle += arc[i] // 0번째 인덱스부터 randomIdx까지 해당 각도값 누적
    }
    rotationAngle += 83 // 룰렛 보정 각도

    image.style.transition = `transform ${TOTAL_ROTATION_TIME}ms ease-out`
    image.style.transform = `rotate(-${totalDegrees + rotationAngle}deg)`

    // 회전 후 랜덤 선택된 고명 설정
    setTimeout(() => {
      setRouletteResult(randomGarnish)
    }, TOTAL_ROTATION_TIME)
  }

하지만 캔버스로 그림을 그리게 될 경우 테두리가 선명하지 않고 마치 그림판으로 그릴 때처럼 선이 뚝뚝 끊어져 있는걸 확인할 수 있었다. 그 이유는 캔버스는 위에 다른걸 결합해서 3D 그래픽을 만들 수는 있지만, 기본적으로 2D 그래픽만을 지원하기 때문에 매끄러운 3D를 구현할 수가 없었다.

이러한 UI적 단점 때문에 직접 구현한 코드는 접고 디자이너님과 상의 후 이미지를 통으로 돌려버리는 방식을 선택했었다.

캔버스로 그림을 그려보자(2)

다음은 회사 홈페이지에 있던 로봇 이미지를 캔버스 위에 그려보려고 했다. 이건 이미지상 표현할게 많아서 GPT에게 로봇 이미지를 건네주고, 캔버스 요소 위에 자바스크립트를 이용해 똑같은 그림을 그릴 수 있는 코드를 요청했다.

그 코드를 실행하면 과연 로봇과 얼마나 똑같은 모습이 완성될까?

결과물은 위와 같았다. 처음에 코드를 실행해보고 웃음이 났는데.. GPT가 똑똑해졌다더니 결과물이 왜 이럴까?

이유는 첫째, 이미지 자체에 블러효과가 들어가 있어서 이미지가 선명하지 않았다. 둘째, 가장 핵심적인 이유로 이전의 룰렛 그림이 매끄럽지 않았던 것과 같이, 캔버스 자체는 2D만 그릴 수 있기 때문에 GPT는 나름 최선을 다해서 2D로 로봇을 그려준 것이다.

자세히 보면 이미지와 얼굴, 팔, 다리의 위치가 비슷하고 나름 음영을 주려고 회색의 진함 정도가 다른 것을 알 수 있다. 3D 이미지를 그릴 수 없으니 어쩔 수 없던 것이다.

그렇다면 어떻게 해야 캔버스로 3D를 표현할 수 있을까?

[1년차 회고]　무언가를 찾아 떠나는 여정은 항상 초심자의 행운으로 시작해서 잔인한 시험으로 끝난다

Olivia Kim — Sun, 27 Oct 2024 23:59:59 +0900

지금이 그때인 것 같다. 초심자의 행운 이후 잔인한 시험에 든 시간이. 부트캠프 수료 후 취업 했을 땐 개발을 모르던 내가 여기까지 해냈다는 성취감이 컸다. 하지만 만 1년 차가 된 지금은 내가 잘하고 있는 건지, 또 잘하는 개발자들에 비해 내가 너무 모자란 건 아닌지 많은 생각이 든다. 요새 마음을 다잡으려 제일 좋아하는 책인 「연금술사」를 다시 읽고 있는데, '무언가를 찾아 떠나는 여정은 항상 초심자의 행운으로 시작해서 잔인한 시험으로 끝난다.'라는 문장이 지금 내 상황과 너무 잘 맞는다고 생각했다. 그럼 난 이 시험을 어떻게 이겨낼 수 있을까. 그간의 나를 돌아보고, 앞으로의 여정을 다잡기 위해 회고글을 작성해 본다.

회사에서의 나는?

잘한 점

1. 뷰에 대해 알게 되었다.

리액트만 알고 뷰는 하나도 몰랐지만, 같은 자바스크립트니까 할 수 있겠지 라는 자신감으로 시작했다. jsx 파일 내에 html과 js의 구분이 상대적으로 명확하지 않은 리액트에 비해 뷰는 html, script, style 구획이 확고하게 나뉘어 있어 신기했다. '반응성'이라는 개념을 사용해 데이터를 제어하고, 생명주기를 직접적인 메서드로 사용하는 부분이 생소해 입사 후 두 달 동안은 뷰 책과 회사 코드를 반복해서 돌려봤다. 이제는 폴더 구조도 파악했고, 뷰와 넉스트의 생명주기를 이용해 한 화면의 코드를 확실하게 제어할 수 있게 되었다.

2. 적극적으로 업무에 임했다.

유지보수에 추가 개발건이 계속 있는 업무라 단순히 기능뿐만 아니라 기존 코드에 더 효율적으로 병합할 수 있는 방법을 고민했다. 기존 구조를 많이 수정해야 하더라도 더 효율적인 코드를 작성할 수 있다면 따로 시간을 내서 작업하곤 했다. 회사 코드를 수정하는 건 예상치 못한 사이드 이펙트가 있을까 항상 떨리기 때문에 규모가 큰 리팩토링은 두, 세 번씩 테스트를 하고 팀장님께 자문을 구한 뒤 코드를 올렸다.

3. 프로젝트 과업을 열심히 수행했고, 좋은 평가를 받았다.

봄부터 가을의 초입까지 프로젝트가 진행되었다. 기존 모델에 새로운 모델을 추가하는 프로젝트였는데, 정말 열심히 했고 감사하게도 좋은 평가를 받았다. 기억나는 일들은 아래와 같다.

사내에 시작부터 결제까지 유저 흐름이 어떻게 진행되는지의 가이드가 따로 없다. 그래서 일감 티켓의 요구사항이 흐름을 파악할 수 있는 부분적인 이정표가 되곤 했는데, 일정 부분만 작업하고 끝나는 형식이라 흐름 파악에 아쉬운 부분이 있었다. 하지만 모델 구축 프로젝트를 하며 진입부터 결제 이후까지의 전반적인 프로세스와 코드 흐름을 파악할 수 있어 업무 이해도를 훌쩍 높일 수 있었다.

또한 index.js를 만들어 한줄씩 별도 선언되던 import 코드를 정리하거나, API가 여러 번 호출되는 원인을 파악해 수정하거나, 데이터 내용만 다른데 A 파일, B 파일 두 개로 만들어져 있던 중복 파일을 하나로 병합해 분기처리 하는 작업을 같이 진행했다. 어느 날 팀장님이 지나가 듯이 잘했다고 해주셨는데 그날 기뻐서 집 가서 곱씹으면서 잠들었다.

프로젝트 막바지에는 아쉽게도 팀원 한 분이 퇴사하셨다. 좋아하던 분인데 인사도 잘 못하고 헤어져서 너무 아쉬웠고.. 잔여 일감에 비해 일정이 촉박했던 상황이라 빠른 대책이 필요했다. 팀장님이 바쁘셔서 내가 퇴사한 팀원분의 일감과 진행도를 찾아 정리했고, 다른분들께 리스트를 공유하고 같이 업무를 나눴다. 전체 흐름과 데드라인을 파악하고 일하는 걸 선호하기 때문에 진행 상황을 항상 정리해 두었는데, 이 이후에도 팀원분들이 일감을 어떻게 분배할지 내게 여쭤보는 일이 종종 있었다. 팀원분들에 비해 연차가 낮았기 때문에 그때마다 '내가 이걸 해도 되는 게 맞나?'라는 의문이 들곤 했다. 그 이후 이사님과 면담할 일이 있었는데, 업무뿐만 아니라 커뮤니케이션도 다른 분들께 좋은 평가를 받았다고 전달해 주셨다. 고민했었던 '내가 이걸 해도 되는 게 맞나?'의 부분도 할 수 있는 사람이 하는 거라며 연차에 너무 신경 쓰지 말라고 해주셨다. (이건 다른 회사에 비해 우리 회사가 유독 나이대도 비슷하고 친하게 지내서 해당되는 부분도 있는 것 같다.)

매일 야근하는건 체력적으로 힘들었지만 동료분들과 오류도 같이 보고, 힘들 때 서로 이야기 들어주고, 맛있는 건 나눠먹으면서 더 끈끈해지는 시간이었다. 정말.. 힘들고 즐거웠다.

아쉬운 점

1. 리액트와 뷰 중 어느 하나에 집중하지 못했다.

입사 초반에는 뷰 기본기를 다졌지만, 그 이후에는 둘 중 어느걸 메인으로 할지 쉽게 정하지 못했다. 조언을 구해봐도 '리액트 풀이 더 크니 뷰는 회사에서만 하고 집에서는 리액트를 해라!'라는 의견과, '회사 업무가 더 중요하니 뷰를 하고 리액트는 하지 마라!' 는 의견이 갈려서 어려웠다. 뷰를 정말 좋아했으면 당연히 뷰를 했을 것 같은데 개인적인 선호도 리액트가 더 커서 더 고민이 됐다. 이건 이제야 마음을 정했다. 회사에서는 뷰2를 사용하는데, 프로젝트가 아닌 유지보수의 업무 난이도라면 뷰를 깊게 파는게 엄청난 도움이 될 것 같지는 않다. 뷰3로 마이그레이션 예정도 없어서 업무시간에는 뷰를 하고 업무 외 시간에는 리액트를 하는 게 나을 것 같다.

2. 바빠서 복습하지 못한 개념들이 많다.

업무 도중 알게된 것들, 공부한 것들은 업무 다이어리에 써두곤 하는데 그 내용을 다시 복습하는 시간이 많지 않았다. 다행히 업무 일지도 작성하고 간단한 트러블슈팅은 기록해 놔서 보고 정리만 하면 되지만 복습을 하지 않으니 뭘 했는지, 그래서 구체적으로 어떻게 했는지에 대한 기억이 명확하지가 않다. 공부한 내용을 내 것으로 만들려면 꼭 필요한 시간이기 때문에 이 부분은 꼭 개선해보려 한다.

3. 코드 리뷰를 더 받지 못했다.

회사에 코드리뷰 문화가 없어 팀장님께 개인적으로 요청을 드려야 코드리뷰를 받을 수 있다. 프론트엔드팀 팀장님은 업무가 많으셔서 백엔드 팀장님께 요청드려 코드 리뷰를 받았었는데, 팀장님이 생각하는 좋은 코드는 뭔지, 또 내 코드에서 구체적으로 어떻게 리팩토링할 수 있는지 짚어주셔서 많이 배울 수 있었다. 그 뒤로는 코드 리뷰를 더 받지 못했는데 백엔드 팀장님 퇴사 전 한가하실 때 몇 번 더 요청드려서 리뷰를 더 받아볼걸 하는 아쉬움이 크다. 아직은 내 코드가 객관적으로 어떤지 파악이 어려울 때가 있어 타인의 평가가 궁금하기 때문이다. 지금 나는 파견을 나와있어 아직 해보지 못했지만.. 얼마 전 코드 리뷰 후 PR 승인이 도입되었다 해서 복귀하면 코드리뷰를 받을 수 있을 것 같아 기대된다.

개인으로서의 나는?

잘한 점

1. 감정과 상황을 분석하는 습관을 가지게 됐다.

내가 왜 이런 감정일까? 라는 생각이 들 때 원인과 대책을 분석하는 습관을 가지게 됐다. 개인적으로 힘든 일이 있었을 때도 이 일이 닥쳐서 내가 왜 힘든지, 어떻게 극복할 수 있는지, 앞으로는 어떤 태도를 가질지 글로 써서 정리하는 시간을 가졌다. 이 외에도 꾸준한 다이어리 작성이 드디어 습관이 되어 어떤 걸 해야 하고, 어디까지 했는지 계속 체크하고 있다. 일의 우선순위를 정하는데 큰 도움이 되고 있고 힘들더라도 감정에 매몰되지 않고 금방 극복할 수 있게 되었다.

2. 꾸준히 공부를 했다.

부트캠프 동기들과 함께한 '니떡국 내떡국' 프로젝트, 사내 프론트엔드 팀원끼리 자바스크립트 개념을 공부하는 '자스몽' 스터디, 외부 인원들과 모던 자바스크립트 딥다이브 핵심 파트를 함께 공부하는 'VLC' 스터디까지 1년 간 꾸준히 공부했다. 니떡내떡은 Next.js 스터디 목적으로 시작했다가 디스콰이엇 주간 프로덕트 1위라는 성과를 올렸고, 자스몽과 VLC를 통해 자바스크립트 코어 개념을 복습하는 시간을 꾸준히 가질 수 있었다. 또한 전 날 공부했던 내용을 코드에서 발견하면 의식적으로 다시 사용해 보며 복습도 할 수 있어 기뻤다!

3. 놀기도 열심히 놀았다.

코로나 이후로 오랜만에 해외여행을 다녀왔다. 부트캠프 시작 전 혼자만의 시간을 위해 다녀왔던 태국을 친구들과 함께 했고, 코로나 직전 갔었던 말레이시아는 가족들과 다시 다녀왔다. 부트캠프 동기들과 두 번째 한라산도 다녀왔고, 파주, 가평, 제주도... 주말에도 엄청 돌아다녔다. 내가 뭐든 가장 중요하게 생각하는건 스스로 성취감을 느끼는가인데, 이를 통해 만족감도 느끼고 스트레스를 해소할 수 있기 때문이다. 주기적인 여행이 내게 도움이 되는 이유도 낯선 곳을 탐험하고 돌아오는 과정에서 큰 성취감을 느낄 수 있어서다. 새로운 곳을 찾아가고, 골목을 구경하는 시간들이 내겐 정말 소중한 시간이다. 코로나 이후에 공부 및 취준 상태라서 선뜻 움직이기 어려웠는데, 간만에 열심히 돌아다녀서 숨통이 트였다.

아쉬운 점

1. 정처기 필기가 만료됐다.

올해 실기를 응시하려다 프로젝트 때문에 미뤄뒀더니 필기 만료일과 실기 접수일이 딱 3일 모자랐다.. 프로젝트 시작 전인 1회 차 때 공부해서 딸걸 아쉬움이 남는다. 정처기는 개정되면서 실무와 연관되는 개념도 많아졌고 이 일을 할 요건이 된다는 하나의 증빙으로도 쓸 수 있기 때문에 꼭 따고 싶은 자격증이다. 1월부터는 미리 준비해서 1회 차 동차 합격을 노려보려 한다.

2. 지금 기가 죽었다.

지금이 잔인한 시험같다고 느끼게 된 가장 큰 원인이다. 개발자 동아리 면접을 보러 갔을 때 다른 분들이 모두 네카라쿠배당토 혹은 그에 준하는 회사의 개발자분들이셨다. 면접을 볼 때도 기술적으로 어떤 시간을 겪었는지 깊게 말씀하셨는데, 그에 비해 내가 뱉을 수 있는 말은 너무 얕고 초라하게 느껴졌다. 회사 이름이 그 사람의 모든 걸 설명해주진 않지만 그 정도의 기본기가 있겠구나 하는 증빙이 되기도 한다. 면접 후 스스로가 우물 안 개구리처럼 느껴져 부끄러웠고 '나는 아직 멀었다. 다음 스텝으로 가려면 어떻게 해야 하지?'에 대한 고민에 빠져 마음이 좋지 않았다. 요새 다양한 분들과 얘기를 나눠보고 있는데, 취직이 가능한 정도의 개발자에서 벗어나 깊이 있는 개발자가 되어야겠다는 목표를 가졌다. '미래의 나를 지금의 내가 단정하지 말라.'는 말처럼, 할 수 있다의 마음으로 다음 스텝으로 가는 구체적인 방법을 찾아가는 중이다.

3. 잠을 더 자야 한다.

이건 정말 어려운 과제다. 작년에 부트캠프를 수료하며 하루에 3시간씩 자던게 습관이 됐는지 입사 후에도 야근하랴, 퇴근 후에 공부하랴 잠을 많이 자지 못했다. 1년 넘게 그런 생활을 하니 건강에 데미지를 끼쳤는지 맞아본 적 없는 수액도 맞고 감기도 몇 번 걸렸다. 잠이 부족해서 업무에 지장이 있진 않았지만 점점 짙어지는 다크서클을 보면 잠을 좀 충분히 자야겠다는 생각이 든다. 더군다나 이 일을 오래 하려면 당연히 그래야겠지. 일어나는 건 할 수 있으니 꼭 한시에는 자는 습관을 들여보려 한다. 건강 잘 챙기자.

앞으로 어떻게 해야 할까?

1. 리액트를 더 공부하고 싶다.

현재 짧게 파견나와있는 프로젝트는 리액트를 사용하는데, 다양한 최적화 코드를 보며 내가 시간에 맞춰 개발은 끝냈지만 최적화 훅들은 많이 적용하지 못했었구나 되짚어 보게 됐다. 그리고 리액트도 18, 19 버전이 나오는데 회사에서는 리액트를 쓰지 않으니 점점 까먹는 것 같아 아쉽다. 자유도도 높고 뷰보다 더 다양한 코드를 작성할 수 있는 리액트를 더 선호하기 때문에 본사에 돌아가면 리액트에 집중해서 공부를 해보려 한다. 리액트가 풀이나 커뮤니티도 크니 내 커리어에도 더 도움이 될 거라 생각한다.

2. 너무 많은 목표를 세우지 말자.

지금까지의 나는 구체적으로 뭘 해야 할지 감을 잡지 못하겠어서 일단 할 수 있는 대로 무조건 다 했다. 그러다보니 해야 할 일이 많았고, 그 일을 하기 위해 잠을 줄였고, 얕고 넓게는 공부했지만 깊이 있는 공부는 하지 못했다. 이제는 방향성을 확실히 정하고 그에 맞춰 깊이 있는 성과를 내고 싶다. 재미있어 보이는 게 있더라도 좀 생각해 보고 도전하자.

3. 블로그 글을 꾸준히 작성하려 한다.

이를 위해 개발자 글쓰기 동아리인 글또 마지막 기수에도 참가했다. '어려운 걸 쉽게 설명해 주는' 개발자를 목표로 하기도 하고 나중에는 드림코딩 엘리님처럼 강의로 내 지식을 나누고 싶은 마음도 있기 때문에, 아는 걸 정리해서 블로그 글을 발행하는 건 큰 경험이 될 것이다. 단순히 마감을 위해서 글을 쓴다기보다 내 꿈을 위해서 차근차근 쌓아간다는 생각으로 글을 썼으면 좋겠다. 또 이제는 단순 정보나 트러블슈팅보다는 깊이 있는 탐구를 하고 싶고, 티스토리 테마를 바꾸거나 자체 블로그를 만들어 디자인 적으로도 더 신경쓰고 싶다.

1년 차가 되자마자 찾아오는 이 고뇌의 시간이 잔인한 시험이라면, 좌절하지 않고 어떻게든 잘 풀어내고 싶다. 이 글의 제목이 나와있는 책인 「연금술사」 에는 이런 문장도 나온다. '하지만, 삶의 비밀은 일곱 번 넘어지고 여덟 번 일어서는 것이다.' 1년동안 열심히 한다고 했는데 아직 이것밖에 안 됐구나, 하는 고민에 요즘 힘들지만 다시 일어나서 앞으로 나가면 2년 차의 나는 또 어떤 모습이 될지 아무도 모르는 거다. 잘 일어나서 내년의 내가 이 글을 봤을 때 그땐 그랬지, 그리고 나 열심히 했구나 하는 마음을 가질 수 있기를.

산티아고는 어디든 갈 수 있는 바람의 자유가 부러웠다.
그러다 문득 깨달았다.
자신 역시 그럴 수 있으리라는 사실을.
떠나지 못하게 그를 막는 것은 아무것도 없었다.
그 자신 말고는.

/ 「연금술사」 중에서

[서평 | 리뷰]　「컴퓨터 구조와 운영체제 핵심 노트」

Olivia Kim — Tue, 8 Oct 2024 21:29:08 +0900

브라우저 기반의 개발을 하는 프론트엔드 개발자더라도, 개발을 하다보면 결국 CS를 공부해야 한다고 느끼게 된다. 프로그래밍 언어는 결국 컴퓨터를 기반으로 하기 때문이다. 어떻게 공부하면 좋을까 고민을 하던 찰나, 컴퓨터 구조와 운영체제 기초를 다질 수 있는 이 책을 알게 되었다.

컴퓨터 구조와 운영체제 핵심 노트는 컴퓨터 구조를 왜 알아야 하는지부터 차근차근 시작해서 운영체제와 알고리즘까지 전반적인 개념을 폭넓게 배워볼 수 있는 목차로 구성되어 있다.

기본기를 다지는 책답게 단순히 글자로만 설명되어있는게 아니라, 그림이나 도표를 이용해 설명해주는 부분도 좋았다. 특히나 알고리즘은 그 순서가 어떻게 되는지 직접 써보면서 이해하곤 했는데 책에 이미 깔끔하게 정리가 되어있어 그 흐름대로 짚고 넘어갈 수 있었다.

이론과 함께 핵심 내용 요약, 확인 문제도 포함되어있다. 따라서 배운 내용을 정리하고 적용할 수 있고, 실제로 문제를 풀어보면서 이해도를 더 높일 수 있었다. 이렇게 컴퓨터 구조와 운영체제 핵심 노트는 CS의 기초를 다지고 싶은 분들에게 추천하는 책이다. 특히 프론트엔드 공부를 하는 개발자도 기본적인 CS를 폭넓게 익힐 수 있어 많은 도움이 될 것 같다.

서평을 위해 길벗으로부터 책을 제공받아 작성하였습니다.

[JavaScript]　객체 내부에서의 getter, setter

Olivia Kim — Mon, 19 Aug 2024 10:00:43 +0900

업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다.

객체의 getter, setter

const person = {
    firstName: 'Olivia',
    lastName: 'Kim',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

console.log(person.fullName); // Olivia Kim

person.fullName = 'Alex Park';
console.log(person.firstName); // Alex
console.log(person.lastName); // Park

객체 내부에 get과 set을 위의 예시 코드와 같이 설정해두면, 해당 key를 get하는지, set하는지에 따라 내부에 설정된 getter와 setter가 자동으로 실행된다. fullName을 호출하면(get) get으로 return해둔 설정 값이 나오고, fullName의 값을 설정하면(set) set으로 설정해둔 로직이 이행된다.

정리해보면 아래와 같다.

목적

객체의 프로퍼티에 대한 접근과 할당을 제어하기 위해 사용한다.

사용 시점

특정 프로퍼티에 접근하거나(get), 값을 설정할 때(set) 자동으로 호출된다.

장점

1. 캡슐화
　 내부 데이터의 접근을 제어해 무결성을 유지할 수 있다.　ex. 데이터 검증, 포맷 변경 등

2. 자동 호출
　 프로퍼티에 직접 접근하는 것처럼 보이지만, 실제로는 로직을 실행해 값을 변환하거나 설정한다.

3. 인터페이스의 일관성 유지
　 객체 외부에서는 일반 프로퍼티처럼 보이기 때문에 사용자가 내부 구현을 알 필요가 없다.

[비교] 프로퍼티를 함수로 만들기

const person = {
    firstName: 'Olivia',
    lastName: 'Kim',
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(person.fullName()); // Olivia Kim

객체에서 return하는 값을 만들 때는 getter가 아닌 프로퍼티로 함수를 만드는 방법이 더 일반적이다. 위와 같이 객체의 프로퍼티로 함수를 설정하면 getter를 설정했을 때와 같이 fullName값을 얻을 수 있다.

목적

특정 동작이나 기능을 수행하기 위한 함수를 정의한다.

사용 시점

일반 함수처럼 명시적으로 호출된다. (사용하려면 반드시 호출이 필요하다.)

장점

1. 명확한 호출
　 함수를 명시적으로 호출해 동작을 실행한다.

2. 매개변수 사용
　 필요에 따라 매개변수를 전달해 다양한 동작을 수행할 수 있다. (getter는 불가능한다.)

getter/setter와 함수인 프로퍼티의 차이

getter/setter는 프로퍼티 접근 또는 설정 시점에 자동으로 호출되는 반면, 일반 함수는 명시적으로 호출해야 한다.
getter/setter는 데이터의 캡슐화와 데이터 무결성 유지에 유리하며, 프로퍼티처럼 사용되기 때문에 인터페이스가 일관적이다.
일반 함수는 함수 호출 시점과 방식이 명확하며, 매개변수를 받을 수 있다.

정리

getter/setter는 객체의 특정 프로퍼티에 대한 접근과 설정을 보다 안전하고 효율적으로 관리하기 위해 사용된다.
반면 함수는 특정 기능을 수행하기 위한 용도로 사용된다.
따라서 장점과 사용 목적이 다르므로, 상황에 따라 적절한 방식을 선택하여 사용하는 것이 좋다.

[JavaScript]　객체의 속성에 접근하는 점 표기법(마침표 표기법)과 대괄호 표기법 (ft. 좋은 코드)

Olivia Kim — Thu, 15 Aug 2024 23:03:43 +0900

객체의 프로퍼티에 접근하는 두 가지 방법

객체의 프로퍼티(key-value)에 접근할 수 있는 방법으로는 점 표기법(마침표 표기법)과 대괄호 표기법 두 가지 방법이 있다.

const name = {
	firstName: 'olivia',
	lastName: 'kim'
}

위와 같은 name 객체에서 firstName값에 접근하려면 아래와 같이 표기할 수 있다.

점 표기법: name.firstName
대괄호 표기법: name['firstName']

점 표기법과 대괄호 표기법으로 프로퍼티에 접근하기

대괄호 표기법의 경우 키의 이름은 반드시 따옴표로 감싼 문자열이어야 한다. 키의 이름을 따옴표로 감싸지 않으면 ReferenceError가 발생한다.

프로퍼티의 키가 숫자인 경우

다만, 프로퍼티 키가 숫자일 경우에는 그대로 사용할 수 있다. 이때 점 표기법으로는 키가 숫자인 프로퍼티에 접근이 불가능하다.

변수를 이용해 프로퍼티에 접근할 경우

변수에 담겨있는 값을 이용해 프로퍼티에 접근할 때는 대괄호 표기법을 사용한다. 점 표기법으로는 변수와 같이 동적인 값으로 접근이 불가능한데, 이때 ReferenceError가 발생하는게 아니라 undefined를 반환한다.

점 표기법과 대괄호 표기법 중 어떤걸 사용해야 할까?

왜 굳이 두 가지 방법으로 나눠서 접근할까? 와 그럼 둘 중에 뭘 사용하는게 더 좋을까? 에 대한 궁금증이 있었는데 이전에 코드 리뷰를 받으며 궁금증에 대한 해결책과 감사한 조언을 들을 수 있었다.

먼저, 일반적으로는 점 표기법을 사용하는 것이 좋다. 점 표기법을 사용해 객체에 접근하고 있다는 것을 시각적으로도 알 수 있고, 옵셔널 체이닝(?.)과도 형식이 같기 때문이다.

const obj = {
	name: 'olivia'
	age: 20
}

const value = ...(조건)... ? 'name' : 'age'

console.log(obj[value]) // 위의 삼항연산자 조건에 따라 다른 값을 출력함

대괄호 표기법을 사용하는 경우는 호출하는 키의 값이 동적일 때, 단순히 동적인 값을 담는 것 뿐만 아니라 이 코드를 읽는 상대 개발자에게도 '동적인 값이 들어갈 것이다' 라는 의미를 알려주기 위해 사용할 수 있다.

코드는 동작하는 것만이 존재 목적은 아니다.
코드는 개발자를 위한 문서이기도 하다.
따라서 사람이 이해할 수 있는 코드, 가독성이 좋은 코드가 좋은 코드다.

/ 모던 자바스크립트 딥 다이브, p.157

코드 리뷰를 해주시던 팀장님이 '좋은 코드는 나 뿐만 아니라 다른 사람이 봤을 때도 내 의도를 이해할 수 있는 코드가 좋은 코드다.' 라고 말씀해주셨다. 모던 자바스크립트 딥 다이브 책에도 위와 같이 동일한 말이 있어 다이어리에 적어둔 적이 있었다. 다른 사람이 봤을 때도 잘 이해할 수 있는 코드가 어떤건지 고민을 많이 했는데, 이런 객체 속성 표기법 하나에도 내가 어떻게 코드를 진행하고 싶은지를 나타낼 수 있다는 것을 알게되었다. 거창한게 아니라 작은 정렬 하나 하나가 모여 가독성 좋은 코드가 된다는 것도!

[JavaScript]　특수 언어가 있는 문자열 배열을 정렬하는 방법, localeCompare()

Olivia Kim — Tue, 23 Jul 2024 00:54:03 +0900

요소가 한국어인 배열을 sort()로 정렬하기

설정한 조건에 따라 배열 안의 요소를 정렬해주는 sort() 메서드는 배열 안의 모든 요소를 '문자형'으로 변환한 후, 유니코드 단위의 값을 비교한 뒤 재정렬한다.

이때 배열 안의 요소 값이 '한국어'일 때 sort()를 사용하게 되면 설정한대로 오름차순, 내림차순으로 정렬이 이루어질까?

const kors = ['대한민국', '호주', '독일', '가나'];
const nums = ['100', '1', '3', '0', '000', '99'];

// 일반적인 sort
console.log(kors.sort((a, b) => a - b)); // [ '대한민국', '호주', '독일', '가나' ]
console.log(nums.sort((a, b) => a - b)); // [ '0', '000', '1', '3', '99', '100' ]

정답은 아니오 ‍♂️다. a - b를 조건으로 걸었으니 가나다 순으로 가나가 제일 앞에 위치해야 하는데 배열의 정렬이 변하지 않았다. 한국어도 문자열인데 왜 sort했을 때 제대로 정렬되지 않을까?

console.log('대한민국' < '가나'); // false

sort()는 비교함수의 반환값이 0보다 작으면 a를 b보다 앞으로 정렬, 0보다 크면 b를 a보다 앞으로 정렬한다. 그런데 문자열끼리의 비교는 정수가 아닌 true, false의 boolean값으로 반환하기 때문에 sort()에서 제대로 동작하지 않는 것이다!

그렇다면 어떻게 비교를 해야 한국어가 들어있는 배열을 원하는대로 정렬할 수 있을까?

localeCompare를 이용해 요소가 한국어인 배열을 sort()로 정렬하기

console.log('대한민국'.localeCompare('가나')); // 1

String.prototype.localeCompare()

localeCompare(compareString, locales, options)

- compareString: referenceString이 비교되는 문자열

- 결과값: referenceString이 compareString 전 혹은 뒤에 오는지 또는 동등한지를 나타내는 정수를 반환

const kors = ['대한민국', '호주', '독일', '가나'];
const nums = ['100', '1', '3', '0', '000', '99'];

// 일반적인 sort
console.log(kors.sort((a, b) => a - b)); // [ '대한민국', '호주', '독일', '가나' ]

// localeCompare를 이용한 한글 sort
console.log(kors.sort((a, b) => a.localeCompare(b))); // [ '가나', '대한민국', '독일', '호주' ]

위와 같이 localeCompare()는 음수, 0, 양수로 값을 반환하기 때문에 내가 원하는 대로 sorting을 진행할 수 있다!

localeCompare를 이용해 특수 언어 비교하기

const a = 'réservé'; // 액센트 O, 소문자
const b = 'RESERVE'; // 액센트 X, 대문자
const c = 'ReSerVe';
const d = 'zebra';

console.log(a.localeCompare(b)); // 양수: b가 a보다 앞에 위치
console.log(a.localeCompare(b, 'en', { sensitivity: 'base' })); // 0: 동일
console.log(a.localeCompare(c, 'en', { sensitivity: 'base' })); // 0: 동일
console.log(a.localeCompare(d, 'en', { sensitivity: 'base' })); // -1: a가 d보다 앞에 위치

같은 reserve더라도 대/소문자인지, 액센트가 붙었는지 아닌지에 따라 다르게 표현되는데 localeCompare는 기준점을 잡고 각 문자들을 비교할 수 있다. 위의 예제와 같이 액센트가 붙어있는 a의 reserve와 대문자만으로 이루어진 b의 reserve를 기준점(sensitivity: 'base')을 잡고 비교해보면 두 문자가 같은 문자라는 결과를 반환해준다.

여기서의 sensitivity 옵션은 대소문자, 액센트, 케이스 및 다른 변형들에 대한 민감도를 제어하며 아래와 같은 옵션이 있다.

const a = 'a';
const d = 'A';

console.log(a.localeCompare(d, 'en', { sensitivity: 'base' })); // 0
console.log(a.localeCompare(d, 'en', { sensitivity: 'accent' })); // 0
console.log(a.localeCompare(d, 'en', { sensitivity: 'case' })); // -1
console.log(a.localeCompare(d, 'en', { sensitivity: 'variant' })); // -1

1. base: 기본 문자만을 고려해 비교하며, 액센트와 대소문자는 무시된다. 'a'와 'A', 'á', 'À'는 모두 동일하게 취급된다.

2. accent: 기본 문자와 액센트를 고려해 비교하며, 대소문자는 무시된다. 'a'와 'á'는 다르게 취급되지만, 'a'와 'A'는 동일하게 취급된다.

3. case: 기본 문자와 대소문자를 고려해 비교하며, 액센트는 무시된다. 'a'와 'A'는 다르게 취급되지만, 'a'와 'á'는 동일하게 취급된다.

4. variant: 기본 문자, 액센트, 대소문자를 모두 고려해 비교한다. 'a'와 'A', 'á'는 모두 다르게 취급된다.

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

String.prototype.localeCompare() - JavaScript | MDN

localeCompare() 메서드는 참조 문자열이 정렬 순으로 지정된 문자열 앞 혹은 뒤에 오는지 또는 동일한 문자열인지 나타내는 수치를 반환합니다.

developer.mozilla.org

https://oliviakim.tistory.com/43

[JavaScript]　.sort() 함수를 이용해 배열의 요소 정렬하기

설명 Array.prototype.sort()는 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환한다. 이때 배열 안 모든 요소는 문자형으로 변환된 후, 유니코드 단위의 값을 비교한 뒤 재정렬된다. 배열 안의

oliviakim.tistory.com

[서평 | 리뷰]　「된다! Do it! Node.js 프로그래밍 입문」

Olivia Kim — Sun, 26 Nov 2023 21:53:55 +0900

요새 공부 중인 Nuxt.js의 서버가 익스프레스로 돌아가는 걸 보고 노드에도 관심을 가지던 중 Do it! 시리즈로 유명한 이지스퍼블리싱에서 Node.js 입문 도서가 나왔다는 소식을 들었다.

Do it 시리즈는 프로그래밍 입문용 서적으로 많이 추천되는데, 최근 Vue.js를 공부할 때도 「Do it! Vue.js 입문」 책을 완독 하며 기초 개념을 쌓는데 큰 도움이 되었기에 기대가 됐다.

프론트엔드를 공부했던 터라 노드는 자바스크립트를 이용해 서버를 구성한다는 것 외에는 깊은 지식이 없었다. 책을 읽기 전에는 서버 쪽 책이라서 어려우면 어떡하지? 하는 생각이 들었는데 입문 도서답게 노드를 설치하는 방법부터 차근차근 목차가 구성되어 있었다.

또한 Do it 시리즈에서 내가 제일 좋아하는 N일 완독 플랜이 이번 책에도 있었다! 책을 사면 목차와 내용을 살펴보고 며칠 만에 끝낼 수 있을지 계획해서 공부하는 편인데, Do it 시리즈는 앞쪽에 적절하게 분배된 1회독 N일 완성 플랜이 있어 해당 로드맵을 따라가면 되기 때문에 정말 좋다

Node.js 입문 책은 기초부터 시작해 익스프레스, 몽고DB까지 다뤄보는 구성이라 그런지 초급자 15일 / 중급자 30일 플랜으로 나뉘어져 있었다.

개념만 나열되어있지 않고 그림을 이용한 설명이나, 중간 정리가 되어있는 것도 이 책의 장점이다. 글로만 봤을 때는 해당 구성이나 순서가 어떻게 흘러가는지 한 번에 파악하기 어려운데, 그림과 도표가 같이 있으니 흐름을 눈으로 확인할 수 있어 이해에 큰 도움이 됐다.

GitHub - funnycom/doit-node

Contribute to funnycom/doit-node development by creating an account on GitHub.

github.com

☝️ 예제 소스 코드 파일 GitHub

Do it! Node.js 프로그래밍 입문

이지스퍼블리싱 《Do it! Node.js 프로그래밍 입문》 저자 직강 무료 동영상 강의입니다. ▶ 책 보러가기 : http://www.easyspub.co.kr/20_Menu/BookView/PUB/626/PUB

www.youtube.com

☝️ 저자 직강 무료 동영상 강의

Do it! 시리즈는 저자 직강 동영상 강의와 소스 코드 파일을 각각 유튜브/깃허브에서 제공하기 때문에 독학이 어렵다면 위의 링크를 참고하면 좋다.

자바스크립트는 자바와 같은 객체지향언어보다 자유도가 높다 보니, 백엔드 개발을 처음 공부한다면 자바/스프링보다 자바스크립트/노드가 상대적으로 문턱이 더 낮은 편이다. 초반 러닝커브가 상대적으로 낮은 것과 더불어 백엔드 구성에 필요한 프레임워크, NoSQL까지 기초 개념과 실습까지 공부할 수 있으니 Do it 시리즈답게 백엔드 입문 책으로 좋다는 생각이 들었다.

백엔드를 처음 공부하고자 하는 사람, 백엔드 공부가 필요해진 나와 같은 프론트엔드 개발자에게도 추천한다.

서평을 위해 이지스퍼블리싱으로부터 책을 제공받아 작성하였습니다.

[What I Learned]　2주간 배운 것들 간단하게 정리하기

Olivia Kim — Tue, 7 Nov 2023 13:55:28 +0900

간단한 리팩토링

// 기존에 작성했던 코드
if (!isA && isB) {
	element.style.maxHeight = '384px'
} else if (isA && !isB) {
	element.style.maxHeight = '360px'
} else if (!isA && isB) {
	element.style.maxHeight = '320px'
} else {
	element.style.maxHeight = '300px'
}

// 수정한 코드
let maxHeight = 300
if (!isA) {
	if (!sB) {
		maxHeight = 384
	} else {
		maxHeight = 320
	}
} else if (!isB) {
	maxHeight = 360
}
element.style.maxHeight = `${maxHeight}px`

어떻게 하면 공통되는 부분을 최대한 줄이고 더 간결하게 쓸 수 있을지 계속 고민해보는 중 이렇게 쉬운 코드부터 시작해서 나머지 부분도 차근차근 고쳐갈 수 있기를!

JS New Array Methods

with()

const arr = ['a', 'b', 'c']

// 기존
const arrCopy = [...arr]
arrCopy[2] = 'ac'
console.log(arrCopy) // ['a', 'b', 'ac']

// with() 이용
const newArr = arr.with(2, 'ac')
console.log(newArr) // ['a', 'b', 'ac']

array.with(index, value)

index: 음수는 배열의 끝부터 역산
이때 없는 인덱스의 값을 바꾸려고 하면 RangeError: Invalid index 에러 발생
반환값은 index의 요소 값이 value로 대체된 ‘새로운 배열’
⇒ 원본 배열을 훼손하지 않음!

const a = [undefined, null, 'a', 'b']

const newA = a.with(0, 'a')
console.log(newA) // ['a', null, 'a', 'b']

const newB = a.with(1, 'b')
console.log(newB) // [undefined, 'b', 'a', 'b']

const newC = a.with(2, undefined)
console.log(newC) // [undefined, null, undefined, 'b']

const newD = a.with(3, null)
console.log(newD) // [undefined, null, 'a', null]

빈 값 (희소배열)이면 undefined로 채워 넣음
map과 같은 메서드 바로 연결 가능

Array.prototype.toSorted()

일반 sort는 원본 배열을 훼손함
반환값은 요소를 오름차순으로 정렬한 ‘새로운’ 배열 반환

// 함수 없이
toSorted()
// 화살표 함수
toSorted((a, b) => a - b)
// 비교 함수
toSorted(compareFn)
// 인라인 비교 함수
toSorted(function compardFn(a, b) { ... })

structuredClone()

[참고] 스프레드 연산자는 깊복 불가, 객체 내부 프로퍼티도 객체면 원본 배열도 변경됨
해당 메서드 사용 시 깊은 복사 가능

부동 소수점

setTimeout 등을 걸 때 0.1s를 걸면 안됨! (ms로 해야 함)
컴퓨터가 부동소수점 0.1을 더하지 못하기 때문
이로 인한 오차가 생길 수 있음

CTA

== call to action
목표를 달성하기 위해 고객의 특정 반응이나 행동을 유도하는 것
ex. 회원가입, 로그인, 결제 등 고객의 반응을 이끌어내기 위해 배치한 버튼 또는 링크

GNB, LNB, SNB, FNB

GNB(Global Navigation Bar)

어느 페이지에서든 공통적으로 사용할 수 있는 메뉴
사이트 최상위 공통

LNB(Local Navigation Bar)

GNB를 눌렀을 때 소제목 형식으로 나오는 메뉴
현재 서비스(local) 영역만 해당되는 네비게이션

SNB(Side Navigation Bar)

왼쪽에 있는 경우가 많아 LNB(Left) 라고도 함
메인과 서브 메뉴를 제외한 나머지 사이트 메뉴

FNB(Foot Navigation Bar)

하단 메뉴
푸터에 주로 있는 메뉴

[What I Learned]　2주간 배운 것들 간단하게 정리하기

Olivia Kim — Tue, 24 Oct 2023 00:35:40 +0900

지난 2주간 스스로 공부하거나 배운 것들! 하나씩 정리할 시간은 없고, 잊지 않기 위해 간단하게 기록해 둔다.

리액트는 왜 모든 요청이 비동기일까? 에서 시작된 궁금증

싱글스레드와 이벤트 루프의 상관관계

자바스크립트는 싱글 스레드여서 원래 동기적으로 작동하는데, 이벤트 루프를 활용해서 비동기적으로 여러 작업을 수행할 수 있다.
자바스크립트에서 비동기 작업은 콜백함수, Promise, async-awiat 등을 통해 구현되며, 비동기 패턴을 통해 이벤트 루프를 조절할 수 있다.

이벤트 루프

자바스크립트와 간은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나
코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.
즉, 브라우저 동작 타이밍을 제어하는 관리자이다.

프로미스와 이벤트 루프의 상관관계

프로미스는 비동기 코드의 처리를 더 간단하게 만들기 위한 패턴 중 하나이다.
이벤트 루프를 통해 비동기 작업의 스케줄링과 관리에 사용된다.

이 부분은 동기-비동기, 이벤트 루프, 프로미스까지 엮어서 공부할 수 있어서 좋았다. 처음 자바스크립트 공부할 때는 봐도 봐도 무슨 말인지 아리송했는데 요즘 공부할 때는 그 조각들이 하나의 책으로 엮이는 기분이 든다. 뿌듯함! 좀 더 깔끔하게 정리해서 블로그에 업로드해 볼 예정.

Next.js / Nuxt.js를 쓰는 이유

리액트, 뷰에 굳이 왜 넥스트, 넉스트를 붙여서 쓰는지, 그리고 왜 넥/넉스트는 SPA도 지원하고 MPA도 지원한다고 하는 건지 써보지 않아서 이해가 가지 않았다. 그러다 진행 중인 프로젝트에서 Nuxt에서 지원하는 메서드인 asyncData() 를 사용해 vue의 생명주기가 시작되기도 전에 서버에서 받아온 데이터를 가지고 있다가 바로 뿌려주는 코드를 보게 되었다.

SPA의 생명주기가 시작하기 전에 SSR 방식으로 해당 데이터를 미리 가지고 있기 위해 미들웨어 같은 느낌으로 쓰는 게 맞나요? 라고 여쭤봤는데 맞다고 말씀해주셨다. SPA는 어쨌든 화면이 그려지면서 조작이 되기 때문에 그 전에 처리하기 위함이라고! 작은 프로젝트는 괜찮지만 프로젝트가 커질수록 필요성이 더 커진다고 한다. 대답해주신 부분이 약간 가물가물해서 이 부분은 주말에 더 깔끔하게 공부해봐야 한다.

게시판을 만들 때 table이 더 좋은지, li가 더 좋은지

게시판을 만들 때 편하게 만들기는 table 태그가 더 편한데, 게시판 구현에 이걸 쓰는 게 시맨틱한 태그가 맞나? 라는 생각이 있었고 다른 웹사이트들을 살펴보니 div나 li 등 사용하는 태그가 다양했다. 퍼블리셔셨던 프론트엔드분께 여쭤보고 드디어 답을 내릴 수 있었다!

결론적으로 table 태그보다 li를 쓰는 게 시맨틱하다. 게시글 리스트기 때문에 li를 쓰는게 더 적합하기 때문이다. 또한 table의 경우 반응형 웹에서는 크기 조정이 자동적으로 되지 않는다. 이전에는 화면 레이아웃 자체를 table로 잡았었는데, 요즘은 flex, grid 등의 반응형이나 의미에 맞는 태그들이 있기 때문에 table을 레이아웃을 잡는 데 사용하지 않는다.

컴포넌트로 이루어진 화면에서는 시맨틱을 완벽하게 지키기 어렵다.

해당 컴포넌트가 어느 부분에 들어갈지 미리 알 수 없는 경우도 존재하기 때문. 특히 heading 태그가 더 어렵다고 하셨는데, 해당 컴포넌트의 상단에 h1 태그가 올지, h2 태그가 올지 미리 알 수 없으면 어느 헤딩 태그에 종속될지 파악이 어렵다고 하셨다. 그렇기 때문에 배울수록 시맨틱 태그를 할 줄 안다고 확답으로 말하기가 어려워서 할 줄 안다보다 하려고 노력한다고 작성하신다고 하셨다.

웹 접근성을 위해서는 조금 품을 들이더라도 당연히 시맨틱 하게 작성해야지, 라고만 생각했지 대형 프로젝트에서 내가 파악하지 못한 컴포넌트들이 있을 때 이 태그가 어디에 종속될지까지는 아직 생각해보지 못했어서 이력서에 시맨틱 태그를 지킨다고 썼던 게 살짝 부끄러워졌다. 이 대화를 계기로 더 넓은 시야로 코드를 고민해서 작성하는 것에 대해 또 하나 배울 수 있었다!

vuex

뷰도 처음인데 vuex로 서버 데이터를 받아오는 코드는 정말.. 낯설었다. 코드를 보고 또 보고, 의미를 찾고 또 찾으면서 단어에 익숙해지려고 노력했다. 그다음엔 데이터를 받아오는 요소 하나를 붙잡고 해당 요소가 어떻게 함수를 호출하고, 통신해서 vuex로 저장하는지 코드를 쭉쭉 따라가면서 한 줄씩 해석했다. (진짜 필기하다가 손 저렸음) 한 이틀정도 붙잡고 보니까 actions → mutations → state → 다시 render 해서 view로 넘어가는 흐름이 파악됐고, 어느 부분에서 어떤 역할을 하는지도 파악이 됐다. 역시 코드는 흐름을 따라가면서 콘솔 찍어보고 이해될 때까지 보는 게 답이다.

scss scoped

리액트에서 스타일드 컴포넌트를 쓰면 빌드할 때 이름을 고유값으로 바꿔주기 때문에 충돌날 일이 없었다. 그런데 지금 코드는 그냥 클래스 네임에 스타일이 걸려있어서.. 내가 A페이지의 클래스 이름 a를 수정할 때 다른 페이지에 영향이 가지 않을까 찾아보고 고민하면서 코드를 썼음에도 불구하고! 결국 공통으로 걸리는 다른 페이지가 있어서 이걸 어떡해야 하나 싶었다. scss가 scoped 속성을 지원한다는 걸 알고 해당 컴포넌트에 scoped를 걸어두긴 했는데 스타일이 아예 컴포넌트 별로 scoped가 걸려있는 것도 아니고, 분리되어 있는 것도 아니라 영 찜찜하다. 그렇다고 내가 이걸 갈아엎을 수 있는 것도 아니고.. 일단 내가 받는 티켓이라도 최대한 정리해 보는 게 답일 듯하다.

rem

모바일 환경에서 rem을 쓰는 이유는 글자 크기를 -, + 했을 때 조정할 수 있기 때문이다. default size는 꼭 16px이 아니어도 된다. 그러면 웹앱 같은 경우는 rem을 쓰는 게 더 나은지 여쭤봤는데 가능하다면 그게 좋다고 말씀해 주셨다! 그리고 피그마에서도 rem으로 볼 수 있게 세팅해 주셨다.. 몰라서 계산기 두드렸었는데.. 대박 사수님은 피그마로 발표 자료도 만드시고 이력서를 만들었던 동기분도 계셔서 피그마 자료를 읽는 것뿐만 아니라 어느 정도 만들 수 있게 공부를 좀 해야 하나? 싶다.

MSA(Micro Service Architecture)

애플리케이션을 느슨하게 결합된 서비스의 모임으로 구조화하는 서비스 지향 아키텍처(SOA) 스타일의 일종인 소프트웨어 개발 기법
SOA는 애플리케이션 구성 요소가 통신 프로토콜을 통해 다른 구성요소에 서비스를 제공하는 아키텍처 접근 방식
MSA는 API를 통해서만 상호작용할 수 있다.
마이크로 서비스는 서비스의 엔드 포인트를 API 형태로 외부에 노출하고, 실질적인 세부 사항은 모두 추상화하기 때문이다.

[팀 프로젝트]　리그 오브 레전드 유저 신고 커뮤니티 DIEDIE.gg 회고

Olivia Kim — Fri, 8 Sep 2023 04:56:28 +0900

프로젝트 소개

프로젝트 명

DIEDIE.gg

기획 의도

리그 오브 레전드 게임 내 비매너 유저를 신고하고, 신고 전적 및 유저 정보를 확인할 수 있는 서비스

프로젝트 설명

프로젝트 기간

23/08/04 ~ 23/09/05 (프로젝트 주제 선정 및 담당 파트 구현 기간 전체)

사용 기술

Library	React
Programming Language	TypeScript
Styling	Styled-Components
State Management	Recoil, Tanstack-Query
Formatting	ESLint, Prettier
Version Control	Git, GitHub
Design	Figma
Communication	Notion, Slack

기술적 의사 결정

TypeScript	- 정적 타입 언어인 타입스크립트 학습 및 타입스크립트를 이용한 프로젝트 구현을 위해 선정
Recoil	- 리덕에 비해 상대적으로 간편한 사용성 - 컴포넌트 간 데이터 전달을 간소화할 수 있어 상태 관리 코드 작성이 용이해 프론트엔드 팀원들 간의 협업에 유리하여 선정
Chart.js	- 데이터 시각화를 간편하게 해결할 수 있으며, HTML5 캔버스를 이용해 차트를 생성하므로 브라우저 호환성 및 성능이 상대적으로 우수함 - 다양한 차트 유형을 제공하고 데이터 시각화를 클라이언트 측에서 처리하므로 서버로의 추가 요청이 필요하지 않은 장점이 있어 선정
React-Paginate	- 페이지네이션의 빠른 구현을 위해 라이브러리를 사용했으며, React-js-pagination은 부트스트랩 기반이지만 React-Paginate는 디자인이나 스타일의 종속성이 없어 선정

프로젝트에서 나의 역할

프로젝트 초기 세팅
공통 컴포넌트 제작
http method 호출 및 응답 try-catch 코드 추상화
사용자 정보 및 신고 내역 조회
프로젝트 진행 과정 문서화

KPT로 프로젝트 돌아보기

KPT는 담당 역할 중 일부에 대해서만 작성했습니다.

프로젝트 초기 세팅 & 공통 컴포넌트 제작

타입스크립트 강의는 많지만 리액트 + 타입스크립트는 폴더 구조를 어떻게 만들고, 어떻게 세팅해야 하는지 자료를 찾기가 상대적으로 어려웠다. 초기 세팅하는 법도 익힐 겸 구글링 해가며 TS CRA를 두 번 정도 만들어보고, 내용을 정리해 팀원들에게 공유했다.

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

UI를 각각 구현하다가 나중에 중복되는 부분을 합치는 것보다 초기에 빠르게 공통 컴포넌트를 제작하고 배포하는게 효율성 측면에서 훨씬 낫다고 생각했다. 또한 이전 프로젝트에서도 UI 공통 컴포넌트들을 만들어 전체적인 프론트 구현 시간이 줄어들었던 경험이 있기에 초반에 빠르게 작업을 진행했다.

Portal을 이전 프로젝트에서는 만능 버튼처럼 Portal 하나에 내려오는 props를 이용해 모달을 구현했는데, 이번엔 각각의 모달에서 띄워주는 화면이 다 달라 props로 분기처리를 진행해 분기값에 따라 다른 포탈을 렌더링 할 수 있도록 구현했다. 이렇게 하면 가능할 것 같은데? 라고 머릿속으로만 생각했던 코드를 직접 구현해 내니 성취감이 엄청났다.

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

항상 만들어두는 이미지 공통 컴포넌트에 onError를 처음 적용해보았다. 사용자가 업로드한 이미지도 있지만 라이엇 api에서 URL로 가져오는 이미지도 많기 때문에 onError가 필요했다. 실제로 인게임에는 존재하지만 api에서는 가져오지 못하는 이미지 URL들이 있었고 onError를 적용해 둔 덕분에 response값의 URL이 에러일 경우 default 이미지를 출력할 수 있었다!

Keep

능동적으로 초기 세팅을 진행한 것

타입스크립트 기본 개념만 익히고 진행하는 첫 프로젝트여서 리액트에 어떻게 적용해야 하는지 처음엔 막막했는데, 천천히 자료를 찾아보고, 정리하고, 직접 실습해보면서 언제나 그렇듯 하면 되는구나를 느낄 수 있었다. 그리고 직접 부딪혀봐야 이해가 세 배로 잘되는 타입이라 구현하는데 더 많은 도움이 됐다

Problem - Try

Storybook 적용

공통 컴포넌트를 제작했던 이전 프로젝트에서도 UI 컴포넌트를 시각적으로 함께 테스팅할 수 있는 스토리북에 대해서 알게 되었었는데, 프로젝트 말미에 알게 되어 도입하지 못했었다. 이번 프로젝트에서도 타입스크립트를 이용한 구현에 더 초점을 둬서 스토리북을 적용하지 못했는데, 팀 프로젝트에서 공통 UI 컴포넌트를 제작해 배포할 거라면 스토리북을 사용해보고 싶다. 제대로 구현이 됐는지 디자이너님과도 시각적으로 소통할 수 있고 팀원들도 코드만 보는 것보다 더 잘 이해할 수 있을 것 같다. 꼭! 올해가 끝나기 전에 다른 사이드 프로젝트에서 스토리북을 써보리라.. (회사에서 쓰면 더 좋고)

코드 추상화

이전 프로젝트에서 axios interceptor를 구현하며 token값을 넣는 함수를 공통화하는데는 성공했지만, response 부분은 방법이 생각나지 않아 처리를 진행하지 못했다. 코드에서 항상 똑같이 쓰게 되는 then-catch문을 보며 어차피 중복되는데 하나로 처리할 방법이 없을지가 마음에 걸렸었는데 이번 프로젝트에서 드디어 추상화를 적용해 코드를 간결하게 만들었다. 코드 리뷰 중에 이 내용이 번뜩 정리가 돼서 예시 코드를 함께 남겨드렸고,

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

적용해서 중복되던 response 예외 처리 구문이나 api 호출까지도 간결하게 처리할 수 있었다!

다른 화면에서도 분기값만 다르고 나머지는 똑같은 UI로 렌더링 되는 부분이 있었는데, 그 부분도 변수를 이용해 반복되던 같은 코드를 추상화시켰다. 정리하는걸 좋아해서 코드가 깔끔해지거나 효율성 있어지면 정-말 행복하고 뿌듯하다

Keep

중복되는 코드 공통화하기

간결한 코드가 항상 좋은 효율을 내는건 아니지만, 그래도 유지보수나 가독성 측면에서 중복을 최소화해 라인수를 줄일 수 있다면 줄이는 게 좋다고 생각한다. 이번 프로젝트에서 계속 고민하던 부분들에 추상화를 적용할 수 있어서 좋았다. 지금의 코드를 잘 기억해 뒀다가 다음엔 이 코드를 기반으로 더 좋은 코드를 구현할 수 있을 거라 생각하면 더 기쁘고.

Problem - Try

이 코드가 최선인지에 대한 고민

공통 컴포넌트를 만드는 것도, 추상화를 적용하는 것도 최대한 같은 팀원들이 사용하기 편하게 만드려고 노력하는 편인데, 어려운걸 쉽게 설명하는걸 지향하기 때문에 다른 분들이 봤을 때 이해하기 쉬운 코드인지가 궁금하다. 코드를 완성해도 이것보다 더 좋은 방법이 있지 않을까? 두 번, 세 번 생각하는데.. 더 좋은 방법이 생각나지 않을 때 이게 정말 최선이라 그런 건지 아니면 배울게 아직 남아서 그런 건지 명확하게 답을 내릴 수 없어 답답하다. 아직 주니어기 때문에 당연히 후자일 거라 생각하는데 그렇다면 뭘 더 배워야 더 좋은 코드를 짤 수 있을까? 에 대한 물음이 생기기도 하고. 이 부분은 시간과 노력이 해결해 줄 거라 믿는다.

사용자 정보 및 신고 내역 조회

유저 정보 조회

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

메인페이지 검색창에서 유저를 조회해 해당 유저를 클릭하면 유저 정보 페이지로 랜딩된다. 계정이 있는 유효한 사용자일 경우 게임 프로필 이미지, 유저 정보, 신고 유저 TOP 100중 몇 위인지, 승률, 출몰 지역, 플레이 타임, 신고 카테고리 및 출몰지역 통계, 신고 내역을 조회할 수 있다.

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

통계는 Chart.js를 이용하여 데이터를 시각화하였으며 하나의 Chart.tsx 컴포넌트 내에서 flag값(response 데이터의 길이는 각각 4개, 6개 고정이므로 response의 length를 flag값으로 사용했다.)을 이용해 데이터를 구분해 각각 출력할 수 있도록 구현했다.

존재하지 않는 유저일 때

존재하지 않는 유저 닉네임일 경우 useQuery의 error와, navigate를 이용해 에러 페이지로 랜딩 될 수 있도록 구현하였다.

휴면 계정이거나, 통계 데이터가 존재하지 않을 때

조회한 유저의 롤 계정이 휴면 계정이라면 주 출몰 지역에 겨울잠 자러 갔다는 문구를 띄워주었다. 또한 신고 데이터가 없을 경우 등록된 신고가 없다는 문구를, 신고 및 게임 데이터가 없어 출력할 차트가 없을 때도 등록된 통계 데이터가 없다는 문구를 띄워주었다.

유저 신고 내역 페이지네이션

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

유저 신고 내역은 한 페이지에 5개씩 보여지는 페이지네이션으로 구성하였다. 컴포넌트 상하관계와 useQuery 데이터 감지 관련해서 2시간 가까이 사투를 벌였었는데, 트러블 슈팅으로 따로 기록할 예정..!

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

신고 내역은 더보기 버튼 클릭 시 숨겨졌던 추가 영역이 토글 되도록 state를 boolean값으로 관리했고, 스크린샷 부분에 있는 사진을 클릭할 경우 해당 사진만 자세히 볼 수 있도록 Portal을 이용해 사진만 별도의 모달로 띄워주었다.

인게임 정보 조회

이미지 클릭 시 깃허브 해당 코드로 이동합니다.

조회한 유저의 인게임 정보 클릭 시, 해당 유저가 현재 게임 중일 경우 실시간 게임 데이터를 조회한다. 이때 유저가 진행 중인 맵 기본 정보, 닉네임, 티어, 신고 내역이 있다면 신고 횟수와 신고 최대 누적 카테고리를 보여준다. 신고 내역이 없다면 모범시민이라는 문구를 출력해 주었다.

조회한 유저가 게임 중이 아닐 때

조회한 유저가 게임 중이 아니라면 현재 게임 중이 아니라는 문구를 보여준다.

Keep

안되면 될 때까지 하기

타입스크립트로 프로젝트를 처음 구현해 보면서 생소한 타입 에러들을 많이 만났다. 처음엔 정적 타입이라서 이런 에러도 뜨는구나 싶었는데 6 depth, 7 depth의 타입 에러 오류도 마주치면서 이게 대체 뭔가.. 싶은 순간도 있었다 그렇지만 어떻게든 해결한다는 생각으로 구글링 하고, 스택오버플로우를 보고, 지피티한테 물어보면서 결국 완성했고 타입스크립트도 전보다 친숙해진 느낌이다.

Problem - Try

좋은 코드를 더 많이 보기

위의 P-T와 마찬가지로 타입스크립트로 진행하는 첫 프로젝트이다 보니 이 코드가 맞는 코드인가? 에 대한 궁금증이 해소되지 않았고, 어떤 참고 자료를 보면서 프로젝트 폴더 구조, 타입스크립트 + 리액트에서 코드 작성하는 법 등을 익혀야 할지 잘 모르겠다. 구글링도 좋은 글이 많지만 처음 배우는 분들의 글도 많기 때문에 정제해서 보기 쉽지 않았다. 좋은 구조의 프로젝트를 하나 찾아서 클론을 해보거나 찬찬히 뜯어보면서 내 것으로 체화하는 시간을 가지고 싶다.

회고를 마치며

나는 롤을 안 한다.. 스무 살 초반에 AI만 조금 해봤고 (AI 몇 판 하고 인게임 들어갔다가 부모님 안부 묻는 분위기보고 충격 먹음) 가르쳐줄 테니 같이 하자는 얘기들도 거절했었는데 롤 관련 프로젝트를 할 줄은 생각도 못했다. 주제도 모른 채 팀원들이 좋아서 시작한 거라, 흥미 없으면 시작도 못하는 내가 관심 없는 분야 개발을 잘할 수 있을까? 하는 걱정이 조금 있었다. 그럼에도 불구하고 구현하는 게 재밌어서 프로젝트에 정이 붙었고 롤이 뭔지도 조금 배웠다는 점.. 팀원들이랑 타입스크립트 에러 잡는 것도 해프닝마냥 즐거웠고 내가 개발 자체를 그냥 재밌어한다는 걸 다시 한번 느낄 수 있었다.

이제 구현이 끝났으니 작성한 코드를 되짚어가며 구현하느라 까먹은 타입스크립트 개념을 다시 복습해 보고, 리팩토링할 부분이 추가적으로 더 있는지 찾아보려 한다. 공부한 내용 블로그에도 정리해 보자!

[styled-components]　it looks like an unknown property “X" is being sent through to the DOM

Olivia Kim — Thu, 17 Aug 2023 02:54:03 +0900

경고 내역

styled-components: it looks like an unknown prop "category" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid ) or consider sing transient props ($prefix for automatic filtering.)

경고 발생 경로

위의 Badge는 button 태그로 만들어져 있는데, 해당 HTML 태그에 정의되지 않은 category라는 값을 props로 내려주고 있어 경고가 발생했다.

경고 원인

위에 적어둔 내용과 같이 스타일드 컴포넌트를 사용해 스타일 된 컴포넌트를 만들 때, 해당 컴포넌트에 정의되지 않은 props가 전달되어 DOM에 전달될 때 발생하는 문제이다.
스타일드 컴포넌트에 정의되지 않은 속성을 DOM으로 전달하려고 하면 경고를 발생시킨다.

경고 해결 방법

✨ 트랜스파일된 프롭스(Transpiled Props)를 사용한다.

스타일드 컴포넌트에서 $ 접두사를 사용해 transpiled props를 생성해 속성을 필터링하여, 불필요하게 DOM에 전달되지 않도록 할 수 있다!
이는 스타일드 컴포넌트의 내장 기능 중 하나로, $로 시작하는 속성은 자동으로 필터링된다.

const MyStyledComponent = styled.div`
  // ...
`;

<MyStyledComponent $status={status} />

위의 내용을 참고하여 전체 코드를 체크한 후 HTML 속성에 해당하지 않는 임의 props들은 모두 $를 붙여주었다.

[참고 자료]

https://jakemccambley.medium.com/transient-props-in-styled-components-3105f16cb91f

Transient Props in styled-components

How to avoid errors when passing boolean state values as custom attributes to React styled-components

jakemccambley.medium.com

https://okky.kr/questions/1458462

OKKY - [react] styled-component props 경고 메시지 consider using transient props (`$` prefix for automatic filtering.)

안뇽하세요.react와 styled component를 사용하여 개인 프로젝트를 진행중에 있는데요, styled component를 사용할때 propf를 보내 사용할때 consider using transient props ($ prefix for automatic filtering.) 이런 경고메시

okky.kr

[프로그래머스 / JavaScript]　Lv.1 완주하지 못한 선수 (ft. js의 Map 알아보기)

Olivia Kim — Tue, 15 Aug 2023 01:33:24 +0900

문제

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요.

제한사항

마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.
completion의 길이는 participant의 길이보다 1 작습니다.
참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.
참가자 중에는 동명이인이 있을 수 있습니다.

입출력 예

participant	completion	return
["leo", "kiki", "eden"]	["eden", "kiki"]	"leo"
["marina", "josipa", "nikola", "vinko", "filipa"]	["josipa", "filipa", "marina", "nikola"]	"vinko"
["mislav", "stanko", "mislav", "ana"]	["stanko", "ana", "mislav"]	"mislav"

입출력 예 #1

"leo"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

입출력 예 #2

"vinko"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

입출력 예 #3

"mislav"는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한 명은 완주하지 못했습니다.

내가 작성한 답안

맨 처음 작성한 답안 (02/17)

function solution(participant, completion) {
	// 각 배열에 들어있는 이름을 순차적으로 정렬한다.
    participant.sort();
    completion.sort();
    
    // for문을 돌면서 두 배열의 이름이 맞지 않을 경우 해당 이름을 return한다.
    for(let i = 0; i < participant.length; i++) {
        if(participant[i] !== completion[i]) {
            return participant[i];
        }
    }
}

답은 맞췄으나, 시간 복잡도의 효율성 측면에서 100점 만점이 나오지 않았다. 해당 문제는 해시 카테고리의 문제이므로 Map을 이용해야 한다는 조언을 듣고 오늘 다시 풀어보았다.

Map을 사용해야 하는 이유

for과 map은 서로 다른 목적과 특징을 가지고 있기 때문에 직접적으로 비교하기는 어렵다. for는 데이터를 순회하거나 특정 연산을 수행할 때 사용하며, Map은 key-value를 보다 효율적으로 관리/검색할 때 사용하기 때문이다.

다만 Map을 사용하는 경우는 일반적으로 특정 연산에 대해 더 나은 시간 복잡도를 제공할 수 있다. 아래는 Map이 효율성 측면에서 더 나은 이유이다.

1. 검색 속도

Map은 해시 맵(Hash Map, 쉽게 말해서 Key-Value의 구조!)의 구조를 사용하여 데이터를 저장하므로 특정 키로 값을 검색할 때 빠른 검색 속도를 제공한다. 해시 맵은 일반적으로 평균 O(1)의 시간 복잡도를 가지며, key의 해시 값을 계산해 원하는 값을 바로 찾을 수 있다.

2. 중복 key 처리

Map은 중복된 키를 허용하지 않는다. 중복된 키를 삽입하려고 하면 기존의 값이 덮어 씌워진다. 따라서 데이터의 중복을 방지할 수 있다.

3. 순서 보장

Map은 key-value 쌍을 삽입한 순서대로 보장한다. 따라서 데이터의 순서가 중요할 경우 Map을 사용하면 데이터를 순서대로 처리할 수 있다.

4. 원시 타입 및 객체 타입 모두 사용 가능

Map은 key로 원시 타입뿐만 아니라 객체, 함수 등 다양한 데이터 타입을 사용할 수 있다.

5. 반복과 관련된 효율성

Map은 for...of나 forEach 메서드를 사용해 효율적으로 순회할 수 있다. for 루프를 사용할 때보다 보다 간결하게 코드를 작성할 수 있다.

Map의 사용법과 주요 특징

정의

Map은 key-value 쌍을 저장하고 관리하는 자료구조이다.

Map와 Object(객체)의 차이

Map은 객체와 유사하지만, key의 데이터 타입이나 원시 값 등 다양한 값을 key로 사용할 수 있다는 차이점을 보인다. 예를 들어 객체 내에서는 key로 문자열만 사용할 수 있는 반면, Map은 다양한 데이터 타입을 key로 사용할 수 있다.

Map의 장점

Map 사용 시 데이터를 쉽게 추가, 조회, 수정, 삭제할 수 있으며, 순서가 보장되는 순회(iteration)도 가능하다.

Map의 주요 메서드와 프로퍼티

// 1. Map 생성하기
new Map();

// 2. 값 추가하기 (key를 이용해 value를 저장)
map.set(key, value);


// 3. 값 조회하기 (key가 존재하지 않으면 undefined 반환)
map.get(key);


// 4. 값 수정하기
map.set(key, newValue);


// 5-1. 값 삭제하기
map.delete(key);

// 5-2. 모든 값 삭제하기
map.clear();


// 6. Map 크기 확인하기
map.size;


// 7. Map 순회하기
for (const [key, value] of map) {
	console.log(`key: ${key}, value: ${value}`);
}


// 8. 특정 key 존재 여부 확인하기 (존재하면 true, 아니면 false)
map.has(key);


// 9. 모든 key 또는 value 가져오기
const keyArr = Array.from(map.keys());
const valueArr = Array.from(map.values());


// 10. 모든 key-value 쌍 가져오기
const allArr = Array.from(map.entries());

Map을 이용해 다시 풀어본 답안

const solution = (p, c) => {
	// Map을 생성한다.
    const map = new Map();
    
    
    // participant를 순회를 돌면서, 
    for (let i = 0; i < p.length; i++) {
    	// 이미 map안에 participant[i]값이 있을 경우 그 값을,
        // 없을 경우 0 + 1을 한 값을
        // key: participant[i], value: participant[i]값 또는 1 의 형식으로
        // map 안에 값을 만들어 넣는다.
        map.set(p[i], (map.get(p[i]) || 0) + 1);
        
        // 위와 동일하게 key: completion[i], value: completion[i]값 또는 -1의 형식으로
        // map 안에 값을 만들어 넣는다.
        // 이때, completion[i]의 값이 없는 값(participant의 길이 -1이므로) 일 경우
        // key는 undefined, value는 -1이 되어 map 안에 값이 들어간다.
        map.set(c[i], (map.get(c[i]) || 0) - 1);
    }
        
    // participant와 completion의 값은 1명 빼고 모두 동일하므로,
    // 동일한 이름들의 value는 +1, -1이 되어 0,
    // 일치하지 않는 길이에 대해서는 undefined: -1,
    // 일치하지 않는 이름(완주하지 못한 선수)는 1이 된다.
    // 왜? map.set(c[i], (map.get(c[i]) || 0) - 1); 부분에서
    // 그 이름이 없어 -1 처리를 하지 못했으므로!
    
    // 따라서 for문으로 map을 순회하며 0보다 큰 값의 name을 추출한다.
    // 이때, undefined: -1이 있으니 0보다 큰 값으로 빼내야 올바른 값을 출력할 수 있다.
    for (const [name, value] of map) {
        if (value > 0) return name;
    }
}

[참고 자료]

https://school.programmers.co.kr/learn/courses/30/lessons/42576

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

[React / TypeScript]　리액트 + 타입스크립트에서 ESLint + Prettier 설정하기

Olivia Kim — Thu, 3 Aug 2023 10:54:28 +0900

1. ESLint, Prettier Extension 설치

VS Code에서 ESLint, Prettier Extension을 설치한다.

yarn add eslint prettier typescript --dev

VSCode 터미널에서 위의 명령어를 입력해 타입스크립트 버전의 ESLint와 Prettier를 설치한다.

2. 플러그인 설치

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

eslint에서 TS를 활용하기 위한 플러그인을 설치한 후,

yarn add eslint-config-prettier eslint-plugin-prettier --dev

위의 명령어를 입력해 ESLint와 Prettier를 함께 사용하기 위한 플러그인까지 설치해 준다.

3. airbnb 규칙 설정

yarn add eslint-config-airbnb --dev

리액트 관련 규칙을 적용한 airbnb 스타일 가이드를 설정한다.

yarn add eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import --dev

리액트 관련 플러그인을 추가 설치한다.

4. package.json 확인

package.json의 devDependencies에 설치되었는지 확인한다.

5. .eslintrc.json 파일 설정

module.exports = {
  // [env] 프로젝트 환경 설정, 브라우저 환경과 ES2021 문법 사용
  env: {
    browser: true,
    es2021: true,
  },
  // [parser] typescript를 parser로 사용하도록 함
  parser: '@typescript-eslint/parser',
  // [plugins] 사용할 eslint 플러그인 설정
  plugins: ['@typescript-eslint', 'prettier'],
  // [extends] 프로젝트에 적용할 eslit 규칙셋
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  // [rules] 상세 규칙
  rules: {
    // var 금지
    'no-var': 'warn',
    // 일치 연산자 사용 필수
    eqeqeq: 'warn',
    // 컴포넌트의 props 검사 비활성화, propstype 사용하지 않아도 경고 띄우지 않음
    'react/prop-types': 0,
    // 불필요한 세미콜론 사용 시 에러 표시
    'no-extra-semi': 'error',
    // jsx 파일 확장자 .jx, .jsx, .ts, .tsx 허용
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    // 화살표 함수의 파라미터가 하나일때 괄호 생략
    'arrow-parens': ['warn', 'as-needed'],
    // 사용하지 않는 변수가 있을 때 발생하는 경고 비활성화
    'no-unused-vars': ['off'],
    // 콘솔 사용 시 발생하는 경고 비활성화
    'no-console': ['off'],
    // export문이 하나일 때 default export 사용 권장 경고 비활성화
    'import/prefer-default-export': ['off'],
    // react hooks의 의존성배열이 충분하지 않을 때 경고 표시
    'react-hooks/exhaustive-deps': ['warn'],
    // 컴포넌트 이름은 PascalCase로
    'react/jsx-pascal-case': 'warn',
    // 반복문으로 생성하는 요소에 key 강제
    'react/jsx-key': 'warn',
    // 디버그 허용
    'no-debugger': 'off',
    // [error] Delete `␍` prettier/prettier
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
    // [error] Function component is not a function declaration
    'react/function-component-definition': [2, { namedComponents: ['arrow-function', 'function-declaration'] }],
    'react/react-in-jsx-scope': 0,
    'react/prefer-stateless-function': 0,
    'react/jsx-one-expression-per-line': 0,
    'no-nested-ternary': 0,
    // [error] Curly braces are unnecessary here
    'react/jsx-curly-brace-presence': ['warn', { props: 'always', children: 'always' }],
    // 파일의 경로가 틀렸는지 확인하는 옵션 false
    'import/no-unresolved': ['error', { caseSensitive: false }],
    // props spreading 허용하지 않는 경고 표시
    'react/jsx-props-no-spreading': [1, { custom: 'ignore' }],
    'linebreak-style': 0,
    'import/extensions': 0,
    'no-use-before-define': 0,
    // 테스트 또는 개발환경을 구성 파일에서는 devDependency 사용 허용
    'import/no-extraneous-dependencies': 0,
    'no-shadow': 0,
    'jsx-a11y/no-noninteractive-element-interactions': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
}

프로젝트 루트 위치에 .eslintrc.json 파일을 생성하고 필요한 룰들을 적용한다.

최대한 통일성 있는 코드를 작성하고 싶어서 규칙을 많이 적용했는데 살펴봤던 대다수의 사이드 프로젝트는 간단한 룰들만 적용했다. 또한 위의 예제는 ES2021까지 가능하도록 설정해 두었는데 ES5, ES6까지 설정하는 경우도 있으니 프로젝트 상황에 맞게 설정하면 된다.

6. Prettier 파일 설정

module.exports = {
  // 개행문자 설정
  endOfLine: 'lf',
  // 홑따옴표 사용
  singleQuote: true,
  // 세미콜론 사용 여부
  semi: false,
  // 탭의 사용을 금하고 스페이스바 사용으로 대체
  useTabs: false,
  // 탭의 넓이 2칸
  tabWidth: 2,
  // key: value 뒤에 항상 콤마 붙이기
  trailingComma: 'all',
  // 코드 한 줄의 max lnegth 120
  printWidth: 120,
  // 화살표 함수의 매개변수가 하나일 때 괄호 생략 여부 (생략할 경우 aviod)
  arrowParens: 'always',
}

프로젝트 루트 위치에 .prettierrc.json 파일을 생성하고 필요한 룰들을 적용한다.

위의 코드의 세미콜론, max length, arrowParens 등을 각자의 프로젝트 규칙에 맞게 설정하면 된다. endOfLine의 경우 윈도우-맥 개행 에러가 발생해서 필수로 넣어주는 편이다.

7. setting.json 파일 수정

VS Code setting.json (윈도우 단축키 Ctrl + , / 맥 단축키 Command + ,) 파일을 아래와 같이 수정한다.

1. Format on Save : 저장 키를 눌렀을 때 자동으로 포맷팅 해주도록 설정한다.

2. JavaScript Formatter : 기본 JavaScript formatter를 비활성화한다.

3. default formatter : prettier를 활성화한다.

[관련 글]

airbnb eslint 공식 문서 (한글 번역본)

GitHub - apple77y/javascript: JavaScript Style Guide

JavaScript Style Guide. Contribute to apple77y/javascript development by creating an account on GitHub.

github.com

리액트 + 자바스크립트에서 ESLint + Prettier 설정하기

[React]　리액트에서 Airbnb ESLint + Prettier 설정하기

1. Extension 설치 VS Code에서 ESLint, Prettier Extension을 설치한다. 2. yarn config 설치 airbnb 스타일 가이드의 코드 규칙을 적용할 수 있는 yarn config를 설치한다. 이때, 패키지가 의존하고 있는 다른 패키지

oliviakim.tistory.com

[이전 글]

https://oliviakim.tistory.com/156

[React / TypeScript]　CRA로 React + TS 프로젝트 세팅하기

본 게시글의 명령어는 윈도우를 기준으로 하고 있습니다. 1. GitHub에서 프로젝트 repo 생성하기 GitHub에서 프로젝트용 repo를 생성한다. repo 생성 시에는 README 파일 없이 생성해 주었다. repo 생성

oliviakim.tistory.com

[참고 자료]

https://bum-developer.tistory.com/entry/TypeScript-Eslint%EC%99%80-Prettier-%EC%84%A4%EC%A0%95

[TypeScript] Eslint와 Prettier 설정

써야지 생각만 계속 하다가 이번에 작성하게 되었다. Eslint ? 자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 미리 정해둔 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해

bum-developer.tistory.com

https://any-ting.tistory.com/95

[React TypeScript] ESLint Prettier 설정 방법 2부 (TypeScript)

- 개요 안녕하세요. 이번 시간에는 React TypeScript 환경에서 ESLint와 Prettier 설정하는 방법에 대해 알아보겠습니다. 지난 시간에는 JavaScript 환경에서 적용하는 방법에 대해 알아봤습니다. 개념 설명

any-ting.tistory.com

[백준 / JavaScript]　11654 아스키 코드 (ft. 자바스크립트 유니코드 변환)

Olivia Kim — Wed, 2 Aug 2023 11:33:52 +0900

문제

알파벳 소문자, 대문자, 숫자 0-9중 하나가 주어졌을 때, 주어진 글자의 아스키 코드값을 출력하는 프로그램을 작성하시오.

입력

알파벳 소문자, 대문자, 숫자 0-9 중 하나가 첫째 줄에 주어진다.

출력

입력으로 주어진 글자의 아스키 코드 값을 출력한다.

입출력 예

input	output
A	65
z	122

내가 작성한 답안

const fs = require('fs');
const input = fs.readFileSync('/dev/stdin').toString().trim();
console.log(input.charCodeAt());

아스키코드란?

아스키(ASCII)란 미국 국립 표준 협회에서 표준화한 정보 교환용 7비트 부호 체계로, 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 문자 인코딩은 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말한다.

아스키코드 문자표

문제의 입출력 예와 같이 10진법의 65는 대문자 A, 10진법의 122는 소문자 z를 나타낸다.

문자 → 아스키코드 변환하기

String.prototype.charCodeAt()

✨ String.charCodeAt(index)

주어진 index에 해당하는 문자의 유니코드 값을 리턴한다.

매개변수

index
　 0 이상이고 문자열의 길이보다 작은 정수
　 숫자가 아니라면 0을 기본값으로 사용

반환값

주어진 인덱스에 대한 문자의 유니코드 값 리턴
유니코드 숫자 범위 밖을 넘어갔을 경우 NaN 리턴

예시

문자열이 2개 이상이어도 index값을 지정하지 않는다면 기본값인 0번째 인덱스만 아스키로 변환한다. 따라서 대문자 A에 대한 아스키코드인 65만 출력한다.

Apple 문자열의 4번째 인덱스값(input[4])인 e의 아스키 코드를 출력하고 싶다면 위와 같이 index값에 해당 문자의 인덱스값을 지정해 주면 된다.

아스키코드 → 문자 변환하기

String.fromCharCode()

✨ String.fromCharCode(num1[, ...[, numN]])

주어진 유니코드에 해당하는 문자열을 리턴한다.

매개변수

num1, ..., numN
　 지정할 유니코드 숫자
　 가능한 값의 범위는 0부터 65535(0xFFF)까지로, 초과하는 범위는 잘림

반환값

주어진 유니코드 N개로 이루어진 문자열
String 객체가 아닌 문자열 반환

예시

아스키코드 65, 66, 67을 각각 변환하여 하나의 문자열 'ABC'를 반환한다.

[참고 자료]

https://www.acmicpc.net/problem/11654

11654번: 아스키 코드

알파벳 소문자, 대문자, 숫자 0-9중 하나가 주어졌을 때, 주어진 글자의 아스키 코드값을 출력하는 프로그램을 작성하시오.

www.acmicpc.net

https://ko.wikipedia.org/wiki/ASCII

ASCII - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 1972 프린터 사용 설명서에 개시된 아스키 코드 차트표 미국정보교환표준부호(영어: American Standard Code for Information Interchange), 또는 줄여서 ASCII( , 아스키)는 영문

ko.wikipedia.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt

String.prototype.charCodeAt() - JavaScript | MDN

charCodeAt() 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

String.fromCharCode() - JavaScript | MDN

String.fromCharCode() 메서드는 UTF-16 코드 유닛의 시퀀스로부터 문자열을 생성해 반환합니다.

developer.mozilla.org

[ESLint]　Unable to resolve path to module

Olivia Kim — Tue, 1 Aug 2023 19:54:15 +0900

오류 발생 경로

React + TypeScript 프로젝트에 eslint, prettier를 적용하던 중 src 하위에 파일 경로가 제대로 있음에도 다음과 같은 에러가 발생했다.

오류 내역

Unable to resolve path to module

오류 원인 및 해결 방법

    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }

.eslintrc.js 파일에 위와 같은 구문을 추가한다.

이후 .eslintrc.js 파일을 저장해보면 이전과 같은 파일임에도 불구하고 에러가 나지 않는 것을 확인할 수 있다.

[참고 자료]

https://stackoverflow.com/questions/55198502/using-eslint-with-typescript-unable-to-resolve-path-to-module

Using eslint with typescript - Unable to resolve path to module

I have this import in my file app.spec.ts: import app from './app'; Which causes this Typescript error 2:17 error Unable to resolve path to module './app' import/no-unresolved ./app.ts does ex...

stackoverflow.com

[React / TypeScript]　CRA로 React + TS 프로젝트 세팅하기

Olivia Kim — Mon, 31 Jul 2023 22:58:41 +0900

본 게시글의 명령어는 윈도우를 기준으로 하고 있습니다.

1. GitHub에서 프로젝트 repo 생성하기

GitHub에서 프로젝트용 repo를 생성한다. repo 생성 시에는 README 파일 없이 생성해 주었다.

repo 생성을 완료하면 README가 없는 레포가 위와 같이 만들어진다.

2. Local에서 CRA로 TS 프로젝트 만들기

VSCode로 해당 프로젝트를 만들 루트 폴더에 진입하고 아래와 같이 CRA로 프로젝트를 생성한다.

yarn create react-app 프로젝트명 --template typescript

예전에는 npm보다 yarn이 속도가 빨랐지만 요새는 큰 차이가 없다고 한다. 나는 고양이를 좋아하니까( ) yarn으로 세팅해 주었다.

당장 필요하지 않은 파일들은 다 지우고, ESLint와 Prettier 설정까지 끝난 후의 파일 리스트는 위와 같다. (TS에서 ESLint와 Prettier, tsconfig.json 세팅 방법은 별도 글 작성 예정)

3. GitHub과 Local 프로젝트 연결하기

해당 폴더에 .git 파일이 있는지 확인하고 있으면 그대로 진행하고, 없으면 루트 경로에서 아래 명령어를 입력해 git이 해당 폴더 관리하도록 설정한다.

git init

git remote -v

위의 명령어를 이용해 연결된 GitHub 링크가 있는지 확인한다.

참고로 GitHub 주소는 위와 같은 주소를 말한다. 윈도우는 HTTPS, 맥은 (SSH 설정 끝마쳤을 경우) SSH로 진행한다.

1-1. 기존에 연결된 링크가 있을 경우

git remote set-url origin (.git으로 끝나는 GitHub repo 주소)

1-2. 새로 추가하는 경우

git remote add origin (.git으로 끝나는 GitHub repo 주소)

명령어 입력 시 이전과 다르게 remote 주소 설정된 걸 확인할 수 있다.

세팅한 파일들을 add하고 commit해 GitHub에 설정해 둔 파일들을 세팅한다.

commit을 마치고 GitHub의 해당 repo에 들어가 보면 push된 것을 확인할 수 있다! (chore가 아니고 init으로 했어야 했는데....!)

[이전 글]

https://oliviakim.tistory.com/155

[GitHub]　협업을 위한 Organization 만들기

깃허브에서는 팀 작업용 조직 계정을 사용해 협업을 진행할 수 있다. 개인 계정으로 조직 계정에 참여해 공유 프로젝트에 대해 공동 작업을 할 수 있는데, 바로 Organization이다. Organization 생성하

oliviakim.tistory.com

[GitHub]　협업을 위한 Organization 만들기

Olivia Kim — Sun, 30 Jul 2023 23:24:25 +0900

깃허브에서는 팀 작업용 조직 계정을 사용해 협업을 진행할 수 있다. 개인 계정으로 조직 계정에 참여해 공유 프로젝트에 대해 공동 작업을 할 수 있는데, 바로 Organization이다.

Organization 생성하기

GitHub 상단 네비바의 + 버튼을 누르면 New 관련 메뉴들이 나오는데, 그중 New organization을 클릭한다.

학업용 프로젝트를 위한 organization이므로 무료인 Create a free organization을 클릭한다.

Organization account name에는 해당 조직 계정의 이름, Contact email에는 조직 계정과 관련해 컨택할 수 있는 이메일을 입력한다. 비즈니스용 조직 계정이라면 A business tor institution, 그 외의 경우 My personal account 라디오 버튼을 클릭한다. 그 후 검증 체크를 하고 Next를 클릭한다.

팀원 초대하기

다음으로 나오는 페이지에서 추가할 인원이 있다면 Search by username에 해당 인원의 깃허브 아이디, 또는 이메일 계정을 넣어 추가하면 초대 이메일이 발송된다. 추가할 인원이 없다면 Skip this step을 클릭한다.

역할(권한) 부여하기

위의 단계에서 추가하지 못한 인원은 Organization의 People 탭에 들어가 우측 상단에 있는 Invite member 버튼을 클릭해 초대장을 발송할 수 있다.

해당 Organization에 대해 Member(멤버), Owner(관리자)의 역할을 부여할 수 있다. Owner 권한이 있는 사용자가 우측의 … 를 클릭하면 Change role이 나온다. 해당 메뉴를 클릭한다.

해당 유저에게 Owner, Member 중 어느 권한을 줄 것인지 선택하고 Change role 버튼을 클릭한다.

참여 중인 Organization 프로필에 띄우기

이전과 같이 People 탭에 들어가 참여 중인 Organization이 내 GibHub 프로필에 노출되도록 설정할 수 있다. 내 계정에서 Private 또는 Public으로 되어있는 토글을 클릭하면 Public(공개)과 Private(비공개) 중 어떻게 설정할 것인지 고를 수 있다. 프로필에서 해당 Organization을 보이게 할 것이라면 Public을 클릭한다.

Public으로 해두었을 경우 위와 같이 프로필 하단의 Organizations에서 해당 organization이 보이는 것을 확인할 수 있다.

[참고 자료]

https://docs.github.com/en/organizations/collaborating-with-groups-in-organizations/about-organizations#about-organizations

About organizations - GitHub Docs

Organizations are shared accounts where businesses and open-source projects can collaborate across many projects at once, with sophisticated security and administrative features.

docs.github.com

[프로그래머스 / JavaScript]　Lv.0 팩토리얼

Olivia Kim — Thu, 27 Jul 2023 00:05:08 +0900

문제

i팩토리얼 (i!)은 1부터 i까지 정수의 곱을 의미합니다. 예를 들어 5! = 5 * 4 * 3 * 2 * 1 = 120입니다. 정수 n이 주어질 때 다음 조건을 만족하는 가장 큰 정수 i를 return 하도록 solution 함수를 완성해 주세요.

i! ≤ n

제한사항

0 < n ≤ 3,628,800

입출력 예

n	result
3628800	10
7	3

입출력 예 #1

10! = 3,628,800입니다. n이 3628800이므로 최대 팩토리얼인 10을 return 합니다.

입출력 예 #2

3! = 6, 4! = 24입니다. n이 7이므로, 7 이하의 최대 팩토리얼인 3을 return 합니다.

내가 작성한 답안

function solution(n) {
	let i = 1;
    let mul = 1;
    while (i <= n) {
    	// i가 1일 때부터 순차적으로 값을 곱한다.
        i++;
        mul *= i;
        // mul값이 n보다 커졌을 경우, i-1 값을 리턴한다.
        if (mul > n) return i - 1;
        // mul값이 n과 같을 경우, i값을 리턴한다.
        if (mul === n) return i;
	}
}

다른 사람들이 작성한 답안

function solution(n) {
    let i = 1;
    let f = 1;
    while (f*i < n) f* = ++i;
    return i; 
}

코드 해석

n이 7일 때, f = 1, i = 1 f * i = 1 * 1 = 1 < n

f에 전위 증가한 i = 2를 곱한다.

✅ f = 2, i = 2

f = 2, i = 2 f * i = 4 < 7 이므로 f = 2 * 3 = 6

✅ f = 6, i = 3

f = 6, i = 3 f * i = 6 * 3 = 18 < 7

while (f * i < n)에 당도하였으므로 i값을 리턴한다.

i = 3

[참고 자료]

https://school.programmers.co.kr/learn/courses/30/lessons/120848

프로그래머스

programmers.co.kr

[프로그래머스 / JavaScript]　Lv.1 약수의 개수와 덧셈

Olivia Kim — Tue, 25 Jul 2023 15:27:49 +0900

문제

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해 주세요.

제한사항

1 ≤ left ≤ right ≤ 1,000

입출력 예

left	right	result
13	17	43
24	27	52

입출력 예 #1

다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다.

수	약수	약수의 개수
13	1, 13	2
14	1, 2, 7, 14	4
15	1, 3, 5, 15	4
16	1, 2, 4, 8, 16	5
17	1, 17	2

따라서, 13 + 14 + 15 - 16 + 17 = 43을 return 해야 합니다.

입출력 예 #2

다음 표는 24부터 27까지의 수들의 약수를 모두 나타낸 것입니다.

수	약수	약수의 개수
24	1, 2, 3, 4, 6, 8, 12, 24	8
25	1, 5, 25	3
26	1, 2, 13, 26	4
27	1, 3, 9, 27	4

따라서, 24 - 25 + 26 + 27 = 52를 return 해야 합니다.

내가 작성한 답안

맨 처음 작성한 답안 (03/17)

function solution(left, right) {
    // left부터 right까지의 수를 배열에 담는다.
    let arr = [];
    for(let i = left; i <= right; i++) arr.push(i);
    // 각 요소의 약수의 개수를 구한다.
    for(let j = 0; j < arr.length; j++) {
        // 자기 자신을 제외한 최대 약수는 j / 2이고, 자기 자신은 무조건 약수이므로 sum의 초기값을 1로 한다.
        let sum = 1;
        for(let k = 1; k <= arr[j] / 2; k++) if(arr[j] % k === 0) sum++;
        // sum의 수가 (j의 약수의 개수) 홀수이면 -, 짝수이면 +를 붙인다.
        if(sum % 2) arr[j] = arr[j] * -1;
        // console.log(arr[j] + '의 약수의 개수는 ' + sum + '개 이므로 ' + (sum % 2 ? '홀수' : '짝수'))
    }
    // arr내의 수를 더한다.
    return arr.reduce((acc, cur) => acc += cur);
}

다시 풀어본 답안

function solution(left, right) {
    // left부터 right의 값이 순차적으로 담겨있는 배열을 만든다.
    let arr = Array.from(Array(right - left + 1), (_, i) => i + left);
    let answer = 0;
	// 제곱근이 정수면, 약수의 갯수는 홀수다.
    arr.map((e, idx) => Number.isInteger(Math.sqrt(e)) ? answer -= e : answer += e);
    return answer;
}

다른 사람들이 작성한 답안

1. 제곱근이 정수면 약수의 개수는 홀수

function solution(left, right) {
    var answer = 0;
    for (let i = left; i <= right; i++) {
        if (Number.isInteger(Math.sqrt(i))) {
            answer -= i;
        } else {
            answer += i;
        }
    }
    return answer;
}

2. left~right값을 따로 담지 않고 바로 대입 및 처리

function solution(left, right) {
  let answer = 0;

  for (let i = left; i <= right; i++) {
    let count = 0;
    for (let j = 1; j <= i; j++) {
      if (i % j === 0) count++;
    }
    if (count % 2) answer -= i;
    else answer += i;
  }

  return answer;
}

[참고 자료]

https://school.programmers.co.kr/learn/courses/30/lessons/77884

프로그래머스

programmers.co.kr

[프로그래머스 / JavaScript]　Lv.0 배열의 원소만큼 추가하기

Olivia Kim — Mon, 24 Jul 2023 12:30:18 +0900

문제

아무 원소도 들어있지 않은 빈 배열 X가 있습니다. 양의 정수 배열 arr가 매개변수로 주어질 때, arr의 앞에서부터 차례대로 원소를 보면서 원소가 a라면 X의 맨 뒤에 a를 a번 추가하는 일을 반복한 뒤의 배열 X를 return 하는 solution 함수를 작성해 주세요.

제한사항

1 ≤ arr의 길이 ≤ 100
1 ≤ arr의 원소 ≤ 100

입출력 예

arr	result
[5, 1, 4]	[5, 5, 5, 5, 5, 1, 4, 4, 4, 4]
[6, 6]	[6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6]
[1]	[1]

내가 작성한 답안

const solution = (arr) => {
    let X = '';
    arr.map(e => X += ` ${e}`.repeat(e));
    return X.split(' ').slice(1, X.length).map(e => +e);
}

길이만큼 new Array(n)을 만들어서 .fill로 채우면 되겠다! 까지는 생각했는데 for나 map을 이중으로 쓰지 않고 채우는 방법을 명쾌하게 찾지 못했다.

바로 생각나는게 문자열을 반복하는 repeat 메서드여서 arr의 요소를 템플릿 리터럴로 문자열화 시키고 그 수만큼 반복했고, 숫자가 두 자릿수 이상일 경우 구분을 주기 위해 앞에 공백을 추가하는 방식으로 진행했다.

작업을 여러 번 거친다는 생각이 들어서 풀면서도 이게 맞나..? 싶은 생각이 들었다

다른 사람들이 작성한 답안

1. reduce + fill을 이용한 풀이

function solution(arr) {
    return arr.reduce((list, num) => [...list, ...new Array(num).fill(num)], []);
}

reduce() 메서드는 합계를 구할 때만 사용했는데 현재값을 이용해서 값을 처리할 수 있는 풀이식은 처음 봐서 새로웠다.

여기서 list는 누산값, num은 현재값이므로 누산값에 num의 길이만큼(new Array(num)) num값으로 채운(.fill(num))값을 [] 배열화시켜 간단하게 표현했다.

Array.prototype.reduce()

arr.reduce(callback[, initialValue])

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.

매개변수

callback: 배열의 각 요소에 대해 실행할 함수로, 다음의 네가지 인수를 받는다.
　 accumulator (acc, 누산기 / 필수값) : 콜백의 반환값 누적
　 currentValue (cur, 현재 값 / 필수값) : 처리할 현재 요소
　 currentIndex (idx, 현재 인덱스 / 선택값) : 처리할 현재 요소의 인덱스로, initialValue를 제공한 경우 0, 아니면 1부터 시작
　 array (src, 원본 배열 / 선택값) : reduce()를 호출한 배열
initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값으로, 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

반환값

누적 계산의 결과 값

2. map + fill을 이용한 풀이

const solution = a => a.map(v=>Array(v).fill(v)).flat()

arr을 map을 돌려 현재 요소의 길이만큼의 배열을 만들고 동일한 값을 채운 배열들을 만들고, flat() 메서드를 이용해 해당 배열들을 연결했다.

Array.prototype.flat()

const newArr = arr.flat([depth])

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.

매개변수

depth: 중첩 배열 구조를 평탄화할 때 사용할 깊이 값으로, 기본 값은 1

반환값

하위 배열을 이어붙인 새로운 배열

예시 (1)_중첩 배열 연결

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

예시(2)_중첩 배열 연결 및 빈 배열 제거

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

[참고 자료]

https://school.programmers.co.kr/learn/courses/30/lessons/181861

https://hianna.tistory.com/397

[Javascript] 배열 합치기 3가지 방법

지난번에는 배열의 앞, 뒤, 중간에 값을 추가하는 방법을 알아보았습니다. [Javascript] 배열 앞, 뒤에 값 추가, 삭제하기 (1) [Javascript] 배열 중간에 값 추가, 삭제하기 (2) - splice() 함수 이번에는 두

hianna.tistory.com

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Array.prototype.concat() - JavaScript | MDN

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

Array.prototype.flat() - JavaScript | MDN

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Array.prototype.reduce() - JavaScript | MDN

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

developer.mozilla.org

[Browser]　Web Storage(Local Storage, Session Storage) 알아보기

Olivia Kim — Sat, 22 Jul 2023 18:12:31 +0900

Web Storage란?

HTML5에서 제공되는 웹 스토리지는 클라이언트의 로컬에 키(key)와 값(value)의 형태로 데이터를 저장하는 API이다.

Cookie와의 차이점 및 특징

웹 스토리지가 나오기 이전에는 응용프로그램이 데이터를 서버에 요청할 때마다 매번 쿠키에 그 정보를 저장해야 했다.
쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 데이터가 서버로 전송되지 않는다.
이러한 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있는데, 제한 용량은 5MB 이상이나 브라우저에 따라 다를 수 있다.
서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 JavaScript 내에서 수행된다.
키(key)와 값(value)은 반드시 문자열이어야 한다. 숫자나 객체 등 다른 자료형 사용 시 문자열로 자동 변환되나, JSON을 이용하면 객체 데이터를 넣을 수 있다.
웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있다. 따라서 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하며, 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

[참고] 오리진(origin)

도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자를 말한다.

Storage의 종류

	localStrorage	sessionStorage
저장 범위	도메인 / 브라우저	도메인 / 브라우저 / 탭
삭제 시기	직접 삭제 시	탭 종료 시

저장 공간의 크기는 localStorage > sessionStorage > Cookie

localStorage

오리진이 같을 경우 저장된 데이터는 모든 탭과 창에서 공유된다.
　 따라서 한 창(또는 탭)에서 데이터를 설정 시 다른 창에서 변동사항을 볼 수 있다.
브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
따라서 데이터의 만료 날짜가 없으며 JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 데이터가 삭제된다.

sessionStorage

오리진뿐만 아니라 브라우저 탭에도 종속되어 있다.
　 따라서 현재 떠있는 탭 내에서만 데이터가 유지된다.
페이지를 새로고침할 때는 데이터가 사라지지 않지만, 탭을 닫고 새로 열 때는 sessionStorage에 저장된 데이터가 삭제된다.

제공되는 메서드

setItem(key, value)	키-값 쌍을 보관
getItem(key)	키에 해당하는 값을 받아옴
removeItem(key)	키와 해당 값 삭제
clear()	모든 키-값 삭제
key(index)	인덱스(index)에 해당하는 키를 받아옴
length	저장된 항목의 개수를 얻음

[참고 자료]

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

ko.javascript.info

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

Web Storage API - Web API | MDN

Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.

developer.mozilla.org

https://velog.io/@vltea/Cookie-Web-Storage-쿠키와-웹-스토리지

Cookie, Web Storage 쿠키와 웹 스토리지

브라우저에 데이터를 저장하는 Cookie, Web Storage (local storage, session storage) 에 대해 정리했습니다

velog.io

https://youtu.be/-4ZsGy1LOiE

[항해99 수료 회고]　 99일간의 항해를 마무리하며

Olivia Kim — Thu, 6 Jul 2023 15:46:12 +0900

비전공자의 개발 입문 이유

"남들은 러닝화 신고 레이스를 달리는데 나는 그 트랙에 맨발로 서있는 기분이야."

재작년 커리어 전환을 준비할 때 친구에게 털어놓았던 고민이다. 준비하던 유학이 코로나로 인해 무산되며 이제 어떻게 해야 하나 많이 힘들었지만, 가만히 있을 수만은 없어 무엇을 하면서 살건지 정말 치열하게 고민했다. 그중 가장 큰 도움이 됐던 '내게 맞는 일을 하고 싶어'라는 책을 읽으며 아래와 같이 직업 선택을 위한 체크 리스트를 정리했다.

✅ 단순 작업이 반복되는 직무는 나와 맞지 않는다.
✅ 어려워도 꾸준히 성장할 수 있는 업무가 더 좋다.
✅ 일반 사무직으로는 성취감을 느끼기 어려웠다.
✅ 내가 하는 일이 직접적으로 나의 스펙 또는 성과가 되길 원한다.
✅ 자기 주도적으로 일할 수 있었으면 좋겠다.
✅ 전반적으로 폐쇄적인 분위기가 아니었으면 한다.

위를 충족하는 많은 직업이 있었지만, 평소 관심은 있으나 도전하지 못했던 개발 직무가 가장 적합하다고 생각했다. 세상이 변화할 때 빠르게 캐치하고 기회를 잡아야 한다고 생각하는데 제4의 물결이라는 4차 산업혁명이 진행 중인 지금, 타이밍과 기회가 딱 맞는다는 생각이 들었기 때문이다. (개발이 안맞으면 어떡하지?라는 생각이 들긴 했는데 일단 도전하고 생각하는 편이기도 하고 정 안 맞으면 어머니와 카페를 하겠다는 계획을 세우긴 했었다.)

직무 전환과 항해99

개발 직군을 찾아보며 프론트엔드, 백엔드가 나뉘어져 있다는 것을 알게 되었고 1px의 차이까지 눈여겨 보는 나는 당연히 화면이 직접적으로 보이는 프론트엔드 개발자를 하고 싶었다. 하지만 처음 개발을 도전하던 때는 지금과 달리 프론트엔드를 배울 수 있는 학원이 거의 없었고, '자바를 배우면 자바스크립트는 쉽다.'는 당시 학원 상담사님의 감언이설에 홀려 국비 학원에서 자바 과정을 수료했다.

역시나 프로젝트를 진행하며 더 큰 재미를 느낀 부분은 화면 UI를 그리고 자바스크립트로 데이터를 처리하는 부분이었다. 국비를 수료할 즈음 취업을 할지 더 공부할지 고민을 하다 알게 된 곳이 항해99였다. 당시 2기를 모집하고 있었는데 지역 구분 없이 온라인으로 진행된다는 점이나 프론트엔드를 배울 수 있다는 점이 매력적으로 느껴졌다. 고민하던 중 모의 면접을 진행해 줬던 협력사에서 추가 인터뷰 제의가 왔고, 회사에서 더 배울게 많다는 조언에 따라 항해를 뒤로하고 실무에 뛰어들었다.

프론트엔드로 직무 전환을 결정한 후 썼던 일기

자바 개발자로 취업했지만 금융쪽이라 신입인 내가 만질 수 있는 코드는 아니었고, 당시 프로젝트도 설계과정이 길었던 터라 반년 가까이 코드를 짜지 못해 내가 개발자인지 아닌지 자신감이 많이 떨어졌었다. 뭐라도 하고 싶어 방통대 컴퓨터과학과에 지원해 출근하고, 야근하고, 퇴근하면 30초 거리에 있는 카페로 곧장 가 학교 수업을 들었다. 하지만 개인적으로 노력해도 프로젝트 진척 상황이 나아지는 건 아니었다. '상황이 이렇고 내 실력에 자신이 없다면, 자신이 있을만한 근거를 찾아주자. 내가 좋아하는 걸 하자.'는 생각이 들어 더 성취감이 드는 업무인 프론트엔드로 커리어 전환을 하자고 마음먹었다.

많은 부트캠프가 있었지만 이전에 고민했던 터라 상대적으로 친숙한 항해99에 더 정감이 갔다. 항해에서 올린 모든 글과 수료생들의 모든 후기를 읽어보았고, 진짜 힘들다, 교육과정이 친절하지 않다는 단점들도 숙지했었다. 하지만 9 to 9의 스파르타 형식으로 진행된다는 점이나 그냥 항해라는 네이밍이 마음에 들고, 과정이 짧다는 개인적으로 느끼는 장점이 더 커서 항해에 지원하게 되었다. 항해에 얼마나 진심이었냐면, 14기 과정이 4월에 시작했는데 항해 결제는 전년도 7월에 끝내뒀을 정도였다.

항해99를 마무리하며

사람이 이렇게까지 잠을 안잘 수 있구나 느꼈던 7주차

99일이라는 기간만큼 항해에서의 일정은 정말 '휘몰아친다'. 자바스크립트 1주, 알고리즘 1주 후에 바로 리액트, 후에 협업 프로젝트... 화면 구현과 기능 개발까지 맡아야 하는 프론트엔드는 백엔드 인원보다 적은 편이라 상대적으로 더 바쁘다. 정말 항해 후기에서 흔하게 보는 잠잘 시간이 부족하다는 말을 정말 뼈저리게 느낄 수 있다. (매일 잠은 죽어서 잔다는 말을 입에 달고 살았다.) 그래도 버틸 수 있었던 건 같이 파이팅 하는 동기들과 개발을 하면서 조금씩 성장하고 있다는 확신, 성취감 때문이었다.

항해는 누구나 할 수 있다고 말한다. 누구나 할 수 있는 건 맞다. 하지만 정말 개발이 초면인 사람에게 친절한 커리큘럼은 아니다. 개발이 처음인데 항해에서 정말 괜찮게 성장하려면 백엔드가 뭔지, 프론트엔드가 뭔지 구분한 다음 내가 배우고 싶은 언어를 미리 정해서 해당 언어를 '최소' 1달은 미리 공부하고 와야 한다. 리액트를 주특기로 선택할 예정이고 정말 개발이 처음이라면 HTML/CSS를 이용해서 화면을 원하는 대로 어느 정도 그릴 줄 알아야 항해에서의 과정이 편하고, 자바스크립트도 클론코딩정도는 '최소' 한 번 진행하고 와야 이해가 수월하다.

공주와 신호등

항해를 시작하며 개인적으로 다짐했던 것들이 있다. 무조건 아침 9시에 일어나기, 게임하지 않기, 여행가지 않기, 어떻게든 자리에 앉아있기. 다섯 시에 자든 일곱 시에 자든 거의 아홉 시에 일어났고, 마음 흔들리지 않으려고 게임은커녕 밥도 책상에서 먹었다. 식탁에서 가족들이랑 먹으면 수다 떨다가 다시 책상으로 되돌아오기 싫을까 봐. 코드가 잘 안 짜지고 하기 싫어도 의자에 앉아 코드를 가만히 쳐다보기라도 했다. 이런 시간을 보내고 뒤돌아보니 자바스크립트를 처음 공부하기 시작했던 1월 말보다 정말 성장했음을 느낀다. 자바스크립트에 대한 이해도도, 말만 들어봤던 리액트를 내가 사용해서 구현해 낸다는 것도 모두.

개발을 시작할 때도, 얼떨결에 개발자로 회사에 다닐 때도 항상 불안했다. 상사들이 잘한다는 말을 했다고 해도 믿지 않았다. 내 실력을? 그냥 예의상 해주는 말이겠지. 하고 넘겼다. 거품이 꺼질까 봐 불안했고 역삼각형 같은 지식을 어떻게 컨트롤해야 할지 감도 잡히지 않았다. 나에게 개발자라는 '근거'를 채워주기 위해 온 항해였고, 지금은 전과 같이 마음이 불안하지 않다. 치열하게 공부하며 프론트엔드쪽 개발을 할 때 정말 큰 성취를 느낀다는 것을 알았고 설령 모르는 부분이 있더라도 몰라서 불안한 게 아니라 내가 채워야 할 지식이라고 기꺼이 받아들일 수 있게 되었다. 실력도, 마음도 전보다 단단해졌음을 느낀다.

이제는 앞으로 성장할 내 모습이 기대된다. 달리는 걸 좋아하지도 않던 내가 러닝 트랙 위에 덩그러니 서있는 것 같은 기분도 더 이상 느끼지 않는다. 시리도록 파란 바다 위의 항해사가 되어 키를 잡고 바다를 나아가는 기분이 든다. 남들의 시선이 아닌 내가 원하는 나만의 속도로, 내가 원하는 항로로 항해하는 것. 이게 항해에서 얻은 가장 큰 교훈이자 내가 추구하는 것임을 알게 된 99일이었다.

+ [23/07/07] 14기 수료 기념으로 진행된 앙케이트에서 팀워크 기여상을 받았다 야호! 항해를 잘 갈무리한 것 같아서 뿌듯하다. 동기 여러분 감사합니다

+ [23/07/08] (나의 애착인형) 유리님이 사이드 프로젝트로 진행하셨던 항해 캡슐도 오늘 도착했다!

[CSS]　Align 알아보기

Olivia Kim — Thu, 6 Jul 2023 00:00:41 +0900

정의

블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용 가능

margin 속성을 이용한 가운데 정렬
position 속성을 이용한 좌우 정렬
float 속성을 이용한 좌우 정렬

margin 속성을 이용한 가운데 정렬

margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬됨
이때, 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어짐
따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 함

position 속성을 이용한 좌우 정렬

절대 위치 지정 방식(absolute position)으로 위한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 됨
따라서 position 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있음
<body> 요소 margin과 padding 속성값을 설정해야 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있음

float 속성을 이용한 좌우 정렬

float 속성을 이용하며 수평 방향으로 좌우 정렬할 수 있음
<body> 요소에 margin과 padding 속성값을 설정하는 것이 좋음 (위와 같이 브라우저마다 레이아웃이 다르게 보이는 것 방지)

[참고 자료]

http://www.tcpschool.com/css/css_position_align

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

[CSS]　Float 알아보기

Olivia Kim — Wed, 5 Jul 2023 00:10:42 +0900

float

해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만듦
현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용됨

clear

float 속성이 적용된 이후 나타나는 요소들의 동작을 조절함
컨테이너 요소에 float 속성이 적용되면 그 이후 등장하는 모든 요소들은 정확한 위치를 설정하기 어렵기 때문
따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 허용하여 이후 등장하는 요소들이 더 이상 float에 영향을 받지 않도록 설정해야 함

clear를 설정하지 않으면 위와 같이 원하는 의도대로 배치되지 않음

overflow

float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소가 크면, 해당 요소가 일부 밖으로 흘러넘치게 됨
이때, overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을만큼 커지게 됨

　 overflow-x : 내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함

　 overflow-y : 내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함

float 속성을 이용한 웹 레이아웃 예시

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

developer.mozilla.org

http://www.tcpschool.com/css/css_position_float

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

[CSS]　Position 알아보기

Olivia Kim — Wed, 5 Jul 2023 00:05:18 +0900

정의

요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표
HTML 요소가 위치를 결정하는 방식을 설정 (요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표)
요소의 위치를 결정하는 방식은 다음과 같은 4가지 방식이 있음

정적 위치(static position)

HTML 요소의 위치를 결정하는 기본값
top, right, bottom, left 속성값에 영향을 받지 않음
단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식
정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식임

상대 위치(relative position)

HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식

고정 위치(fixed position)

뷰 포트(viewport)를 기준으로 위치를 설정하는 방식
즉, 웹페이지가 스크롤되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됨

[참고] 뷰포트

현재 화면에서 보여지고 있는 다각형의 영역으로, 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분을 말함
뷰포트 바깥의 콘텐츠는 스크롤하기 전엔 보이지 않음

절대 위치(absolute position)

고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작
단지 뷰포트를 기준으로 하는 것이 아닌, 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정함

　 위치가 설정된 요소라는 것은 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미

다만 위치가 설정된 조상 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정

그 외 CSS position 속성

position	Html 요소의 위치를 결정하는 방식을 설정함
top	위치가 설정된 조상 요소의 위로부터 여백을 설정함
right	위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정함
bottom	위치가 설정된 조상 요소의 아래로부터 여백을 설정함
left	위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정함
z-index	겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 결정함
clip	절대 위치(absolute position) 지정 방식으로 위치한 요소를 자름
cursor	표시되는 마우스 커서의 모양을 설정함
overflow	내용(content)의 크기가 해당 요소의 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함
overflow-x	내용(content)의 크기가 해당 요소의 수평 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함
overflow-y	내용(content)의 크기가 해당 요소의 수직 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

developer.mozilla.org

https://youtu.be/jWh3IbgMUPI

[CSS]　Display 알아보기

Olivia Kim — Wed, 5 Jul 2023 00:00:27 +0900

정의

웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 어떻게 보이는지를 결정
대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나를 가짐

　 block

　 inline

블록(block)

display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함
ex. <div>, <h1>, <p>, <ul>, <ol>, <form>, ...

인라인(inline)

display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지함
ex. <span>, <a>, <img>, ...
display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 포함할 수 없음

　 처음부터 display 속성값이 블록인 요소만이 내부에 다른 요소를 포함할 수 있기 때문!

인라인 블록(inline-block)

display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인 요소처럼 동작함
하지만 요소 내부에서는 블록 요소처럼 동작함
인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있음
또한 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있음
따라서 웹사이트의 메뉴나 네비게이션 바를 만들 때 자주 사용됨

visibility 속성

HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정
따라서 웹페이지에 나타나지는 않더라도 레이아웃 내에서는 여전히 존재하게 되며, 코드 내에도 당연히 존재

사용할 수 있는 속성값

visible	해당 HTML 요소를 웹 페이지에 나타냄
hidden	HTML 요소를 웹 페이지에 나타내지는 않지만, 웹 페이지의 레이아웃에는 존재
collapse	동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줌

HTML 요소 숨기기

HTML 요소를 숨기기 위해서는 display 속성값을 none으로 설정하면 됨
위와 같이 설정하면 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않음

민감하거나 중요한 데이터를 visibility 속성을 이용해 감추는 것은 지양해야 함!

opacity 속성

HTML 요소의 투명도를 조절할 수 있음
0.0부터 1.0까지 설정할 수 있으며, 속성값이 0에 가까울수록 투명한 상태

<!-- [참고] 익스플로러 8과 그 이전 버전에서는 투명도를 표현하기 위해 다음과 같은 문법 사용 -->
filter:alpha(opacity=x)

<!-- 적용 예시 -->
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS Display</title>
	<style>
		img {
			opacity: 0.4;
			filter: alpha(opacity=40);
		}
		img:hover {
			opacity: 1.0;
			filter: alpha(opacity=100);
		}
	</style>
</head>

<body>
	<h1>이미지 투명화</h1>
	<img src="/examples/images/img_flower.png" width="350" height="263" alt="flower">
	<p>opacity 속성값을 조절하면 간단히 이미지를 투명하게 만들 수 있어요!</p>
</body>
</html>

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/CSS/display

display - CSS: Cascading Style Sheets | MDN

display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.

developer.mozilla.org

https://www.youtube.com/watch?v=jWh3IbgMUPI

[CSS]　CSS란? + Selectors (선택자) 알아보기

Olivia Kim — Tue, 4 Jul 2023 15:22:29 +0900

CSS란?

정의

HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.
Cascading Style Sheets의 약자이다. cascade는 '폭포'라는 뜻으로, cascading이란 정의되어 있는 세부적인 정의가 있다면 해당 값을 사용하고, 정의되어 있는 게 없다면 다음의 기본으로 지정되어 있는 것으로 넘어가는 것을 말한다.

웹 사이트의 스타일링

＊ 우선 순위는 ↓ 이 방향이다. 이 흐름이 바로 cascading!

Author style	개발자가 작성한 CSS 파일 ▪️ 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인스타일방식 → !important ▪️ cascading의 연결고리를 끊어내는 방법은 !important이지만, 가능하면 쓰지 않는게 좋다.
User style	darkmode를 쓸 것인지와 같이 유저가 커스터마이징한 스타일
Browser	브라우저 상에서 기본적으로 지정된 스타일

선택자 (Selectors)

HTML에서 어떤 태그를 고를 것인지 규정하는 문법

CSS의 기본 구성

selector {
  property: value;
}

/* 구체적으로 태그에 더 가깝게 적은 css가 우선순위가 더 높음 */

영역 관련 코드 예시

기본선택자

Universal	*	모든 태그 고르기
type	Tag	태그 고르기 (ex. div)
ID	#id	해당 id값 고르기
Class	.class	해당 class 고르기
State	:	태그 옆에 : fmf ekfdktj rhfmrl
Attribute	[]	해당 속성값 고르기

기본 선택자 예시

속성선택자

attr	▪️ attr이라는 이름의 특성을 가진 요소 선택
attr = value	▪️ attr이라는 이름의 특성값이 정확히 value인 요소 선택
attr ~= value	▪️ attr이라는 이름의 특성값이 정확히 value인 요소 선택 ▪️ attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있음
attr =\| value	▪️ attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 '-' 문자가 곧바로 따라 붙는 요소 선택 ▪️ 보통 언어 서브 코드(en-US, ko-KR, ...)가 일치하는지 확인할 때 사용
attr ^= value	▪️ attr이라는 특성값을 가지고 있으며, 접두사로 value가 포함되어있는 요소 선택
attr $= value	▪️ attr이라는 특성값을 가지고 있으며, 접미사로 value가 포함되어있는 요소 선택
*attr = value**	▪️ attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 해당 요소 선택
attr operator value i\|I	▪️ 괄호를 닫기 전에 'i' 혹은 'I'를 붙여주면 값의 대소문자를 구분하지 않음
attr operator value s\|S	▪️ 괄호를 닫기 전에 's' 혹은 'S'를 붙여주면 값의 대소문자를 구분함

자손선택자와 후손선택자

a > b	a 요소의 자손들 중에서 b 요소들만 선택
a b	a 요소의 후손 (모든 하위 요소)들 중에서 b 요소들만 선택

동위선택자

a + b	a 요소 뒤에 b 요소 하나만을 선택
a ~ b	a 요소 뒤에 모든 b 요소 전부 선택

의사클래스(수도 클래스, pseudo-class)

선택하고자 하는 HTML 요소의 특별한 상태(state)를 명시할 때 사용한다.

✨ [예시]
　 선택자:의사클래스이름 { 속성: 속성값; }
　 선택자.클래스이름:의사클래스이름 { 속성: 속성값; }
　 선택자#아이디이름:의사클래스이름 { 속성: 속성값; }

CSS에서 자주 사용하는 의사 클래스

클래스 구분	의사 클래스	설명
동적 의사 클래스 (dynamic pseudo-classes)	:link	사용자가 아직 한번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함 (기본 상태)
	:visited	사용자가 한번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함
* :link와 :visited가 먼저 정의된 후 정의되어야 정상적으로 동작함	:hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함
* :hover가 먼저 정의된 후 정의되어야 정상적으로 동작함	:active	사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함
	:focus	초점이 맞춰진 input 요소를 모두 선택함
상태 의사 클래스 (UI element states pseudo-classes)	:checked	체크된(checked) 상태의 input 요소를 모두 선택함
	:enabled	사용할 수 있는 input 요소를 모두 선택함
	:disabled	사용할 수 없는 input 요소를 모두 선택함
	:target	현재 활성화된 target 요소를 모두 선택함
	:in-range	특정 범위 내의 값을 가지는 input 요소를 모두 선택함
	:out-of-range	특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함
	:read-only	readonly 속성을 가지는 input 요소를 모두 선택함
	:read-write	readonly 속성을 가지지 않는 input 요소를 모두 선택함
	:required	required 속성을 가지는 input 요소를 모두 선택함
	:optional	required 속성을 가지지 않는 input 요소를 모두 선택함
	:valid	유효한 값을 가지는 input 요소를 모두 선택함
	:invalid	유효하지 않은 값을 가지는 input 요소를 모두 선택함
구조 의사 클래스 (structural pseudo-classes)	:first-child	모든 자식(child) 요소 중에서 첫번째에 위치하는 자식 요소를 모두 선택함
	:last-child	모든 자식(child) 요소 중에서 마지막에 위치하는 자식 요소를 모두 선택함
	:nth-child	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소를 모두 선택함
	:nth-last-child	모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식 요소를 모두 선택함
	:first-of-type	모든 자식(child) 요소 중에서 첫번째에 위치하는 자식 요소를 모두 선택함
	:last-of-type	모든 자식(child) 요소 중에서 마지막에 위치하는 자식 요소를 모두 선택함
	:nth-of-type	모든 자식(child) 중에서 n번째로 등장하는 특정 요소를 모두 선택함
	:nth-last-of-type	모든 자식(child) 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선
	:only-child	자식(child) 요소를 단 하나만 가지는 모든 요소의 자식 요소를 선택함
	:only-of-type	자식(child) 요소를 특정 요소 단 하나만 가지는 모든 요소의 자식 요소를 선택함
	:empty	아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함
	:root	문서의 root 요소를 선택함
기타 의사 클래스	:not	모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함
	:lang	특정 요소를 언어 설정에 따라 다르게 표현할 때 사용함

의사 요소(pseudo-element)

해당 HTML 요소의 특정 부분만을 선택할 때 사용한다.
CSS3에서는 의사 클래스의 표현과 의사 요소의 표현을 구분한다.
따라서 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용해야 한다.

✨ [예시]
　 선택자::의사요소이름 { 속성: 속성값; }

CSS에서 자주 사용하는 의사 요소 클래스

의사 요소 구분	설명	사용할 수 있는 속성
::first-letter	텍스트의 첫 글자만을 선택함 (블록 타입의 요소에만 사용 가능)	font, color, background, margin, padding, border, text-decoration, text-transform, line-height, float, clear, vertical-align(단, float 속성 값이 none일 경우에만)
::first-line	텍스트의 첫 라인만을 선택함 (블록 타입 요소에만 사용 가능)	font, color, background, word-spacing, letter-spacing, text-decoration, text-transform, line-height, clear, vertical-align
::before	특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용함 (<img>, <br> 등의 대체 요소에 적용 불가)
::after	특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용함 (<img>, <br> 등의 대체 요소에 적용 불가)
::selection	해당 요소에서 사용자가 선택한 부분만 선택

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.

developer.mozilla.org

http://www.tcpschool.com/css/css_selector_pseudoClass

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

[React]　카카오맵(3) 맵 마커 비동기 출력 문제 해결하기

Olivia Kim — Wed, 14 Jun 2023 23:59:36 +0900

오류 내역

페이지가 로드될 때 카카오맵의 마커가 바로 생성되지 않고 어떤 추가 요청을 해야 나머지 마커를 불러오는 상황이 발생했다.

기존 코드 전체 보기

import React, { useState, useEffect } from 'react';
import { Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk';
import { styled } from 'styled-components';
import { BiChevronRight } from 'react-icons/bi';
import { useNavigate } from 'react-router-dom';

// window.kakao 객체를 가져옴
const { kakao } = window;

const KakaoMap = ({ coords, storelist }) => {
  const [markers, setMarkers] = useState([]);

  // * 상세 페이지로 이동
  const navigate = useNavigate();
  const onOverlayClickHandler = (storeId) => navigate(`/StoreDetail/${storeId}`);

  // * 주소-좌표 변환 객체를 생성
  const geocoder = new kakao.maps.services.Geocoder();

  // * storelist 주소를 지도에 마킹할 수 있도록 x, y값 변환
  useEffect(() => {
    const addMarkers = [];

    storelist.forEach((item) => {
      geocoder.addressSearch(item.address, (result, status) => {
        if (status === kakao.maps.services.Status.OK && result[0]) {
          addMarkers.push({
            position: {
              lat: result[0].address.y,
              lng: result[0].address.x,
            },
            content: item.store,
            id: item.store_id,
            isOverlayVisible: false,
          });
        }
        setMarkers(addMarkers);
      });
    });
  }, [storelist]);

  // * 업장 아이콘 클릭 시 overlay visible true/false
  const onMarkerClickHandler = (markerId) => {
    setMarkers((prevMarkers) =>
      prevMarkers.map((marker) =>
        marker.id === markerId ? { ...marker, isOverlayVisible: !marker.isOverlayVisible } : marker,
      ),
    );
  };

  return (
    <MapSection>
      {/* 지도를 표시할 Container */}
      <Map
        center={{
          lat: coords.lat,
          lng: coords.lon,
        }}
        style={{
          width: '100%',
          height: '94%',
        }}
        level={5}
      >
        {markers &&
          markers.map((marker) => (
            <React.Fragment key={`marker_${marker.id}`}>
              <MapMarker
                position={marker.position}
                image={{
                  src: 'https://cdn-icons-png.flaticon.com/512/2722/2722538.png',
                  size: {
                    width: 24,
                    height: 35,
                  },
                  options: {
                    offset: {
                      x: 15,
                      y: -7,
                    },
                  },
                }}
                onClick={() => onMarkerClickHandler(marker.id)}
              />
              {marker.isOverlayVisible && (
                <CustomOverlayMap
                  value={marker.isOverlayVisible}
                  position={marker.position}
                  yAnchor={1}
                  onClick={() => onMarkerClickHandler(marker.id)}
                >
                  <OverlayDiv onClick={() => onOverlayClickHandler(marker.id)}>
                    {marker.content}
                    <BiChevronRight />
                  </OverlayDiv>
                </CustomOverlayMap>
              )}
            </React.Fragment>
          ))}
      </Map>
    </MapSection>
  );
};

export default KakaoMap;

오류가 발생한 원인

geocoder.addressSearch가 비동기도 동작하기 때문에 마커를 추가하는 반복문이 비동기적으로 실행되기 때문이었다!

오류 해결 방법

모든 주소의 좌표 변환 작업이 완료된 후 마커를 한꺼번에 추가할 수 있도록 하고, 이를 위해 비동기 작업들을 Promise와 Promise.all을 사용해 처리했다.

  // * 주소-좌표 변환 객체를 생성
  const geocoder = new kakao.maps.services.Geocoder();

  // * storelist 주소를 지도에 마킹할 수 있도록 x, y값 변환
  useEffect(() => {
  	// async 함수를 정의해 storelist에 있는 각 항목의 주소를 변환해 마커 데이터를 가져온다.
    const fetchMarkerData = async () => {
      // 마커 데이터를 저장하기 위한 빈 배열 변수
      const addMarkers = [];

	  // 해당 배열은 변환된 각 주소에 대한 Promise 객체들을 저장한다.
      const markerPromises = storelist.map((item) => {
        // 주소 변환 작업에 대해 새로운 Promise 객체들을 생성한다.
        // 이 Promise 객체는 addressSearch 메서드를 호출해 주소를 변환하고,
        // 변환된 결과를 처리하는 비동기 작업을 수행한다.
        return new Promise((resolve) => {
          geocoder.addressSearch(item.address, (result, status) => {
            if (status === kakao.maps.services.Status.OK && result[0]) {
              addMarkers.push({
                position: {
                  lat: result[0].address.y,
                  lng: result[0].address.x,
                },
                content: item.store,
                id: item.store_id,
                isOverlayVisible: false,
              });
            }
            // 주소 변환 작업이 완료되면 Promise 객체를 reslove하여 완료됐음을 알린다.
            resolve();
          });
        });
      });

	  // Promise.all 메서드를 사용해 markerPromises 배열 안의
      // 모든 Promise 객체들이 완료될 때까지 대기한다.
      await Promise.all(markerPromises);
      setMarkers(addMarkers);
    };

    fetchMarkerData();
  }, [storelist]);

[해당 코드 전체 보기]

https://github.com/dawhisky/dawhisky-FE/blob/develop/src/pages/KakaoMap.jsx

[React]　카카오맵(2) 지도 이동 시 지도에 출력되는 위치 감지하기

Olivia Kim — Tue, 6 Jun 2023 22:50:05 +0900

구현하고자 하는 로직

DB에 저장된 위스키바 리스트가 서울시에 한정되어 있기 때문에, 다른 지역으로 넘어가면 지도에 별다른 리스트가 조회되지 않았다.

사용자 입장에서 생각해봤을 때 아래와 같은 로직을 추가하는 것이 유저 사용성이 더 편할 것 같다는 생각이 들어 아래의 로직을 추가했다.

1.서울시 전체 위스키바 크롤링하여 DB 저장, 해당 데이터를 보여주는 방식으로 로직 전면 변경

2. 약 350여개의 업장을 화면에 모두 출력하기보다 react-select를 이용해 '구'를 선택하도록 하여 구별로 업장 출력, 각 구마다 위스키바가 가장 많은 지점을 해당 구의 중앙 지점으로 설정

3. 사용자가 지도를 이동할 경우 idle 이벤트를 이용해 해당 구(또는 지역)을 감지하여 사용자가 이동한 구의 위스키바 데이터를 보여주거나 서울시가 아닐 경우 알림 메세지 출력

4. 지도를 이동하거나 select값을 변경했을 때, 다른 탭으로 이동하더라도 해당 세팅값을 기억할 수 있도록 recoil을 이용해 select 상태값 저장 및 관리

구현한 코드

✨ 위스키바 리스트를 보여주는 상위 페이지는 StoreList.jsx, 그 하위의 카카오맵 지도를 보여주는 컴포넌트는 KakaoMap.jsx 이다.
✨ 카카오맵 API 예시 코드는 JavaScript + HTML + CSS로만 코드가 구성되어 있어, React와 jsx 형식에 맞게 카카오맵 내부 함수를 수정한 ReactKakaoMapSDK 를 설치해 사용하였다.

KakaoMap.jsx 해당 코드 한 번에 보기

// * 지도의 중심 위치를 변경했을 경우 해당 구 위스키바 조회
  const onIdleHandler = (map) => {
    const latlng = map.getCenter();
    geocoder.coord2Address(latlng.getLng(), latlng.getLat(), (address) => {
      const getAddressName = address[0].address;
      if (getAddressName.region_1depth_name === '서울') {
        setAddressValue(getAddressName.region_2depth_name);
      } else {
        toast.error('현재 위스키바는 서울시 내 업장만 조회 가능합니다.');
      }
    });
  };

  return (
    <MapSection>
      <Map
        center={{
          lat: coords.lat,
          lng: coords.lon,
        }}
        style={{
          width: '100%',
          height: '100vh',
        }}
        level={5}
        onIdle={(map) => onIdleHandler(map)}
      >
        {markers &&
          markers.map((marker) => (
            <React.Fragment key={`marker_${marker.id}`}>
              <MapMarker
                position={marker.position}
                image={{
                  src: mapPoint,
                  size: {
                    width: 27,
                    height: 27,
                  },
                  options: {
                    offset: {
                      x: 15,
                      y: -7,
                    },
                  },
                }}
                onClick={() => onMarkerClickHandler(marker.id)}
              />
              {marker.isOverlayVisible && (
                <CustomOverlayMap
                  value={marker.isOverlayVisible}
                  position={marker.position}
                  yAnchor={1}
                  onClick={() => onMarkerClickHandler(marker.id)}
                >
                  <OverlayDiv onClick={() => onOverlayClickHandler(marker.id)}>
                    {marker.content}
                    <BiChevronRight />
                  </OverlayDiv>
                </CustomOverlayMap>
              )}
            </React.Fragment>
          ))}
      </Map>
    </MapSection>
  );
};

React KakaoMap SDK (카카오맵의 지도 출력 부분을 React + jsx 형식에 맞게 변환한 SDK) 에서 import해온 Map 컴포넌트에 onIdle을 걸어 사용자가 터치 또는 클릭으로 지도 출력 위치를 변경했을 경우 그 값을 감지할 수 있도록 한다.

그 후 map.getCenter()에서 getLng(), getLat()으로 변경된 위치의 위도, 경도를 꺼내고 geocoder를 이용해 해당 위도, 경도값을 한글 주소명으로 변환한다.

한글 주소로 변환한 첫 번째 depth값이 '서울'일 경우, 해당 지도의 위치가 변경되었어도 아직 서울 지역을 출력하고 있다는 말이기 때문에 2 depth인 해당 '지역구'를 상위 컴포넌트로 넘기기 위해 Recoil에 값을 저장시킨다.

만약 한글 주소로 변환한 2 depth값이 '서울'이 아닐 경우 사용자가 이동시킨 지도 값이 서울 외의 지역을 출력하고 있기 때문에 error alert를 띄워 현재 위스키바는 서울시 내 업장만 조회 가능함을 알린다.

StoreList.jsx 해당 코드 한 번에 보기

// StoreList.jsx
// * [위치 동의] 사용자 위치정보 허용했을 경우
  const approve = (position) => {
    const { kakao } = window;
    const geocoder = new kakao.maps.services.Geocoder();
    geocoder.coord2Address(position.coords.longitude, position.coords.latitude, (address) => {
      // 사용자의 위치가 서울시가 아닐 경우 default 강남구로 설정
      const getAddressName = address[0];
      if (getAddressName.region_1depth_name !== '서울') {
        setSelectStatus(statusOptions[getMapValue]);
        setCoords({
          lat: statusOptions[getMapValue].value.lat,
          lon: statusOptions[getMapValue].value.lon,
        });
      } else {
        const userLoacation = statusOptions.find((option) => option.label === getAddressName.region_2depth_name);
        setSelectStatus(userLoacation);
        setCoords({
          lat: position.coords.latitude,
          lon: position.coords.longitude,
        });
      }
    });
  };

  // * [위치 동의] 사용자 위치정보 거절하거나 오류일 경우 default 위도/경도 설정
  const reject = () => {
    setCoords({
      lat: statusOptions[getMapValue].value.lat,
      lon: statusOptions[getMapValue].value.lon,
    });
  };

  // * [스토어 리스트] 위스키바 목록 보기 toggle
  const isShowListHandler = () => setNearbyToggle(!nearbyToggle);

  // * [스토어 리스트] 조회
  const { refetch } = useQuery('getStoreList', () => getStoreList(selectStatus.label), {
    onSuccess: (response) => {
      setStoreList(response);
      setCoords({ lat: selectStatus.value.lat, lon: selectStatus.value.lon });
    },
  });

  // * [스토어 리스트] 지도 이동해 구가 바뀔때마다 재조회
  useEffect(() => {
    if (getAddressValue) {
      const addressIdx = statusOptions.findIndex((i) => i.label === getAddressValue);
      setMapValue(addressIdx);
      setSelectStatus(statusOptions[addressIdx]);
      toast.success(`중심 위치를 ${getAddressValue}로 변경합니다.`);
    }
  }, [getAddressValue]);

  // * [스토어 리스트] select의 값이 바뀔때마다 재조회
  useEffect(() => {
    setMapValue(statusOptions.findIndex((i) => i.label === selectStatus.label));
    refetch();
  }, [selectStatus, currentLocationToggle]);

// KakaoMap.jsx
// * 지도의 중심 위치를 변경했을 경우 해당 구 위스키바 조회
  const onIdleHandler = (map) => {
    const latlng = map.getCenter();
    geocoder.coord2Address(latlng.getLng(), latlng.getLat(), (address) => {
      const getAddressName = address[0].address;
      if (getAddressName.region_1depth_name === '서울') {
        setAddressValue(getAddressName.region_2depth_name);
      } else {
        toast.error('현재 위스키바는 서울시 내 업장만 조회 가능합니다.');
      }
    });
  };

사용자가 카카오맵 출력 위치를 변경했거나, 서울시 지역구가 출력되고 있는 select의 값을 바뀌는 것을 각각의 useEffect로 설정해 바로 변경 함수가 실행될 수 있도록 한다.

이때, select로 지역구를 선택했을 때 보일 중심 위치는 지역구를 하나하나 찍어보면서 해당 지역구에서 위스키바가 제일 많은 쪽의 중간 지점의 lat, lan값을 추출해 하드코딩으로 관리하고 있었다. 따라서 지도를 끌어서 이동했을 경우에도 위스키바가 제일 많은 밀집 지역(설정해 둔 해당 지역구의 중심 위치)으로 바로 이동할 수 있도록 하며 중심위치를 'XX구'로 변경한다는 알림을 띄워주었다.

[해당 코드 보러 가기]

https://github.com/dawhisky/dawhisky-FE/blob/develop/src/pages/StoreList.jsx

https://github.com/dawhisky/dawhisky-FE/blob/develop/src/pages/KakaoMap.jsx

[참고 자료]

https://react-kakao-maps-sdk.jaeseokim.dev/

Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs

Description will go into a meta tag in <head />

react-kakao-maps-sdk.jaeseokim.dev

https://apis.map.kakao.com/web/sample/

[React]　React-router-dom을 이용한 Private Route 설정 시 인증/인가 처리 오류

Olivia Kim — Sat, 3 Jun 2023 19:58:21 +0900

오류 내역

반복되는 인증/인가 처리를 효율적으로 진행하기 위해 라우팅을 진행하는 App.jsx에서 Private Route를 이용해 일괄 인증/인가 처리를 진행했다. 이때, 로컬 환경에서는 제대로 인증/인가 처리가 진행되지만 배포 서버에서는 동일한 코드임에도 불구하고 제대로 진행되지 않는 오류가 발생했다.

오류가 발생한 경로

배포 서버에서 로그인 성공 후 마이페이지 진입 시 로그인이 유효하지 않아 재로그인 처리를 할 때와 같이 로그인 페이지로 navigate됨
로그인 관련 데이터가 없는 경우가 아니라서 localStorage에 로그인 token, userFlag는 그대로 남아있고 마이페이지로 route만 되지 않는 상태

오류를 해결하기 위해 시도해 본 것들

1. 모든 인증/인가 if문에 console.log를 찍어서 어느 부분에서 넘어가지 않는 건지 확인을 진행했다.

▼ 해당 코드

// App.jsx

const isAuthenticated = () => {
  const authorization = localStorage.getItem('authorization');
  const refreshToken = localStorage.getItem('refreshToken');
  const user = localStorage.getItem('user');
  const store = localStorage.getItem('store_id');
  const result = {
    userFlag: '',
    msg: '',
  };

  if (!user && store) {
    result.userFlag = 'store';
  } else if (user && !store) {
    result.userFlag = 'user';
  }

  // 로그인 관련 모든 데이터가 존재할 경우
  if (result.userFlag && authorization && refreshToken) {
    console.log('[isAuthenticated] 모든 데이터가 존재 함', result);
    return { ...result };
  }

  // 로그인 관련 데이터가 하나라도 없을 경우 기존 로그인 정보 삭제, 재로그인 진행
  if ((!result.userFlag && authorization && refreshToken) || (result.userFlag && (!authorization || !refreshToken))) {
    localStorage.removeItem('authorization');
    localStorage.removeItem('refreshToken');
    localStorage.removeItem('user');
    localStorage.removeItem('store_id');
    const updatedResult = { ...result };
    updatedResult.msg = '로그인 정보가 유효하지 않습니다. \n다시 로그인을 진행해주세요.';
    console.log('[isAuthenticated] 데이터가 하나라도 없음', updatedResult);
    return updatedResult;
  }

  console.log('[isAuthenticated] 마지막으로 출력되는 result', result);
  return { ...result };
};

// * PrivateRoute 검증
const PrivateRoute = ({ category, element }) => {
  const { userFlag, msg } = isAuthenticated();
  console.log('userFlag와 msg', userFlag, msg);

  // ManagePage 진입할 경우
  if (userFlag !== '' && msg === '' && element.type.name === 'ManagePage') {
    console.log('ManagePage 진입할 경우');
    return element;
  }

  // 로그인 정보는 있으나 해당 정보가 유효하지 않을 경우
  if (msg !== '') {
    console.log('로그인 정보는 있으나 해당 정보가 유효하지 않을 경우');
    toast.error(msg);
    return <Navigate to={'/Login'} replace />;
  }

  // 로그인 정보와 해당 페이지 진입 조건이 일치할 경우
  if (userFlag !== '' && category === userFlag) {
    console.log('로그인 정보와 해당 페이지 진입 조건이 일치할 경우');
    return element;
  }

  // 로그인 정보와 해당 페이지 진입 조건이 불일치할 경우
  if (userFlag !== '' && category && category !== userFlag) {
    toast.error(`접근 권한이 없습니다. \n메인페이지로 이동합니다.`);
    return <Navigate to={'/'} replace />;
  }

  console.log('PrivateRoute 마지막 출력! ');
  return <Navigate to={'/Login'} replace />;
};

2. isAuthenticated(0에서 로그인 데이터가 모두 있는 부분은 확인했고, PrivateRoute()에서 userFlag만 있다는 것을 감지했으나(msg값이 있을 경우 로그인 정상 인증 X) 기존에 넘어가야 할 페이지로 route되지 않고 있었다.

//   원래 route 되어야 할 부분의 함수
// ManagePage 진입할 경우
  if (userFlag !== '' && msg === '' && element.type.name === 'ManagePage') {
    console.log('ManagePage 진입할 경우');
    return element;

//   콘솔에 출력된 부분의 함수
console.log('PrivateRoute 마지막 출력! ');
return <Navigate to={'/Login'} replace />;

3. 넘어오는 element값을 console.log로 출력하여 다시 확인해 보았다.

＊로컬 환경에서의 element console.log

로컬에서는 element.type.name이 설정해 둔 'ManagePage'로 잘 출력되고 있다.

＊배포 환경에서의 element console.log

하지만 배포 환경에서는 element.type이 'jw'라는 이름으로 출력되는 것을 확인할 수 있었다.

오류 해결 방법

React로 앱을 만들고 빌드를 하게 되면, 빌드 과정에서 JS 파일을 압축하기 위해 파일 명을 유동적으로 임의의 이름으로 바꾸는데, 이때 발생한 문제임을 확인했다. 따라서 element의 type.name으로 구분하지 않고 props를 추가적으로 부여하여 인증/인가 구분자를 설정했다.

// App.jsx
{/* PrivateRoute */}
<Route path={'/ManagePage/*'} element={<PrivateRoute element={<ManagePage />} isManagePage={'true'} />}>
  <Route path={'user'} element={<PrivateRoute category={'user'} element={<UserManagePage />} />} />
  <Route path={'store'} element={<PrivateRoute category={'store'} element={<StoreManagePage />} />} />
</Route>

// * PrivateRoute 검증
const PrivateRoute = ({ category, element, isManagePage }) => {
	const { userFlag, msg } = isAuthenticated();

	// ManagePage 진입할 경우
  if (userFlag !== '' && msg === '' && isManagePage === 'true') {
    return element;
  }
}

[해당 코드 전체 보기]

https://github.com/dawhisky/dawhisky-FE/blob/develop/src/App.jsx

[참고 자료]

https://cotak.tistory.com/108

[React.js] 라우터를 이용한 접근 제한 구현 (Access Control & Authentication)

사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 물론 서버쪽에서 체크를 해주긴 하지만, 해당 URL로 넘어간다는 것 자체를 프론트측에서 막아주는 것이 바람직하다. 이를 그

cotak.tistory.com

[React]　카카오맵(1) 지도 내장 검색 기능 사용해 리스트 출력하기

Olivia Kim — Thu, 1 Jun 2023 23:42:25 +0900

서울시 내 위스키바 리스트를 출력하기 위해 방법을 고민하던 중, 카카오맵 API에서 위와 같이 키워드로 장소를 검색하고 목록으로 표출하는 기능을 제공해 준다는 것을 알게 되었다. 데이터를 크롤링할 것인지 vs 카카오 내장 검색 기능을 사용할 것인지 회의를 진행했고 지도 API에서 어차피 리스트를 제공해 준다면 해당 내장 기능을 최대한 활용해 보기로 결론을 내렸다.

구현하고자 하는 로직

1. 페이지가 마운트될 때 사용자 현재 위치 정보 동의
　 1-1. 사용자가 허용했을 경우 해당 위도/경도 설정
　 1-2. 사용자가 거부했을 경우 지도 설정 기본 값인 을지로 3가의 위도/경도 설정
2. props로 내려받은 위도/경도값을 주소로 변환해 'X시 Y동 칵테일바'라는 키워드 세팅
3. 해당 키워드를 이용해 지도 API 내부 검색 기능 이용
4. 검색된 결과 리스트를 지도에 마커로 세팅

구현한 코드

StoreList.jsx 전체 코드 한 번에 보기

import React, { useState, useEffect } from 'react';
import { styled } from 'styled-components';
import { MdOutlineGpsFixed } from 'react-icons/md';
import { Layout, SearchInput, Button, DetailList } from '../components';
import KakaoMap from './KakaoMap';

const StoreList = () => {
  const [coords, setCoords] = useState({ lat: 0, lon: 0 });
  const [currentLocationToggle, setCurrentLocationToggle] = useState(false);
  const [toggleId, setToggleId] = useState(0);
  const [nearbyToggle, setNearbyToggle] = useState(false);

  // * 사용자 위치정보 허용했을 경우 해당 위도/경도 설정
  const approve = (position) => setCoords({ lat: position.coords.latitude, lon: position.coords.longitude });

  // * 사용자 위치정보 거절하거나 오류일 경우 을지로 3가 위도/경도 설정
  const reject = () => setCoords({ lat: 37.566498652285, lon: 126.99209745028 });

  // * 현재 위치 버튼 클릭 시 currentLocationToggle true/false 값 변경
  const onCurrentLocationClickHandler = () => setCurrentLocationToggle(!currentLocationToggle);

  // * 페이지가 처음 마운트될 때 위치 정보 동의
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(approve, reject);
  }, []);

  // * currentLocationToggle true/false값에 따라 현재 위치 GPS 추적 여부 변경
  useEffect(() => {
    if (currentLocationToggle) {
      // 장치 위치가 변경될 때마다 위치 추적
      const watchId = navigator.geolocation.watchPosition(approve, reject);
      setToggleId(watchId);
    } else {
      // watchPosition 실행 중지
      navigator.geolocation.clearWatch(toggleId);
    }
  }, [currentLocationToggle]);

  const isShowListHandler = () => setNearbyToggle(!nearbyToggle);

  return (
    <Layout>
      <ListSection>
        <SearchInput searchtype={'before'} placeholder={'위스키 바를 검색할 지역을 입력해보세요!'} />
        <KakaoMap coords={coords} />
        <Button size={'small'} color={'white'} onClick={isShowListHandler}>
          목록 보기
        </Button>
        <button type="button" onClick={onCurrentLocationClickHandler}>
          <MdOutlineGpsFixed />
        </button>
      </ListSection>

      {nearbyToggle && (
        <>
          <BackgroundDiv onClick={isShowListHandler} position="Layout" />
          <NearbyListDiv>
            <p>주변 위스키바</p>
            <div>
              <DetailList type={'store'} />
            </div>
            <div>
              <Button onClick={isShowListHandler}>닫기</Button>
            </div>
          </NearbyListDiv>
        </>
      )}
    </Layout>
  );
};

export default StoreList;

KakaoMap.jsx 전체 코드 한번에 보기

import React, { useState, useEffect } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';
import { styled } from 'styled-components';

// window.kakao 객체를 가져옴
const { kakao } = window;

const KakaoMap = ({ coords }) => {
  const [info, setInfo] = useState();
  const [markers, setMarkers] = useState([]);
  const [map, setMap] = useState();
  const [keyword, setKeyword] = useState('');

  // * coords 값에 따라 keyword에 넣을 'X시 + Y동 + 칵테일바' 값 set (단, lat, lon이 0이 아닐 때)
  useEffect(() => {
    if (coords.lat !== 0 && coords.lon !== 0) {
      // 주소-좌표 변환 객체를 생성
      const geocoder = new kakao.maps.services.Geocoder();
      // 좌표 값에 해당하는 구 주소와 도로명 주소 정보를 요청
      // - x : x좌표 (longitude) / y : y좌표 (latitude)
      // - callback : 검색 결과를 받을 콜백함수
      geocoder.coord2Address(coords.lon, coords.lat, (address) => {
        const getAddressName = address[0].address;
				// keyword값 예시 : 부천시 중동 칵테일바
        setKeyword(`${getAddressName.region_2depth_name} ${getAddressName.region_3depth_name} 칵테일바`);
      });
    }
  }, [coords]);

  // * keyword값에 따라 지도 API 내부 검색, 검색 결과를 지도에 마커로 set
  useEffect(() => {
    // keyword가 초기의 빈값일 경우 API 요청을 수행하지 않음
    if (!keyword || keyword.trim() === '' || !map) return;

    // 장소 검색 서비스 객체 생성
    const ps = new kakao.maps.services.Places();

    // 입력한 키워드로 검색
    // - keyword: 검색할 키워드
    // - callback: 검색 결과를 받을 콜백함수
    ps.keywordSearch(keyword, (data, status) => {
      if (status === kakao.maps.services.Status.OK) {
        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 LatLngBounds 객체에 좌표 추가
        const bounds = new kakao.maps.LatLngBounds();
        const addMarkers = [];

        for (let i = 0; i < data.length; i += 1) {
          addMarkers.push({
            position: {
              lat: data[i].y,
              lng: data[i].x,
            },
            content: data[i].place_name,
          });
          // 인수로 주어진 좌표를 포함하도록 영역 정보를 확장
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
        }
        setMarkers(addMarkers);

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정
        map.setBounds(bounds);
      }
    });
  }, [map, keyword]);

  // JSX로 지도와 마커를 렌더링
  return (
    <MapSection>
      {/* 로드뷰를 표시할 Container */}
      <Map
        // 중심으로 설정할 위치
        center={{
          lat: coords.lat,
          lng: coords.lon,
        }}
        style={{
          width: '100%',
          height: '94%',
        }}
        level={3}
        onCreate={setMap}
      >
        {markers.map((marker) => (
          <MapMarker
            key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
            // 표시 위치
            position={marker.position}
            onClick={() => setInfo(marker)}
          >
            {info && info.content === marker.content && <div style={{ color: '#000' }}>{marker.content}</div>}
          </MapMarker>
        ))}
      </Map>
    </MapSection>
  );
};

export default KakaoMap;

const MapSection = styled.section`
  width: 360px;
  height: 100vh;
  margin-left: -17px;
`;

해당 기능의 한계점

카카오맵 API 내장 검색 기능으로 가져올 수 있는 데이터는 위와 같이 '업장명, 업장 주소, 업장 전화번호' 까지였다.

하지만 추가로 필요한 데이터들 (ID값, 잔여 좌석, 대표 이미지 등) 이 있었기 때문에 지도 API 내부 검색 기능으로는 구현에 한계가 있었다. 해당 상황을 공유한 후 팀원들과 다시 논의해 위스키바 데이터를 아예 크롤링해 DB에 저장한 후 해당 데이터를 지도에 불러오는 방식으로 로직을 다시 구성하기로 했다.

[참고 자료]

https://apis.map.kakao.com/web/sample/keywordList/

[React]　디바운싱을 이용한 추천 검색어, 인기 검색어, 키워드 검색 기능 구현하기

Olivia Kim — Wed, 31 May 2023 22:04:46 +0900

검색 페이지 요구사항

1. 검색 페이지에 맨 처음 진입 시 사용자들이 제일 많이 검색한 위스키 리스트 Top 10을 출력한다.

2. 사용자가 입력한 값이 있을 경우 해당 입력값을 기반으로 입력값이 포함된 위스키 리스트를 출력한다.

3. 사용자가 값을 입력하고 검색 버튼을 클릭했을 경우 바로 해당 키워드가 포함된 위스키 리스트를 출력한다.

4. input에 입력된 값이 아무것도 없을 경우 다시 위스키 리스트 Top 10을 출력한다.

5. 리스트에 출력된 위스키들은 각각 클릭 시 해당 위스키 상세 페이지로 이동한다.

키워드 검색 구현하기

  // SearchPage.jsx
  // * 키워드 검색
  const onSearchClickHandler = () => searchKeywordMutation.mutate(userInput);
  
  // * 조회 useMutation
  const searchKeywordMutation = useMutation(getKeywordList, {
    onSuccess: (response) => setRecommedList(response),
  });
  
  return (
    <Layout>
      <SearchInput
        searchtype={'after'}
        value={userInput}
        onchange={onUserInputChangeHandler}
        onclick={onSearchClickHandler}
        placeholder={'위스키를 검색해보세요!'}
      />
      // 인기검색어 리스트는 있고 추천 검색어 리스트가 없거나,
      // 사용자가 input에 입력한 값이 없을 때만 인기 검색어 리스트를 출력
      {((trendingList && !recommendList) || !userInput) && (
        <>
          <TrendingH1>{'인기검색어 Top 10'}</TrendingH1>
          <DetailList list={trendingList} />
        </>
      )}
      {recommendList && <DetailList list={recommendList} />}
    </Layout>
  );
};

사용자가 검색어를 입력한 직후 조회 아이콘을 클릭해 즉각적인 키워드 검색 기능을 이용할 경우, input의 onChangeHandler에서 입력값을 기반으로 바로 조회 API를 호출한다.

[참고 자료]

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

(JavaScript) 쓰로틀링과 디바운싱

안녕하세요. 이번 시간에는 쓰로틀링(throttling)과 디바운싱(debouncing)에 대해 알아보겠습니다. 원래 예정에 없던 강좌이지만 요청을 받았기 때문에 써봅니다. 프로그래밍 기법 중 하나입니다(아니

www.zerocho.com

https://velog.io/@timosean/React%EC%97%90%EC%84%9C-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-%EA%B2%80%EC%83%89%EC%96%B4-%EC%9E%85%EB%A0%A5%EA%B3%BC-%EC%B6%94%EC%B2%9C-%EA%B2%80%EC%83%89%EC%96%B4-%EB%B0%9B%EC%95%84%EC%98%A4%EA%B8%B0

React에서 디바운싱 구현하기 (검색어 입력과 추천 검색어 받아오기)

무수한 API 호출 얼마 전 인턴 채용 사전 과제로 추천 검색어를 띄우는 과제를 받았다. 추천 검색어는 사용자가 입력한 문자열을 토대로 서버에 GET 요청을 보내서 추천 검색어를 받아오고, 그걸

velog.io

https://velog.io/@yunsungyang-omc/React-React-Query%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EA%B2%80%EC%83%89%EC%B0%BD-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

(React) React Query를 이용해서 검색창 구현하기

리액트 쿼리를 이용해서 검색창 구현하기

velog.io

[React]　리액트에서 Styled Components Global Style, Theme 설정하기

Olivia Kim — Tue, 30 May 2023 23:19:00 +0900

기존의 전역 스타일링 적용 방식

웹 브라우저의 기본 스타일값을 제거하고 통일성있는 CSS 스타일 적용을 위해 reset.css 파일을 생성하고 index.js에 해당 css를 import 하는 방식으로 사용했다.

하지만 Styled Components라는 CSS-in-JS를 사용하고 있으니 사용 중인 라이브러리를 최대한 활용해서 쓰는 것이 더 효율적일 것이라는 생각이 들었다. 따라서 별도의 css 파일이 아닌 Styled Components에서 제공하는 GlobalStyleds라는 전역 스타일링 방법을 사용했다.

Global Style 적용하기

프로젝트를 아우르거나 공통적으로 들어가야 할 스타일을 적용할 때 전역적(Globally)으로 스타일을 지정할 수 있는데, 이때 쓰는 방법이 전역 스타일링이다. GlobalStyles를 생성하면 해당 리액트 프로젝트에 전역적으로 스타일링 지정이 가능하다.

1. GlobalStyle.js 생성

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
	// 코드 생략
`;

export default GlobalStyle;

createGlobalStyle을 import하고 선언해준다. 해당 변수 안에는 reset.css 안에 있던 내용을 옮겨주었다.

2. GlobalStyle import 하기

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import GlobalStyle from './style/GlobalStyle';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStyle />
    <App />
  </>,
);

reportWebVitals();

루트의 index.js에 import 해둔 reset.css를 지우고 GlobalStyle를 import한다.

3. 전역 스타일링 컴포넌트 설정하기

아래에는 다음과 같이 reset하고 싶은 브라우저 기본 css 뿐만 아니라 전역에서 공통적으로 사용할 스타일이 지정된 컴포넌트도 함께 작성할 수 있다. GlobalStyle.js에 선언한 뒤 해당 스타일링을 이용할 파일에서 import 해서 사용하는 방식!

Theme 적용하기

페이지에 전반적으로 사용할 스타일의 휴먼 에러를 줄이기 위해 기존에는 위와 같이 style.css 파일을 만들어 사용했었다면, Styled Components에서는 ThemeProvider를 이용해 위와 같은 기능을 이용할 수 있다. ThemeProvider는 ContextAPI를 이용해 리액트 컴포넌트에게 Theme 속성을 전달할 수 있으며, 컴포넌트의 depth가 깊어지더라도 루트 위치에 ThemeProvider가 있다면 모든 렌더 트리의 자식에는 theme 속성을 가지게 된다.

1. Theme.js 생성

theme.js 파일을 만들어 전역적으로 사용할 스타일 변수를 선언한다.

2. Theme Provider import 하기

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import { GlobalStyle, theme } from './style';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <App />
    </ThemeProvider>,
);

reportWebVitals();

루트에 위치한 index.js에 위에서 import 해뒀던 GlobalStyle과 App을 감싸도록 설정한다.

위와 같이 ThemeProvider를 이용하면 감싸져있는 파일의 하위 어디서든 별도의 import 과정 없이 theme을 호출해 내부의 css 변수를 사용할 수 있다.

[참고 자료]

https://styled-components.com/

styled-components

CSS for the <Component> Age

styled-components.com

https://www.daleseo.com/react-styled-components/

Styled Components로 React 컴포넌트 스타일하기

Engineering Blog by Dale Seo

www.daleseo.com

https://wonit.tistory.com/366

[styled-components] ThemeProvider로 공통 스타일 속성 관리하기.

지난 사촌 누나에게 피아노 연습실 페이지 마련해주기 프로젝트를 수행하면서 가장 크게 느꼈던 점은 바로 css에서의 통일성이 없다 라는 것이었다. 약 15개의 컴포넌트와 12개의 섹션과 3개의 페

wonit.tistory.com

[React]　리액트에서 Airbnb ESLint + Prettier 설정하기

Olivia Kim — Sat, 27 May 2023 02:26:55 +0900

1. Extension 설치

VS Code에서 ESLint, Prettier Extension을 설치한다.

2. yarn config 설치

airbnb 스타일 가이드의 코드 규칙을 적용할 수 있는 yarn config를 설치한다.

이때, 패키지가 의존하고 있는 다른 패키지들도 함께 설치해야 하므로 다음의 명령어를 사용해 의존성 패키지들을 확인한다.

yarn info eslint-config-airbnb peerDependencies

의존성 패키지 확인 콘솔

3. eslint 설치

위의 의존성 패키지들과 함께 eslint-config-airbnb를 설치한다.

yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

eslint : 자바스크립트 코드를 검증 및 확인하는 핵심 라이브러리
eslint-plugin-import : ES6+의 import/export 문법과 파일 경로 및 파일명이 제대로 입력되었는지를 체크해 주는 플러그인
eslint-plugin-jsx-a11y : JSX 엘리먼트의 접근성 관련 규칙을 체크해주는 플러그인
eslint-plugin-react : React를 위한 규칙을 추가해주는 플러그인
eslint-plugin-react-hooks : React Hooks를 위한 규칙을 추가해 주는 플러그인

4. package.json 확인

package.sjon의 devDependencies에 설치되었는지 확인한다.

5. 추가 패키지 설치

prettier와 eslint의 포맷팅 규칙이 겹치지 않도록 아래의 패키지를 설치한다.

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

prettier : 코드 스타일을 정리해주는 라이브러리
eslint-config-prettier : Prettier와 충돌이 생길 수 있는 ESLint의 규칙들을 비활성화
eslint-plugin-prettier : ESLint로 Prettier를 실행하는 플러그인

6. ESLint 파일 설정

프로젝트 루트 위치에 아래와 같이 .eslintrc.json 파일을 생성한다.

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0
  }
}

7. Prettier 파일 설정

프로젝트 루트 위치에 아래와 같이 .prettierrc.json 파일을 생성한다.

{
  "endOfLine": "lf", // 윈도우-맥 개행 에러를 막기 위해 줄넘김값 lf로 설정
  "singleQuote": true, // 홑따옴표를 사용
  "semi": true, // 코드 마지막에 세미콜론 사용
  "useTabs": false, // 스페이스바 대신 탭를 사용
  "tabWidth": 2, // 들여쓰기는 2칸
  "trailingComma": "all", // 모든 요소에 쉼표(,)를 붙임
  "printWidth": 120, // 한 줄에 120칸까지만 사용
  "arrowParens": "always" // 화살표 함수의 인자가 하나여도 괄호를 넣도록 
}

8. setting.json 파일 수정

VS Code setting.json (윈도우 단축키 Ctrl + , / 맥 단축키 Command + ,) 파일을 아래와 같이 수정한다.

1. Format on Save : 저장 키를 눌렀을 때 자동으로 포맷팅 해주도록 설정한다.

2. JavaScript Formatter : 기본 JavaScript formatter를 비활성화한다.

3. default formatter : prettier를 활성화한다.

airbnb eslint 공식 문서 (한글 번역본)

GitHub - apple77y/javascript: JavaScript Style Guide

JavaScript Style Guide. Contribute to apple77y/javascript development by creating an account on GitHub.

github.com

[참고 자료]

https://yjg-lab.tistory.com/91

[vscode] Prettier 적용방법, 적용 안되는 경우 해결방법

Prettier 적용 방법 Visual Studio Code에서는 사용자 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리해주는 확장프로그램이 존재한다. 왼쪽 사이드바에서 EXTENSIONS 아이콘을 클릭한 후 pr

yjg-lab.tistory.com

https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

ESLint & Prettier, Airbnb Style Guide로 설정하기

코드의 가독성을 높혀주고 에러나 컨벤션에 관한 경고 해주는 유명한 툴이 있는데바로 ESLint와 Prettier입니다. 매번 멘토님의 블로그를 보고 설치하고 설정하고 사용하던 ESLint와 Prettier를 가장 유

velog.io

https://memostack.tistory.com/157

React에 eslint-config-airbnb, prettier 설정하기

준비 환경 VSCode prettier plugin 설치 eslint plugin 설치 eslint-config-airbnb 설치 $ yarn add eslint-config-airbnb yarn add v1.22.4 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning " > @t

memostack.tistory.com

https://leo-xee.github.io/React/react-eslint-airbnb/

React 프로젝트에 airbnb 컨벤션 적용하기

설치하기 ESLint ESLint에 airbnb 규칙을 사용하기 위해서는 를 설치해야한다. 하지만 이 패키지가 의존하고 있는 패키지들도 함께 설치해야하기 때문에 다음의 명령어를 사용해서 먼저 의존성 패키

leo-xee.github.io

https://velog.io/@mayinjanuary/Next.js-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-ESLint-Prettier-%EC%84%A4%EC%A0%95

[Next.js] 프로젝트 기초 세팅하기 - ESLint, Prettier 는 필수!

Next.js 프로젝트에서 ESLint, Prettier 설정하기. ESLint Airbnb config 적용하기.

velog.io

https://meetup.nhncloud.com/posts/243

prettier 2.0에서 달라진 옵션 살펴보기 : NHN Cloud Meetup

prettier 2.0은 얼마 전(2020.3) 정식 릴리즈되었습니다. 바로 적용을 하려다 조금 기간을 두고 적용하자는 의견이 있어 쪼-금 두고 봤습니다. 두 달 정도 시간이 지나 Chart 4.0 개발에 Prettier2.0을 적용

meetup.nhncloud.com

https://inpa.tistory.com/entry/VS-Code-%E2%8F%B1%EF%B8%8F-%ED%95%9C%EB%B0%A9-%EC%BD%94%EB%93%9C-%ED%8F%AC%EB%A7%B7%ED%84%B0-Prettier-%EB%8F%84%EA%B5%AC-%EC%84%A4%EC%A0%95

[VS Code] Prettier 도구 설정법 - 한방 코드 포맷터

VSCode - Prettier Visual Studio Code에서는 사용자 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리해주는 확장프로그램이 존재한다. 설치를 완료하면, 에디터 밑부분에 Prettier: ✔ 표시가

inpa.tistory.com

[React]　React-icon에 Styled Components 적용하기

Olivia Kim — Sat, 13 May 2023 15:36:13 +0900

1. React icon, Styled Components 설치

yarn add react-icons styled-components

2. React icon에서 사용할 아이콘 import

import { FaHeart } from 'react-icons/fa';

3. Styled Compoenets를 사용해 아이콘에 스타일 적용

import React from 'react';
import { FaHeart } from 'react-icons/fa';
import styled from 'styled-components';

const Heart = () => {
  return (
    <>
      <StyledIcon />
    <>
  );
};

export default Heart;

const StyledIcon = styled(FaHeart)`
  color: red;
  font-size: 24px;
`;

[HTML / 시맨틱 마크업]　폼 (Form) - Textarea, Buttons

Olivia Kim — Tue, 9 May 2023 01:05:27 +0900

Textarea

<textarea></textarea>

멀티라인 일반 텍스트 편집 컨트롤을 나타낸다.

　　cf. <input type="text" /> 는 간단한 한 단락의 글만 가능하다.

속성

autocomplete	컨트롤 값이 브라우저에 자동으로 완성될 수 있는지의 여부를 나타낸다. (on/off)
autofocus	페이지가 로드됐을 때, 포커스를 오버라이드(ex. 사용자가 다른 컨트롤 폼에 타이핑)하지 않는다면, 폼 컨트롤이 입력 포커싱될지 지정한다. 이때, 문서에서 오직 하나의 폼 관련 요소만 이 속성이 지정될 수 있다.
cols / rows	textarea의 너비/높이를 지정한다. (CSS에서 height, width로 더 손쉽게 지정 가능)
disabled	사용자가 컨트롤과 상호작용할 수 없도록 한다.
maxlength / minlength	사용자가 입력할 수 있는 문자(Unicode points)의 최대/최소 개수를 지정한다.
placeholder	컨트롤에 입력할 수 있는 항목에 대한 안내로, 캐리지 리턴이나 개행이 포함되어서는 안된다.
readonly	사용자가 컨트롤의 값을 수정할 수 없다는 것을 가리킨다. cf. disbled 속성과 다르게 readonly 속성은 사용자가 컨트롤을 클릭하거나 선택하는 것을 막지 않으며 컨트롤의 값은 폼과 함께 제출된다.
required	사용자가 폼을 제출하기 전 반드시 값을 채우도록 한다.

[참고] 캐리지 리턴(Carriage Return) : 현재 위치를 나타내는 커서를 틀 맨 앞으로 이동
[참고] 라인피드(Line Feed) : 커서의 위치를 아랫줄로 이동
[참고] 윈도우에서는 이 두 동작을 합쳐 Enter 동작을 해냄

Buttons

양식 제출용 버튼이 아니라면 type 특성을 button으로 지정해둬야 한다.

특성

autofocus	페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타낸다. 문서 내 하나의 요소만 해당 특성을 가질 수 있다.
disabled	버튼과 사용자의 상호작용을 막는다.
form	▪️ 같은 문서에 존재하는 <form> 요소의 id 특성 값을 사용해 버튼과 form을 연결한다. 해당 특성 이용 시 버튼을 form 요소에 넣지 않고도 연결할 수 있고, 조상 중 <form>이 있더라도 소유자를 재정의할 수 있다. ▪️ 이때, form 특성을 지정하지 않았으나 조상 중 form 요소가 존재하면 해당 form과 연결된다.
formaction	▪️ <button>이 제출 버튼이면서 제출한 정보를 처리할 URL을 지정한 경우, 버튼 양식 소유자가 가진 action 특성보다 우선한다. ▪️ 이때, 양식 소유자가 존재하지 않으면 영향을 주지 않는다.
formenctype	▪️ <buttton>이 제출 버튼인 경우, 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정한다. ▪️ 인코딩 형식을 지정한 경우 버튼 양식 소유자가 가진 enctype 특성보다 우선한다. 　 application/x-www-form-urlencoded : 기본값 　 multipart/form-data : type 특성이 file인 <input>이 존재하는 양식에 사용한다. 　 text/plain : 디버깅 전용으로 명세에 추가된 값으로, 실제 양식 제출 시 사용해서는 안된다.
formmethod	▪️ <button>이 제출 버튼인 경우, 양식을 서버로 제출할 때 사용할 HTTP 메서드(GET \| POST)를 지정한다. ▪️ 지정한 경우, 버튼의 양식 소유자가 가진 method 특성보다 우선한다.
formnovalidate	▪️ <button>이 제출 버튼인 경우, 양식 제출 시 유효성 검사를 하지 않겠다는 것을 지정한다. ▪️ 지정한 경우, 버튼의 양식 소유자가 가진 novalidate 속성보다 우선한다.
formtarget	▪️ <button>이 제출 버튼인 경우, 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있다. ▪️ 지정한 경우, 버튼의 양식 소유자가 가진 target 특성보다 우선한다. 　 _self : 응답을 현재 브라우징 맥락에 표시하며, 기본값이다. 　 _blank : 응답을 새로운 브라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다. 　 _parent : 응답을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않을 시 _self와 동일하게 나타난다. 　 _top : 응답을 최상단 브라우징 맥락에 표시한다. 부모가 존재하지 않으면 _self와 동일하게 행동한다.
name	버튼의 이름으로, 버튼의 value 특성과 함께 양식 데이터의 일부를 구성한다.
value	버튼의 초기값으로, 버튼의 name 특성과 함께 양식 데이터의 일부를 구성한다.

button과 input

input은 value 특성에 텍스트값밖에 지정할 수 없다.
하지만 button은 내부 HTML 콘텐츠(<em>, <strong>, <img>) 뿐만 아니라 ::after와 ::before 의사 요소를 사용하는 복잡한 렌더링도 가능하다.

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea

<textarea> - HTML: Hypertext Markup Language | MDN

HTML <textarea> 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

<button>: 버튼 요소 - HTML: Hypertext Markup Language | MDN

HTML <button> 요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전

developer.mozilla.org

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME

구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.

www.goorm.io

[HTML / 시맨틱 마크업]　폼 (Form) - Radio & Checkbox, Select & Option

Olivia Kim — Sun, 7 May 2023 18:51:00 +0900

Radio

<input type="radio" name="key(그룹)" value="value값(상세값)" />

임의의 그룹 내에서는 여러 값 중 단 하나만 선택할 수 있다.

　 name : name의 값이 같은 것 중 하나를 선택한다.

　 value : 선택했을 때 전달될 값을 나타낸다.

　 checked : 해당 버튼을 선택된 상태로 만든다.

radio 버튼은 체크박스 버튼과 달리 선택을 해제할 수 없다.

Checkbox

<input type="checkbox" name="key(그룹)" value="value값(상세값)" />

사용자가 여러 선택 사항 중에서 하나 이상의 값을 선택할 수 있게 한다.

　 name : 전달할 값의 이름을 나타낸다.

　 value : 전달할 값을 나타낸다. value 속성이 생략된 경우 기본 값은 on이다.

　 checked : 해당 버튼을 선택된 상태로 만든다.

Select

<select name="(서버로 전송할 데이터의 이름)" id="(<label>과 연결해 접근성 향상)">
　　　<option value="(자신이 선택됐을 때 값으로써 사용할 특성)" ></option>
　 </select>

특성

multiple : 다수의 항목을 동시에 선택할 수 있도록 한다. (윈도우는 ctrl + 클릭)
size : 한번에 노출되는 항목의 수를 조절한다.
그 외 required, autofocus, disabled 등 일반적인 양식 입력 요소의 특성도 사용 가능하다.

Option

<select>, <optgroup>, <datalist> 요소의 항목을 정의한다.
<option>을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있다.

[참고] <optgroup>

<optgroup> 요소 안에 option 배치 시 해당 그룹 내 배치 시 드롭다운 내에서 옵션 그룹을 나눌 수 있다. (그룹 라벨은 선택되지 않음)

<select name="city">
    <optgroup label="경기도">
        <option value="0">고양</option>
        <option value="1">과천</option>
        <!-- ... -->
    </optgroup>
    <optgroup label="경상도">
        <option value="2">김해</option>
        <option value="3">창원</option>
        <!-- ... -->
    </optgroup>
    <option value="4">서울</option>
</select>

[참고] <datalist>

다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담는다.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Select와 Datalist의 차이

키워드 검색의 중요성이 높아짐에 따라 별도의 프로그램없이 자동 완성 기능을 이용할 수 있도록 datalist 요소가 HTML5부터 추가되었다.
select 태그는 드롭다운 방식으로 보여지고 그 리스트 중에 선택하는 속성인 반면,
datalist는 일반적인 텍스트 필드 형태로 보여지고 마우스로 클릭하여 활성화시켜야 옵션이 보인다.
또한 목록에서 선택하는 것 뿐만 아니라, 키워드 입력 방식으로 직접 입력할 수 있다.
즉, select 태그와 달리 datalist 태그는 옵션 목록으로 사용자를 제한할 수 없다.

　 옵션 목록에 없는 내용도 사용자가 자율적으로 입력이 가능하다.

　 다른 input type에 datalist가 사용된 예제 확인하기

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/radio

<input type="radio"> - HTML: Hypertext Markup Language | MDN

radio 유형의 <input> 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용합니다. 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/checkbox

<input type="checkbox"> - HTML: Hypertext Markup Language | MDN

공문서에서 볼 법한 checkbox 유형의 <input> 요소는 기본적으로 활성화될 시에 체크되는 박스로 렌더링 됩니다. 박스의 정확한 외형은 브라우저가 실행 중인 운영체제의 시스템 구성에 따라 달라질

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/select

<select> - HTML: Hypertext Markup Language | MDN

HTML <select> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/option

<option> - HTML: Hypertext Markup Language | MDN

HTML <option> 요소는 <select>, <optgroup>, <datalist> 요소의 항목을 정의합니다. 그러므로, <option>을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.

developer.mozilla.org

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME

구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.

www.goorm.io

[HTML / 시맨틱 마크업]　폼 (Form) - 기본 구조, Input, Label

Olivia Kim — Sat, 6 May 2023 23:02:02 +0900

기본 구조

<form action="" method=""></form>

사용자로부터 인풋(Input)을 받기 위한 태그
form 요소 스타일링 시 모든 elements의 유효성을 나타내는 CSS의 :valid와 :invalid 의사 클래스를 사용할 수 있다.

1) action (필수)

action="API 주소"

해당 form을 처리할 로직이 있는 API의 서버 쪽에 접근 가능한 URL을 명시한다.
<button>, <input type="submit">, <inpnut type="image"> 요소의 formaction 특성으로 재정의할 수 있다.

[참고] formaction

<button>이 제출 버튼인 경우, 제출한 정보를 처리할 URL을 명시한다.
URL을 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선한다.
양식 소유자가 존재하지 않으면 영향을 주지 않는다.

2) method (필수)

method="GET | POST"

양식을 제출할 때 사용할 HTTP 메서드이다.

POST

양식 데이터를 요청 본문으로 전송한다.
URL에 변수(데이터)를 노출하지 않고 요청한다. (암호화 까지는 X)
데이터를 body에 포함한다.
캐싱할 수 없다.

GET

양식 데이터를 action의 URL과 ? 구분자 뒤에 이어 붙여서 전송한다. (쿼리스트링으로 전송)
URL에 변수(데이터)를 포함시켜 요청한다.　 보안에 취약하다.
데이터를 header에 포함한다.
캐싱할 수 있다.

3) 그 외 attribute

autocomplete

입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타내며, 각 요소의 autocomplete 특성이 <form>에 정의된 값을 재정의한다.
off : 브라우저가 각 항목에 자동으로 값을 채워 넣지 않는다. (로그인 양식으로 의심되는 경우 보통 무시한다.)
on : 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣는다.

enctype

method 특성이 post인 경우, enctype은 양식 제출 시 데이터의 MIME 유형을 나타낸다.
<button>, <input type="submit">, <input type="image"> 요소의 formenctype 특성으로 재정의할 수 있다.

　 application/x-www-form-urlencoded : 기본값

　 multipart/form-data : <input type="file">이 존재하는 경우 사용한다.

　 text/plain : HTML5에서 디버깅용으로 추가된 값이다.

[참고] MIME (Multipurpose Internet Mail Extensions)

클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다.
웹에서의 파일 확장자는 별 의미가 없으므로 각 문서와 함께 올바른 MIME 타입을 전송하도록 서버가 정확히 설정하는 것이다.
브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대개 MIME 타입을 설정한다.

novalidate

지정한 경우 양식의 유효성 검증을 건너뛴다.
특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 <button>, <input type="submit">, <input type="image> 요소의 formvalidate 특성으로 재정의할 수 있다.

target

양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 나타낸다.
가능한 값은 브라우징 맥락 (탭, 창, <iframe>)의 이름 또는 키워드이다.
지정한 경우, 버튼의 양식 소유자가 가진 target 속성보다 우선한다.
<button>, <input type="submit">, <input type="image"> 요소의 formtarget 특성으로 재정의할 수 있다.
키워드

　 _self : 응답을 현재 브라우징 맥락에 표시하며, 기본값이다.

　 _blank : 응답을 새로운 트라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다.

　 _parent : 응답을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않을 경우 _self와 동일하게 이루어진다.

　 _top : 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시한다. 부모가 존재하지 않을 경우 _selft와 동일하게 이루어진다.

Input

<input type="type />

== 입력창 == Input field
웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
<input> 요소가 강력한 이유는 다양한 속성 때문이며, 그중에서도 type이라는 attribute가 제일 중요하고 꼭 명시해야 한다.

주요 type

<!-- input 태그에 공통적으로 사용할 수 있는 attribute -->
<input type="text" placeholder="ID를 입력하세요" minlength="5" maxlength="13" required />
<input type="text" placeholder="이름을 입력하세요" />
<input type="text" value="직장인" disabled />
<input type="email" placeholder="이메일을 입력하세요">
<input type="password" placeholder="비밀번호를 입력하세요" />
<input type="url" placeholder="포트폴리오 URL을 적어주세요" />
<input type="number" placeholder="나이를 입력하세요 (12세 이상~49세 이하)" min="12" max="49" />
<input type="file" accept=".png, .jpg">
<input type="submit" value="제출하기">

text, email, password, url, number, file, submit

　 file에서 accept을 이용해 업로드할 파일의 형식을 제한할 수 있다.

　 (cf. image/*, audio/*, video/* 등은 모든 이미지 파일, 모든 오디오 파일, 모든 비디오 파일을 허용하겠다고 지정하는 것이다.)

[참고] input:submit과 button의 차이

먼저, 기능적인 차이는 없다.
다만 W3C의 공식문서에 따르면 button이 '더 풍부한 렌더링(=richer rendering)'을 할 수 있다고 명시하고 있다.
여기서 풍부한 렌더링이란, 아래 예시코드와 같이 이미지 요소를 포함한 다른 요소를 손쉽게 넣을 수 있기에 더 풍부한 렌더링 옵션을 제공한다고 말할 수 있다.

<button type="submit">
  <img src="/assets/images/icon-confirm" alt="" />
  제출하기
</button>

기능 상 완전히 동일하다면 의미가 더 명확한 button을 쓰는 게 더 나을 수도 있다. (개인적인 선호)

그 외 type

checkbox	단일값을 선택하거나 선택 해제할 수 있음
color	색을 지정할 수 있는 컨트롤로, 브라우저가 지원하는 경우 활성화 시 색상 선택기를 열어준다.
date	날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤로, 브라우저가 지원하는 경우 활성화 시 날짜를 선택할 수 있는 달력 등을 열어준다.
datetime-local	날짜와 시간을 지정할 수 있는 컨트롤로, 시간대는 지정할 수 없다. 브라우저가 지원하는 경우 활성화 시 날짜를 선택할 수 있는 달력과 시계 등을 열어준다.
hidden	보이지 않지만 값은 서버로 전송하는 컨트롤이다.
image	src 특성에 특정한 이미지로 나타나는 시각적 제출 버튼으로, 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여준다.
month	연과 월을 지정할 수 있는 컨트롤로, 시간대는 지정할 수 없다.
radio	같은 name값을 가지 여러 개의 선택 중에서 하나의 값을 선택하게 하는 라디오 버튼이다.
range	값이 가려진 숫자를 입력하는 컨트롤로, 디폴트값이 중간 값인 범위 위젯으로 표시된다. 접속사 min과 max 사이에 사용되며 수용 가능한 값의 범위를 정의한다.
reset	양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼이나 권장되지는 않는다.
search	검색 문자열을 입력하는 한 줄 텍스트 필드로, 줄바꿈 문자는 입력값에서 자동으로 제거된다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함되며, 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신 검색 아이콘을 표시한다.
tel	전화번호를 입력하는 컨트롤로, 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.
time	시간대가 없는 시간값을 입력하는 컨트롤이다.
week	시간대가 없는 주-연의 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤이다.

추가 특성

▼ 하단 캡처 참고

tel의 pattern

<input type="tel" pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}" />

위와 같이 tel에게 pattern을 걸어 '010-1234-5678' 등의 입력을 유도할 수 있다.
휴대폰 가운데자리 숫자가 3자리 또는 4자리일 수 있으므로 ','를 찍어 3, 4자리 모두 가능하게 설정한다.
이때, 정밀한 유효성검사가 아닌 패턴에 맞게 작성했는지 정도만 체크한다. (정밀한 검사는 js로)

Label

<label for="input의 ID">라벨 이름</label>
　 <input type="text" id="input의 ID" />

사용자 인터페이스 항목의 설명을 나타낸다. (폼 양식의 특정 input에 이름을 붙임)
이때, for에 ID값을 적더라도 #를 붙이지 않는다.
label 안에 input을 중첩시킬 수 있다. 이 경우는 연관이 암시적이므로 for 및 id 속성을 명시하지 않아도 된다.

<label>Do you like peas?
  <input type="checkbox" name="peas" />
</label>

label을 사용하는 이점

시각적으로 관련이 있을 뿐만 아니라 스크린리더는 폼 입력(form input)에서 label을 읽어서 보조기술 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있도록 한다.
관련 label을 클릭하여 input 자체에 초점을 맞추거나 활성화를 시킬 수 있다.

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/form

<form> - HTML: Hypertext Markup Language | MDN

HTML <form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.

developer.mozilla.org

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME

구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.

www.goorm.io

[HTML / 시맨틱 마크업]　인용 (Quotations)

Olivia Kim — Fri, 5 May 2023 10:30:55 +0900

blockquote

<blockquote>인용 내용</blockquote>

어떤 문단이나 내용 전체가 하나의 인용문일 경우 사용한다.
q보다 더 많이 사용하는 편이다.
주로 들여쓰기를 한 것으로 그려진다.
인용문의 출처 URL은 cite 특성으로 나타낸다.

q

<q></q>

문장 내에 작게 들어가는 인용문이 있을 경우 (별도 블록을 쓰지 않아도 될 짧은 인용문) 사용한다.
대부분의 브라우저에서 앞과 뒤에 따옴표를 붙여 표현된다.
인용문의 출처 문서나 메시지, URL은 cite 특성으로 나타낸다.

[참고] cite

<cite></cite>

저작물의 출처를 표기할 때 사용한다.
보통 브라우저에서 기울임꼴로 그려진다.

인용 및 출처 표기 예시

전체가 하나의 인용문으로 <blockquote>로 감싸준다.
<p> 태그를 이용해 문단 별로 나눠준다.
문서 내 짧은 인용문은 <q> 태그를 통해 나타낸다.
큰 따옴표를 굳이 쓰지 않아도 q 태그가 문장의 앞 뒤에 따옴표를 덧붙여준다.
<blockquote> 내에 cite 특성을 이용해 출처 URL을 나타낸다.
<cite> 태그로 인용문의 출처를 나타낸다.

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote

<blockquote>: 인용 블록 요소 - HTML: Hypertext Markup Language | MDN

HTML <blockquote> 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/q

<q>: 인라인 인용문 요소 - HTML: Hypertext Markup Language | MDN

HTML <q>요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. <q>는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인

developer.mozilla.org

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME

구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.

www.goorm.io

[HTML / 시맨틱 마크업]　정의 목록 (Description List)

Olivia Kim — Fri, 5 May 2023 10:00:17 +0900

정의 목록을 사용하는 경우

1. 용어를 정의할 때

2. key-value로 정보를 제공할 때

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

정의 목록을 사용하는 이유

단순히 용어 정의 시 사용할 수도 있지만 key-value 형태의 정보를 전달 할 때 <span>, <div>보다 훨씬 더 풍부한 의미를 전달할 수 있기도 하다.
보통 손으로 필기할 때, 어떤 용어에 대한 정의를 나타내는 경우 콜론(:)이나 세미콜론(;)을 사용하곤 한다. 하지만 HTML 문서를 작성할 때는 콜론이나 세미콜론으로 나타낸다고 해서 브라우저가 용어에 대한 정의라고 이해하지 않는다. 그렇기 때문에 브라우저가 이해할 수 있도록 아래의 태그를 사용하여 용어에 대한 정의를 하고 있음을 나타내는 것이다.

dl

== description list
정의 목록 태그로, 용어를 사전적으로 정의하거나 설명할 때, 혹은 key-value 형태로 정보를 제공할 때 사용한다.
<dl>의 직계자식요소로는 <dt>와 <dd> 그리고 <div>만 올 수 있다.

dt

== description term
용어 태그로, 정의 혹은 설명 목록의 정의하고자 하는 용어, 혹은 key-value에서 key값을 나타낸다.
보통 <dt> 요소의 뒤에 용어를 정의하는 <dd> 요소가 오지만, 여러 개의 <dt> 요소를 연속으로 배치하고 <dd> 요소로 앞의 모든 <dt> 요소를 서술할 수도 있다.

dd

== description data
앞선 용어 <dt>에 대한 정의나 설명, 혹은 key-value에서 value 값을 제공한다.
<dt>가 여러 개인데 <dd>가 하나만 있어서는 안된다.
<dt>나 <dd>가 각자 하나씩만 (key-value 매칭 없이) 있어서는 안된다.

dfn

현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다.
<dfn> 태그는 <dl>의 직계자식 요소가 될 수 없다.
<dfn> 요소 안의 텍스트는 브라우저에서 자동으로 기울임꼴 표시된다.
약어에 대한 구체적인 설명을 나타낼 수 있다.

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl

<dl> - HTML: Hypertext Markup Language | MDN

HTML <dl> 요소는 설명 목록을 나타냅니다. <dl>은 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dt

<dt> - HTML: Hypertext Markup Language | MDN

HTML <dt> 요소는 설명 혹은 정의 리스트에서 용어를 나타냅니다. <dl> 요소 안에 위치해야 합니다. 보통 <dd> 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 <dd> 요소로 한꺼번

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd

<dd>: The Description Details element - HTML: HyperText Markup Language | MDN

The <dd> HTML element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).

developer.mozilla.org

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME

구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.

www.goorm.io

[HTML / 시맨틱 마크업]　리스트 (Lists)

Olivia Kim — Thu, 4 May 2023 10:30:41 +0900

ol

<ol></ol>

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol type="i" start="4" reversed>
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

== ordered list
순서가 중요한 목록 (ex. 요리법, 실시간 목록 등...)
보통 숫자 목록으로 표현된다.

특성

reserved : 내부에 지정한 항목이 역순으로 배열된 것인지 나타낸다.
start : 항목을 셀 때 몇 번째 항목부터 시작할 것인지 나타낸다.
type : 항목을 셀 때 사용할 카운터 유형을 나타낸다.

a, A, i, l, 1 (기본값)

ul

<ul></ul>

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

== unordered list
순서가 중요하지 않은 목록
보통 불릿 마커로 표현된다.
ul과 ol은 중첩하거나 교차해서 사용할 수 있다.

li

<li></li>

<ol type="I">
    <li value="3">third item</li>
    <li>fourth item</li>
    <li>fifth item</li>
</ol>

== list item
목록의 항목을 나타내며, ul과 ol의 자식 요소는 무조건 li만 가능하다. (li 아래에 a 태그 등을 쓰는 것은 상관없다!)
메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타낸다.

특성

value : value를 지정한 항목을 뒤따르는 항목은 이 값에서부터 번호를 매긴다. 다만, 비정렬 목록(<ul>)과 메뉴(<menu>)에서는 아무 의미가 없다.
type : 항목을 셀 때 사용할 카운터 유형을 나타낸다.

a, A, i, l, 1 (기본값)

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul

<ul> - HTML: Hypertext Markup Language | MDN

HTML <ul> 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/li

<li> - HTML: Hypertext Markup Language | MDN

HTML <li> 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록(<ol>), 비정렬 목록(<ul>, 혹은 메뉴(<menu>) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol

<ol> - HTML: Hypertext Markup Language | MDN

HTML <ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.

developer.mozilla.org

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME

구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.

ONE LIFE 2 LIVE

[서평 | 리뷰] 「개발자 기술면접 노트」

[JavaScript] 자바스크립트의 실행 컨텍스트(Execution Context) 완벽 정리 (ft. 스코프, TDZ, 호이스팅)

실행 컨텍스트란?

실행 컨텍스트의 종류

✅ 1) 전역 실행 컨텍스트 (Global Execution Context)

✅ 2) 함수 실행 컨텍스트 (Function Execution Context)

✅ 3) eval 실행 컨텍스트 (Eval Execution Context)

실행 컨텍스트의 구성 요소

✅ 1) 환경 기록 (Environment Record)

✅ 2) 외부 환경 참조 (Outer Environment Reference)

✅ 3) this 바인딩 (this Binding)

실행 컨텍스트의 동작 과정

1. 전역 실행 컨텍스트 생성

2. 함수 실행 컨텍스트 생성 (함수 호출 시)

3. 콜 스택(Call Stack)에서 실행 컨텍스트 관리

실행 컨텍스트와 호이스팅(Hoisting)

✅ 호이스팅이란?

✅ 호이스팅 예제

스코프와 스코프 체인

✅ 스코프(Scope)

✅ 스코프 체인(Scope Chain)

✅ 스코프 체인 예제

실행 컨텍스트 최종 정리

[JavaScript] SSR, CSR, SSG는 무엇일까?

클라이언트 사이드 렌더링 (CSR)

CSR의 특징

서버 사이드 렌더링 (SSR)

SSR 예제

SSR의 특징

정적 사이트 생성 (SSG)

SSG 예제

SSG의 특징

SPA와 CSR의 연관 관계

SSR, CSR, SSG 비교 정리

[JavaScript] 자바스크립트의 얕은 복사(shallow copy)와 깊은 복사(deep copy)

자바스크립트의 데이터 타입

원시 값 할당 방식

할당 방식

예시

객체 값 할당 방식

할당 방식

예시(1)

예시(2)

얕은 복사

예시 코드 및 개념

구현 방법

스프레드 연산자 ({ ...obj })

Object.assign() 메서드

깊은 복사

개념

구현 방법

Lodash의 _.cloneDeep() 메서드

structuredClone() (최신 브라우저만 지원)

장점

[JavaScript] 자바스크립트의 데이터 타입

데이터 타입

개요

데이터 타입의 구분

원시 타입

객체 타입

데이터 할당 방식

원시 값의 할당

객체 값의 할당

[방송통신대학교] 방통대 편입, 직장과 병행하며 졸업하는 방법 A to Z (ft. 수강신청, 과제물, 시험 방법)

들어가기에 앞서:

학교 중요 스케줄 확인하기

1. 수강신청 및 등록금 납부 날짜

2. 강의를 들을 수 있는 기간

3. 중간과제물 제출 기간

4. 기말고사 신청 기간

5. 기말고사 기간

성적 산정 방법

강의 듣는 법

중간고사_출석수업 듣는 법

비대면 출석수업일 경우

대면 출석수업일 경우

중간고사_과제물 제출하는 법

기말고사_기말고사 보는 법

기말고사_과제물 제출하는 법

[서평 | 리뷰]　「개발자 기술면접 노트」

[JavaScript]　자바스크립트의 실행 컨텍스트(Execution Context) 완벽 정리 (ft. 스코프, TDZ, 호이스팅)

[JavaScript]　SSR, CSR, SSG는 무엇일까?

[JavaScript]　자바스크립트의 얕은 복사(shallow copy)와 깊은 복사(deep copy)

[JavaScript]　자바스크립트의 데이터 타입

[방송통신대학교]　방통대 편입, 직장과 병행하며 졸업하는 방법 A to Z (ft. 수강신청, 과제물, 시험 방법)

[서평 | 리뷰]　「전문가를 위한 리액트」

[JavaScript]　자바스크립트의 동기, 비동기 프로그래밍의 개념

[서평 | 리뷰]　「더 나은 웹개발을 위한 가이드」

[HTML / JavaScript]　canvas 태그로 화면에 그림 그리기

[1년차 회고]　무언가를 찾아 떠나는 여정은 항상 초심자의 행운으로 시작해서 잔인한 시험으로 끝난다

[서평 | 리뷰]　「컴퓨터 구조와 운영체제 핵심 노트」

[JavaScript]　객체 내부에서의 getter, setter

[JavaScript]　객체의 속성에 접근하는 점 표기법(마침표 표기법)과 대괄호 표기법 (ft. 좋은 코드)

[JavaScript]　특수 언어가 있는 문자열 배열을 정렬하는 방법, localeCompare()

[서평 | 리뷰]　「된다! Do it! Node.js 프로그래밍 입문」

[What I Learned]　2주간 배운 것들 간단하게 정리하기

[What I Learned]　2주간 배운 것들 간단하게 정리하기

[팀 프로젝트]　리그 오브 레전드 유저 신고 커뮤니티 DIEDIE.gg 회고