행사 프로세스

1. Frontend Fundamentals 디스코드 채널 입장 (선착순 마감)
2. 실제 토스에서 진행했던 과제를 직접 풀고 Pull Request로 과제 제출
3. 풀어본 과제를 포함한 다양한 주제에 대해 github Discussion 공간을 활용하여 토론 진행
4. 유튜브 라이브에서 라이브 코딩을 통하여 토스의 과제 출제의도 설명 및 질의응답

참여하게 된 계기

회사에 다니면서 프론트엔드 코드를 작성하는 게 일상이 되었지만 항상 코드에 바람이 솔솔 통하는 허전한 구멍이 있다는 느낌을 버릴 수 없었다. 코드에는 정답이 없다는 핑계? 아닌 핑계로 그 구멍을 채워 왔지만 결국은 더 큰 구멍으로 되돌아왔다.

우연히 토스에서 실제 채용에 사용되었던 과제를 모의고사 형식으로 풀어보며 그들이 코드를 대하는 방식에 대해 공유하고 더 나아가 토스 개발자?로 일하고 싶은 사람들에게 과제 전형에 어떻게 대처해야 하는지에 대한 가이드라인을 제공하는 행사를 알게 되었고 구멍을 메울 수 있을 것 같다는 생각에 참여하기로 결심했다.

과제 풀이

주제: 적금 계산기 (적금 상품 추천)
제한시간: 2시간
구현 포인트: 추상화와 확장성 있는 구현

처음 과제 노션 페이지를 열었을 때 시험이라는 것을 볼 때 어김없이 느껴지는 새로운 것에 대한 어색함?이 내 생각회로를 가로막기 시작했다.

글이 잘 읽히지 않자 곧바로 코드를 보기 위해 개발서버를 띄우고 localhost에 접속해 1번부터 풀기 시작했다. 회사에서 작성하는 익숙한 구조로 코드를 나누고 유틸함수 구현에는 AI(코파일럿)을 적극 활용했다.

제한시간 안에 모든 내용을 구현하지 못했지만 현재 나의 실력과 코딩 스타일을 재확인 해볼 수 있는 시간이었다.

토론의 시간

사실 가장 기대한 시간 중 하나였다. github Discussions에서 여러 주제로 토론이 이어졌고 좋은 코드에 대해 진심인 분들이 많다는 것을 느꼈다. 정말 좋은 주제들이 많이 올라왔고 각자 자신의 생각을 자유롭게 공유해주셨다. 특히, 토스측 관계자분들의 인사이트 꽉찬 댓글들이 인상 깊었다.

라이브 코딩

토스측 관계자분들이 과제 응시생의 입장에서 직접 과제를 풀어보며 출제의도를 설명하고 중간중간 댓글로 올라오는 질문에 답변해주시는 시간이었다. 이번 행사의 꽃이라고 생각이 들어 말 하나하나 놓치지 않으려고 정말 집중해서 들었던 기억이 난다.

내게 남은 것

1. 네트워킹 공간: 좋은 코드에 관심 있는 사람들의 모임이 생긴 느낌이라 좋았다.
2. 추상화와 확장성에 관한 인사이트: 기본과 본질에 대해 항상 생각해야 한다는 생각이 들었다.
3. 리팩토링이 필요한 코드: 눈으로 보기만 해서 모든 게 내 것이 되었다는 착각을 해서는 안된다. 행사를 통해 얻은 인사이트를 바탕으로 코드를 개선해 나아갈 필요가 있다.

기억에 남는 말

1. 옵셔널과 null은 전염된다.
2. input은 input답게.
3. 비즈니스 로직은 내가 바꾸면 큰 일 나는거.

UX 엔지니어를 위한 첫 발걸음

요즘 회사가 많이 바빠서 주말 출근길, 2호선 지하철이 양화대교 근처를 지날 즈음 우연히 인스타를 보다가 재미있는 작업 영상이 눈에 들어왔다.

