📌 구글 시트 불러오기

필터를 걸어 5점 이상 뉴스만 가져오기

📌 Text aggregator(Tool)

텍스트를 하나로 합칠 때 쓰는 Tool

불러올 값 + {{newline}}

6점 이상의 기사들을 모아 하나로 합쳐줌

📌 MarkDown

마크다운을 HTML로 바꿈 으로 처리하려 하였으나

html 문서 양식을 적용하지 않고 태그만 받아오는 문제가 발생 됬다

### 세개는 H3이다

📌 Make a request HTML 변환

엑셀 파일의 메일 요약을 Kit 의 Broadcasts로 데이터를 삽입하기 위해 Kit developers 사이트의 Post 부분을 참고하여 작성하였는데 처음 실수는

형식을 html 방식으로 변경하여주는 지티피를 이어 준다

JSON Object로 파싱을 yes 클릭해준 후 저정

{
  "email_template_id": null,
  "email_address":null,
  "content": "{{17.result.html}}",
  "description": "AI 뉴스레터 초안",
  "public": true,
  "published_at": "2025-07-26T06:43:55-05:00",
  "send_at": null,
  "thumbnail_alt": null,
  "thumbnail_url": null,
  "preview_text": "안녕하세요. AI 뉴스레터 입니다.",
  "subject": "AI 뉴스레터에 오신 것을 환영합니다."
}

뉴스레터 초안을 작성 시킨 후 저장하면

📌 결과

초안이 작성된 것이 보인다

📌 해외 AI 뉴스레터 탐방

OpenAI Blog : ChatGPT, GPT 모델 관련 공식 뉴스 MarkTechPost : AI 미디어 플랫폼으로, 최신 AI/ML/DL 관련 뉴스·튜토리얼·리서치 요약 콘텐츠 Google Research Blog : Google이 자사 연구 결과, AI/ML 기술 진보, 연구 논문 발표 등을 공유 MIT News - Artificial intelligence RSS Feed : MIT에서 운영하는 기술 전문 매체

📌 RSS 란?

• RSS(Really Simple Syndication) 웹사이트(뉴스, 블로그 등)의 새 글을 자동으로 받아볼 수 있게 해주는 기술

• RSS 피드 (Feed) 새로운 글/콘텐츠 목록이 정리돼 있는 데이터

• RSS 리더 여러 피드를 모아서 보여주는 앱 또는 사이트 (ex. Feedly)