크리에이티브, 인터랙티브를 항상 마음에만 품고 정확한 뜻이 뭔지도 모르는 그 어중간한 상태에서 그 영상을 봤는데, 아! 이게 진정한 크리에이티브이고 인터랙티브한 무언가가 아닐까하는 생각에 크리에이티브 코더인 "정효"님의 밋업 행사 참여 신청을 곧바로 넣었다.

회사 업무로 늦참 문의드린 메일...! 따뜻하신 "정효"님 감사합니다!

처음 참여해보는 네트워킹 행사였고 과연 내가 기대하는 만큼 의미있는 시간일까에 대한 고민도 있었던건 사실이다.

결론부터 말하자면, 좋았다..!

처음 밋업 장소에 도착하여 흐르는 땀을 닦고 (더 늦을까봐 뛰었던 나 ㅋㅋ) 새로운 장소와 새로운 사람들의 어색함을 푸는 과정이 지나고 행사에 본격적으로 빠져들었을 때 비로소 내가 여기에 온 이유를 생각하면서 더 의미있는 시간으로 바뀌었다.

행사는 컴퓨터 아트에 조금 더 초점이 맞춰져 있었다고 생각하는데 나는 이걸 어떻게 UX로 연결지어 서비스를 더욱 사용자 친화적이게 만들 수 있을지에 대해 계속 생각했다.

절차적 생성 (Generator)은 사람이 직접 일일이 모든걸 만들어내는 작업을 넘어 알고리즘을 기반으로 어떤 패턴이나 자연현상을 표현하기 위해 고안된 일종의 도구?라는 느낌을 받았다. 나는 이 도구(코딩으로 구현할 수 있는)를 사용하여 결과물을 만들어내는 것을 크리에이티브 코딩이라고 정의했고 알고리즘에 사용되는 여러 변수들을 조절할 수 있게 만들어 누구나 결과물을 커스텀할 수 있는 과정을 인터랙티브라고 정의했다.

행사에서 소개된 몇가지 유용한 툴과 결과물들

https://processing.org/ https://www.sojamo.de/libraries/controlP5/#examples https://vvvv.org/ https://p5js.org/ https://fonts.studiofeixen.ch/editor/ https://tools.dia.tv/ https://spacetypegenerator.com/ https://schultzschultz.com/tools/

정말 멋진걸 만드는 사람들이 많다는 걸 느꼈다. "나도 하나 만들어서 배포해봐야지"라는 목표가 생겼다.

2부에는 행사 참여자들끼리 네트워킹할 수 있는 시간이었다. 사실 디자인쪽 계열 사람들이 많이 참여했을거라 생각했는데 의외로 컴퓨터쪽에 종사하시는 분들이 많았다..! 학생분들도 계셨는데 벌써부터 내가 뭘 좋아하는지 알고 그쪽으로 노력하는 모습이 대단하고 부럽다고 느꼈다.

각자 어떤 이유로 크리에이티브/인터랙티브에 관심을 가지고 스스로가 추구하는 방향을 여러 형태로 표현해낸 결과물들을 소개하고 이야기 나눌 수 있는 시간이었다.

"아쉬움이 남는 시간은 내게 의미있는 시간이다."

내가 가지고 있는 신념에 딱 맞는 시간이었고 이 신념이 깨질 때까지는 꾸준히 참여하고 싶은 그런 밋업이었다.

입사하고 보니 기획까지..?

사실 기획까지 하게 될 줄은 몰랐고 나의 업무 범위를 넘어선다는 생각도 많이 했지만 _피할 수 없으면 즐겨라_는 말이 있지 않은가. 않은가...? 아닌가..? 😭

기본 요구사항과 유저스토리는 노션으로 작성했다.

분명 누락된 것들이 많이 있겠지만 초반에 문서화를 해 놓으니 뭘 해야하는지가 명확해졌고 자연스럽게 개발 속도도 빨라졌다.

잠깐 회사 이야기를 해보자면...

회사에서는 노션으로 작성된 요구사항과 유저스토리를 각 서비스 담당자들이 정독 후 궁금한 점이나 추가/수정이 필요한 부분을 자유롭게 공유한다. 정돈된 요구사항과 유저스토리를 기반으로 프론트인 나는 mock 데이터를 기반으로 UI와 UX를 설계한다. 나는 개인적으로 이 기간을 제일 좋아한다. 프론트의 고유한 강점이자 경쟁력인 사용자 인터페이스와 사용자 경험을 고민할 수 있는 시간이기 때문이다. 레퍼런스를 뒤져보고 스타일링 코드를 주무르며 실험하기도 한다.

반면, 이 기간이 지나면 고통의 시작이다.

아직 주니어라 그런지 몰라도, 프론트는 1. 타이트한 개발 일정과 2. 기획의 수정 그리고 심지어는 3. 백엔드 에러까지 커버해야하는 강한 멘탈이 필요한 것 같다.

꼭꼭 약속해~

자바스크립트에서 Promise(프로미스)는 어떤 작업이 완료된 후 그 결과를 응답하겠다는 "약속"을 표현하는 객체입니다. 단어의 뜻(promise: 약속, 약속하다)과 아주 찰떡인 것 같습니다.

new Promise(executor)

프로미스는 위와 같이 생성하는데, Promise 객체는 내부에 선언함과 동시에 즉시 실행되는 executor 함수를 받습니다.

new Promise((resolve, reject) => {
  // 비동기 작업 실행
  // 작업 성공 → resolve()
  // 작업 실패 → reject()
});

executor 함수는 (resolve, reject) => {} 로 표현되는데,

여기서 중요한 포인트:

• executor 함수는 resolve와 reject라는 두 가지 콜백 함수를 인자로 받습니다.
• 비동기 작업이 성공하면 resolve()를 호출해 약속을 이행(fulfilled)합니다.
• 오류가 발생하면 reject()를 호출해 약속을 거부(rejected)합니다.

예를 들어 서버로부터 데이터를 받는 비동기 통신을 한다고 가정해보자.

1. 비동기 통신을 위해 Promise 객체가 선언되고 선언됨과 동시에 executor 함수가 실행된다.
2. executor 함수 안에 있는 서버와 통신하는 비동기 작업이 실행된다.
3. 비동기 작업이 성공하면 resolve(), 실패하면 reject()가 호출된다.

비동기 통신의 대표인 fetch 함수를 보면 이해하기 쉽다.

function fetch(url, options) {
  return new Promise((resolve, reject) => { // Promise 객체가 선언되고 executor 함수가 즉시 실행된다.
    const xhr = new XMLHttpRequest();
    xhr.open(options?.method || "GET", url); // 비동기 작업

    // 성공 (resolve 호출)
    xhr.onload = () => {
      resolve(new Response(xhr.responseText, { status: xhr.status }));
    };

    // 실패 (reject 호출)
    xhr.onerror = () => {
      reject(new TypeError("Network request failed"));
    };

    xhr.send(options?.body || null);
  });
}

🚀 주요 Promise 고급 기능 정리

1. Promise.all() - 여러 Promise를 병렬 실행하고, 전부 완료될 때까지 기다림.
2. Promise.allSettled() - 성공/실패 상관없이 모든 Promise의 결과를 배열로 반환 실패가 있어도 멈추지 않음.
3. Promise.race() - 가장 먼저 완료된 Promise의 결과만 반환 여러 요청 중 가장 빠른 응답만 사용
4. Promise.any() - 여러 Promise 중 첫 번째로 성공한 것만 반환. (실패는 무시)
5. Promise.resolve() / Promise.reject() - 즉시 resolve/reject된 Promise 생성.

회사에서 보내는 시간이 헛되지 않게

개발자로 일한다는 건, 성과를 보여줘야 하는 매우 머리 아픈 일이다. 성과에 집중하며 달리다보면 남는 것은 '성과'뿐이라는 생각이 많이 든다. 실제 나의 성장은 과정에 있었지만 쉽게 잊혀졌다. 이번 기회에 처음으로 되돌아와 그 과정을 반복하려고 한다.

기술스택은 회사에서 사용하는 것들 위주로 꾸려보았다.

🖥️ 프론트엔드