• 확장자 보통 .xml 형식 URL (예: https://example.com/rss.xml)

아래의 HTML을 기반으로 GPT로 요약하거나, 슬랙/뉴스레터로 보내는 자동화

<rss version="2.0">
  <channel>
    <title>My AI News</title>
    <item>
      <title>OpenAI releases GPT-5</title>
      <link>https://openai.com/blog/gpt-5</link>
      <pubDate>Thu, 25 Jul 2025 10:00:00 GMT</pubDate>
      <description>GPT-5 is here and it's multimodal...</description>
    </item>
  </channel>
</rss>

📌 RSS Feed 유무 체크

예시 사이트

RSS TOP 100 https://rss.feedspot.com/ai_rss_feeds/

• openai : https://openai.com/news/rss.xml
• MarkTechPost : https://www.marktechpost.com/feed/
• Google Research Blog : https://research.google/blog/rss/
• MIT News : https://news.mit.edu/rss/topic/artificial-intelligence2

그외 자료

📌 Workflow

📌 RSS 설정

add Day에서 지금으로 부터 7일 전 뉴스를 10개 씩 받아오고

Run Onec를 눌러 뉴스 받아와 지는지 OUTPUT 부분을 확인 한 후,

📌 구글 시트 저장 (Raw Data)

구글 엑셀 시트

미리 만들어놓은 구글 시트에 연결할 이름을 지정하고 로그인을 한다

그 후 내 시트를 가져와 시트에 정의해 둔 Title, URL등을 받아와 RSS의 title, URL과 매핑 한다

📌 Basic Triger 생성

Tools의 Basic Triger에 아무 내용이나 적고 실행 돌려본다

단방향이라 세 자료를 취합하는게 어려워 Basic Triger 생성 하는 것 (꼼수_각자 받아와 지는지 확인을 위한)

📌 데이터 확인

트리거에 이어 RUN을 하면 하나씩 받아와 지는 걸 볼 수 있다

URL을 가지고오기 위해 HTTP get file 선택

📌 Text parser

Text Parser Html to text로 덱스트 추출

📌 Open ai key/id

OpenAI (ChatGPT, Whisper, DALL-E) 선택 후 로그인 하여 key와 id를 가져와 붙여 넣어준다

뉴스 값을 세팅해주고 요약본의 대본도 적어준다

응답 받는 포맷을 JSON으로

📌 AI 기사 필터링

ai기사인지 아닌지 판별하는 openAI를 붙여서 중간에 트루인지 아닌지 필터링을 건다

AI 기사 판단 OpenAi

AI 판단 필터

AI 판단 후 시트 저장

true/false 판가름 된 시트

Number(스코어), boolean(참/거짓), String(문자열) 은 모두 parse JSON Response를 yes 로 설정해야 하며, 값 처럼 Number(스코어), boolean(참/거짓)은 ""를 생략해야 한다.

데이터를 넣을때 마다 구글 시트로 돌려 확인하면 result 뒤의 변수들이 자동 생성됨

기사 점수 넣기

📌 뉴스 수집 완성

출처 : AI로 뉴스레터 100% 자동화하는 방법 (챗GPT + Make)

✅ 프로세스와 스레드 정의

프로세스(Process)

운영체제로부터 자원을 할당받는 독립적인 실행 단위

스레드(Thread)

하나의 프로세스 안에서 실제로 작업을 수행하는 실행 흐름

✅ 자원 구조 차이

• 하나의 프로세스 안에는 여러 스레드가 있을 수 있음
• 스레드들은 Code / Data / Heap 영역을 공유, 단, Stack 영역은 각자 따로 가짐

✅ 핵심 요약

🧠 언제 써먹냐?

멀티 프로세싱 : 독립된 작업 → 안정성 우선 멀티 스레딩 : 빠른 처리, 자원 공유 → 성능 우선

✅ 객체지향의 정의

객체지향프로그래밍(OOP, Object Oriented Programming)은 컴퓨터 프로그래밍 패러다임 중 하나로, 데이터를 추상화시켜 상태(attribute)와 행위(Method)를 가진 객체로 만들고 그 객체들 간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법

✅ 객체지향의 장단점

• 장점 : 코드 재사용 및 유지보수 용이, 대형 프로젝트에 적합
• 단점 : 처리속도 느림, 설계 시 많은 시간이 필요, 객체가 많을 시 용량이 커짐

✅ 객체지향의 특성

1. 캡슐화 : 변수와 함수를 하나의 단위로 묶는 것, 정보 은닉
2. 상속화 : 이미 정의된 상위 클래스의 모든 속성과 연산을 하위 클래스가 물려받는 것
3. 추상화 : 객체들의 공통적인 특징을 도출하는 것
4. 다형성 : 하나의 변수 또는 함수가 상황에 따라 다른 의미로 해석될 수 있는 것

JS

11. 자바스크립트에서 동기와 비동기의 차이에 대해 설명해주세요.

비동기 프로그래밍에 대해 이해하고 있는지 확인하는 질문. 추가로 둘을 비교한 예시

자바스크립트에서 동기는 작업을 순서대로 실행하며, 한 작업이 끝나야 다음 작업을 실행하는 것을 뜻합니다. 반면에 비동기 처리는 한 작업이 완료되기까지 기다리지 않고 바로 다음 작업을 실행할 수 있어 더 효율적으로 리소스를 활용할 수 있습니다. 비동기 프로그래밍은 주로 네트워크 요청, 파일 IO와 같이 시간이 얼마나 걸릴지 알 수 없는 작업을 처리할 때 필요합니다. (+나만의 예시 추가: 식당에서 사장님이 그릇을 치우려고 손님이 음식을 다 먹을 때까지 옆에서 기다리기만 해서는 안 되겠죠?)

12. 이벤트 루프와 실행 컨텍스트에 대해서 설명해주세요.

자바스크립트의 기본 원리와 함께 기술 면접 대표 질문에 대해 준비해왔는지 확인하는 질문. 그림으로 설명하는 게 더 좋은 내용이라 제스처를 넣어 설명해도 좋습니다. 스스로 대답할 때도 그림을 설명하듯이 상상해서 해주세요.

우선 이벤트 루프는 그 이름답게 이벤트를 순서대로 돌아가며 처리하는 역할을 합니다. 마치 줄을 서있는 것처럼 이벤트 루프는 큐에 담긴 이벤트를 하나하나 호출 스택으로 옮깁니다. 물론 실행 중인 컨텍스트가 없어 호출 스택이 비어있을 때만 말입니다. 그리고 실행 컨텍스트는 이러한 이벤트가 실행되는 환경을 뜻합니다. 앞서 말한 호출 스택에 이러한 실행 컨텍스트를 쌓아두고 작업이 종료되면 스택에서 빠져나오게 됩니다. 이러한 이벤트 루프와 실행 컨텍스트는 싱글 스레드 환경인 자바스크립트에서 비동기 작업을 효과적으로 처리하기 위해 필수적인 메커니즘입니다.

13. 클로저에 대해 설명해주세요.

어려운 개념인 클로저에 대한 지식을 가지고 있는지 확인하는 질문

자바스크립트에서는 작업이 종료되어 호출 스택에서 빠져나오게 되면 참조가 사라져 가비지 컬렉터에 의해 메모리에서 사라지게 됩니다. 그런데 호출 스택에서 빠져나왔지만 특정 행동에 의해서 참조가 사라지지 않았다면 어떻게 될까요? 이 객체는 아무도 접근할 수는 없지만 메모리에 존재는 하는, 일종의 유령이 되는 겁니다. 이러한 특징을 활용하여 데이터 은닉화 및 캡슐화를 구현할 수 있습니다. 다만 남용할 경우 메모리의 누수를 피할 수 없다는 단점도 있습니다.

14. html에서 자바스크립트 코드를 로딩하는 script 태그는 보통 body 태그의 최하단에 위치하는데요. 그 이유가 무엇일까요?

브라우저의 로딩 방식과 DOM 트리 구축 등 렌더링 과정에 대한 지식이 있는지 확인하는 질문 module과 defer 속성에 대해서도 언급

그 첫 번째 이유는 페이지의 로딩 속도 최적화 때문입니다. 브라우저는 html을 읽어내려가다 script 태그를 만나게 되면 해당 자바스크립트 코드를 읽고 실행하기 시작합니다. 만약 script 태그가 상단에 있다면 DOM 트리 구축 시기가 늦어져 페이지의 로딩이 느려질 수 있습니다. 여기에 이어 두 번째 이유는 DOM 접근시에 오류가 생길 수 있기 때문입니다. 앞서 자바스크립트가 먼저 읽히고 실행될 수도 있다고 말씀드렸죠? 그런데 만약 자바스크립트 코드에 document.querySelector처럼 html 태그를 가져오는 코드가 있다면 어떻게 될까요? 아직 DOM 트리가 구축되지 않았으므로 원하는 태그를 가져오지 못하고 undefined를 반환하게 됩니다. 이러한 이유로 script 태그를 body의 최하단에 넣곤 합니다. 물론 다른 방법도 있는데요. 바로 script 태그에 defer나 module을 작성하는 것입니다. 그러면 자동으로 script 태그를 지연 로딩할 수 있습니다.

15. 여러 비동기 함수를 동시에 병렬로 호출하기 위해서는 어떻게 해야 할까요?

Promise에 대한 이해도를 확인하는 질문 Promise.all()을 언급

보통 async/await를 사용해 데이터를 불러오게 되면 순차적으로 데이터를 불러오기 마련입니다. 이때 Promise.all() 함수를 사용한다면 함수의 인자로 넘겨준 비동기 함수를 병렬로 실행할 수 있습니다. 예를 들어 3초의 실행 시간을 가진 비동기 함수 3개가 있다고 한다면, 기본적으로 순차적으로 호출할 시에 모든 함수가 끝나기까지 3 * 3 = 9초가 걸리게 됩니다. 하지만 이걸 병렬로 호출하게 된다면 3개의 요청을 동시에 보내게 되어 3초만 걸리게 됩니다.

16. Promise를 사용해 함수의 타임아웃 기능을 구현하려면 어떤 메서드를 사용해야 할까요?

Promise에 대한 이해도를 확인하는 질문 Promise.race()를 언급

Promise.race()를 사용하면 됩니다. 이 함수의 기능은, 인자에 비동기 함수를 넣어주게 되면 넣어준 함수들 중 가장 빠르게 resolve되는 함수의 결과만을 가져오게 됩니다. 그러면 여기에 내가 사용할 비동기 함수와, setTimeout을 함께 넣어주게 된다면 비동기 함수와 setTimeout 둘 중 먼저 끝나는 쪽을 반환해주게 됩니다. 만약 setTimeout을 3초로 정해둔다면 3초 안에 비동기 함수가 resolve 되지 않을 시 타임 아웃 판단을 내리도록 구현할 수도 있습니다.

17. 자바스크립트의 기본 문법인 변수, 상수, 데이터 타입, 연산자, 함수 등을 이해하고 적용할 수 있습니다.

지원자가 자바스크립트의 기본적인 문법과 개념을 이해하고 있는지 확인하기 위함. 지원자가 변수 선언 및 할당, 데이터 타입 식별, 다양한 연산자 사용, 함수 작성 및 호출에 대해 얼마나 잘 알고 있는지 평가.

변수 선언 시 var, let, const의 차이를 명확히 설명하세요. 자바스크립트의 기본 데이터 타입(숫자, 문자열, 불리언, null, undefined, 객체)에 대해 언급하세요. 기본적인 산술, 논리, 비교, 삼항 연산자를 사용하는 예제를 준비하세요. 함수 선언 방식(함수 선언식, 함수 표현식, 화살표 함수)에 대해 설명하세요.

• 변수 선언: let과 const는 블록 스코프를 가지며, var는 함수 스코프를 가집니다. const는 재할당이 불가능합니다.

• 데이터 타입: 자바스크립트에는 숫자, 문자열, 불리언, null, undefined, 객체 타입이 있습니다.
  • 산술, 논리, 비교, 삼항 연산자의 사용법을 잘 이해하고 있습니다.
  • 함수 선언 방식으로는 함수 선언식, 함수 표현식, 화살표 함수가 있습니다.

나의 풀이

✅ 문제 요약

n명이 남김 없이 같은 조각의 피자를 먹는 최소의 판 수 구하기

function solution (n) {
    for(let i = 1; i <= 100; i++){
        if((6 * i) % n === 0){
            return i
        }
    }
}

i는 피자의 판 수 (각 판은 6조각 → 총 6 * i 조각) (6 * i) % n === 0인 순간이 각자 공평하게 나눠먹을 수 있는 최소 판 수

✅ 시간복잡도

최대 100까지 순회 => 최악의 경우 O(100) = O(1) : 상수시간 루프는 고정 범위 내에 돌아가므로 효율적

👉 총 시간복잡도: O(1) : 상수 시간

✅ 공간복잡도

변수 i 하나만 사용 → O(1)

👉 총 공간복잡도: O(1)

✅ 개선 포인트 (메모리 최적화)

• 실제론 100까지 돌릴 필요 없이, LCM(6, n) / 6 으로 바로 구할 수 있음
• 최소공배수(Lowest Common Multiple) 개념 사용하면 더 간결하게 가능

function solution(n) {
  function 최대공약수(a, b) {
    if (b === 0) {
      return a;
    } else {
      return 최대공약수(b, a % b); // 나머지
    }
  }

  function 최소공배수(a, b) {
    return (a * b) / 최대공약수(a, b);
  }

  return 최소공배수(6, n) / 6;
}

function solution(n) {
  const 최대공약수 = (a, b) => b ? 최대공약수(b, a % b) : a;
  const 최소공배수 = (a, b) => (a* b) /최대공약수(a, b);
  return 최소공배수(6, n) / 6;
}

📌 해석 : 6조각짜리 피자를 n명이 공평하게 나눌 수 있는 최소 공배수를 구한뒤 그걸 6으로 나눈 값이 최소 판 수

✅ 결론

JS

1. 변수를 선언할 때 쓰는 var, let, const의 차이에 대해 알려주세요.

자바스크립트 기본 지식, 스코프에 대한 이해도, 추가로 호이스팅에 대한 지식을 가지고 있는지 확인하는 질문.

각각 순서대로 설명드리겠습니다. var의 경우에는 함수 스코프를 가지며, 초기화 전에 접근하면 호이스팅 덕분에 undefined를 반환합니다. es6에서 추가된 const와 let의 경우에는 블록 스코프를 가지며 호이스팅은 일어나지만 초기화 전에 접근 시 오류가 발생합니다. 이 중 const와 let은 초기화 이후 재할당이 가능하냐의 의미에서 다시 갈라집니다. const는 상수라는 뜻의 constant의 약자로 초기화 이후 재할당이 불가능합니다. 따라서 코드의 예측 가능성을 높여주는 장점이 있다고 할 수 있습니다. 현재에는 블록 스코프를 가졌다는 점과 유지 보수가 용이하다는 점 때문에 const/let만을 사용하는 편입니다.

• var: 예전 방식. 함수 안에서만 유효함. 블록 {}을 무시하고 밖에서도 보임. 선언 전에 써도 undefined로 나옴. (호이스팅 됨)
• let: 요즘 방식. 블록 안에서만 유효함. 선언 전에 쓰면 에러.
• const: let이랑 비슷하지만, 한 번 값 주면 못 바꿈.

💡 지금은 var 거의 안 쓰고, let이나 const만 씀. 바꿀 일이 없으면 const, 바뀔 수 있으면 let.

2. 쓰로틀링과 디바운싱의 개념과 사용하는 이유 및 대표적인 사용처에 대해서 설명해주세요.

성능 최적화 및 각 개념을 어디에 적용하면 좋을지 확인하는 질문. 마지막에 정리하는 말을 넣어주셔도 좋습니다. 사용한 경험에 대해서도 언급하면 좋습니다.

두 개념 모두 특정 함수의 실행 빈도를 조절하는 기술이지만 서로의 차이점 때문에 사용처가 다릅니다. 먼저 쓰로틀링의 경우에는 일정 간격마다 함수를 실행하도록 횟수를 제한하는 기술입니다. 예를 들어 스크롤 이벤트처럼 순식간에 여러 번 실행되는 이벤트는 성능 저하를 일으키기 쉬운데요. 여기에 쓰로틀링을 적용해주면 스크롤할 때마다가 아닌 설정한 간격마다 함수를 실행하기에 불필요한 호출을 줄여 성능을 향상시킬 수 있습니다. 그리고 디바운싱은 연속된 함수의 호출이 들어올 경우 무시하고 있다가 제일 마지막에 호출된 함수만을 실행하도록 하는 기술입니다. 대표적인 사용처는 검색어 자동 완성입니다. 유저의 인풋 중간 결과는 중요하지 않기에 전부 스킵해버리고, 마지막 결과 값에 대해서만 자동 완성 결과를 보여주면 불필요한 검색 요청을 줄여 성능을 향상시킬 수 있습니다. 다시 말해 지속된 이벤트의 호출에서 중간 호출도 중요하면 쓰로틀링을, 마지막 호출만이 중요하면 디바운싱을 사용하는 것이 좋습니다.

둘 다: 함수를 너무 자주 실행하는 걸 막는 기술.

• 쓰로틀링: 일정 시간마다 한 번만 실행. ⏱️ 예: 스크롤 이벤트 (스크롤할 때마다 무조건 실행 ❌)
• 디바운싱: 마지막 동작만 실행. ⌨️ 예: 검색창 타이핑 → 다 치고 나서만 자동완성 실행.

🔁 계속 일어나는 이벤트면 → 쓰로틀링, 🕒 마지막 입력만 중요하면 → 디바운싱

3. 자바스크립트의 호이스팅에 대해 설명해주세요.

호이스팅에 대해 이해하고 있고, 어떤 오류가 호이스팅 때문인가 구분할 수 있는지 확인하는 질문.

호이스팅의 영어 뜻은 바로 끌어올리다입니다. 그렇기에 자바스크립트의 호이스팅도 끌어올린다는 의미인데요. 바로 코드 실행 전에 변수 선언과 함수 선언을 스코프의 최상단으로 끌어올리는 것을 뜻합니다. 원래 C언어 같은 프로그래밍 언어를 사용했을 때는 변수나 함수가 무조건 상단에 선언이 되어 있어야 했습니다. 그래야 아래 줄에서 참조가 가능하니깐요. 하지만 자바스크립트는 실제로 선언된 위치와 상관 없이 최상단으로 선언부가 끌어올려지기에 선언 위치 앞에서도 호출이 가능해집니다. 다만 이게 함수, var, const/let의 경우에 따라 달라지는데요. 함수의 경우에는 어디서든 호출이 가능하고 제대로 작동도 합니다. 하지만 var의 경우에는 선언 전에 호출한다면 undefined를 반환하게 됩니다. 그러나 이게 오히려 오류를 안 내서 불편한 나머지 const/let은 선언 전에 호출하면 에러를 내보내게 되었습니다. 물론 에러는 내보내지만 호이스팅이 되지 않은 건 아니란 점에 주의해야 합니다.

• 코드 실행 전에, 선언된 것들을 위로 끌어올림.
• var는 선언만 끌어올려서 → 값은 undefined.
• let, const도 끌어올리긴 하는데 → 선언 전에 쓰면 에러.
• 함수는 전체가 끌어올려져서 → 어디서든 호출 가능.

호출이 위에 있는데 선언이 아래인데도 작동하는 건 이 때문

4. 이벤트 버블링과 캡처링에 대해 설명해주세요.

버블링과 캡처링으로 이벤트를 제어할 수 있는지 확인하는 질문 이름에서 오는 뜻을 활용하세요.

이벤트 버블링과 캡처링은 모두 이벤트가 전파되는 방식을 뜻합니다. 다만 서로 그 방향이 다를 뿐입니다. 버블링부터 말씀드리자면, 버블링은 거품이지 않습니까? 마치 거품이 수면으로 떠올라가듯이 이벤트가 전파되는 겁니다. 그래서 하위 요소에서 상위 요소로 이벤트가 전파되는 것을 버블링이라고 합니다. 반대로 캡처링은 포착한다고 생각하시면 됩니다. 마치 카메라가 내가 보는 시야의 일부분을 포착해서 담듯이 이벤트가 전파되는 겁니다. 그래서 이번엔 상위 요소에서 하위 요소로 이벤트가 전파되는 것을 캡처링이라고 합니다. 이러한 특성을 잘 활용한다면 이벤트 위임을 구현할 수 있습니다.

이벤트가 일어날 때, 어떻게 전파되느냐의 차이.

• 버블링: 아래(자식) → 위(부모)로 올라감. 버블처럼 위로.
• 캡처링: 위(부모) → 아래(자식)로 내려감. 📸 먼저 포착하고 내려옴.

  대부분 브라우저는 버블링 기본. 필요할 때 캡처링 사용 가능.

5. 이벤트 위임에 대해 설명해주세요.

이벤트 버블링과 캡처링에 대해 잘 이해하고 있는지 재확인 및 위임을 이용해 최적화를 할 수 있는지 확인하기 위한 질문 최적화 얘기를 하면 좋습니다.

이벤트 위임은 하위 요소의 이벤트를 상위 요소로 위임하는 걸 뜻합니다. 하위 요소가 많을 경우, 이러한 모든 요소들에 이벤트를 등록하고 관리하는 건 힘든 일이 될 수 있습니다. 그래서 버블링과 캡처링을 활용해 상위 요소에 이벤트를 위임하고, 이벤트 함수 내에서 하위 요소를 판단하여 이벤트를 처리하면 성능을 최적화할 수 있는 장점을 가진 게 바로 이벤트 위임입니다.

• 많은 자식에게 각각 이벤트 달지 말고, 부모 하나에만 달고 버블링으로 처리하는 방법.
• 성능 좋아지고 유지 보수 쉬워짐.

예: ul에서 각 li 클릭 처리할 때 → ul에 이벤트 하나만 걸기

6. 자바스크립트의 this가 어떤 값을 가지는지 각 상황을 가정하여 설명해주세요.

각 상황에 따라 this의 변화를 이해하고 있는지 확인하기 위한 질문 암기 질문과 다름 없습니다. 외워오세요.

모범 답안: this 는 호출되는 상황마다 서로 다른 값을 참조하고 있어 혼동하기 쉬운 값입니다. 우선 일반 함수를 호출할 때는 전역 객체인 window를 뜻합니다. 그리고 객체의 메서드를 호출할 때에는 해당 객체를 의미합니다. 이어서 콜백 함수는 전달하는 곳은 상관이 없고, 함수가 실제로 호출되는 상황에 따라 달라집니다. 만약 호출하는 상황이 일반 함수라면 전역 객체를 가리키겠죠? 마지막으로 화살표 함수는 생성된 함수의 스코프에 따라 달라집니다. 예를 들어 객체의 메서드에서 화살표 함수를 만들어서 this를 호출했다면 생성된 함수의 스코프는 객체 스코프이므로 여기서 this는 객체를 뜻하게 됩니다. 이러한 this의 특징 때문에 call, apply, bind 같은 걸로 this를 고정시켜주기도 하지만, 저는 저포함 동료 분들의 혼선을 피하기 위해 this의 사용을 좀 지양하는 편입니다.

• 상황에 따라 달라짐 💡 this = 호출한 놈

⚠️ 그래서 화살표 함수는 this로 혼동 없어서 자주 씀

7. 자바스크립트의 프로토타입의 역할을 설명해주세요.

ES6 이전에 많이 쓰이던 프로토타입에 대해서도 인지하고 있는지 확인하는 질문. 설마 이런 거까지 알겠어?

모범 답안: 자바스크립트의 프로토타입은 객체가 가진 기본 속성과 메서드를 정의하는 객체입니다. 프로토타입에 정의된 이러한 속성과 메서드가 각 타입을 타입답게 만들게 됩니다. 예를 들어 숫자에 toString()메서드가 있는 것처럼 말입니다. 옛날에 클래스가 나오기 전에는 이 프로토타입을 통해 직접 메서드를 만들어주고는 했습니다.

• 객체들이 공통으로 공유하는 기능(메서드) 저장소.
• 예: 모든 배열에는 map, filter 같은 함수 있음 → Array.prototype에 있음.
• 직접 확장도 가능:

  Array.prototype.sayHi = () => console.log('hi');

클래스 나오기 전엔 이걸로 직접 상속 만들고 했음

8. 자바스크립트의 객체는 참조에 의해 복사됩니다. 이로 인해 생길 수 있는 오류와, 해당 오류를 피하는 방법을 설명해주세요.

참조에 의한 접근과 값에 의한 접근을 구분할 수 있는지 확인하는 질문입니다. 객체를 참조가 아닌 값으로서 복사하는 방법도 소개하면 좋습니다.

네, 여기서 참조에 의한 복사가 일어나는 이유는 값 자체를 복사해 주는 게 아니라 값이 들어있는 메모리 주소를 복사해서 주기 때문입니다. 그렇기에 객체를 복사하게 되면 서로 같은 메모리 주소를 가리키게 되어 한쪽이 값을 바꾸면 다른 쪽이 보여주는 값도 바뀌게 되는 겁니다. 이러한 특징 때문에 여러 오류가 생기곤 합니다. 그래서 깊은 복사를 통해 객체 또한 값으로서 복사하도록 하는 방법들이 있는데 대표적으로는 JSON.stringify()를 통해 객체를 문자열로 바꾸어서 복사하는 방법이 있고, 비교적 최근에 나온 structuredClone()을 사용하는 방법이 있습니다. 개인적으로는 후자가 더 짧고 쉽기 때문에 더 애용하는 편입니다.

• {} 같은 객체를 복사하면, 값이 아닌 주소가 복사됨.
• 그래서 하나를 바꾸면 다른 것도 바뀜.
• 막으려면 깊은 복사 필요:
  • JSON.parse(JSON.stringify(obj))
  • structuredClone(obj) (최신 방법)

❌ 얕은 복사 (...obj)는 중첩 객체까지는 안 복사됨

9. 자바스크립트의 nullish 값은 무엇이 있을까요?

nullish로 평가되는 데이터 타입과 값의 종류를 이해하고 있는지 확인 nullish 병합 연산자를 언급하면 좋습니다.

네 자바스크립트에서 nullish는 말 그대로 null과 같은 값을 뜻합니다. 이에 대한 예시로는 대표적으로 null과 undefined가 있습니다. 여기서 알고 넘어가면 좋은 게 있는데, 바로 nullish 병합 연산자입니다. 기존에는 || 를 이용해서 병합을 구현했는데요. 이렇게 되면 0이나 ''처럼 빈 문자열 등이 false로 평가되어 제대로 동작하지 않을 가능성이 생기곤 합니다. 그때 바로 물음표 2개를 붙인 ??로 대체해준다면 nullish한 값에 대해서만 병합을 실행하게 됩니다.

• null과 undefined
• 그래서 ?? 연산자에서:

null ?? '대체값' // 👉 '대체값'
0 ?? '대체값' // 👉 0 (nullish가 아니니까!)
기존 ||는 0이나 빈 문자열도 false로 처리해서 문제가 있었음

기존 ||는 0이나 빈 문자열도 false로 처리해서 문제가 있었음

10. == 과 ===의 차이점은 무엇일까요?

자바스크립트의 기본 문법을 확인하는 질문입니다. nullish와 연계하여 대답하면 좋습니다.

비교할 때 판단이 다릅니다. 간단히 요약하자면 ==는 타입은 다르지만 값이 같을 때, 예를 들어 문자열 1과 숫자 1을 비교하면 같다고 뜰 겁니다. 그래서 숫자 0과 nullish 값을 이 연산자를 이용해 비교하면 true가 떠서 같다고 나올 겁니다. 그리고 ===는 좀 더 엄격하게 타입과 값을 모두 비교합니다. 그래서 문자열 1과 숫자 1을 비교하면 다르다고 뜰 것입니다. 저는 보통 엄격한 비교를 위해 ===를 더 선호해 사용하는 편입니다.

• ==: 값만 비교. 타입 자동 변환함.
  • '1' == 1 👉 true
  • 0 == '' 👉 true
• ===: 값 + 타입 완전 일치해야 true

안전하게 쓰려면 무조건 === 쓰는 게 낫다

나의 풀이

✅ 문제 요약

num_list에서 짝수의 개수와 홀수의 개수를 [짝수, 홀수] 배열 형태로 반환하는 함수

function solution(num_list) {
  let answer = [];
  let newArr = [];
  for (let i = 0; i < num_list.length; i++) {
    if (num_list[i] % 2 === 0) newArr.push(i);
  }
  return answer = [newArr.length, num_list.length - newArr.length];
}

(for + push) : 의도는 짝수의 개수를 세는 것이나 newArr.push(i)로 짝수의 값이 아닌 인덱스를 저장하고 있어서 개선이 필요함 짝수의 개수가 카운트라면 push() 자체가 불필요하므로 더 간단한 방식으로 개선 해야함

✅ 시간복잡도

for 루프는 num_list 를 한 번 순회 -> O(n) newArr.push()는 배열 끝에 요소를 추가 -> 평균 O(1) newArr.length, num_list.length -> O(1)

👉 총 시간복잡도: O(n) : 상수 시간

✅ 공간복잡도

newArr에 짝수 인덱스만 저장 -> 최악의 경우 모든 요소가 짝수라면 O(n) 공간 사용

👉 총 공간복잡도: O(n)

✅ 개선 포인트 (메모리 최적화)

javascript
function solution(num_list) {
  let even = 0;
  for(let i = 0; i < num_list.length; i++){
      if(num_list[i] % 2 === 0) even++
  }
  return [even, num_list.length - even]

• 불필요한 배열(newArr) 제거
• 메모리 O(1)로 최적화됨
• 가독성 향상

✅ 최적 코드 시간/공간 복잡도

• 시간복잡도: O(n)
• 공간복잡도: O(1)

✅ 고차함수 활용(forEach / reduce)

javascript
function solution(num_list) {
  let even = 0;
  num_list.forEach((n)=> n % 2 ===0 && even++)
  return [even, num_list.length - even]
}

🔍 해석

• even 짝수 카운터의 초기값을 0으로 표새하여 변수를 담을 그릇을 만든 다음,
• forEach로 num_list 배열을 하나씩 순회하며 n이 짝수일 경우 even++
• even = 짝수 개수이니, 전체 개수에서 뺴면 홀수 개수 = num_list.length -even
• [짝수, 홀수] 형태로 변환

javascript
function solution(num_list) {
  let even = 0;
  num_list.reduce(([even, odd], cur)=> cur % 2 === 0 ? [even +1, odd] : [even, odd + 1],[0, 0])
  return [even, odd];
}

🔍 해석

• reduce() 는 누적값 [evne, odd]를 유지하면서 cur값을 하나씩 검사
• cur이 짝수 -> [even + 1, odd]
• cur이 홀수 -> [even, odd + 1]
• 초기 값은 [0, 0] (짝수 0개, 홀수 0개)

✅ 결론

둘 다 시간복잡도 O(n) / 공간복잡도 O(1)로 효율은 같음

1. 프로그래밍 언어 선택
2. 유형별로 10개 이상 풀어보기
3. 대표 알고리즘 유형 : 정렬, DFS/BFS, 구현, 완전 탐색, 탐욕 알고리즘
4. 기업 기출 문제 풀기

✅시간 복잡도

• 크기 형태의 의미, 수학적, 수치
• 알고리즘의 성능을 나타내는 척도(얼마나 빠르게 수행되는가)
• 시간 복잡도 : 특정한 크기의 입력에 대해 알고리즘 수행 시간 분석(낮아야 빠름)

               조금더 값이 크게 증가하는 정도, 수치적으로 값이 얼마나 큰가

• 복잡도가 낮을수록 우수한 코드

✅시간 복잡도 표기법

빅오 표기법 (Big O Notation= 나타낸다)

• 가장 빠르게 증가하는 항만 고려하는 표기법
• 함수의 상한(가장 작은 수) 나타냄
• 3N³+ 5N² +1,000,000
• ² = 차수
• N³ = 100 * 100 * 100 = 1000000
• N이 급격하게 커지는 것에 비해 다른 항들에 대해선 영향이 작다
• Big-O : 차수가 가장 큰 항에서 계수를 제외하여 O(N³)으로 표기

🌍상수 시간 복잡도

사칙연산

🌍로그 시간 복잡도

절반씩 쪼갤때(이분 탐색), 상수 시간에 가까울 정도로 빠름

이분 탐색 (Binary Search) 정렬된 리스트나 배열에서 특정 값의 위치를 찾는 알고리즘

🌍선형 시간 복잡도

배열 하나씩 확인해서 어떤 원소가 존재하는지 찾을 때 사용(병합, 힙정렬...기반 알고리즘)

병합 정렬 (Merge Sort)

분할 정복 (Divide and Conquer) 병합 정렬은 배열을 절반으로 계속 나누어 더 이상 나눌 수 없을 때까지 반복 그런 다음, 정렬된 부분 배열들을 병합하여 최종적으로 정렬된 배열

재귀적 호출 각 부분 배열을 정렬하기 위해 재귀적으로 병합 정렬을 호출

병합 과정 정렬된 두 부분 배열을 병합할 때, 각 배열의 첫 번째 요소를 비교하여 작은 값을 결과 배열에 추가, 이 과정을 반복하여 최종적으로 정렬된 배열을 얻음

힙 정렬 (Heap Sort)

힙 자료구조 힙 정렬은 힙 자료구조를 기반함, 힙은 완전 이진 트리의 일종으로, 부모 노드가 자식 노드보다 항상 크거나 작은 특성을 갖음 (최대 힙 또는 최소 힙).

최대 힙 구성 먼저, 정렬되지 않은 배열을 최대 힙으로 구성 이 과정에서 부모 노드가 자식 노드보다 항상 크도록 힙 속성을 유지

정렬 과정 최대 힙의 루트 노드(가장 큰 값)를 힙의 마지막 요소와 교환하고, 힙 크기를 줄여서 다시 힙 속성을 유지. 이 과정을 반복하여 정렬된 배열을 얻음

🌍이차 시간 복잡도

동적 계획법, 넥센 문제 등등

동적 계획법 큰 문제를 여러 개의 작은 부분 문제로 나누어 해결하고, 각 부분 문제의 해를 저장하여 중복 계산을 피하는 알고리즘 설계 기법

동적 계획법의 활용 최단 경로 문제: 그래프에서 두 점 사이의 최단 거리를 구하는 문제에 사용 예를 들어, 구글 지도에서 길 찾기 기능와 같은 서비스에서 활용 배낭 문제(Knapsack Problem): 제한된 용량의 배낭에 최대한 많은 가치를 가진 물건들을 넣는 문제에 사용

문자열 유사도 계산 두 문자열의 유사도를 계산하는 문제에 사용

🌍삼차 시간 복잡도

알고리즘의 실행 시간이 입력 크기 (n)의 세제곱에 비례하여 증가하는 것

_플로이드 워셜 _ 모든 지점에서 다른 모든 지점까지의 최단 경로를 모두 구해야 하는 경우를 구하는 알고리즘

📌결론

알고리즘이 얼마나 빠르게 동작하는지 평가하기 위해 사용

🎯 예시

let array = [1,2,3,4,5] // 5개의 데이터(N = 5)
let summary = 0; // 합계를 지정할 변수

// 모든 데이터를 하나씩 확인하며 합계를 계산
for(let i = 0; i < array.length; i++){
  summary += array[i];
}

// 결과를 출력
console.log(summary)

수행시간은 데이터 개수 N에 비례할 것임을 예측 가능 O(N) : 선형 시간 복잡도

let array = [3,5,1,2,4] // 5개의 데이터(N = 5)
let summary = 0; // 합계를 지정할 변수

// 모든 데이터를 하나씩 확인하며 합계를 계산(5의 n제곱)
for(let i = 0; i < array.length; i++){ // i가 한번 바뀔때마다
  for(let j= 0; j < array.length; j++){ // j가 다섯번씩 변경됨
    let temp = array[i] * array[j]
    console.log(temp)
}

// 결과를 출력 
console.log(summary)

모든 2중문이 시간 복잡도가 O(N²)은 아니니 소스코드가 내부적으로 호출하는 함수 고려 O(N²): 이차 시간 복잡도

💪알고리즘 설계 TIP

• 일반적인 CPU 기반 개인 컴퓨터
• JS기준 1억번의 연산은 1~5초
• O(N³) 설계의 경우 , N이 5,000이 넘는다면 걸리는 시간은?
• 코딩 테스트 시간 제한 : 1~5초
• 명시 X : 5초

💪요구사항에 따른 적절한 알고리즘 설계

• 시간제한(수행 시간 요구사항)
• 시간 제한이 1초인 문제를 만났을 때, 일반적인 기준은 다음과 같다.
• 𝑁의 범위가 500인 경우 : 시간 복잡도가 𝑂(N³) 설계
• 𝑁의 범위가 2,000인 경우 : 시간 복잡도가 𝑂(N³) 설계
• N의 범위가 2,000인 경우: 시간 복잡도가 𝑂(N²) 설계
• 𝑁의 범위가 100,000인 경우: 시간 복잡도가 O(N log N) 설계
• 𝑁의 범위가 10,000,000인 경우: 시간 복잡도가 O(N) 설계

범위를 미리 파악하고 역으로 어느 정도로 동작하는지 이해해서 푸는 것

1. display: none 과 visibility: hidden의 차이점은 무엇인가요?

기본적인 CSS 지식과 브라우저 렌더링 과정을 알고 있는지 확인하는 질문

두 속성 다 화면에서 요소를 보이지 않게 하는 것, 레이아웃에 영향을 미치는지에 따라 차이가 있습니다. 화면에 보이지 않지만 원래 있었던 공간을 차지하는지 아닌지 입니다. display: none은 말 그대로 디스플레이에서 없애는 것이기 때문에 기존 공간을 다른 요소로 채울 수 있습니다. 다시 말해 공간을 차지하지 않습니다. 반면에 visibility: hidden은 요소를 그저 투명하게만 만들어주는 것이기에 기존 요소의 공간을 차지합니다.

2. styled-components를 써보셨나요? 사용하면서 느낀 장단점에 대해 알려주세요.

styled-components에 대한 경험이 있는지 확인하는 질문

styled-components를 사용하며 가장 크게 느꼈던 장점은 컴포넌트이기에 props를 내려줘 스타일의 동적이 변화에 사용할 수 있다는 점, 컴포넌트이기에 재사용이 수월하다는 점 다만 단점으로는 네이밍이 어렵고, 스타일이 들어간 컴포넌트에도 모두 이름을 지어주는 건 너무 시간이 드는 작업. 또한 미미하지만 성능상 단점도 있습니다. 그래도 본질이 js이기 때문에 css로 변환하는 데에 걸리는 시간이 좀 더 길어지게 되는 특징도 있습니다. 최근에 유행하는 Next.js의 서버 컴포넌트에서도 지원이 적다는 단점도 있습니다.저는 장점 보다는 단점이 더 크다고 생각하여 styled-components 대신 tailwind CSS를 더 선호하는 편입니다.

3. CSS의 단위 중 px, em, rem 의 차이점에 대해 설명해주세요.

CSS의 기본적인 단위에 대해 알고 있는지 확인하는 질문

px는 폰트를 고정값으로 표기하기 때문에 적응형에서 많이 사용하지만 현재는 유저 디바이스 환경에 따라 크기 변화가 있을 수 있기 때문에 em이나 rem을 주로 쓰는 편입니다. em은 상대적인 단위로서 현재 속해있는 요소의 폰트 크기를 기준으로 계산합니다. 현재 속해 있는 요소의 폰트 크기가 크다면 em값도 커지게 됩니다. px과 반대로 반응형 디자인에 좋습니다. 그러나 현재 속해 있는 요소의 기본 크기가 어느 정도인지에따라 바뀌기 때문에 조심해야 합니다. 그리고 rem은 em하고 모두 같지만 하나 다른 점은 바로 기준이 되는 폰트 크기입니다. rem의 r은 root를 말하는 만큼 최상단 루트의 기본 크기를 바탕으로 적용이 됩니다. 그래서 루트에 정의된 폰트 크기를 바꾸지 않는 한 항상 같은 값을 지니고 있어 저는 이 속성을 가장 많이 씁니다.

4. reset.css 또는 normal.css가 필요한 이유를 설명할 수 있습니다.

지원자가 reset.css와 normalize.css의 필요성과 역할을 이해하고 있는지 평가.

reset.css는 브라우저 기본 스타일을 모두 제거하여 모든 요소가 동일한 기본 스타일을 가지도록 합니다. normalize.css는 브라우저 간의 스타일 차이를 최소화하여 일관된 스타일을 유지합니다. reset.css는 모든 스타일을 제거하므로 스타일링을 처음부터 정의해야 하고, normalize.css는 기본 스타일을 유지하면서 브라우저 차이를 최소화합니다.

✅ public URL이란?

누구나 접근할 수 있는 "인터넷 주소" 즉, 로그인하지 않아도 이미지나 파일에 접근할 수 있는 공개 링크

🔍 예시

https://abc.supabase.co/storage/v1/object/public/images/mycat.jpg

이런 주소가 생성되면, 이 링크를 다른 사람한테 줘도, 그 사람은 바로 이미지를 볼 수 있음

📦 Supabase에서 말하는 public URL은?

Supabase의 Storage는 파일을 저장하는 "클라우드 폴더" 거기서 getPublicUrl()이라는 함수를 쓰면 → 해당 파일에 접근 가능한 공개 주소 (public URL) 을 만들어줌

🧁 요약하자면

public URL = "누구나 볼 수 있는 파일 링크" 로그인 필요 없음 블로그, 프로필 이미지, 썸네일 등에 자주 사용됨

public URL 반환 유틸

/**
 * Supabase Storage에 이미지를 업로드하고 public URL을 반환
 * @param {File} file - 업로드할 이미지 파일 (input[type="file"]의 파일 객체)
 * @param {string} bucket - 저장할 버킷 이름 (기본값: 'images')
 * @param {string} folder - 저장할 폴더 경로 (기본값: 'public')
 * @returns {string|null} 업로드된 이미지의 public URL 또는 null
 */

export const getImageURL = async (file, bucket = 'images', folder = 'public') => {
  let imageUrl = null;
  if (!file) return null;

  try {
    const ext = file.name.split('.').pop();
    const filename = `${Date.now()}-${crypto.randomUUID()}.${ext}`;
    const filepath = `${folder}/${filename}`;

    const { error: uploadError } = await supabase.storage.from(bucket).upload(filepath, file);

    if (uploadError) {
      console.error(`[이미지 업로드 실패], ${uploadError.message}`);
      return null;
    }

    const { data, error: urlError } = supabase.storage.from(bucket).getPublicUrl(filepath);
    if (urlError) {
      console.error(`[이미지 URL 가져오기 실패], ${urlError.message}`);
      return null;
    }

    imageUrl = data.publicUrl;
  } catch (e) {
    console.error('[이미지 업로드 오류]', e.message);
    return null;
  }

  return imageUrl;
};

• file.name에서 확장자 추출 후 UUID 기반으로 파일명 생성
• 업로드 후 에러 체크
• getPublicUrl()로 공개 URL 받아서 반환
• 실패 시 null 반환

Supabase의 Storage 기능을 이용해, 사용자가 업로드한 이미지 파일을 저장하고 해당 이미지의 공개 URL(publicUrl) 을 반환하는 유틸 함수를 만들었다.

파일명은 중복을 방지하기 위해 Date.now() 와 crypto.randomUUID() 를 조합해 고유하게 생성했고, 지정한 경로에 이미지를 업로드한 후 getPublicUrl() 을 통해 public URL을 받아오는 흐름이다.

업로드나 URL 생성 중 에러가 발생할 경우에는 null을 반환하도록 예외 처리를 했다. 성공적으로 업로드되면 data.publicUrl을 imageUrl로 받아 최종적으로 반환한다.

사용법

const handleUpload = async (e) => {
  const file = e.target.files[0];
  const url = await getImageURL(file);
  if (url) {
    console.log('업로드 성공:', url);
  }
};


const { _data, error: profileError } = await supabase.from('profiles').upsert({
  id: user.id,
  nick_name: formData.nick_name,
  website_url: formData.website_url,
  updated_at: new Date().toISOString()
});

upsert나 insert로 데이터를 덮어 씌우거나 삽입한다 테이블 컬럼 이름은 되도록 소문자 + 스네이크 케이스(nick_name)로 일관되게 쓰는 것이 좋고 프론트 단에서는 카멜케이스로 구분하는게 좋다

주의점

수퍼베이스 스토리지는 공개로 해 놓아야 하며

정책은 select, insert, update, delete 전부 만들어 주어야 한다

🔐 Signed URL

시간 제한이 있는 URL을 만들어서 정해진 시간 동안만 해당 파일에 접근할 수 있도록 하는 방식으로, 기업 환경에서는 대부분 public URL보다 보안에 강한 signed URL(= 인증된 URL)을 쓴다

const { data } = await supabase.storage
  .from('private')
  .createSignedUrl('report.pdf', 60); // 60초 유효

이렇게 하면, 60초 동안만 열리는 링크가 생성돼. 그 후엔 자동으로 접근 불가!

✅ 기업에서 signedUrl을 쓰는 이유

• 유저별 접근 권한을 제어하고 싶을 때
• 유료 콘텐츠나 민감한 자료를 보호해야 할 때
• 외부에 링크 유출되는 상황을 방지하고 싶을 때

✅ 실제예시

✅ public URL vs private URL (signed URL) 차이

✅ 결론

• 공개 이미지: getPublicUrl()로 public URL 쓰면 편하고 빠름
• 보안이 필요한 파일: createSignedUrl()로 signed URL 써야 함

🔖 리액트 간단 탭 기능 구현 & 커스텀 훅 분리

마이페이지 UI를 구성하면서, 탭 기능을 간단하게 구현해봤다. 처음에는 useState를 컴포넌트 내부에 직접 선언해서 관리했지만, 재사용성과 가독성을 높이기 위해 공통 로직을 커스텀 훅 useTabs로 분리했다.

📌 1. 기본 구조 (useState 기반)

const tabs = ['내 정보', '내 포스트', '좋아요'];
const [activeTab, setActiveTab] = useState(0);

• tabs 배열에 탭 라벨을 정의
• useState(0)으로 첫 번째 탭을 기본값으로 설정
• activeTab에 따라 조건부 렌더링 처리

<div className="flex w-auto border-b md:w-80">
  {tabs.map((tab, index) => {
    return (
      <button
        key={index}
        onClick={() => setActiveTab(index)}
        className={`flex-1 p-2 text-center ${
          activeTab === index ? 'border-b-2 border-gray-500 font-semibold' : 'text-gray-500'
        }`}
      >
        {tab}
      </button>
    );
  })}
</div>

<div className="flex flex-col items-center justify-center w-full p-4">
  {activeTab === 0 && <MyInfo />}
  {activeTab === 1 && <MyPost />}
  {activeTab === 2 && <MyStatus />}
</div>

• 삼항 연산자를 이용해 버튼 스타일도 조건 분기

tabs 배열에 탭 이름을 정의하고, useState(0)으로 기본 탭을 설정했다. 이후 activeTab의 값에 따라 각 컴포넌트를 조건부 렌더링하는 방식으로 구성했다. 이런 방식은 단순하지만 직관적이고 유지보수도 편함. activeTab === index ? 삼항 연산자를 통한 클래스 또한 분기하여 selected 상태일 때를 표시

🔄 2. 커스텀 훅으로 리팩터링 (useTabs.js)

import { useState } from 'react';

export const useTabs = (initialIndex = 0) => {
  const [index, setIndex] = useState(initialIndex);
  const changeTab = (i) => setIndex(i);

  return { index, changeTab };
};

• initialIndex를 기본값으로 받음 → 기본 탭 지정 가능
• 객체로 { index, changeTab } 반환 → 구조분해 할당 편리함
• 추후 다른 컴포넌트에서도 탭 상태를 동일한 방식으로 쉽게 재사용 가능

hooks 폴더에 useTabs.js로 추출하여 재사용성과 가독성을 높인 훅 초기값을 initailIndex = 0 으로 설정해 두어 호출시 원하는 탭 번호로 인덱스를 바꿀 예정 객체(Object)로 리턴하여 {index: 현재 선택된 탭 번호 (state), changeTab: 탭을 바꾸는 함수 (함수)} 로구조분해 할당을 하기 위한 전처리

💻 3. 훅 적용된 최종 사용 코드

import { useTabs } from '../hooks/useTabs';

const tabs = ['내 정보', '내 포스트', '좋아요'];
const { index, changeTab } = useTabs();

{tabs.map((tab, i) => (
  <button
    key={i}
    onClick={() => changeTab(i)}
    className={`flex-1 p-2 text-center ${index === i ? 'border-b-2 border-gray-500 font-semibold' : 'text-gray-500'}`}
  >
    {tab}
  </button>
))}

{index === 0 && <MyInfo />}
{index === 1 && <MyPost />}
{index === 2 && <MyStatus />}

요약 useState로 탭 기능을 만들고, 커스텀 훅(useTabs)으로 분리하면 재사용성과 코드 가독성이 향상된다. 탭 상태 관리가 필요한 컴포넌트에서 간단히 적용 가능!

✍️ 결론

이처럼 간단한 탭 UI라도 커스텀 훅으로 분리하면 코드의 재사용성과 유지보수가 훨씬 쉬워진다. 추후 더 복잡한 탭 구조로 확장할 때도 기본 뼈대가 단단해지는 느낌이다.

프로젝트에서 스토리북 도입기

마지막 프로젝트에서 결국 공통 UI컴포넌트를 위해 storybook을 사용하였습니다. Storybook은 컴포넌트를 애플리케이션과 분리하여 독립적으로 개발할 수 있도록 도와주고, 프로젝트를 실행하지 않아도 Storybook 내에서 컴포넌트 상태를 다양한 시나리오로 테스트 가능한 UI전용 도구입니다.

처음에 러닝커브에도 불구하고 마지막 프로젝트에 storybook을 도입하며 저는 컴포넌트의 공용화의 시점을 어디로 해야 하는지와, 도입 배경, 장점에 대해 서술하였습니다.

도입 배경

1. 복잡한 UI 컴포넌트 구조 SnapRoad의 주요 기능은 다음과 같이 복잡한 UI 컴포넌트를 필요로 했습니다.

• 이미지 업로드 및 다양한 필요에 의한 사용처
• 여러 상태를 가진 이미지 슬라이더
• 지도와 연동된 주소 검색 필드
• 다양한 입력 폼과 상태 처리(해시태그, 날짜 선택 등)

각 컴포넌트는 다양한 상태(로딩, 에러, 성공 등)를 처리해야 했고, 이러한 상태를 일일이 구현하고 확인하기 어려웠습니다. 따라서 UI를 독립적으로 개발 및 테스트할 수 있는 환경이 필요했습니다.

2. 생산성 문제 컴포넌트를 개발할 때마다 앱을 실행하고 특정 페이지까지 이동해야 하는 번거로움이 있었습니다. 이를 해결하기 위해 스토리북을 통해 컴포넌트를 격리된 환경에서 개발하고 테스트할 필요성을 느꼈습니다.

3. 유지보수 및 협업 컴포넌트가 많아지면서 재사용성과 문서화가 중요해졌습니다. 컴포넌트는 프로젝트 전체에서 자주 재사용되기 때문에, 각 컴포넌트의 상태를 시각적으로 확인하고 명확히 문서화하는 작업이 필수적이었습니다.

도입 과정

1. 스토리북 설치 및 설정 먼저 Next.js 프로젝트에 스토리북을 설치했습니다.

npx storybook init

스토리북 초기 설정 과정에서 TypeScript와 Tailwind CSS 환경을 통합하여 해당 프로젝트의 스타일을 그대로 적용했습니다. 추가적으로 Next.js의 Image 컴포넌트를 처리하기 위해 storybook-addon-next를 설정했습니다.

2. 주요 컴포넌트 작성 스토리북 도입 초기에는 가장 자주 사용하는 공통 컴포넌트부터 스토리를 작성하기 시작했습니다:

• 버튼(Button)
• 입력 필드(Input)
• 바텀 시트(BottomSheet)
• 공통 모달(CommonModal)
• 로딩 컴포넌트(Spinner)
• 탭(Tab)

컴포넌트별로 다양한 상태를 시뮬레이션:

버튼의 disabled, loading, full 상태 입력 필드의 에러 메시지, 기본값 상태 공통 모달과 바텀시트의 상태 관리, 및 기본 컬러 차트

3. 문서화 및 상태 관리 스토리북을 단순히 UI 테스트뿐만 아니라 문서화 도구로 활용하기 위해 Controls를 사용하여 Props를 동적으로 조작할 수 있도록 설정했습니다.

안티패턴인 SVG in js를 활용한 공통 컴포넌트의 활용, 필요한 클래스를 직접 작성 할 수 있는

shadCn의 tweenMerge이용으로 컴포넌트를 다양한 스타일로 확장 시키게 사용하기 위해 노력하였습니다.

도입 후 변화

1. 컴포넌트 독립성 강화 스토리북을 통해 컴포넌트를 페이지와 분리하여 개발했기 때문에, 컴포넌트 하나만으로도 모든 동작을 확인할 수 있었습니다. 특히, 상태 관리(store) 의존성을 제거하여 컴포넌트를 더욱 독립적으로 만들 수 있었습니다.

2. 디버깅 속도 향상 스토리북을 통해 각 컴포넌트를 빠르게 테스트하고, 문제를 해결할 수 있었습니다.

예를 들어: 주소 입력 필드의 에러 메시지 렌더링 문제 해결 버튼의 상태 관리, 및 공통 컴포넌트를 활용환 프로젝트 획일화

3. 문서화로 협업 효율성 향상 스토리북이 컴포넌트 사용법과 Props를 명확히 보여줬기 때문에, 프로젝트를 확장하거나 유지보수할 때 기억에 의존하지 않고 빠르게 이해할 수 있었습니다. 가이드 파일을 적용하여 팀원에게 스토리북에 있는 컴포넌트 사용법을 제공 하였고, 팀원들도 함께 사용하며 개선 할 점들을 서로 피드백 받아 함께 제작하였습니다.

4. 디자인 시스템 구축 가능성 버튼, 입력 필드, 모달 등 공통 컴포넌트를 스토리북으로 관리하면서, 디자인 시스템 구축 가능성을 염두에 두게 되었습니다.

한계점 및 개선점

1. 초기 설정 시간 스토리북을 Next.js와 통합하고 프로젝트 스타일에 맞추는 데 시간이 소요되었습니다. 특히 Tailwind CSS와 Next.js의 여러 컴포넌트를 처리하는 과정이 까다로웠습니다. 특히 윈도우와 맥북의 시스템 설정이 다른 부분이 있어 이를 처리하며 꽤 많은 초기 시간이 소요되었습니다.

2. 페이지 기반 테스트 한계 스토리북은 컴포넌트 단위 테스트에 적합하지만, 페이지 단위의 상호작용 테스트에는 Cypress(현대 웹 애플리케이션을 테스트하기 위한 엔드투엔드 테스트(E2E) 프레임워크)와 같은 도구가 더 적합했습니다.

스토리북의 장점

1. 컴포넌트 중심 개발 스토리북은 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공합니다. 이는 특히 컴포넌트 기반 구조를 사용하는 Next.js와 같은 프레임워크에서 유용합니다. 프로젝트에서는 컴포넌트가 복잡하고 재사용 가능한 경우가 많기 때문에, 각각의 컴포넌트를 독립적으로 개발하고 테스트하기에 적합합니다.

2. UI 테스트 및 검증 SnapRoad처럼 UI 중심의 프로젝트에서는 디자인과 기능이 사용자의 경험에 큰 영향을 미칩니다. 스토리북을 통해 컴포넌트의 상태(예: 로딩, 성공, 오류)를 시각적으로 검토하고, 버그를 조기에 발견할 수 있습니다.

3. 협업 향상 공통 프로젝트이기 때문에, 협업을 염두에 두면서, 디자이너나 팀원들에게 컴포넌트 상태를 스토리북으로 공유하여 피드백을 받을 수 있습니다. 스토리북은 문서 역할도 하기 때문에 컴포넌트의 사용법과 디자인 의도를 명확히 전달할 수 있습니다.

4. 디자인 시스템 구축 프로젝트에서 사용하는 버튼, 폼, 모달 등과 같은 공통 UI 컴포넌트를 스토리북에 추가하면 디자인 시스템을 구축하는 데 도움을 줍니다. 마지막 프로젝트에서도 버튼, 이미지 슬라이더, 업로드 모달 등을 관리하고 테스트하기에 스토리북이 적합합니다.

5. 컴포넌트 테스트 자동화 스토리북은 Visual Regression Testing(시각적 회귀 테스트) 도구와 함께 사용될 수 있습니다. 이는 UI 변경 사항이 의도치 않게 영향을 미치지 않도록 방지합니다.

6. 생산성 향상 스토리북 환경에서 독립적으로 컴포넌트를 개발하면 개발 환경에서 직접 코드를 실행하지 않아도 됩니다. 마지막 프로젝트 처럼 복잡한 폼과 이미지 업로드 기능을 개발할 때, 각각의 상태를 바로 확인할 수 있어 시간과 노력을 줄일 수 있습니다.

향후 계획

프로젝트에서 스토리북을 활용하여 더 나은 UI 개발 환경을 만들기 위해,

Visual Regression Testing 도입 예정 (UI 변경 시 자동 확인) 디자인 시스템 구축으로 컴포넌트 재사용성 극대화 더 복잡한 폼과 상태 관리 컴포넌트의 시뮬레이션 강화

나의 풀이

function solution(today, terms, privacies) {
    // 날짜를 일 단위로 변환하는 함수 
    const toDays = (date) => {
        const [year, month, day] = date.split('.').map(Number);
        return year * 12 * 28 + month * 28 + day;
    }

    // today를 일 단위로 변환
    const todayDays = toDays(today);

    // 약관 종류에 따른 유효기간을 저장할 딕셔너리
    const termDict = {};
    terms.forEach((term)=>{
        const [key, value] = term.split(' ');
        termDict[key] = Number(value);
    })

    // 파기해야 할 개인정보 번호를 저장할 배열
    let result = [];

    privacies.forEach((privacy, index) => {
        const [date, termType] = privacy.split(' ');
        // 수집된 날짜에 약관 유효기간을 더한 값
        const expireDays = toDays(date) + termDict[termType] * 28;
        // 유효기간이 지났으면 결과에 추가    
        if(expireDays <= todayDays) {
            result.push(index + 1)
        }
    })
    return result;
}

1. toDays 함수: 날짜를 연도, 월, 일로 나누고 이를 일 단위로 변환하는 함수이다. 연도는 12개월, 한 달은 28일로 계산한다. 예를 들어, 1년은 12 * 28일로 처리된다. 이 함수는 2022.05.19 같은 날짜를 단순히 일수로 바꿔서 계산할 수 있게 해준다.

2. todayDays: 주어진 오늘 날짜를 일 단위로 변환한다. 이 값을 기준으로 개인정보의 유효기간이 지났는지 비교하게 된다.

3. termDict 객체: 약관 종류와 그에 해당하는 유효기간을 저장하는 객체이다. 예를 들어, A 6이 주어졌다면 A라는 약관의 유효기간은 6개월이 된다. 이를 termDict에 저장하여 나중에 약관 종류에 맞는 유효기간을 가져올 수 있게 한다.

4. result 배열: 파기해야 할 개인정보의 번호를 저장할 배열이다. 최종적으로 이 배열을 반환하게 된다.

5. privacies.forEach 반복문: 각 개인정보에 대해 수집 일자와 약관 종류를 분리하여 처리한다. 수집 일자를 toDays 함수를 통해 일수로 변환하고, 약관에 맞는 유효기간을 termDict에서 찾아서 이를 더한 후, 오늘 날짜와 비교하여 유효기간이 지났다면 해당 개인정보의 번호를 result에 추가한다.

6. expireDays: 수집된 날짜에 약관 유효기간을 더한 값을 의미한다. 이 값이 오늘 날짜보다 작거나 같다면 유효기간이 지난 것으로 판단하고 해당 개인정보 번호를 결과에 추가한다.

7. 주어진 오늘 날짜와 각 개인정보의 수집 일자를 비교하여 유효기간이 지난 개인정보를 찾아내고 그 번호들을 오름차순으로 반환한다.

다른사람의 풀이

// for문
function solution(today, terms, privacies) {
    let result = [];
    let obj1 = {};
    for(let e of terms){
        const [type, month] = e.split(" ");
        obj1[type] = month;
    }
    for(let i = 0; i < privacies.length; i++){
        const[start, type] = privacies[i].split(" ");
        let now = new Date(start);
        let date = new Date(today);
        now.setMonth(now.getMonth() + Number(obj1[type]));
        if(date >= now) result.push(i+1);
    }
    return result;
}

result 배열: 파기해야 할 개인정보 번호를 저장할 배열이다. 최종적으로 이 배열을 반환한다.

obj1 객체: 약관 종류와 그에 해당하는 유효기간(개월 수)을 저장하는 객체이다. 약관 정보 배열인 terms에서 약관 종류(type)와 유효기간(month)을 분리하여 obj1에 저장한다. 예를 들어, terms가 ["A 6", "B 12"]라면, obj1 객체는 { A: 6, B: 12 } 형태로 저장된다.

첫 번째 for 루프: terms 배열을 순회하면서 각 약관 정보를 객체 obj1에 저장한다. e.split(" ")을 사용해 약관 종류(type)와 유효기간(month)를 분리하고, 이를 객체의 키-값 쌍으로 저장한다.

두 번째 for 루프: privacies 배열을 순회하면서 각 개인정보 수집 일자와 약관 종류를 처리한다.

privacies[i].split(" ")를 사용해 개인정보 수집 일자(start)와 약관 종류(type)를 분리한다.

new Date(start)는 개인정보가 수집된 날짜를 Date 객체로 변환하고, new Date(today)는 오늘 날짜를 Date 객체로 변환한다.

now.setMonth(now.getMonth() + Number(obj1[type]))는 개인정보 수집 일자에 해당 약관의 유효기간(개월 수)을 더한다. 즉, 수집된 날짜에 약관에 따른 유효기간을 더한 새로운 날짜(now)를 계산한다.

날짜 비교: if (date >= now)는 오늘 날짜(date)가 개인정보의 유효기간이 지난 날짜(now)보다 크거나 같은지 확인하는 조건이다. 만약 오늘 날짜가 유효기간을 지난 경우라면, 해당 개인정보는 파기 대상이 된다.

결과 배열에 추가: 유효기간이 지났다면 result 배열에 해당 개인정보 번호(i + 1)를 추가한다. 번호는 1부터 시작하기 때문에 인덱스 i에 1을 더해 추가한다.

최종 반환: 유효기간이 지난 개인정보 번호들이 담긴 result 배열을 반환한다.

나의 풀이

function solution(babbling) {
    const canSay = ["aya", "ye", "woo", "ma"];
    let answer = 0;

    //발음 가능한 단어 
    for(let i = 0; i < babbling.length; i++){
        let babble = babbling[i];

        // 발음 가능 한 단어들 반복 시 (yeye) 문자열 유효 X 종료
        for(let j = 0; j < canSay.length; j++){
            if(babble.includes(canSay[j].repeat(2))){
                break;
            }
            // 반복이 아닌 경우 발음 가능한 단어 문자열 제거
            babble = babble.split(canSay[j]).join(" ");
        }
        // 남은 부분이 빈 문자열일 때 +1
        if(babble.split(" ").join("").length === 0){
            answer += 1;
        }
    }

    return answer;
}

다른사람의 풀이

function solution(babbling) {
    const babblables = ["aya", "ye", "woo", "ma"];

    return babbling.reduce((possible, babbl, index) => {
        for (let i = 0; i < babblables.length; i += 1) {
            if (babbl.includes(babblables[i].repeat(2))) return possible;
        }

        for (let i = 0; i < babblables.length; i += 1) {
            babbl = babbl.split(babblables[i]).join(' ').trim();
        }

        if (babbl) return possible;

        return possible += 1;
    }, 0)
}

🛂 연관된 커밋

ex) #7

#️⃣연관된 이슈

ex) #이슈번호, #이슈번호

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

```

나의 풀이

function solution(wallpaper) {
    // 위치 변수
    let lux = wallpaper.length; // 맨위
    let luy = wallpaper[0].length; // 맨왼쪽
    let rdx = 0; // 맨아래
    let rdy = 0; // 맨오른

    // 최소 범위 파일 위치
    for(let i = 0; i < wallpaper.length; i++){
        for(let j = 0; j < wallpaper[i].length; j++){
            if(wallpaper[i][j] === '#'){
                lux = Math.min(lux, i);
                luy = Math.min(luy, j);
                rdx = Math.max(rdx, i);
                rdy = Math.max(rdy, j);
            }
        }
    }
    // 맨 아래 파일 포함 끝점
    return [lux, luy, rdx + 1, rdy + 1];
}

다른사람의 풀이

function solution(wallpaper) {
    let left = [];
    let top = [];
    let right = []
    let bottom = [];
    wallpaper.forEach((v,i) => {
        [...v].forEach((val,ind) => {
            if(val === "#") {
                left.push(i)
                top.push(ind)
                right.push(i + 1)
                bottom.push(ind + 1)
            }
        })
    })
    return [Math.min(...left), Math.min(...top), Math.max(...right), Math.max(...bottom)]
}

나의 풀이

function solution(survey, choices) {
     const 스코어들 = {
        R: 0, T: 0,
        C: 0, F: 0,
        J: 0, M: 0,
        A: 0, N: 0,
    }

    // 테스트지 점수
    choices.forEach((choice, idx) => {
        const [비동의, 동의] = survey[idx]
        // 비동의 점수 더하기
        if(choice < 4) 스코어들[비동의] += (4 - choice);
        // 동의 점수 더하기
        if(choice > 4) 스코어들[동의] += (choice -4)
    });

    const result = [
        스코어들.R >= 스코어들.T ? 'R':'T',
        스코어들.C >= 스코어들.F ? 'C':'F',
        스코어들.J >= 스코어들.M ? 'J':'M',
        스코어들.A >= 스코어들.N ? 'A':'N'
    ].join('')

    return result;
}

mbti페이지를 만들 때 사용 했던 로직과 비슷하게 풀이 함

다른사람의 풀이

function solution(survey, choices) {
    const MBTI = {};
    const types = ["RT","CF","JM","AN"];

    types.forEach((type) =>
        type.split('').forEach((char) => MBTI[char] = 0)
    )

    choices.forEach((choice, index) => {
        const [disagree, agree] = survey[index];

        MBTI[choice > 4 ? agree : disagree] += Math.abs(choice - 4);
    });

    return types.map(([a, b]) => MBTI[b] > MBTI[a] ? b : a).join("");
}

app-index.tsx:25 Warning: Extra attributes from the server: class,style
at html
at RootLayout (Server)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)

next-theme 설치 후 provider 전역 적용 후 난 에러 전체 파일을 다 뒤져서 검사 하던 중, root layout.tsx 파일의 파일에

 <html lang="en" suppressHydrationWarning>
      <body className={`${spaceGrotesk.variable} ${geistSans.variable} ${geistMono.variable} antialiased`}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>

suppressHydrationWarning 적용 shadcn의 가이드를 제대로 읽어 보지 않아 생긴 에러

참고 : https://ui.shadcn.com/docs/dark-mode/next