• Next.js 서버 컴포넌트는 아직 조심스럽지만, SSR이 기본이라 나름 SEO도 챙길 수 있어 좋다.

• Tailwind CSS 진짜 손에 익으면 다른 CSS 프레임워크는 못 쓰겠다. 클래스 이름 하나로 다 되니까 넘 편하다 😎

• TypeScript JS의 안전벨트. 에러는 빨리 알수록 좋다.

• TanStack Query 회사에서는 SWR을 쓰지만, 이번엔 TanStack Query를 한 번 써볼 생각이다. 다양한 기능이 내장돼 있어서 학습 겸 경험 삼아 써보고 싶다.

• shadcn/ui 회사에선 daisyUI를 쓰는데, 개인적으로 마음에 안든다. shadcn이 훨씬 깔끔하고 커스터마이징도 편한 느낌.

💾 백엔드 & 데이터베이스

• FastAPI AI 회사라 그런지 Python을 많이 쓰게 되는데, 자연스럽게 FastAPI에도 익숙해졌다. Swagger도 자동으로 되고, 참 매력적이다.

• PostgreSQL 회사에서도 쓰고 있고, 안정성과 기능성 면에서 마음에 든다. 근데 아직 DB에는 자신이 없어서, 이번 기회에 공부 제대로 할 계획.

🧠 AI도 같이 씁니다

저는 GitHub 학생팩 덕분에 2년 동안은 돈이 굳었네요 개인적으로 코파일럿 좋아하는데, 무료?! 관심 있으신 분들은 여기로 (정말 유용한 것들을 무료로 사용할 수 있습니다)

• 디자인 초안: Claude Sonnet 4가 꽤 잘 뽑는다. Claude 4.5도 나왔지만 아직 체감되는 변화는 크진 않은 느낌?

• 로직 개발: Gemini Pro 2.5가 꽤 쓸만합니다.

• 빠른 수정: 간단한 코드 수정이나 약간의 포맷 변경은 Grok이 빠르게 처리해줘서 좋습니다.

저는 웹이 더 편한 경우도 있어서 ChatGPT는 항상 띄워두고 작업 많이 합니다ㅎㅎ

🌏 인프라

회사에 와서 가장 큰 변화? 배운 거라고 하면 Docker를 잘 활용하는 방법이지 않을까 싶습니다. 익숙해지니 이것만큼 좋은 기술이 있을까 싶네요..! Docker 관련 글은 따로 작성해보겠습니다.

배포를 위한 VM은 DigitalOcean이란 서비스를 써볼건데, 이유는 사실 Github 학생팩에 200달러 무료 크레딧이 포함되어 있어서 서비스 만드는데 최대한 돈을 아껴보려고 합니다..!

또 있을까요??

생각나면 수정하러 오겠습니다.

이대로는 안되겠다..!

25년 추석연휴가 꽤 길었다. 무려.. 연차까지해서 10일..!

예전부터 개발 블로그의 필요성을 느꼈지만 막상 시작하기가 어려웠다.. (시간적 여유가 없었다는건 핑계?)

문득 좋아하는 유튜버의 말이 떠올랐다.

핑계를 조건문으로 바꾸고 그 조건문을 뒤집었을때 참이라면 그 원인을 해결하면 된다.

즉, 시간적 여유가 없다 => 개발 블로그를 시작할 수 없다.

이걸

시간적 여유가 생기면 => 개발 블로그를 시작할 수 있다.

이번에도 안하면 너는 루저~🫵👎

근데 왜 블로그?

마침 회사에서도 게시판 작업을 했었고 (까먹기 전에 내꺼 뭐라도 남겨놔야지..) 짧은 기간에 츄라이 해보기에도 좋아보여서~

메모이제이션 hook인 useMemo와 useCallback에 대해서 알아보자

useMemo

메모이제이션된 값을 반환

• 언제 사용하나요?

• 특정 값이 변할 경우에만 연산을 실행할 수 있도록 useMemo를 사용해 특정 변수에 의존하도록 등록해요.

import React, { useState, useMemo } from "react";

export default function App() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  console.log(countOne); 

  return (
    <>
      <button onClick={() => setCountOne(cur => cur + 1)}>one</button>
      <button onClick={() => setCountTwo(cur => cur + 1)}>two</button>
    </>
  );
}

-> 위 상황을 가정해보면, console.log(countOne);은 상태가 바뀌면 리렌더링되는 컴포넌트 리렌더링 조건 때문에 버튼 one을 클릭할때 뿐만 아니라 버튼 two를 클릭할때도 실행된다.

useMemo 사용

import React, { useState, useMemo } from "react";

export default function App() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  // useMemo 사용하기
  useMemo(() => {console.log(countOne)}, [countOne]);

  return (
    <>
      <button onClick={() => setCountOne(cur => cur + 1)}>one</button>
      <button onClick={() => setCountTwo(cur => cur + 1)}>two</button>
    </>
  );
}

useCallback

메모이제이션된 함수를 반환

• 언제 사용하나요? 1) 자식 컴포넌트에 props로 함수를 전달할 경우 2) 외부에서 값을 가져오는 api를 호출하는 경우

import React, { useState } from 'react';
import Info from './Info';

export default const App = () => {
  const [address, setAddress] = useState('');
  const onSave = () => {};

  return (
    <div className="App">
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <Info onSave={onSave} /> // Info 컴포넌트 리렌더링 발생
    </div>
  );
}

onChange 함수로 address가 변경되어 리렌더링이 발생하면 onSave함수가 새로 만들어지고, Info 컴포넌트의 props로 onSave함수가 새로 전달된다.

이때 Info 컴포넌트에서 이전 onSave와 이후 onSave가 다른 함수가 되어버리기 때문에 리렌더링이 일어난다.

useCallback 사용

import React, { useState, useCallback } from 'react';
import Info from './Info';

export default const App = () => {
  const [address, setAddress] = useState('');
  const onSave = useCallback(() => {}, [address]);

  return (
    <div className="App">
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <Info onSave={onSave} /> // Info 컴포넌트 리렌더링 방지
    </div>
  );
}

(추가) React.memo

컴포넌트 자체를 메모이제이션하는 방법

컴포넌트 리렌더링 조건

1. 자신의 상태가 변했을때
2. 부모 컴포넌트로부터 받은 props가 변했을때
3. 부모 컴포넌트가 리렌더링될때 -> React.memo는 요경우에 최적화

즉, 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트는 리렌더링하지 않음.

LIFO(Last In First Out) 자료구조

구현 및 사용방법 (배열)

const array = [];

const stackPush = (value) => {
    array.push(value);
}

const stackPop = () => {
    return array.pop();
}

stackPush(1); // [1]
stackPush(2); // [1, 2]
stackPop(); // [1]

2. 큐

FIFO(First In First Out) 자료구조

구현 및 사용방법 (배열, 연결리스트)

1. 배열

class Queue {
    constructor() {
          this.queue = [];
        this.front = 0;
          this.rear = 0;
    }

      enqueue(value) {
        this.queue[this.rear++] = value;
    }

      dequeue() {
        const value = this.queue[this.front];
          delete this.queue[this.front];
          this.front++;
          return value;
    }

      peek() {
        return this.queue[this.front];
    }

      size() {
        return this.rear - this.front;
    }
}

const queue = new Queue();

queue.enqueue(1); // [1]
queue.enqueue(2); // [1, 2]
queue.peek(); // 1
queue.size(); // 2
queue.dequeue(); // [1] 2

2. 연결리스트

class Node {
    constructor(value) {
        this.value = value;
          this.next = null;
    }
}

class Queue {
    constructor() {
        this.front = null;
          this.rear = null;
          this.size = 0;
    }

      enqueue(value) {
        const newNode = new Node(value);
          this.size++;
          if (this.front === null) {
            this.front = newNode;
              this.rear = newNode;
        } else {
            this.rear.next = newNode;
              this.rear = newNode;
        }
    }

      dequeue() {
        const value = this.front.value;
          this.front = this.front.next;
          if (this.front === null) {
            this.rear = null;
        }
          this.size--;
          return value;
    }

      peek() {
        return this.front.value;
    }

      size() {
        return this.size;
    }    
}

3. 해시테이블

키(key)를 해싱하여 나온 index에 값(value)을 저장하는 자료구조

구현 및 사용방법 (Object, Map, Set)

1. Object

const table = {};

table['key1'] = 100;
table['key2'] = "Hello";
console.log(table['key1']); // 100
delete table['key1'];

2. Map (set(), get() 사용)

const table = new Map();

table.set('key1', 100);
table.set('key2', "Hello");
console.log(table.get['key1']); // 100

const object = { a : 1 };

table.set(object, "A1"); // 객체를 key로 사용가능!
console.log(table.get(object)); // "A1"

3. Set (key와 value가 동일)

const table = new Set();

table.add('key1'); // {'key1'}
table.add('key2'); // {'key1', 'key2'}
table.keys(); // {'key1', 'key2'}
table.values(); // {'key1', 'key2'}

React.js의 렌더링 방식 살펴보기 - 이정환 | 2023 NE(O)RDINARY CONFERENCE (링크 - https://www.youtube.com/watch?v=N7qlk_GQRJU)

React 렌더링 프로세스

1-1. 웹 브라우저 동작 원리 (Critical Rendering Path)

1. HTML과 CSS를 브라우저가 해석하기 편한 방식으로 DOM과 CSSOM를 만든다.
2. DOM과 CSSOM를 합쳐 Render Tree(청사진)를 만든다.
3. Render Tree를 기반으로 Layout을 잡는다.
4. 화면에 그려준다.

1-2. 업데이트는 어떻게 이뤄질까?

자바스크립트 언어로 DOM을 직접 조작 -> 변경된 DOM으로 렌더링 과정을 2번부터 다시 거친다..! 즉, Reflow와 Repainting 작업이 반복된다..!

코드 예제 (비효율적인 방법)

<script>
    function onClick() {
        const $ul = document.getElementById("ul");
        for (let i = 0; i < 3000; i++) {
            $ul.innerHTML += `<li>${i}</li>`; // Reflow와 Repainting 3000번 실행
        }
    }
</script>
<body>
    <button onclick="onClick()">리스트 추가하기</button>
    <ul id="ul"></ul>
</body>

코드 예제 (효율적인 방법)

<script>
    function onClick() {
        const $ul = document.getElementById("ul");
        let list = "";
        for (let i = 0; i < 3000; i++) {
            list += `<li>${i}</li>`;
        }
        $ul.innerHTML = list; // Reflow와 Repainting 1번 실행
    }
</script>
<body>
    <button onclick="onClick()">리스트 추가하기</button>
    <ul id="ul"></ul>
</body>

효율적인 방법을 React에서 자동으로 해주고 있다..!

2-1. React 렌더링 프로세스

Render Phase + Commit Phase로 나뉨

2-2. Render Phase

컴포넌트를 계산하고 업데이트 사항을 파악하는 단계

Render Phase 1 - 컴포넌트를 호출해 결과값을 계산 (컴포넌트를 React Element로 변환하는 과정)

Render Phase 2 - React Element들을 모아 Virtual DOM 생성

2-3. Commit Phase

변경사항을 실제 DOM에 반영하는 단계

Virtual DOM -> Actual DOM 반영 -> 자바스크립트가 DOM을 수정하면 동작하는 과정 수행!

이렇게 복잡한 이유가 뭐야!

. .. ... .... ..... DOM 수정을 최소화하기 위해서...!

그럼 React에서 업데이트가 일어나면 어떻게 되나요?

같은 렌더링 프로세스를 거쳐 Next Virtual DOM을 생성하고 Prev Virtual DOM과 비교하여 수정된 부분을 Actual DOM에 반영 -> 이러한 과정을 Reconciliation(재조정)이라 부른다...

하나의 기능을 담당하는 코드 조각

특징

1. HTML, Style, JavaScript, Event, State를 가질 수 있다.
2. 트리 구조로 이뤄져있다. => 컴포넌트끼리 데이터와 메시지를 주고 받을 수 있다. (데이터는 상위에서 하위로만 전달된다. == 단방향)
3. 컴포넌트 = 함수

재사용 가능한 컴포넌트 만들기

1. UI를 추상적으로 바라보기 (공통점 찾기)

2. 컴포넌트 분류하기

- 도메인으로 분류하기
ex) User, Product...

- 역할로 분류하기
ex) Header, Nav, List, Tag...

- 크기로 분류하기
ex) Organism, Molecule, Atom...
참고 사이트 - [링크텍스트](https://kciter.so/posts/effective-atomic-design)

facebook에서 만든 오픈 소스 라이브러리

왜 쓰나요?

1. github 17만개의 star수 => 많은 개발자들로부터 사랑을 받는 중
2. 한글을 제공하는 공식문서
3. 약 800만 개의 Stack Overflow 많은 양의 데이터

특징

1. Reactive Programming => 데이터(상태)가 변하면 반응하는 방식
2. MVC 패턴에서 컴포넌트 시스템을 활용하여 View만을 관리한다.
3. 가상 돔(virtual DOM)을 사용하여 필요한 부분만 한 번에 렌더링한다.

문제를 처음보고 홀수/짝수 번째 인덱스 배열을 돌며 toLowerCase()와 toUpperCase() 문자열 메소드를 사용하면 될 것 같다는 생각이 들었다.

제한 사항을 준 이유에 대해서 생각해봤는데,

1. 배열의 길이가 길어지면 문제가 되나?
2. 숫자/한글은 대소문자 구분이 없으니 알파벳으로 이루어진 배열이라는 제한을 두었구나.

우선, 배열의 길이가 0이면 안되는 거니까 1보다 크거나 같다는 인정! 20보다 작거나 같다는 의미는 무엇일까? -> 결국 찾지 못함.

검색하다가 우연히 발견한 배열에 관한 내용 https://velog.io/@redjen/%EB%8B%B9%EC%8B%A0%EC%9D%98-%EB%B0%B0%EC%97%B4%EC%9D%80-%EA%B4%9C%EC%B0%AE%EC%9D%80%EA%B0%80%EC%9A%94

스토리

초기 코드

function solution(strArr) {
    let answer = [];
    for (let i = 0; i < strArr.length; i++) {
        if (i % 2 === 0) {
            answer.push(strArr.toLowerCase());
        } else {
            answer.push(strArr.toUpperCase());
        }
    }
    return answer;
}

에러 발생!

answer.push(strArr.toLowerCase());
                               ^
TypeError: strArr.toLowerCase is not a function

엥? 아! strArr에 인덱스 값을 안줬구나! ㅋㅋㅋ

수정 코드

function solution(strArr) {
    let answer = [];
    for (let i = 0; i < strArr.length; i++) {
        if (i % 2 === 0) {
            answer.push(strArr[i].toLowerCase());
        } else {
            answer.push(strArr[i].toUpperCase());
        }
    }
    return answer;
}

모두 통과!

파란색이 아주 보기 좋구만유~!

결과

사용한 개념

1. 반복문
2. 나머지 판별 연산자 '%'
3. 문자열 메소드
4. 배열 요소 추가 메소드

번외

다른 방법으로 더 쉽게? 더 짧게? 풀 수 있을까?!

방법1 map()

개념 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

풀이

const solution = (strArr) => strArr.map((currValue, index) => index % 2 === 0 ? currValue.toLowerCase() : currValue.toUpperCase());

방법2 reduce()

개념 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

풀이

const solution = (strArr) => strArr.reduce(
    (acc, cur, index) => [...acc, index % 2 === 0 ? cur.toLowerCase() : cur.toUpperCase()], []
)

방법3 forEach()

개념 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

풀이

const solution = (strArr) => {
    let answer = [];
    strArr.forEach((arr, index) => {
        if (index % 2 == 0) {
            answer.push(arr.toLowerCase());
        } else {
            answer.push(arr.toUpperCase());
        }
    });
    return answer;
}