nicksoon

️ 생성 패턴(Creational Patterns) 정리표

nicksoon — Fri, 25 Jul 2025 16:20:36 +0900

패턴 이름핵심 개념쉽게 말하면키워드 / 특징

Singleton	객체를 오직 하나만 생성	“하나만 만들어 써!”	전역 인스턴스, 하나의 객체 공유
Factory Method	객체 생성은 서브클래스에 맡김	“생성은 알아서 해줄게”	객체 생성 캡슐화, 서브클래스 결정
Abstract Factory	관련 객체들 그룹(패밀리)을 생성하는 인터페이스 제공	“세트로 만들어줄게”	제품군 생성, GUI 테마 등
Builder	복잡한 객체를 단계적으로 생성	“조립식으로 만들기”	순서대로 조립, 다양한 표현 가능
Prototype	기존 객체를 복제해서 생성	“복사해서 만들기”	clone, 원형 복제, 성능 최적화

상황별 요약 예

전역으로 하나만 유지해야 하는 설정/객체 → Singleton
어떤 객체를 생성할지 모를 때, 하위 클래스에 위임 → Factory Method
같은 계열의 객체들을 세트로 만들고 싶을 때 → Abstract Factory
복잡한 조립 단계가 필요한 객체를 만들고 싶을 때 → Builder
기존 객체를 복사해서 빨리 만들고 싶을 때 → Prototype

✅ 한 줄 요약

생성 패턴 = 객체를 어떻게 만들 것인가에 대한 패턴!
단순한 생성부터 복잡한 조립까지, 생성 방식을 유연하게 만들어 줘!

✅ HTTP DELETE 요청, 어떤 방식이 정답일까?

nicksoon — Fri, 25 Jul 2025 16:12:42 +0900

― 경로(Path), 쿼리(Query), 바디(Body) 각각의 의미와 실무 활용

RESTful API를 설계하다 보면 DELETE 요청을 통해 리소스를 삭제하는 기능을 자주 만들게 됩니다. 이때 가장 흔히 마주치는 질문은 다음과 같습니다:

"삭제할 ID는 어디에 담아야 하지? 경로? 쿼리? 바디?"
"여러 개를 삭제할 때는 어떻게 해야 하지?"

이 글에서는 DELETE 요청에서 데이터를 전달하는 방식들에 대해 정리하고, 제가 직접 겪은 **복수 항목 삭제 사례(rabmidx 여러 개 삭제)**를 기준으로 어떤 방식이 적합한지 공유해보겠습니다.

1. DELETE 요청에서의 데이터 전달 방식

✅ 1.1 URL 경로(Path Variable)

http

복사편집

DELETE /users/123

가장 권장되는 방식입니다.
단일 리소스를 삭제할 때 가장 명확하며, RESTful한 설계 원칙에 부합합니다.

✅ 1.2 쿼리 파라미터(Query Parameter)

http

복사편집

DELETE /users?user_id=123

가능은 하지만 일반적으로는 권장되지 않습니다.
의도나 동작이 명확하지 않아 혼란을 줄 수 있습니다.
일부 클라이언트에서 캐싱 등의 문제를 일으킬 수 있습니다.

⚠️ 1.3 요청 본문(Request Body)

http

복사편집

DELETE /users { "user_ids": [123, 124, 125] }

공식 HTTP 스펙에 명확히 금지된 것은 아니지만,
일부 서버나 프록시, 브라우저가 DELETE + Body를 예상하지 않고 무시할 수 있습니다.
하지만 복수 항목을 한 번에 삭제하는 경우에는 효율적인 방법이기도 합니다.

2. 복수 항목 삭제 시 실무 선택

제가 작업한 프로젝트에서는 메타 광고의 자동입찰 설정에서 여러 개의 rule(rabmidx)을 한꺼번에 삭제해야 했습니다. 다음과 같은 고민이 있었습니다:

Path 방식은 1개씩만 삭제 가능하므로 반복 요청 필요
Query 방식은 길어질 수 있고 RESTful하지 않음
Body 방식은 삭제할 ID 리스트를 담기에 적합, 트랜잭션 묶기도 쉬움

그래서 최종적으로 선택한 방식은?

http

복사편집

DELETE /api/v1/auto-bidding/roas/meta

json

복사편집

{ "rabmidx_list": [101, 102, 103] }

rabmidx_list 라는 배열을 Request Body에 담아 서버에 보냄
서버는 이를 반복 처리하여 삭제
속도와 일관성, 트랜잭션 처리 측면에서 효과적

3. 정리: 어떤 방식이 맞을까?

목적방식설명

단일 항목 삭제	DELETE /resource/{id}	✅ 가장 권장됨
복수 항목 삭제	DELETE /resource + Body	⚠️ 실무에서 자주 사용됨 (주의 필요)
조회/필터링 목적	DELETE /resource?key=value	❌ 명확하지 않으며 RESTful하지 않음

4. 실무 팁

내부 API나 통제된 환경에서는 DELETE + Body를 활용해도 큰 문제 없음
공개 API라면 DELETE /resource/{id} 형식을 기본으로 구성
프론트에서 삭제 실패 복구가 중요할 경우 → 각각 DELETE /id 요청 보내는 방식이 좋음
데이터가 많고 트랜잭션 묶기가 필요한 경우 → DELETE + Body가 더 효과적

마무리

HTTP 스펙은 하나지만, 현실에서는 다양한 제약과 유즈케이스가 존재합니다. 중요한 건 요청의 의미가 명확하고, 시스템 구조에 잘 맞는 방식을 선택하는 것입니다.

“왜 이 방식이 이 기능에 적합한가?” 를 기준으로, 여러분의 API 설계가 더 탄탄해지길 바랍니다!

️ 해킹·보안 주요 용어 정리표

nicksoon — Fri, 25 Jul 2025 09:59:54 +0900

분류용어쉽게 말하면핵심 개념/특징

접근 권한	루팅 (Rooting)	스마트폰을 뿌리까지 뚫음	안드로이드 루트 권한 획득
접근 권한	루트킷 (Rootkit)	몰래 루트 권한 탈취 도구	백도어 + 은폐 기능
바이러스/웜	스턱스넷 (Stuxnet)	공장 설비 망가뜨리는 웜	핵시설 파괴 목적, PLC 공격
무선 해킹	Evil Twin Attack	가짜 Wi-Fi 만들어 유도	피싱 사이트 유도, 정보 탈취
심리 공격	사회공학 (Social Engineering)	사람을 속여서 정보를 얻음	메일, 전화, 대면 공격 등
속임수	피싱 (Phishing)	진짜처럼 속여서 정보 탈취	이메일, 가짜 사이트 사용
속임수	파밍 (Pharming)	악성코드로 진짜 주소 눌러도 피싱 사이트로 감염 유도	DNS 변조, Hosts 파일 조작
URL 조작	타이포스쿼팅	주소 오타 노려 가짜 사이트로 유도	네이버 대신 neiver 등
URL 조작	Tabnabbing	몰래 열린 탭을 피싱 페이지로 바꿈	_blank 링크 취약점
거짓정보	혹스 (Hoax)	“이거 바이러스야!” 거짓 정보 유포	공포심 유발, 혼란 조장
주소 위조	IP Spoofing	IP 주소를 속임	출처를 위조해 신뢰 유도
트래픽 공격	Port Scanning	열린 포트 찾는 스캐닝	보안 취약점 조사 도구
트래픽 공격	Smurf Attack	ICMP 패킷 폭탄 공격	Echo 요청 → Broadcast 응답 폭탄
트래픽 공격	Nuking	특정 IP에 패킷 연속 전송	윈도우 블루스크린 유도
감시 공격	패킷 스니핑 (Sniffing)	몰래 트래픽 엿보기	도청, 정보 탈취
위장 공격	스푸핑 (Spoofing)	속이는 것 전부 (IP, DNS, MAC 등)	속임수 기반 공격
제로데이 공격	Zero-Day Attack	알려지지 않은 취약점 이용	보안 패치 전 공격
스위치 공격	Switch Jamming	네트워크 혼란 유도	스위치 MAC 테이블 무력화
작은 누수	살라미 기법	돈을 아주 조금씩 빼감	로그 변조, 자투리 절취
협박형 악성코드	트랙웨어 (Ransomware)	파일 잠그고 돈 요구	몸값 요구, 암호화 후 협박
공포 유도	스케어웨어 (Scareware)	“당신 감염됨!” 공포심 조장	가짜 보안 경고 후 결제 유도
광고 공격	멀버타이징 (Malvertising)	정상 광고로 위장한 악성코드	광고 클릭만으로 감염됨
광고 프로그램	애드웨어 (Adware)	광고를 계속 띄우는 프로그램	사용자의 동의 없이 설치

유형별 정리 요약

유형관련 용어

✅ 권한 탈취	루팅, 루트킷
무선 공격	Evil Twin
심리/속임수	피싱, 파밍, 혹스, 타이포스쿼팅, Tabnabbing
트래픽/네트워크 공격	Smurf, Nuking, IP Spoofing, Switch Jamming, Port Scanning
악성코드	스턱스넷, 트랙웨어, 스케어웨어, 멀버타이징, 애드웨어
️ 정보 유출	Sniffing, Spoofing, Zero-Day
금융/사기	살라미, 스케어웨어

✅ 한 줄 요약

정보보안 위협은 크게 속이는 공격 / 강제로 침입하는 공격 / 몰래 빼내는 공격으로 나눌 수 있고,
각 공격마다 도구나 수법이 다르기 때문에 이름과 개념을 정확히 구분하는 것이 중요해!

Malvertising (멀버타이징)

nicksoon — Thu, 24 Jul 2025 14:26:24 +0900

단어 분석

Malicious + Advertising = Malvertising

Malicious (악의적인)
Advertising (광고)
즉, 악성 광고를 의미해!

쉽게 설명하면?

정상적인 광고처럼 보이지만,
실제로는 클릭하는 순간 악성코드가 몰래 깔리는 공격이야!

예시로 설명해볼게

너가 유명 뉴스 사이트에 들어갔어. (정상 사이트야!)
그런데 그 안에 있던 배너 광고에
해커가 만든 악성 스크립트가 숨겨져 있었어.
너는 그냥 광고를 클릭했을 뿐인데...
랜섬웨어, 스파이웨어 같은 악성코드가 자동으로 설치됨!

특징 요약

항목설명

정체	Malicious + Advertising
방식	정상적인 광고 네트워크를 이용해 악성코드 유포
감염 경로	광고 클릭 또는 광고에 자동 실행 코드 포함
특징	보안 솔루션 우회 가능, 대형 사이트 방문자도 감염될 수 있음
예	뉴스 사이트, 유튜브, 게임 광고 등

✅ 한 줄 요약

Malvertising = 광고를 통해 악성코드를 유포하는 최신 해킹 기법!

switch jamming

nicksoon — Thu, 24 Jul 2025 10:18:50 +0900

먼저, 네트워크 스위치가 뭐야?

**스위치(Switch)**는 컴퓨터끼리 데이터를 정확하게 전달해주는 장비야.
예를 들어 A가 B에게 보내는 메시지는,
스위치가 보고 “아~ 이건 B한테 가야지!” 하고 딱! 보내줘.

즉, 누가 누구에게 데이터를 주고받는지 기억해서 정리해 주는 장치야!

그럼 Switch Jamming은?

해커가 스위치의 기억을 혼란스럽게 만들어서
데이터가 엉뚱한 데로 가게 하거나,
모든 포트에 다 퍼지게 만드는 공격이야!

아주 쉬운 예시

상상해봐!

스위치는 학교 선생님!
학생 A가 B에게 쪽지를 보내면, 선생님이 “B한테만 전달!” 해줘.

근데 누가 계속 말해:

“저 A예요!”
“저도 A예요!”
“저기요~ 저도 A예요!”

이렇게 거짓말하는 애들이 너무 많아서
선생님(스위치)이 헷갈려!

결국 선생님은 “몰라! 그냥 모든 애들한테 쪽지를 줘!” 하고 퍼뜨림!

➡️ 이게 바로 스위치 재밍이야

이 공격의 핵심은?

스위치는 MAC 주소 테이블이라는 걸로
“이 컴퓨터는 이 포트에 있어~” 하고 기억해.
근데 해커가 수백 개의 가짜 MAC 주소를 막 보내서
스위치의 기억 공간을 꽉 채워버려!
그러면 스위치는 모든 포트에 브로드캐스트 하게 돼!
해커는 그걸 몰래 듣는(스니핑) 데 써!

✅ 한 줄 요약

Switch Jamming = 스위치한테 수많은 가짜 주소를 보내서, 스위치를 헷갈리게 만들고 데이터가 엉뚱하게 흐르게 하는 해킹 공격!

정보처리기사 실기 요점 정리

항목설명

대상	네트워크 스위치
방법	가짜 MAC 주소 폭탄 전송
결과	스위치 MAC 테이블 마비 → 데이터가 모든 포트로 퍼짐
해커 목적	데이터 가로채기(스니핑), 네트워크 혼란 유도

알려지지 않은 취약점 공격이란?

nicksoon — Fri, 11 Jul 2025 19:17:12 +0900

이건 프로그램이나 앱 안에 몰래 숨어 있는 ‘구멍’을 해커가 먼저 찾아서 공격하는 거야.

이 구멍은 아무도 아직 모르는 거야. (심지어 만든 회사도!)
그래서 "제로데이(0-day)" 공격이라고도 불러.
해커가 이 구멍을 통해 컴퓨터 안에 몰래 들어가거나, 바이러스를 심을 수 있어!

예를 들어:

너가 게임을 하고 있는데, 누군가가 그 게임에 숨겨진 문을 통해 몰래 들어와서 너 몰래 캐릭터를 조종하는 거야.
그 문은 게임 만든 사람도 아직 모르는 거야!

Evil Twin Attack이란?

nicksoon — Fri, 11 Jul 2025 19:15:46 +0900

Evil Twin Attack은 영어로 "악당 쌍둥이 공격"이야. 그런데 이건 진짜 쌍둥이가 아니라, 가짜 와이파이를 진짜처럼 흉내내는 속임수야!

예를 들어 볼게:

네가 스타벅스에서 "Starbucks_WiFi"라는 와이파이를 자주 쓰고 있어.

그런데 누가 "Starbucks_Free_WiFi"라는 이름으로 똑같이 생긴 와이파이를 만들어서 너한테 보여줘.

네가 “어? 이게 진짜 스타벅스 와이파이인가?” 헷갈려서 잘못 연결하면,
그 사람이 너의 비밀번호, 사진, 메시지 같은 걸 몰래 볼 수 있어!

왜 "가짜 WiFi" 공격일까?

진짜처럼 보이지만 사실은 가짜 와이파이니까!
너는 속아서 연결하지만, 사실은 나쁜 해커의 와이파이에 연결된 거야.

️ 어떻게 조심할까?

모르는 와이파이는 함부로 연결하지 않기!
비밀번호 없는 와이파이는 조심하기!
VPN을 쓰면 더 안전해! (어른이 도와줄 수 있어 )

해당 자료는 GPT 한테 물어보며 이해 한 것을 옮겨 적었습니다

Netlify 프로젝트 배포 후 가비아 서브도메인 연결하기

nicksoon — Wed, 25 Jun 2025 00:50:44 +0900

배포를 마치고 Netlify 기본 URL이 아닌, 내가 소유한 도메인 study.nickdeveloper.co.kr로 접속하려면 도메인 연결 설정을 추가로 해줘야 합니다.

배포 후 결과 이미지

Netlify로 배포만 한 경우, study.nickdeveloper.co.kr이 아닌 https://[랜덤].netlify.app 형식의 기본 URL로만 접속이 가능합니다.

배포를 하고 도메인을 연결을 하지 않았으면 study.nickdeveloper.co.kr 이 아닌 다른 Netlify에서 제공하는 URL이 나옵니다

배포 전 URL

1️⃣ Netlify에서 Domain Management 클릭

Netlify 프로젝트 대시보드에서 "Domain management" 메뉴를 선택합니다.

2️⃣ 연결할 도메인 입력

사용할 도메인 또는 서브도메인(예: study.nickdeveloper.co.kr)을 입력합니다.

3️⃣ 도메인 등록 업체(예: 가비아)에서 DNS 레코드 추가

가비아 등에서 도메인을 구매한 경우, 다음 두 가지 DNS 레코드를 추가해야 합니다:

TXT 레코드
→ Netlify가 도메인 소유를 인증할 수 있도록 TXT 값을 설정합니다.
CNAME 레코드
→ study(서브도메인) → your-site.netlify.app 형식으로 연결합니다.

TXT 를 추가 합니다

CNAME 추가를 합니다

4️⃣ Netlify에서 Subdomain 추가

Netlify로 돌아와서 “Add subdomain” 버튼을 눌러 입력한 서브도메인을 추가합니다.

5️⃣ Netlify DNS 활성화 여부 확인

Netlify DNS가 활성화되었는지 확인하세요. 아직 반영되지 않았다면 5분에서 10분 정도 기다린 후 다시 확인합니다.

안 나온 경우 5분에서 10분 정도 기다리면 됩니다.

6️⃣ HTTPS 자동 설정

Netlify는 Let’s Encrypt를 통해 HTTPS 인증서를 자동 발급해 줍니다. 별도 작업은 필요 없습니다.

7️⃣ Verify DNS Configuration 클릭

"Verify DNS configuration" 버튼을 클릭하여 설정을 검증합니다.
1분 정도 지난 후 페이지를 새로 고침하면 연결 여부가 확인됩니다.

서브도메인 확인

✅ 최종 확인

서브도메인(study.nickdeveloper.co.kr)으로 접속하여 사이트가 잘 연결되었는지 확인합니다.

정보처리기사 실기 공부, 직접 만든 쪽지시험 웹앱으로!

nicksoon — Tue, 24 Jun 2025 14:38:55 +0900

정보처리기사 실기 공부를 하다 보면 암기할 개념이 정말 많죠. 소프트웨어 공학, 디자인 패턴, SDLC, 알고리즘… 책만 붙잡고 있다 보면 어느새 집중력이 흐려질 때도 많고요.

그래서 저는 GPT와 함께 쪽지시험 웹앱을 직접 만들어 공부에 활용하고 있어요.

직접 문제를 만들고, 웹으로 테스트를 하다 보니 공부도 더 재밌고 오래 기억에 남습니다.

⚙️ 어떤 기술로 만들었을까?

HTML + CSS + JavaScript로 구성된 정적인 웹앱입니다.
반응형 디자인을 적용하여 모바일에서도 보기 쉽게 만들었습니다.
문제는 GPT의 도움을 받아 작성했고, 직접 책을 보며 추가하고 다듬었어요.
JavaScript로 문제를 배열에 저장하고, input으로 정답을 받아 정오답을 판별합니다.

공부가 되는 이유

직접 문제를 만들면서 개념을 정리하게 됩니다.
단순히 읽는 것이 아니라 능동적으로 상기하며 복습할 수 있어요.
언제 어디서든 웹으로 들어가 간편하게 학습할 수 있습니다.
GPT의 도움으로 빠르게 문제를 생성하고, 중복도 줄일 수 있었어요.

앞으로 해보고 싶은 것

문제를 카테고리별로 나누기 (예: 소프트웨어공학, 네트워크, 알고리즘 등)
문제 랜덤 출제 기능 추가
정답률 기록 기능
로그인 없이 간단한 로컬 저장 기능

마무리

정보처리기사 실기 시험, 쉽지 않지만 포기하지 않으면 반드시 합격할 수 있다고 믿습니다.
저처럼 스스로 문제를 만들거나, 웹 퀴즈를 만들어보는 것도 좋은 공부 방법이 될 수 있어요.
혹시 관심 있는 분들은 아래 링크에서 직접 풀어보시고, 피드백도 언제든 환영입니다!

https://study.nickdeveloper.co.kr

함께 공부하시는 모든 분들, 진심으로 응원합니다! ✨

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>정보처리기사 실기 단답형 퀴즈</title>
  <style>
    *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
  body {
    font-family: sans-serif;
    text-align: center;
    margin: 5vh 5vw;
  }

  .card {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    max-width: 600px;
    margin: auto;
    box-shadow: 0 0 10px #eee;
  }

  input[type="text"] {
    width: 90%;
    padding: 12px;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  button {
    padding: 10px 16px;
    margin: 5px;
    font-size: 1rem;
    cursor: pointer;
  }

  #result {
    margin-top: 15px;
    font-weight: bold;
  }

  /*   모바일 대응: 화면이 600px 이하일 때 스타일 조정 */
  @media screen and (max-width: 600px) {
    body {
      margin: 5vh 2vw;
    }

    .card {
      padding: 10px;
      width: 100%;
      box-shadow: none;
    }

    input[type="text"] {
      width: 90vw;
      font-size: 1rem;
    }

    button {
      width: 90vw;
      font-size: 1rem;
    }
  }
</style>
  <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/1055/1055684.png" type="image/png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="정보처리기사 실기 단답형 퀴즈로, 소프트웨어 공학과 디자인 패턴에 대한 문제를 제공합니다.">
  <meta name="keywords" content="정보처리기사, 실기, 단답형, 퀴즈, 소프트웨어 공학, 디자인 패턴">
</head>
<body>
  <div class="card">
    <h2>문제</h2>
    <div id="question">문제를 불러오는 중...</div>

    <input type="text" id="userInput" placeholder="정답을 입력하세요">
    <div>
      <button onclick="prevQuestion()">이전 문제</button>
      <button onclick="checkAnswer()">정답 확인</button>
      <button onclick="nextQuestion()">다음 문제</button>
    </div>

    <div id="result"></div>
  </div>

  <script>
    const quiz = [
      { q: "소프트웨어의 규모를 LOC 기반으로 예측하고, 소프트웨어 유형에 따라 비용을 산정하는 공식을 적용하는 비용을 산정하는 모델은?", a: "COCOMO" },
      { q: "조직형, O만 라인 이하의 일반 업무용 소프트웨어 개발 프로젝트", a: "5만 라인 이하" },
      { q: "반분리형 OO만 라인 이하의 운영체제나 DBMS 같은 소프트웨어 개발 프로젝트", a: "30만 라인 이하" },
      { q: "TCP와 UDP 중 연결지향적인 프로토콜은?", a: "TCP" },
      { q: "내방형, OO만 라인 이상의 미사일 유도 시스템, 신호기 제어 시스템 같은 대규모 복잡 소프트웨어 개발 프로젝트", a: "30만 라인 이상" },
      { q: "프로젝트 핵심 관리 대상 3P", a: "사람, 문제, 프로세스" },
      { q: "신속하고 반복적인 작업을 통해 지속적으로 작동 가능한 소프트웨어를 개발하는 방식", a: "애자일" },
      { q: "XP 5가지 핵심", a: "용기, 존중, 의사소통, 피드백, 단순성" },
      { q: "폭포수 모델과 프로토타이핑 모델의 장점을 결합하고, 위험 분석을 추가하여 점진적으로 개발하는 모델", a: "나선형 모델" },
      { q: "나선형 모델의 순서", a: "계획 및 요구 분석, 위험 분석, 프로토타입, 고객 평가 및 피드백" },
      { q: "객체의 세부 구현을 숨기고 인터페이스만 제공하여 내부 구현을 보호한다", a: "캡슐화" },
      { q: "객체 내부의 세부 사항을 외부로부터 숨김으로써 안정성을 높인다", a: "정보 은닉" },
      { q: "재사용과 확장성을 위해 상위 클래스의 속성과 메서드를 하위 클래스가 상속한다", a: "상속" },
      { q: "하나의 인터페이스가 다양한 형태의 구현을 가질 수 있어 유연한 프로그래밍이 가능하다", a: "다형성" },
      { q: "복잡한 현실 세계를 단순화하여 필요한 부분만을 모델링한다", a: "추상화" },
      { q: "소프트웨어 개발 단계", a: "계획, 요구사항 분석, 설계, 구현, 테스트, 유지보수" },
      { q: "소프트웨어 공학의 3R", a: "역공학, 재공학, 재사용" },
      { q: "정렬 알고리즘 중 평균 시간 복잡도가 가장 빠른 알고리즘은?", a: "퀵 정렬" },
      { q: "시스템 개발 생명주기(SDLC)의 첫 번째 단계는?", a: "요구사항 분석" },
      { q: "데이터 흐름도(DFD)에서 처리 과정을 나타내는 기호는?", a: "원" },
      { q: "교착상태 발생 조건 중 자원을 점유한 채 다른 자원을 기다리는 상태는?", a: "상호 대기" },
      { q: "비대칭키 암호화 방식 중 대표적인 알고리즘은?", a: "RSA" },
      { q: "객체를 1개만 생성하고 공유하는 디자인 패턴은?", a: "Singleton" },
      { q: "객체 생성을 서브 클래스에 위임하는 디자인 패턴은?", a: "Factory Method" },
      { q: "관찰자에게 상태 변경을 통지하는 디자인 패턴은?", a: "Observer" },
      { q: "행동 알고리즘을 런타임에 교체할 수 있게 하는 디자인 패턴은?", a: "Strategy" },
      { q: "알고리즘의 틀을 상위 클래스가 정의하고 하위 클래스가 구체화하는 디자인 패턴은?", a: "Template Method" },
      { q: "관련 객체를 집합으로 생성하는 디자인 패턴은?", a: "Abstract Factory" },
      { q: "복잡한 객체 생성 절차를 분리하는 디자인 패턴은?", a: "Builder" },
      { q: "기존 객체를 복제하여 사용하는 디자인 패턴은?", a: "Prototype" },
      { q: "호환되지 않는 인터페이스를 연결하는 디자인 패턴은?", a: "Adapter" },
      { q: "트리 구조로 구성 요소를 조합하는 디자인 패턴은?", a: "Composite" },
      { q: "기존 객체에 기능을 덧붙이는 디자인 패턴은?", a: "Decorator" },
      { q: "복잡한 서브시스템에 단순한 인터페이스를 제공하는 디자인 패턴은?", a: "Facade" },
      { q: "객체에 대한 대리자를 제공하는 디자인 패턴은?", a: "Proxy" },
      { q: "요청을 객체로 캡슐화하는 디자인 패턴은?", a: "Command" },
      { q: "상태에 따라 동작이 바뀌는 디자인 패턴은?", a: "State" },
      { q: "GoF 디자인 패턴의 저자 중 한 명으로, G으로 시작하는 이름은?", a: "Erich Gamma" },
      { q: "GoF 디자인 패턴 공동 저자 중 H로 시작하는 이름은?", a: "Richard Helm" },
      { q: "GoF 디자인 패턴 공동 저자 중 J로 시작하는 이름은?", a: "John Vlissides" },
      { q: "GoF 디자인 패턴 공동 저자 중 J가 아닌 이름은?", a: "Ralph Johnson" },
      { q: "디자인 패턴 책 \"Design Patterns\"을 집필한 4인의 별칭은?", a: "GoF" },
      { q: "객체 관계도 사각형", a: "객체" },
      { q: "객체 관계도 마름모", a: "관계" },
      { q: "객체 관계도 타원", a: "속성" },
      { q: "객체 관계도 밑줄 타원", a: "기본키 속성" },
      { q: "객체 관계도 이중 타원", a: "복합 속성" },
      { q: "객체 관계도 선 링크", a: "객체와 속성 연결" },

    ];

    let current = 0;

    function showQuestion() {
      document.getElementById("question").innerText = quiz[current].q;
      document.getElementById("userInput").value = "";
      document.getElementById("result").innerText = "";
    }

    function checkAnswer() {
      const userAnswer = document.getElementById("userInput").value.trim();
      const correctAnswer = quiz[current].a.trim();

      if (normalize(userAnswer) === normalize(correctAnswer)) {
        document.getElementById("result").innerHTML = "✅ 정답입니다!";
      } else {
        document.getElementById("result").innerHTML = `❌ 오답입니다. <br>정답: ${correctAnswer}`;
      }
    }

    function normalize(str) {
      return str.replace(/\s+/g, "").toLowerCase();
    }

    function nextQuestion() {
      current = (current + 1) % quiz.length;
      showQuestion();
    }
   function prevQuestion() {
      current = (current - 1 + quiz.length) % quiz.length;
      showQuestion();
    }
    window.onload = showQuestion;
  </script>
</body>
</html>

제발 학격하자!!

재부팅 시 PM2 프로세스 자동 재실행 설정

nicksoon — Fri, 9 May 2025 10:11:55 +0900

. 배경

사건
- 서버가 예기치 않게 재부팅되면서, PM2로 구동 중이던 Node.js/Python 서비스가 모두 중단됨
- 고객이 “로그인 불가”로 문의 → 재해 복구 절차 점검
원인
- 서버 재부팅 후 PM2가 자동으로 프로세스를 복원하도록 설정되지 않음
영향
- Web/API 서버 다운 → 고객 서비스 불가
- 다행히 DB는 자동으로 올라왔으나, 애플리케이션까지 복구되지 않았다면 큰 사고로 이어질 수 있었음

2. 환경

운영체제: Ubuntu
프로세스 매니저: PM2
구동 중인 앱:
- app.js (Node.js)
- main.py (Python / FastAPI 등)

3. 해결 및 설정 절차

PM2로 애플리케이션 실행

# 예시: Node.js
pm2 start app.js --name web-server

# 예시: Python (FastAPI/Uvicorn)
pm2 start main.py \
  --name api-server \
  --interpreter python3 \
  -- watch false

2. 현재 프로세스 목록·상태 저장

pm2 save

PM2가 관리 중인 프로세스와 환경 설정을 디스크에 기록합니다.

3. 시스템 부팅 시 PM2가 자동 실행되도록 설정

pm2 startup

명령 실행 후 출력되는 스크립트를 복사·붙여넣기 해서 한 번 더 실행
부팅 시 /etc/systemd/system/pm2-root.service 등이 생성되어 PM2가 자동 기동됨

4. 설정 확인

pm2 list      # 재부팅 후에도 프로세스가 online 상태로 복원됐는지 확인

5. (선택) 강제 복원

만약 부팅 직후 바로 복원이 안 될 경우:

pm2 resurrect

pm2 save 직전 상태로 프로세스를 복원합니다.

이렇게 설정해 두면, 이후 서버가 재부팅되어도 PM2가 자동으로 다시 기동되어 애플리케이션이 무중단으로 복원됩니다.

가비아 네입서버 연결 후 카페24 도메인 관리

nicksoon — Mon, 14 Apr 2025 16:29:44 +0900

도메인은 가비아, 호스팅은 카페24로 저렵하게 사용하는 경우 도메인 관리에 문제가 발생을 하는데

주로 서버 전문가가 아닌 분들이 이렇게 하며 관리에 문제가 생깁니다.

이때 카페24로 네입서버 설정한 분들의 문제를 해결하고자 준비했습니다.

카페24에서 가비아로 로그인 하지 않고 바로 관리 할 수 있는 방법을 정리 했습니다.

특히 필요한 경우 ssl 도메인 인증을 할 경우 필요합니다.

우선 가비아 네임 서버 설정을 했는지 확인합니다.

가비아 네임서버 설정 화면

저도 잘 몰라 검색해 보니

ns1.cafe24.com, ns1.cafe24.co.kr, ns2.cafe24.com, ns2.cafe24.co.kr
이렇게 하라 해서 추가 했습니다

가비아 네입서버 입력

다음 카페24 호스팅 센터에 들어옵니다.

리스트 중에서

"호스팅 관리" 다음 "도메인 관리"를 클릭합니다

카페24 호스팅 left nav

여기서 "DNS 관리"를 클릭합니다.( 추가로 최근 UI가 변경되어 저도 찾았습니다)

카페24 도메인 리스트

등록된 도메인 리스트를 볼 수 있습니다.

선택 후 "DNS 관리" 버튼을 클릭합니다.

카페24 DNS 관리 페이지

여기서 각 별칭 등 관리를 시작하면 됩니다.

Git Push 오류 해결하기: non-fast-forward와 그 해결책

nicksoon — Wed, 19 Mar 2025 10:15:09 +0900

git error

Git을 사용하다 보면 git push 명령어 실행 시

! [rejected] main -> main (non-fast-forward) 오류를 마주칠 수 있습니다.

이는 여러분의 로컬 main 브랜치가 원격 저장소의 main 브랜치보다 뒤쳐져 있음을 의미합니다.

즉, 다른 사람이 여러분이 마지막으로 pull 한 이후로 원격 저장소에 변경 사항을 푸시했기 때문입니다.

git push -f (강제 푸시)는 다른 사람의 작업 내용을 덮어쓸 위험이 있으므로 권장하지 않습니다.

 git push -f origin
 
 ! [rejected]        main -> main (non-fast-forward)
error: failed to push some refs to '깃주소'

데이터를 받으라는 힌트가 나와요

hint: Updates were rejected because the tip of your current branch is behind
hint: 'git pull ...') before pushing again.

해결책 (권장):

git pull origin main: 이 명령어는 원격 main 브랜치의 최신 변경 사항을 가져와 여러분의 로컬 main 브랜치에 병합합니다. 이렇게 하면 로컬 복사본이 최신 상태가 됩니다. 병합 충돌이 발생하면 수동으로 해결해야 합니다.
git push origin main: 성공적으로 pull 한 후, 이 명령어를 사용하여 로컬 변경 사항을 원격 저장소에 푸시합니다.

git pull이 실패하는 경우:

git pull origin main --allow-unrelated-histories

이렇게 pull 받으면 업로드가 가능합니다

From ~~~~깃주소
 * branch            main       -> FETCH_HEAD
Merge made by the 'recursive' strategy.
 README.md | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

PS D:\07.work\code\healsCheck> git push main
fatal: 'main' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
Enumerating objects: 17, done.
Counting objects: 100% (17/17), done.
Compressing objects: 100% (16/16), done.
Writing objects: 100% (16/16), 7.91 KiB | 3.96 MiB/s, done.
Total 16 (delta 1), reused 0 (delta 0), pack-reused 0
To 깃주소
   4240981..7224391  main -> main

이 옵션은 브랜치의 히스토리가 완전히 다를 때 (예: 완전히 별개의 히스토리를 가진 브랜치를 병합하는 경우) 필요합니다. 하지만 주의해서 사용해야 합니다. 잘못 사용하면 복잡한 히스토리를 만들 수 있습니다.

Next.js의 useParams 및 useSearchParams 사용법

nicksoon — Wed, 12 Mar 2025 14:53:18 +0900

Next.js의 최신 버전에서 URL 파라미터 및 쿼리 파라미터를 가져오는 방법이 변경되었습니다.

이전의 React Router와 다르게, Next.js에서는 next/navigation 모듈을 통해 URL의 동적 파라미터 및 쿼리 파라미터를 쉽게 가져올 수 있는 훅들을 제공합니다.

1. 문자열 및 쿼리 파라미터 가져오기

useParams 훅

useParams는 현재 경로에서 동적 파라미터를 가져오는 훅입니다. 주로 페이지 라우팅에서 URL의 세그먼트로 전달된 값을 읽을 때 사용됩니다.

사용 예시

import { useParams } from 'next/navigation';

export default function Home() {
    const { clientId } = useParams(); // URL에서 clientId 가져오기
    
    // 구현할 로직...
}

위 코드에서 clientId는 URL 경로에 정의된 클라이언트 ID를 나타냅니다.

useSearchParams 훅

useSearchParams는 URL의 쿼리 파라미터를 가져오는 데 사용됩니다. 이 훅은 검색 문자열에 포함된 파라미터를 쉽게 읽고 쿼리 파라미터를 검색할 수 있도록 도와줍니다.

사용 예시

import { useSearchParams } from 'next/navigation';

export default function Home() {
    const searchParams = useSearchParams(); // 쿼리 파라미터 가져오기
    const media = searchParams.get('media'); // 특정 쿼리 파라미터를 가져옴
    
    // 구현할 로직...
}

위 코드에서 media는 쿼리 문자열 안의 media 파라미터의 값을 나타냅니다.

2. 프로젝트 폴더 구조

Next.js에서 동적 라우팅을 구현하기 위해서는 폴더 구조를 다음과 같이 설정해야 합니다.

src/
├── app/
│   ├── client/
│   │   ├── [clientId]/       // 클라이언트 ID를 동적으로 처리
│   │   │   ├── workboard/     // 각 클라이언트의 작업 보드
│   │   │   │   └── page.tsx   // 작업 보드 페이지
│   ├── ...
└── ...

navigation.d.ts 을 보면 가져오는 방법이 있습니다

import type { Params } from '../../server/request/params';
import { type AppRouterInstance } from '../../shared/lib/app-router-context.shared-runtime';
import { ReadonlyURLSearchParams } from './navigation.react-server';

/**
 * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
 * that lets you *read* the current URL's search parameters.
 *
 * Learn more about [`URLSearchParams` on MDN](https://developer.mozilla.org/docs/Web/API/URLSearchParams)
 *
 * @example
 * ```ts
 * "use client"
 * import { useSearchParams } from 'next/navigation'
 *
 * export default function Page() {
 *   const searchParams = useSearchParams()
 *   searchParams.get('foo') // returns 'bar' when ?foo=bar
 *   // ...
 * }
 * ```
 *
 * Read more: [Next.js Docs: `useSearchParams`](https://nextjs.org/docs/app/api-reference/functions/use-search-params)
 */
export declare function useSearchParams(): ReadonlyURLSearchParams;

/**
 * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
 * that lets you read a route's dynamic params filled in by the current URL.
 *
 * @example
 * ```ts
 * "use client"
 * import { useParams } from 'next/navigation'
 *
 * export default function Page() {
 *   // on /dashboard/[team] where pathname is /dashboard/nextjs
 *   const { team } = useParams() // team === "nextjs"
 * }
 * ```
 *
 * Read more: [Next.js Docs: `useParams`](https://nextjs.org/docs/app/api-reference/functions/use-params)
 */
export declare function useParams<T extends Params = Params>(): T;

3. 요약

훅 사용: useParams와 useSearchParams 훅을 통해 URL의 경로에서 동적 파라미터와 쿼리 파라미터를 가져올 수 있습니다.
폴더 구조: 동적 URL 처리를 위한 폴더 구조를 정의하여 각 클라이언트에 대한 페이지를 쉽게 관리할 수 있습니다.

웹 페이지 캐시 문제 해결하기

nicksoon — Thu, 6 Mar 2025 14:58:41 +0900

웹 개발 및 배포 과정에서, 변경된 내용이 모든 사용자에게

즉시 반영되지 않는 문제는 흔히 발생합니다.

특히, 프론트엔드 작업 후 내 PC에서는 정상적으로 작동하나,

고객의 PC에서는 이전 버전이 보이는 상황이 발생할 수 있습니다.

그럴 때마다 고객에게 강력 새로고침(CTRL + SHIFT + R)을

요청하는 것은 사실상 불가능합니다.

이 문제의 원인은 바로 브라우저 캐시 때문입니다.

브라우저는 페이지 로딩 속도를 높이기 위해 캐시를 사용하여 자주 호출되는 데이터를 저장합니다.

하지만, 이는 새로운 업데이트가 반영되지 않는 문제를 야기할 수 있습니다.

해결책: 캐시 무효화(Cache Busting) 기법

캐시 문제를 해결하기 위한 가장 효과적인 방법 중 하나는

캐시 무효화(Cache Busting) 기법을 사용하는 것입니다.

이는 자바스크립트 파일이나 스타일시트와 같은 리소스 파일의 URL에

버전 정보를 추가하는 방식입니다.

이를 통해 브라우저가 항상 최신 파일을 가져오도록 유도할 수 있습니다.

방법:

리소스 파일의 URL에 쿼리 파라미터를 추가하여 버전을 명시합니다. 예를 들어:

script.js?v=0.1.1
style.css?cc=20250306

이렇게 하면 캐시된 이전 버전이 아닌,

최신 버전의 파일이 로드됩니다.

이는 변경 사항이 있을 때마다 쿼리 파라미터의 값을 변경하여 적용할 수 있습니다.

예시

import { downloadCSV, formatNumber } from "../function.js?v=0.2.0";

위 방법을 통해, 트래픽 과다 발생을 피하면서도

변경된 스크립트가 모든 사용자에게 적시에 반영되도록 할 수 있습니다.

웹 서비스의 안정성과 사용자 경험 개선을 위해 캐시 무효화 기법을 적극 활용하시기 바랍니다.

함수형 프로그래밍의 장점과 실전 활용

nicksoon — Fri, 28 Feb 2025 18:27:44 +0900

함수형 함수형 하는데 너무 어렵더라고요

분명 중요하고 아는 내용인데 개발을 하면서 많이 놓지고 있는 부분이었서요

하지만 최근에 저는 함수형 프로그래밍에 대한 이해를 높이고,(배우고~)

JavaScript에서 그것을 활용하여 코드를 개선하는 데 주력했습니다.

오늘은 제가 느낀 점과 함께, 함수형 프로그래밍이 어떻게 복잡한 코드를

더 간결하게 만들어주는지에 대해 이야기하고 싶습니다.

아직 100% 이해를 하고 적립한 것이 아닌 아~~ 정도 60% 이해를 한 상황이라 설명이 많이 미숙합니다

단도직입적으로

기존 코드의 문제점

제가 처음 접했던 코드는 다음과 같은 형태로,

길고 복잡해서 유지보수하기 어려운 부분이 많았습니다:

for (let i = start; i < end; i++) {
    const element = KEYWORD_ARRAY[i];
    if (!element) {
        break;
    }
    if (element.relKeyword === keyword) {
        KEYWORD_ARRAY[i].category1 = keyword_info.category ? keyword_info.category.category1 : "";
        KEYWORD_ARRAY[i].category2 = keyword_info.category ? keyword_info.category.category2 : "";
        KEYWORD_ARRAY[i].category3 = keyword_info.category ? keyword_info.category.category3 : "";
        KEYWORD_ARRAY[i].category4 = keyword_info.category ? keyword_info.category.category4 : "";
        KEYWORD_ARRAY[i].total = keyword_info.total;
    }
}

BASE_KEYWORD_ARRAY.forEach((element, index) => {
    if (!element) return;
    if (element.relKeyword === keyword) {
        BASE_KEYWORD_ARRAY[index].category1 = keyword_info.category ? keyword_info.category.category1 : "";
        BASE_KEYWORD_ARRAY[index].category2 = keyword_info.category ? keyword_info.category.category2 : "";
        BASE_KEYWORD_ARRAY[index].category3 = keyword_info.category ? keyword_info.category.category3 : "";
        BASE_KEYWORD_ARRAY[index].category4 = keyword_info.category ? keyword_info.category.category4 : "";
        BASE_KEYWORD_ARRAY[index].total = keyword_info.total;
    }
});

이런 복잡한 로직을 함수형으로 바꾸면 어떻게 될까요?

함수형 접근의 장점

함수형 프로그래밍의 장점은 코드를 더 명확하고 간결하게 만들 수 있다는 점입니다.

다음과 같이 코드를 리팩토링할 수 있었습니다:

export function* map(iterable, mapFunction) {
    let index = 0;
    for (const item of iterable) {
        yield mapFunction(item,index++);
    }
}

// Generator function that filters elements of an iterable based on a filter function
export function* filter(iterable, filterFunction) {
    for (const item of iterable) {
        if (filterFunction(item)) {
            yield item;
        }
    }
}
export function* sort(iterable, compareFunction) {
    const sortedArray = Array.from(iterable).sort(compareFunction);
    for (const item of sortedArray) {
        yield item;
    }
}

export function* slice(iterable, start, end) {
    let index = 0;
    for (const item of iterable) {
        if (index >= start && index < end) {
            yield item;
        }
        index++;
        if (index >= end) {
            break;
        }
    }
}

export function* reverse(iterable) {
    const items = Array.from(iterable);
    for (let i = items.length - 1; i >= 0; i--) {
        yield items[i];
    }
}
export function* batch(iterable, size) {
    let batch = [];
    for (const item of iterable) {
        batch.push(item);
        if (batch.length === size) {
            yield batch;
            batch = [];
        }
    }
    if (batch.length > 0) {
        yield batch;
    }
}

클래스로 보기 편하게 수정을 하더라고요

export class Processor {
    constructor(iterable) {
        this.iterable = iterable;
    }

    map(mapFunction) {
        this.iterable = map(this.iterable, mapFunction);
        return this;
    }

    filter(filterFunction) {
        this.iterable = filter(this.iterable, filterFunction);
        return this;
    }

    sort(compareFunction) {
        this.iterable = sort(this.iterable, compareFunction);
        return this;
    }
    slice(start, end) {
        this.iterable = slice(this.iterable, start, end);
        return this;
    }

    reverse() {
        this.iterable = reverse(this.iterable);
        return this;
    }
    batch(size) {
        this.iterable = batch(this.iterable, size);
        return this;
    }
    toArray() {
        return Array.from(this.iterable);
    }
}

// 키워드 정보를 업데이트하는 함수
function updateKeywordInfo(array, keyword, keywordInfo) {
    return array.map(element => {
        if (element && element.relKeyword === keyword) {
            return {
                ...element,
                category1: keywordInfo.category ? keywordInfo.category.category1 : "",
                category2: keywordInfo.category ? keywordInfo.category.category2 : "",
                category3: keywordInfo.category ? keywordInfo.category.category3 : "",
                category4: keywordInfo.category ? keywordInfo.category.category4 : "",
                total: keywordInfo.total,
            };
        }
        return element; // 업데이트가 필요 없는 경우 원래 요소 반환
    });
 });

// 사용하는 방법
const updatedArray = updateKeywordInfo(KEYWORD_ARRAY, keyword, keyword_info);
const updatedBaseArray = updateKeywordInfo(BASE_KEYWORD_ARRAY, keyword, keyword_info);

이로 인해 코드가 훨씬 더 읽기 쉽게 되었고,

특정 롤백 없이도 쉽게 테스트할 수 있도록 했습니다.

느낀 점

함수형 프로그래밍이 아직 익숙하지 않아서, 처음에 함수형으로 만드는 데 시간이 걸렸습니다.

응용할 때도 미숙한 점이 많았지만,

실제로 사용하고 테스트하는 과정에서 오류가 덜 발생해 긍정적인 경험을 했습니다.

React와 TypeScript로 관련된 내용을 들었을 때,

일반 JavaScript에서 사용할 수 있을지 걱정했지만, 직접 만들어보니 생각보다 쉽고 편했습니다.

그럼에도 불구하고, 아직 제가 함수형으로 한 번에 만들어볼 만한 내용에 대해 더 연습이 필요하다고 느끼고 있습니다.

앞으로 더 많은 연습을 통해 함수형 프로그래밍의 매력을 더욱 깊이 이해해보고 싶습니다.

결론

함수형 프로그래밍은 복잡한 로직을 간결하게 만들고,

코드의 가독성과 재사용성을 높이는 강력한 도구입니다.

제가 처음 접한 이 개념이 익숙해지고, 더 많은 기능을 구현할 수 있게 될 날을 기대합니다.

앞으로도 계속해서 함수형 프로그래밍을 활용하여 보다 나은 코드를 작성해 나가고자 합니다.

PS 분명 더 짧다고 했는데? 라고 생각을 하시지만 함수형을 만드는 부분을 적은 것이다 보니 더 길게 보이겠지만

장기적으로 저 함수들을 활용한다고 하면 코드들은 분명 더 개선이 될 것입니다.

CSS 최적화: clean-css 사용법

nicksoon — Wed, 26 Feb 2025 18:34:47 +0900

CSS 작업을 하다 보면 파일이 10만 줄이 넘어가는 경우도 발생합니다.

이때 긴 줄이나 주석이 그대로 남아 있으면 Lighthouse에서 경고가 발생할 수 있습니다.

CSS 파일의 용량이 크면 다운로드 속도에도 문제가 생길 수 있어 최적화가 필요합니다.

clean-css 추천

이러한 문제를 해결하기 위해 clean-css를 사용해 CSS 파일을 간편하게 최적화할 수 있습니다.

이 기능은 HTML과 CSS만 사용하는 분들에게는 필요할 수 있지만,

성능을 개선하고자 하는 모든 개발자에게 유용합니다.

clean-css 설치

먼저, clean-css를 글로벌로 설치합니다:

npm install clean-css-cli -g

CSS 파일 최적화

그 다음, 원하는 경로에서 CSS 파일을 최소화(minify)할 수 있습니다.

예를 들어, 상위 폴더에서 다음 명령어를 실행하면 됩니다:

cleancss -o dist/styles.min.css src/styles.css

이 명령어는 src/styles.css 파일을 압축하여 dist/styles.min.css 파일로 저장합니다.

예제 .min.css

이렇게 바뀝니다

자동화 설정

단, clean-css는 파일이 자동으로 최적화되지 않으므로 주의가 필요합니다.

이를 위해 nodemon을 이용하여 파일 변경 시 자동으로 명령을 실행하도록 설정할 수 있습니다.

nodemon 설치:

npm install nodemon --save-dev

nodemon 구성:

프로젝트의 루트 디렉토리에 nodemon.json을 생성하고 아래와 같이 설정합니다:

{
  "watch": ["src"],
  "ext": "css",
  "exec": "cleancss -o dist/styles.min.css src/styles.css"
}

nodemon 실행:

npx nodemon

이렇게 설정하면, src 디렉토리 내의 CSS 파일이 변경될 때마다 clean-css가 실행되어 자동으로 CSS 파일이 최적화됩니다.

마무리

오늘은 CSS 최적화에 대해 설명드렸습니다. clean-css와 nodemon을 활용하면 긴 CSS 파일도 손쉽게 관리할 수 있습니다. 성능을 고려한 CSS 작업에 도움이 되길 바랍니다.

[javascript] 배열 복사 시 주의사항

nicksoon — Thu, 13 Feb 2025 11:34:38 +0900

배열을 복사할 때, 특히 이중 배열(Not Nested Array)에서

원본 데이터와의 관계를 이해하는 것이 중요합니다.

배열을 단순히 복사하면, 원본 데이터와 복사된 배열이 동일한 포인터를 공유하여

한쪽의 데이터를 변경하면 다른 쪽에도 영향이 미칩니다.

1차원 배열 복사

아래의 예시처럼 1차원 배열을 복사할 때는 다음과 같은 방법이 일반적입니다.

const keywordArray = ["가습기", "사무실용", "콜드브루앰플"];

// 간단한 복사
let copyKeywordArray = [...keywordArray];

이러한 방식으로 복사하면, 원본 배열 keywordArray와 copyKeywordArray는 서로 독립적인 배열이 됩니다.

이중 배열 복사 문제점

하지만 이중 배열의 경우, 배열의 내부 요소가 또 다른 배열이기 때문에,

간단히 복사하면 원본 데이터를 공유하게 됩니다. 예를 들어:

const keywordArray = [
    ["가습기", "사무실용", "콜드브루앰플", "사무실용", "미니가습기", "유아용가습기"],
    ["가습기", "사무실용", "콜드브루앰플", "사무실용", "사무실가습기", "유아용가습기"],
    ["가습기", "장갑", "연말선물추천", "장갑", "가습기", "유아용가습기"],
    ["가습기", "장갑", "연말선물추천", "장갑", "소형가습기", "유아용가습기"],
    ["가습기", "미니가습기", "사무실용", "설날선물", "출산선물", "유아용가습기"],
    ["가습기", "미니가습기", "사무실용", "미니가습기", "사무실가습기", "유아용가습기"],
]

// 이렇게 복사하면 문제가 발생합니다
let copyKeywordArray = [...keywordArray];

이 경우, copyKeywordArray의 내부 배열을 변경하면 keywordArray의 내부 배열도 함께 변경됩니다.

배열 실습 이미지

올바른 이중 배열 복사 방법

이중 배열을 안전하게 복사하기 위해서는 다음과 같이 각 내부 배열을 개별적으로 복사해야 합니다:

let copyKeywordArray = [];
for (let i = 0; i < keywordArray.length; i++) {
    copyKeywordArray[i] = [...keywordArray[i]];
}

이 방법을 사용하면, 각 내부 배열이 독립적으로 복사되어 원본 데이터가 안전하게 유지됩니다.

자주 발생하는 CSV 다운로드 한글 깨짐 현상 해결 방법

nicksoon — Tue, 11 Feb 2025 18:22:56 +0900

웹에서 CSV 파일을 생성하여 다운로드할 때 한글이 깨지는 문제는 흔히 발생하는 현상입니다.

"?앺솢怨듭옉???ㅻ궡嫄댁“ ?명긽?몄젣 ?≪껜?몄젣 ?쇰컲 ?쒕읆 寃몄슜 3L 2媛??명긽?몄젣"

사용자는 다운로드 받은 파일의 내용이 깨져 보인다며 버그나 오류라고 지적하지만,

메모장에서 열어보면 정상적으로 표시되는 경우가 많습니다.

이는 CSV 파일의 인코딩 설정과 관련된 문제이며,

간단한 코드 수정으로 해결할 수 있습니다.

본 글에서는 이 문제의 원인과 해결 방법을 자세히 설명합니다.

문제 발생 상황:

웹 애플리케이션에서 JavaScript를 사용하여 CSV 데이터를 생성하고,

Blob 객체와 URL.createObjectURL을 이용하여 다운로드 기능을 구현하는 경우,

다운로드 받은 CSV 파일을 엑셀이나 숫자와 같은 스프레드시트 프로그램으로 열었을 때

한글이 깨져 보이는 현상이 발생할 수 있습니다.

하지만 메모장과 같은 일반적인 텍스트 편집기로 열면 정상적으로 표시됩니다.

문제의 원인:

이 문제는 CSV 파일의 인코딩 설정과 관련이 있습니다.

일반적으로 엑셀이나 스프레드시트 프로그램은 UTF-8 인코딩을 지원하지만,

BOM(Byte Order Mark)이 없는 UTF-8 파일을 제대로 인식하지 못하는 경우가 있습니다.

BOM은 파일의 시작 부분에 추가되는 특수 문자로, 파일의 인코딩 방식을 명시하는 역할을 합니다.

해결 방법:

문제를 해결하는 가장 간단한 방법은 CSV 문자열의 앞에 BOM 문자를 추가하는 것입니다.

BOM 문자는 Unicode 코드 포인트 \ufeff로 표현됩니다.

Blob 객체를 생성할 때 CSV 문자열 앞에 \ufeff를 추가하면 엑셀과 같은 스프레드시트 프로그램에서도

한글이 정상적으로 표시됩니다.

기존 코드:

const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
const csvUrl = window.URL.createObjectURL(blob);

수정된 코드:

const blob = new Blob(["\ufeff" + csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);

단순히 csvString 앞에 "\ufeff"를 추가하는 것만으로 한글 깨짐 현상을 해결할 수 있습니다.

이렇게 수정된 코드를 사용하면 생성되는 CSV 파일은 BOM이 포함된 UTF-8 인코딩으로 생성되어

엑셀 등에서 정상적으로 표시됩니다.

다운로드 후 파일을 메모장으로 열어볼 필요가 없어졌습니다.

결론:

CSV 파일 다운로드 시 한글 깨짐 현상은 BOM을 추가하는 간단한 코드 수정으로 해결할 수 있습니다.

이 방법을 통해 사용자 경험을 향상시키고 불필요한 오류 보고를 줄일 수 있습니다.

앞으로 CSV 파일을 생성하여 다운로드하는 기능을 구현할 때는 이 방법을 적용하여

한글 깨짐 현상을 미연에 방지하는 것이 좋습니다

[Window] docker image 생성이 안되는 경우

nicksoon — Mon, 10 Feb 2025 11:43:20 +0900

아래와 같이 윈도우에서 실행이 안되는 경우

$ docker build -t << your_image_name >> .
ERROR: error during connect: Head "http://%2F%2F.%2Fpipe%2FdockerDesktopLinuxEngine/_ping": open //./pipe/dockerDesktopLinuxEngine: The system cannot find the file specified.

1. Docker Desktop 실행 여부

2. Windows 권한 문제

3. Docker 환경 확인

요약을 하면 이렇게 있습니다

저의 경우 Docker Desktop을 실행하지 않아 무제가 생겼습니다

윈도우 도커 검색

실행을 해주면 정상적으로 이미지를 생성하는 것을 볼 수 있습니다.

Docker로 애플리케이션 실행하기

nicksoon — Fri, 7 Feb 2025 13:47:40 +0900

도커 아이콘

이 글에서는 GitLab에서 애플리케이션 소스를 클론하고 Docker 이미지를 빌드하여 실행하는 방법을 안내합니다.

1. Git Bash 실행 및 폴더 이동

Git Bash 실행

먼저 Git Bash를 실행합니다. 원하는 작업 디렉토리로 이동합니다:

cd <<폴더 경로>>

2. GitLab에서 프로그램 클론

GitLab에 있는 프로젝트를 클론합니다:

git clone git@gitlab.~~/username/repository.git

3. Dockerfile 확인

클론한 디렉토리에 Dockerfile이 있는지 확인합니다. 있는 경우, 아래 명령어로 도커 이미지를 빌드합니다:

docker build -t <<your_image_name>> .

반응형

(참고: 마지막의 .은 현재 디렉토리를 의미합니다.)

4. Docker 이미지 실행

Dockerfile에서 노출된 포트를 확인합니다. 예를 들어, EXPOSE 80으로 설정되어 있는 경우 아래 명령으로 실행합니다:

docker run -d -p host_port:container_port your_image_name

예시로, 8000 포트에서 실행하고 싶다면:

docker run -d -p 8000:80 <<your_image_name>>

5. 실행 확인

컨테이너가 정상적으로 실행되고 있는지 확인하려면 아래 명령으로 로그를 확인합니다:

# 실행 확인
docker ps

# 로그 확인
docker logs <컨테이너_ID>

도커 로그 확인

이 과정을 통해 Docker를 사용하여 애플리케이션을 쉽게 실행할 수 있습니다.

네이버 데이터 크롤링 중 429 Too Many Requests 에러 해결하기: API 키 활용 전략

nicksoon — Thu, 6 Feb 2025 11:24:40 +0900

네이버 데이터를 수집하여 분석하는 과정에서 흔히 마주치는 문제가 바로 "429 Too Many Requests" 에러입니다. 이는 네이버 서버가 과도한 요청을 감지하여 차단하는 보호 메커니즘으로, 단순히 요청 텀을 늘리는 것만으로는 해결되지 않을 수 있습니다. 특히 순차적으로 요청을 보내더라도 에러가 발생하는 경우,

효과적인 해결책으로 여러 개의 네이버 API 키를 순환 사용하는 방법을 활용할 수 있습니다.

왜 429 에러가 발생할까요?

가장 일반적인 원인은 예상보다 많은 요청을 네이버 서버에 보냈기 때문입니다. 루프를 잘못 작성하거나, 브라우저를 통해 반복적으로 데이터를 요청하는 경우 쉽게 발생합니다.

하지만 순차적인 요청에도 에러가 발생할 수 있는데, 이는 네이버 서버의 부하, IP 차단, 또는 다른 제한 사항 때문일 수 있습니다.

여러 개의 API 키를 사용하는 전략

이 문제를 해결하기 위해, 여러 개의 네이버 API 키를 준비하고, 요청 시마다 키를 순환하면서 사용하는 것이 효과적입니다. 각 API 키는 서로 다른 요청 제한을 가지고 있을 수 있고, 하나의 키가 제한에 걸리더라도 다른 키를 사용하여 요청을 계속 진행할 수 있습니다. 이는 네이버 서버에 대한 부하를 분산시키고, 429 에러를 회피하는 데 도움이 됩니다.

내 애플리케이션

예시 코드 (JavaScript)

아래는 JavaScript를 이용하여 여러 개의 네이버 API 키를 순환하며 사용하는 예시 코드입니다. naverApiArray 배열에 여러 개의 API 키 객체를 저장하고, i % naverApiArray.length 를 이용하여 순환합니다. 만약 naverApiArray가 비어있다면 에러 처리를 추가하는 것이 중요합니다.

const naverApiArray = [
    {
        name: "iksoon1",
        id: "YOUR_API_ID_1", // 실제 API ID 입력
        secret: "YOUR_API_SECRET_1", // 실제 API SECRET 입력
    },
    {
        name: "iksoon2",
        id: "YOUR_API_ID_2", // 실제 API ID 입력
        secret: "YOUR_API_SECRET_2", // 실제 API SECRET 입력
    },
    // ... 더 많은 API 키 추가
];

for (let i = 0; i < 12; i++) {
    if (naverApiArray.length > 0) {
        const naverApi = naverApiArray[i % naverApiArray.length];
        const clientId = naverApi.id;
        const clientSecret = naverApi.secret;

        // 네이버 API 요청 코드 (clientId, clientSecret 사용)
        // ... 네이버 API를 호출하는 부분 ...

    } else {
        console.error("naverApiArray is empty.  No API keys available.");
        // 에러 처리 (예: 루프 종료 또는 대체 동작)
    }
}

중요 고려 사항:

API 사용 약관 준수: 네이버 API 사용 약관을 꼼꼼히 확인하고 준수해야 합니다. 특히, 과도한 요청, 불법적인 크롤링, 네이버 서비스에 해를 끼치는 행위는 절대 해서는 안 됩니다.
에러 처리: API 요청 중 발생할 수 있는 다양한 에러 (네트워크 에러, API 응답 에러 등)에 대한 처리 로직을 추가하여 안정성을 높여야 합니다.
지연 시간: 각 요청 사이에 적절한 지연 시간을 추가하여 서버 부하를 줄이는 것이 좋습니다. setTimeout 함수나 비동기 처리를 활용할 수 있습니다.

이러한 전략을 통해 네이버 데이터 크롤링 시 발생하는 429 에러를 효과적으로 예방하고, 안정적으로 데이터를 수집할 수 있습니다. 하지만 API 키를 남용하거나 약관을 위반하지 않도록 주의해야 합니다. 항상 네이버의 정책을 준수하는 범위 내에서 크롤링을 진행해야 합니다.

우분투에서 node.js 설치하기 - 설치 에러

nicksoon — Thu, 6 Feb 2025 10:54:48 +0900

Ubuntu에 Node.js를 설치하는 방법

개인적으로 설치하면서 docker를 사용하는 것이 더 좋았고

docker의 경우너무 쉽기 때문에 전에 사용한 다른 방법을 공유 드립니다.

단 직접 설치가 안되는 경우가 있으니 버전 등 확인 잘 해주세요

사실 node 공식 홈페이지 다운로드를 가면 다 있으니 가서 직접 보는 것을 추천 드립니다.

1. 시스템 패키지를 업데이트

sudo apt update
sudo apt upgrade

2 Node.js 설치

# 18버전
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# 20버전
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

curl이 없다면

apt install curl

node 설치 확인

npm이 없다고 하네요

3. npm 설치 or yarn 설치

apt install npm

만약 설치가 안된다면 NVM

sudo apt remove nodejs

# nvm을 설치해 줍니다
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

만약 nvm이 설치가 안된 경우

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# 또는

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

# 노드 20 버전을 설치합니다
nvm install 20

# Yarn 다운로드 및 설치:
corepack enable yarn

설치 확인 합니다

node -v
npm -v

설치 결과 확인

노드 공식 사이트 다운로드

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

노드 다운로드 공식 페이지

1, 원하는 버전, 설치할 PC , 방식, 패키지를 선택해 주세요

이렇게 하나씩 따라 추가를 하면 됩니다

단 nvm 설치가 안되는 경우는

nvm으로 직접 이동하는

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

이 코드를 추가해 주세요

Docker Program Error and Solution - When Ubuntu Docker Deployment Fails

nicksoon — Wed, 5 Feb 2025 11:29:25 +0900

Recently, an urgent error occurred in the program, and after making modifications for deployment,

we encountered a problem where downloading did not happen when trying to run it on Docker.

Here, I will share the cause of the issue and the steps taken to resolve it.

Cause of the Issue

Server-Docker Relationship Check:
- There may have been issues related to the IP block between the server and Docker or port issues.
- Incorrect configuration might also be a possibility.
Code Version Check:
- It was identified that the code was not updated to the latest version.
Duplicate Execution Check:
- Two instances of the same program were running on the same server.

Below is my server structure. I marked it simply

서버-도커 관계

Resolution Process

When I executed the command sh dockerRun.sh, it did not proceed with the download and completed immediately. To resolve this, I followed these steps:

sh dockerRun.sh

1. Stopping and Removing Running Docker Containers:

docker stop <<first-container-name>>
docker rm <<first-container-name>>

docker stop <<second-container-name>>
docker rm <<second-container-name>>

Relaunching Docker:

After cleaning up the containers, I relaunched Docker, and the download proceeded normally, resolving the issue.

Conclusion

By systematically analyzing the root cause of the problem and cleaning up the running containers before relaunching,

I was able to resolve the issue.

This approach can serve as a good reference for troubleshooting Docker-related problems in the future.

Easy 20x20 Maze Adventure

nicksoon — Tue, 4 Feb 2025 23:40:44 +0900

Maze Adventure stage 1

Stage Design for the Maze Game(Simple 20x20 Maze Layout)

Stage Layouts: The game features multiple maze layouts, each represented by a 2D array containing different values. The value 1 represents a path where the player can move, while 0 represents walls that block movement. Each stage offers a unique challenge, requiring different navigation strategies.
Grid Representation: The maze is displayed as a grid of cells using a CSS Grid layout. Each cell has a specific size (20px by 20px) and is displayed in a visually appealing manner with gaps between the cells for better visibility.
Cell Styling:
- Walls: Cells that are part of the wall are filled with a solid black background.
- Player: The player's current position is indicated by a blue cell.
- End Point: The exit of the maze is represented by a red cell located at the bottom-right corner (cell [19, 19] of the grid).
Interactive Elements: Players can interact with the maze through mouse clicks on cells or keyboard inputs (arrow keys). Clicking on a cell or pressing the corresponding arrow key will attempt to move the player to that location.
Dynamic Updates: As the player moves through the maze, the visual representation of the maze is dynamically updated to reflect the player’s new position, enhancing the interactive experience.
Progression System: Upon reaching the end of a maze, a message is displayed indicating the current stage number and the time taken to complete it. The game then resets to the next stage, keeping the player engaged with new challenges.

This stage design not only emphasizes interactivity and visual clarity but also encourages players to overcome obstacles and improve their maze-solving skills. If you need more details or specific aspects covered, let me know!

const mazeLayouts = [
            [
                [1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1],
                [0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1],
                [1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0],
                [1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1],
                [1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0],
                [0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1],
                [1, 1, 0, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1],
                [1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1],
                [1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1],
                [0, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1],
                [1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1],
                [0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1],
                [1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1],
                [0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1],
                [1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0],
                [1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
                [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1],
                [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0],
                [1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1],
                [1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1]
            ],
	   		[ /* Second maze layout */ ],
            [ /* Third maze layout */ ],
        ];

Maze Adventure stage 2

1. If you want to add more stages, you can add more stages.

 let stage = 0; // Current maze stage
        let mazeLayout = mazeLayouts[stage]; // Current maze layout
        const mazeElement = document.getElementById("maze"); // Maze element in DOM
        const timeElement = document.getElementById("time"); // Timer element in DOM

        // Player's initial position
        let playerPosition = { x: 0, y: 0 };
        let timer = 0; // Timer for tracking duration
        let timerInterval; // Interval reference for the timer

        // Function to create the maze UI
        function createMaze() {
            mazeElement.innerHTML = ''; // Clear previous maze content
            for (let y = 0; y < mazeLayout.length; y++) {
                for (let x = 0; x < mazeLayout[y].length; x++) {
                    const cellDiv = document.createElement("div");
                    cellDiv.classList.add("cell"); // Add cell class
                    if (mazeLayout[y][x] === 0) {
                        cellDiv.classList.add("wall"); // Add wall class for walls
                    }
                    if (x === playerPosition.x && y === playerPosition.y) {
                        cellDiv.classList.add("player"); // Add player class for player's position
                    }
                    if (x === 19 && y === 19) {
                        cellDiv.classList.add("end"); // Add end class for the end point
                    }
                    mazeElement.appendChild(cellDiv); // Append cell to maze
                    cellDiv.addEventListener("click", () => movePlayer(x, y)); // Click event for cell
                }
            }
        }

2. Add the action of the player moving

// Function to move the player
        function movePlayer(newX, newY) {
            if (newX >= 0 && newX < 20 && newY >= 0 && newY < 20 && mazeLayout[newY][newX] !== 0) {
                playerPosition.x = newX; // Update player's X position
                playerPosition.y = newY; // Update player's Y position
                createMaze(); // Rebuild the maze display
                checkWin(); // Check if the player has reached the end
            }
        }

        // Keyboard input handler
        function handleKeyPress(event) {
            switch (event.key) {
                case "ArrowUp":
                    movePlayer(playerPosition.x, playerPosition.y - 1); // Move up
                    break;
                case "ArrowDown":
                    movePlayer(playerPosition.x, playerPosition.y + 1); // Move down
                    break;
                case "ArrowLeft":
                    movePlayer(playerPosition.x - 1, playerPosition.y); // Move left
                    break;
                case "ArrowRight":
                    movePlayer(playerPosition.x + 1, playerPosition.y); // Move right
                    break;
            }
        }

3. When the plier arrives, it's done

// Function to check if the player has won
function checkWin() {
    if (playerPosition.x === 19 && playerPosition.y === 19) { // Check if player reached the end
        clearInterval(timerInterval); // Stop the timer
        alert(`${stage}stage! time: ${timer}s`); // Alert the player's time taken
        resetGame(); // Reset the game for the next stage
    }
}

4. It's going to reset

// Function to reset the game state and load the next maze
function resetGame() {
    playerPosition = { x: 0, y: 0 }; // Reset player's position
    timer = 0; // Reset the timer
    timeElement.textContent = timer; // Update the timer display
    stage++; // Move to the next stage

    mazeLayout = mazeLayouts[stage]; // Load the next maze layout
    if (stage >= mazeLayouts.length) { // Check if all stages are completed
        alert(`All clear`); // Alert that all mazes have been cleared
        return; // Exit the function
    }
    createMaze(); // Create the new maze
    clearInterval(timerInterval); // Clear existing timer
    startTimer(); // Start the timer for the new stage
}

5. The timer is working

  // Function to start the timer
function startTimer() {
    timerInterval = setInterval(() => {
        timer++; // Increment timer every second
        timeElement.textContent = timer; // Update the displayed time
    }, 1000);
}

Maze Adventure stage3

Then, I'll start the function and add html and style

// Function to initialize and start the game
function startGame() {
    playerPosition = { x: 0, y: 0 }; // Reset player's position
    timer = 0; // Reset timer
    timeElement.textContent = timer; // Update timer display
    createMaze(); // Create the maze
    clearInterval(timerInterval); // Clear any existing timer
    startTimer(); // Start the timer
    window.addEventListener('keydown', handleKeyPress); // Add keydown event listener
}

// Start the game when the script loads
startGame();

<style>
    /* Maze container and cell styles */
    #maze {
        display: grid;
        grid-template-columns: repeat(20, 20px); /* 20 columns of 20px each */
        grid-gap: 2px; /* Space between cells */
        margin: 20px auto; /* Center the maze on the page */
        border: 1px solid #000000; /* Border around the maze */
        width: max-content; /* Adjust width according to content */
    }

    .cell {
        width: 20px; /* Width of each cell */
        height: 20px; /* Height of each cell */
        border: 1px solid #00000000; /* Transparent border */
    }

    /* Cell types and their colors */
    .wall {
        background-color: black; /* Walls in the maze */
    }

    .start {
        background-color: green; /* Start point (not used in the current layout) */
    }

    .end {
        background-color: red; /* End point of the maze */
    }

    .player {
        background-color: blue; /* Player's position */
    }
</style>


<div id="stage">1</div> <!-- Displays the current stage -->
<div id="maze"></div> <!-- The maze will be rendered here -->
<div id="timer">Time: <span id="time">0</span> seconds</div> <!-- Timer display -->

#adventure corn maze #adventure maze #corn maze and pumpkin patch #corn mazes #corn mazes and pumpkin patches #cornfield maze #family fun center lakeland #houston attractions for families #kersey valley corn maze #kersey valley maize #kersey valley maize adventure #kersey valley maize adventure photos #maize adventure #maize adventures #maze adventures #pumpkin patch and corn maze #pumpkin patch hay rides #pumpkin patch with corn maze #skeeters maze adventure #things to do in sugar land

node 콘솔 입력 받기

nicksoon — Tue, 4 Feb 2025 11:18:44 +0900

테스트용으로 작업하다가

node 서버까지는 필요 없는데

입력은 받아야 할 것 같아 노트합니다

입력 받는 코드

import readline from "readline";

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

// 입력 대기 함수
function askQuestion(query) {
    return new Promise(resolve => rl.question(query, resolve));
}

아래는 진행 코드입니다.

let key = 0;
let startKeyword = "";
let isExit = false
// 입력 대기
do {
    console.log(
        `
1 : 키워드 등록하기
2 : 키워드 찾기
3 : 경로 찾기
4 : 모든 값
5 : 나가기
`);

    key = parseInt(await askQuestion('메뉴 선택 (1-4): '));

    switch (key) {
        case 1:
            // 키워드를 입력 받는다
            startKeyword = await askQuestion('등록할 키워드 입력: ');
            await recursiveKeywordFetch(startKeyword);
            break;

        case 2:
            // 키워드를 입력 받는다
            const searchKeyword = await askQuestion('찾을 키워드 입력: ');
            // 여기에 키워드 찾기 로직 추가
            console.log(`찾고 있는 키워드: ${searchKeyword}`);
            await getNodesAndRelationships(searchKeyword);
            break;

        case 3:
            // 여기에 모든 값 출력 로직 추가
            console.log('경로 값 출력');
            const fistKeyword = await askQuestion('시작 키워드 입력: ');
            const secondKeyword = await askQuestion('끝 키워드 입력: ');
            await getIntentKeyword(fistKeyword,secondKeyword);
            break;
        case 4:
            // 여기에 모든 값 출력 로직 추가
            console.log('모든 값 출력');
            await getAllData();
            break;

        case 5:
            isExit = true;
            console.log('프로그램을 종료합니다.');
            break;

        default:
            console.log('잘못된 입력입니다. 다시 선택해 주세요.');
            break;
    }



} while (!isExit);

결과 이미지

입력 받기

node 입력 받기 키워드

설명

반복문으로 지속적으로 진행을 하도록 했습니다

단 출구 없이는 안되니 5 나가기를 추가 했습니다

#javascript readline#javascript 입력 받기#javascript 입력받기#js readline#js 입력#js 입력받기#node js input#node js prompt#node js readline#node prompt#node readline#node.js input#node.js prompt#node.js readline#nodejs readline#readline javascript#readline js#자바 스크립트 입력#자바 스크립트 입력받기#자바 스크립트 콘솔 입력#자바스크립트 readline#자바스크립트 입력 받기#자바스크립트 입력값 받기#자바스크립트 입력받기#자바스크립트 콘솔 입력#자바스크립트 콘솔 입력 받기#자바스크립트 콘솔 입력받기#자바스크립트 콘솔입력

'가비아' '티스토리' 연결 및 하위 도메인

nicksoon — Sun, 2 Feb 2025 18:13:25 +0900

안녕하세요! 오늘은 가비아에서 티스토리를 연결하는 방법에 대해 알아보겠습니다.

특히 하위 도메인을 활용하는 데 초점을 맞추어 설명드릴게요.

1. 하위 도메인 설정의 장점

가비아에서 도메인을 구매한 후, 하위 도메인을 티스토리와 연결하는 것은 꽤 간편합니다. 하위 도메인을 생성하고 DNS 세팅에서 CNAME으로 설정하는 방식은 관리가 용이하다는 장점이 있습니다.

2. 서버 호스팅과의 권한 문제

만약 서버 호스트에서의 작업이 원활하지 않을 경우, 예를 들어 NGINX와 같은 웹 서버의 설정을 하는 것이 어렵다면, 더 나은 방안으로는 도메인을 구매한 곳에서 직접 DNS 세팅을 통해 관리를 하는 것입니다. 이렇게 하면 복잡한 서버 설정을 건너뛰고, 간단하게 연결을 완료할 수 있습니다.

3. 서버 관리가 필요한 경우

물론, 회사나 서버에서 관리가 이루어진다면 큰 문제가 없겠지만, 개인적으로 직접 관리하고 싶다면 DNS 설정을 통해 하위 도메인을 연결하는 것이 더 효율적입니다. 저도 NGINX에서 https 세팅을 직접 해본 경험이 있지만, 도메인을 구매한 곳에서 제공하는 서비스를 이용하는 것이 훨씬 더 간편하다는 것을 느꼈습니다.

티스토리 '도메인 연결'

1. 가비아에서 마이 가비아를 들어갑니다. - DNS 관리툴을 들어갑니다

마이 가비아

설정할 도메인 선택 - 도메인 연결

DNS 관리

연결할 블로그 선택

티스토리에서 블로그 관리 - 개인 도메인 설정

티스토리 블로그 세팅

결과

https://njcin.co.kr/

나예그안

구글 SEO 최적화, 구글 연관키워드 등 여러 정보 공유 드려요

njcin.co.kr

가비아 CNAME 설정

가비아 DNS 설정

가비아 DNS 관리 - 도메인 설정에서 레코드 수정 이동

가비아 레코드 수정 클릭

레코드 수정 추가

가비아 레코드 수정

DNS 에서 레코드 추가에서 타입을 따라 내용을 추가합니다

가비아 레코드 내용 추가

DNS 레코드 유형 설명 및 예시

A (Address Record) - IP 주소
- 설명: A 레코드는 도메인을 IPv4 주소에 매핑합니다. 사용자가 도메인을 입력할 때, 해당 도메인이 어떤 서버로 연결될지를 결정합니다.
- 예시: example.com이 192.0.2.1이라는 IP 주소로 연결된다면, A 레코드는 다음과 같이 설정됩니다.
  text
  Copy
```
example.com.     IN     A     192.0.2.1
```
MX (Mail Exchange) - 메일 호스트
- 설명: MX 레코드는 도메인의 이메일을 처리하는 메일 서버를 지정합니다. 이메일을 해당 도메인으로 보내는 경우, 어떤 서버가 해당 이메일을 받아야 하는지를 설정합니다.
- 예시: example.com의 메일 호스트가 mail.example.com에 있다면 MX 레코드는 다음과 같이 설정됩니다.
```
example.com.     IN     MX     10 mail.example.com.
```
CNAME (Canonical Name) - 값, 위치
- 설명: CNAME 레코드는 도메인의 별칭을 설정합니다. 다른 도메인이 실제 도메인을 가리킬 수 있도록 하며, 여러 도메인이 동일한 IP 주소를 공유할 수 있게 해줍니다.
- 예시: www.example.com이 example.com의 별칭인 경우, CNAME 레코드는 다음과 같이 설정됩니다.
```
www.example.com.     IN     CNAME     example.com.
```
TXT (Text Record) - DNS 설정
- 설명: TXT 레코드는 도메인에 대한 추가 정보를 저장할 수 있습니다. 주로 SPF(발신자 정책 프레임워크)나 DKIM(도메인키 식별 메일)과 같은 인증 정보를 제공하는 데 사용됩니다.
- 예시: 도메인에 대한 SPF 정보를 설정하는 TXT 레코드는 다음과 같을 수 있습니다.
```
example.com.     IN     TXT     "v=spf1 include:example.com -all"
```
SRV (Service Record)
- 설명: SRV 레코드는 특정 서비스를 제공하는 서버의 위치를 지정합니다. 주로 VoIP, IM, 또는 다른 프로토콜에 대한 서비스에 사용됩니다.
- 예시: 예를 들어, SIP 서비스를 위한 SRV 레코드는 다음과 같이 설정될 수 있습니다.
```
_sip._tcp.example.com.     IN     SRV     10 60 5060 sipserver.example.com.
```

이와 같이 각 DNS 레코드는 도메인과 그에 관련된 서비스의 동작을 제어하는 데 중요한 역할을 합니다. 필요에 따라 적절한 설정을 통해 도메인을 관리하세요!

티스토리 블로그 도메인 설정

결과 https://money.njcin.co.kr/

결론

가비아와 티스토리를 연결하는 과정에서 하위 도메인을 활용하면 여러 가지 장점을 누릴 수 있습니다. DNS 설정을 통해 간편하게 연결하는 방법을 활용해 보세요. 이를 통해 더욱 수월하게 블로그 운영을 할 수 있을 것입니다.

PM2 사용법: Node.js 애플리케이션 관리 및 모니터링

nicksoon — Tue, 21 Jan 2025 10:14:33 +0900

우분투가 설치가 안 되어 있다면

우분투 설치하러가기

우분투에서 Node.js와 PM2를 사용한 무중단 애플리케이션 설치 방법

1. curl 설치Node.js 설치를 위해 먼저 curl이 필요합니다. 아래 명령을 사용하여 curl을 설치합니다.sudo apt updatesudo apt install curl 2. Node.js 설치 스크립트 추가Node.js의 버전은 18.x 또는 20.x 중 선택하여

nickdeveloper.co.kr

사실, PM2는 제가 자주 사용하는 도구 중 하나입니다.

계속 사용하다 보니 따로 노트를 남기지 않고 넘어갔지만,

나이가 들어서 그런지 가끔씩 정보를 깜빡하곤 하더군요.

그래서 이번 기회에 저만의 PM2 사용법을 정리해 보려고 합니다.

먼저 작업하고자 하는 디렉토리로 이동해 보겠습니다.

아래 명령어를 입력하시면 됩니다:

cd your-work-folder

이제 PM2로 Node.js 애플리케이션을 실행해 보겠습니다.

애플리케이션 파일 이름을 <your-app.js>에 맞추어

아래 명령어를 입력하면 됩니다:

pm2 start <your-app.js>

이 명령어를 통해 애플리케이션이 실행됩니다.

PM2는 이 애플리케이션을 백그라운드에서 관리하며,

오류가 발생해도 자동으로 재시작할 수 있는 기능을 제공합니다.

다음으로, 실행 중인 애플리케이션의 상태와 성능을 모니터링하고 싶다면,

아래 명령어를 입력해 보세요:

pm2 monit

이 명령어를 실행하면,

터미널 화면에 현재 실행 중인 애플리케이션들의 상태와 CPU,

메모리 사용량 등의 정보가 실시간으로 표시됩니다.

화면은 다음과 같은 형태로 나타날 것입니다:

윈도우 pm2 실행 이미지

이 정보들을 통해 애플리케이션의 성능을 체크하고 필요에 따라 조치를 취할 수 있습니다.

PM2는 이렇게 애플리케이션의 상태를 간편하게 관리하고 모니터링할 수 있는 유용한 도구입니다.

나가고 싶다면 Ctrl + c 입니다

다음 생성을 했으면 멈추고, 재실행하고 삭제를 해야 겠죠?!

애플리케이션 멈추기

실행 중인 애플리케이션을 멈추고 싶다면,

아래 명령어를 사용하세요.

<app-id>는 pm2 list 명령어로 확인한 애플리케이션의 ID를 의미합니다.

pm2 stop <app-id>

// 전체 app을 멈추고 싶다면
pm2 stop all

// 이름이 길 경우 번호로
pm2 stop 1

애플리케이션 재실행하기

멈춘 애플리케이션을 다시 실행하고 싶다면, 아래 명령어를 입력합니다:

pm2 restart <app-id>

// 전체 app을 재실행하고 싶다면
pm2 restart all

// 이름이 길 경우 번호로
pm2 restart 1

애플리케이션이 새롭게 시작되며, 이전의 상태를 유지합니다.

애플리케이션 삭제하기

더 이상 사용하지 않는 애플리케이션을 삭제하고 싶다면, 다음 명령어를 사용하세요:

pm2 delete <app-id>

// 전체 app을 삭제하고 싶다면
pm2 delete all

// 이름이 길 경우 번호로
pm2 delete 1

이 명령어를 실행하면 애플리케이션이 PM2 관리 목록에서 제거됩니다.

현재 실행 중인 애플리케이션 리스트 확인하기

PM2로 실행 중인 모든 애플리케이션의 상태를 확인하려면 pm2 list 명령어를 사용합니다. 이 명령어를 입력하면 현재 실행 중인 애플리케이션의 목록과 그 상태를 한 눈에 볼 수 있습니다:

pm2 list

윈도우 pm2 list 결과

여기서 각 열은 다음과 같은 정보를 나타냅니다:

App name: 애플리케이션 이름
id: 프로세스 ID
mode: 실행 모드 (fork 또는 cluster)
status: 애플리케이션의 현재 상태 (online, stopped 등)
cpu: CPU 사용량
memory: 메모리 사용량

마무리

이로써 PM2를 사용하여 Node.js 애플리케이션을 실행하고 관리하는 방법을 알아보았습니다. PM2는 애플리케이션의 상태를 쉽게 모니터링하고, 필요할 때 멈추거나 재실행하며, 삭제하는 등의 작업을 간편하게 할 수 있게 해주는 유용한 도구입니다.

앞으로 PM2를 활용하여 애플리케이션 관리의 효율성을 높이시기 바랍니다. 혹시 추가적인 질문이나 도움이 필요하시면 언제든지 문의해 주세요! 감사합니다.

chart.js 버튼 이벤트 예제

nicksoon — Mon, 20 Jan 2025 23:47:32 +0900

Chart.js를 사용하여 데이터 시각화를 구현할 때,

Chart.js에서 쉽게 보는 예제를 정리했습니다

랜덤화 (Randomize)
데이터셋 추가 (Add Dataset)
데이터 추가 (Add Data)
데이터셋 제거 (Remove Dataset)
데이터 제거 (Remove Data)

같은 주요 액션을 정리했습니다

chart.js 이벤트 동작 결과

1. Randomize

이 액션은 차트의 모든 데이터 값을 랜덤하게 변경합니다. 이를 통해 차트의 변화를 쉽게 관찰할 수 있습니다.

 // 데이터의 값을 랜덤화하는 액션
{
    name: 'Randomize',
    handler: (chart) => {
        // 각 데이터셋에 대해
        chart.data.datasets.forEach(dataset => {
            // 랜덤한 데이터 생성 (최소 -100, 최대 100)
            dataset.data = Utils.numbers({ count: chart.data.labels.length, min: -100, max: 100 });
        });
        // 차트를 업데이트하여 시각적으로 반영
        chart.update();
    }
}

2. Add Dataset

이 액션은 새로운 데이터셋을 차트에 추가합니다. 사용자는 여러 데이터셋을 한 차트에서 비교할 수 있습니다.

{
    // 새로운 데이터셋을 추가하는 액션
    name: 'Add Dataset',
    handler: (chart) => {
        const data = chart.data;
        // 데이터셋 수에 따라 새로운 색상을 결정
        const dsColor = Utils.namedColor(data.datasets.length);
        const newDataset = {
            // 새로운 데이터셋의 이름 설정
            label: 'Dataset ' + (data.datasets.length + 1),
            // 색상 설정 (투명하게)
            backgroundColor: Utils.transparentize(dsColor, 0.5),
            borderColor: dsColor,
            borderWidth: 1,
            // 랜덤 데이터 생성 (기존 레이블 수와 같은 수)
            data: Utils.numbers({ count: data.labels.length, min: -100, max: 100 }),
        };
        // 데이터셋을 리스트에 추가
        data.datasets.push(newDataset);
        // 차트를 업데이트하여 시각적으로 반영
        chart.update();
    }
},

3. Add Data

이 액션은 기존 데이터셋에 새로운 데이터를 추가합니다. 차트의 다이나믹한 변화를 체험할 수 있습니다.

{
    // 데이터에 새로운 값을 추가하는 액션
    name: 'Add Data',
    handler: (chart) => {
        const data = chart.data;
        // 데이터셋이 있을 때만 실행
        if (data.datasets.length > 0) {
            // 레이블에 새로운 월 추가
            data.labels = Utils.months({ count: data.labels.length + 1 });
            // 각 데이터셋에 대해 새로운 랜덤 데이터 추가
            data.datasets.forEach(dataset => {
                dataset.data.push(Utils.numbers({ count: 1, min: -100, max: 100 })[0]);
            });
            // 차트를 업데이트하여 시각적으로 반영
            chart.update();
        }
    }
},

4. Remove Dataset

이 액션은 가장 최근에 추가된 데이터셋을 제거합니다. 불필요한 데이터셋을 정리할 수 있는 기능입니다.

{
    // 마지막 데이터셋을 제거하는 액션
    name: 'Remove Dataset',
    handler: (chart) => {
        // 데이터셋 리스트에서 마지막 데이터셋 제거
        chart.data.datasets.pop();
        // 차트를 업데이트하여 시각적으로 반영
        chart.update();
    }
},

5. Remove Data

이 액션은 가장 최근에 추가된 데이터를 제거합니다. 데이터의 수를 조절하는 데 유용합니다.

{
    // 마지막 데이터를 제거하는 액션
    name: 'Remove Data',
    handler: (chart) => {
        chart.data.labels.splice(-1, 1); // 마지막 레이블 제거
        chart.data.datasets.forEach(dataset => {
            dataset.data.pop(); // 각 데이터셋에서 마지막 데이터 제거
        });
        // 차트를 업데이트하여 삭제된 데이터를 반영
        chart.update();
    }
}

버튼 이벤트 연결하기

각 버튼이 클릭되었을 때 해당하는 액션을 실행할 수 있도록 이벤트 리스너를 추가하는 부분입니다. 아래 코드는 actions 배열을 순회하여 각 액션에 대해 버튼을 설정하는 방법을 보여줍니다.

actions.forEach(action => {
    // 각 액션을 콘솔에 출력하여 디버깅
    console.log(action);
    console.log(action.name.toLowerCase().replace(' ', '')); // 액션 이름을 소문자로 변환하고 공백을 제거
    console.log(document.getElementById(action.name.toLowerCase().replace(' ', ''))); // 버튼 요소 가져오기

    // 버튼에 클릭 이벤트 리스너 추가
    document.getElementById(action.name.toLowerCase().replace(' ', '')).addEventListener('click', () => action.handler(myChart));
});

최종 코드

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const Utils = {
            numbers({ count, min, max }) {
                return Array.from({ length: count }, () => Math.floor(Math.random() * (max - min + 1)) + min);
            },
            months({ count }) {
                return Array.from({ length: count }, (_, i) => new Date(0, i).toLocaleString('default', { month: 'long' }));
            },
            namedColor(index) {
                const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'cyan'];
                return colors[index % colors.length];
            },
            transparentize(color, opacity) {
                const rgb = color.replace(/rgba?/, '').replace(/[^\d,]/g, '').split(',').map(Number);
                return `rgba(${rgb.join(',')}, ${opacity})`;
            }
        };


        const actions = [
            {
                // 데이터의 값을 랜덤화하는 액션
                name: 'Randomize',
                handler: (chart) => {
                    // 각 데이터셋에 대해
                    chart.data.datasets.forEach(dataset => {
                        // 랜덤한 데이터 생성 (최소 -100, 최대 100)
                        dataset.data = Utils.numbers({ count: chart.data.labels.length, min: -100, max: 100 });
                    });
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            },
            {
                // 새로운 데이터셋을 추가하는 액션
                name: 'Add Dataset',
                handler: (chart) => {
                    const data = chart.data;
                    // 데이터셋 수에 따라 새로운 색상을 결정
                    const dsColor = Utils.namedColor(data.datasets.length);
                    const newDataset = {
                        // 새로운 데이터셋의 이름 설정
                        label: 'Dataset ' + (data.datasets.length + 1),
                        // 색상 설정 (투명하게)
                        backgroundColor: Utils.transparentize(dsColor, 0.5),
                        borderColor: dsColor,
                        borderWidth: 1,
                        // 랜덤 데이터 생성 (기존 레이블 수와 같은 수)
                        data: Utils.numbers({ count: data.labels.length, min: -100, max: 100 }),
                    };
                    // 데이터셋을 리스트에 추가
                    data.datasets.push(newDataset);
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            },
            {
                // 데이터에 새로운 값을 추가하는 액션
                name: 'Add Data',
                handler: (chart) => {
                    const data = chart.data;
                    // 데이터셋이 있을 때만 실행
                    if (data.datasets.length > 0) {
                        // 레이블에 새로운 월 추가
                        data.labels = Utils.months({ count: data.labels.length + 1 });
                        // 각 데이터셋에 대해 새로운 랜덤 데이터 추가
                        data.datasets.forEach(dataset => {
                            dataset.data.push(Utils.numbers({ count: 1, min: -100, max: 100 })[0]);
                        });
                        // 차트를 업데이트하여 시각적으로 반영
                        chart.update();
                    }
                }
            },
            {
                // 마지막 데이터셋을 제거하는 액션
                name: 'Remove Dataset',
                handler: (chart) => {
                    // 데이터셋 리스트에서 마지막 데이터셋 제거
                    chart.data.datasets.pop();
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            },
            {
                // 마지막 데이터를 제거하는 액션
                name: 'Remove Data',
                handler: (chart) => {
                    // 레이블에서 마지막 항목 제거
                    chart.data.labels.splice(-1, 1);
                    // 각 데이터셋에서 마지막 데이터 제거
                    chart.data.datasets.forEach(dataset => {
                        dataset.data.pop();
                    });
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            }
        ];

        const DATA_COUNT = 7;
        const NUMBER_CFG = { count: DATA_COUNT, min: -100, max: 100 };

        const labels = Utils.months({ count: DATA_COUNT });
        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'Dataset 1',
                    data: Utils.numbers(NUMBER_CFG),
                    borderColor: 'red',
                    backgroundColor: Utils.transparentize('red', 0.5),
                },
                {
                    label: 'Dataset 2',
                    data: Utils.numbers(NUMBER_CFG),
                    borderColor: 'blue',
                    backgroundColor: Utils.transparentize('blue', 0.5),
                }
            ]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart'
                    }
                }
            },
        };

        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );

        actions.forEach(action => {
            console.log(action);
            console.log(action.name.toLowerCase().replace(' ', ''));
            console.log(document.getElementById(action.name.toLowerCase().replace(' ', '')));

            document.getElementById(action.name.toLowerCase().replace(' ', '')).addEventListener('click', () => action.handler(myChart));
        });
    });


</script>

결론

이렇게 구성된 코드는 사용자가 버튼을 클릭할 때마다 특정 액션이 실행되어 차트에 변화를 주게 됩니다. 버튼 이벤트를 설정함으로써 사용자와 차트 간의 상호작용을 강화하고, 보다 풍부한 데이터 시각화를 구현할 수 있습니다.

이 내용을 블로그에 포함시키면, Chart.js에서 버튼 이벤트를 어떻게 사용하는지에 대한 전반적인 이해를 돕는 데 큰 도움이 될 것입니다.

Chart.js에서 Zoom 플러그인을 활용한 효과적인 데이터 시각화

nicksoon — Tue, 14 Jan 2025 00:00:54 +0900

이전 값에 따라 줌을 하는 방법도 있습니다.

사용자에게 값에 따라 추가하는 기능과 마우스로 할 수 있는 방법을 선택해 제공을 한다면 더욱 사용자 친화적인 기능일 수 있어요

https://nickdeveloper.co.kr/entry/Chartjs에서-MinMax를-활용한-Zoom-InOut-기능-구현하기

Chart.js에서 Min/Max를 활용한 Zoom In/Out 기능 구현하기

이번 포스트에서는 Chart.js의 min/max 설정을 활용하여 차트에서 Zoom In/Out 기능을 구현하는 방법을 자세히 다룰 것입니다. 이 기능은 사용자가 차트의 특정 부분을 더 자세히 보거나, 전체적인 관점

nickdeveloper.co.kr

데이터 시각화에 있어 사용자 상호작용은 매우 중요한 요소입니다.

특히 대량의 데이터를 다룰 때,

사용자가 원하는 부분을 확대하여 자세히 볼 수 있는 기능은 필수적입니다.

이번 포스트에서는 Chart.js 라이브러리와 Zoom 플러그인을 사용하여

인터랙티브한 차트를 만드는 방법을 상세히 알아보겠습니다.

chart.js 이미지

1. 필요한 라이브러리 설정

먼저, Chart.js와 Zoom 플러그인, 그리고 터치 이벤트 지원을 위한 Hammer.js를 프로젝트에 포함시켜야 합니다.

CDN을 통해 이를 쉽게 구현할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>

주의: 공식 문서에서 제공하는 로컬 경로 방식(path/to/...)은

404 오류를 발생시킬 수 있으므로, CDN 링크를 사용하는 것이 안전합니다.

2. 차트 구성

HTML에 차트를 그릴 캔버스 요소를 추가합니다.

<canvas id="myChart"></canvas>

3. 차트 초기화 및 Zoom 설정

JavaScript를 사용하여 차트를 초기화하고 Zoom 옵션을 구성합니다.

onst ctx = document.getElementById('myChart').getContext('2d');
const config = {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        plugins: {
            zoom: {
                zoom: {
                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'xy',
                }
            }
        }
    }
};
let myChart = new Chart(ctx, config);

4. Zoom 옵션 설명

wheel.enabled: 마우스 휠을 사용한 줌 기능을 활성화합니다.
pinch.enabled: 터치 디바이스에서 핀치 줌 기능을 활성화합니다.
mode: 줌 방향을 설정합니다. 'xy'는 가로세로 모두, 'x'는 가로만, 'y'는 세로만 줌이 가능합니다.

줌 확대 된 내용

5. 추가 고려사항

성능 최적화: 대량의 데이터를 다룰 때는 성능 최적화를 고려해야 합니다. 데이터 샘플링이나 지연 로딩 기법을 활용할 수 있습니다.
반응형 디자인: Chart.js는 기본적으로 반응형을 지원하지만, 컨테이너 크기 변경 시 차트가 올바르게 조정되는지 확인해야 합니다.
사용자 경험(UX) 개선: 줌 기능 사용법을 사용자에게 안내하는 툴팁이나 도움말을 추가하면 좋습니다.

6. Pan 기능 추가

줌 외에도 Pan(이동) 기능을 추가하여 사용자 경험을 더욱 향상시킬 수 있습니다. 옵션에 다음과 같이 추가합니다:

options: {
	plugins: {
		zoom: {
			zoom: {
				wheel: {
					enabled: true,
				},
				pinch: {
					enabled: true
				},
				mode: 'xy',
            },
			pan: {
				enabled: true,
				mode: 'xy',
			}
		}
	}
}

7.리셋 버튼 구현

줌 기능을 추가하여 사용자 경험을 더욱 향상시킬 수 있습니다. 옵션에 다음과 같이 추가합니다:

<button onclick="resetZoom()">Reset Zoom</button>
<script>
function resetZoom() {
    myChart.resetZoom();
}
</script>

결론

Chart.js와 Zoom 플러그인을 활용하면 사용자 친화적이고 인터랙티브한 데이터 시각화를 쉽게 구현할 수 있습니다.

이 기능은 특히 시계열 데이터나 대량의 데이터 포인트를 가진 차트에서 유용합니다.

사용자의 요구사항과 데이터의 특성에 맞게 줌과 팬 옵션을 조정하고, 필요에 따라 추가 기능을 구현하면 더욱 강력한 데이터 시각화 도구를 만들 수 있습니다. 또한, 성능 최적화와 사용자 경험 개선에 지속적인 관심을 기울이는 것이 중요합니다.

Chart.js의 Zoom 플러그인은 지속적으로 업데이트되고 있으므로, 최신 버전의 문서를 참조하여 새로운 기능이나 변경사항을 확인하는 것이 좋습니다. 데이터 시각화의 세계는 끊임없이 발전하고 있으며, 이러한 도

네이버 API (Authentication failed error code 024) 트러블 슈팅

nicksoon — Mon, 13 Jan 2025 17:23:00 +0900

Error 내용:{"errorMessage":"Scope Status Invalid : Authentication failed. (인증에 실패했습니다.)","errorCode":"024"}

해당 에러가 발생을 해 어떻게 해결을 했는지 확인 공유합니다.

    $category = new Category($open_api1[0],$open_api1[1]);
    
    // 기기별
    $url = "https://openapi.naver.com/v1/datalab/shopping/category/device";
    $result1 =  $category->GET($url,"\"$number\"");

이렇게 코드를 만들었는데

Error 내용:{"errorMessage":"Scope Status Invalid : Authentication failed. (인증에 실패했습니다.)","errorCode":"024"}

이런 에러가 발생을 했습니다

코드에서 아무리 확인을 해 봐도 데이터가 나오지 않았습니다.

다른 API 키를 확인을 해 보았더니 잘 나왔습니다.

두 키를 직접 확인을 해 보니 네이버 데이터랩에 데이터랩 (쇼핑인사이트)이 누락이 되어 있어 요청을 확인할 수 없었습니다

https://developers.naver.com/apps/#/list

애플리케이션 - NAVER Developers

developers.naver.com

1. Application에 내 애플리케이션을 선택합니다.

네이버 디벨로퍼 Application 탭

2. API 리스트에서 API 선택

애플리케이션 리스트

3. API 설정 클릭

네이버 디벨로퍼스 내 애플리케이션 API설정

4. 사용 API에 필요한 기능 추가

애플리케이션 추가 하기

5. 이렇게 추가를 했습니다. 데이터렙(쇼핑인사이트)

네이버 디벨로퍼 네 애플리케이션 정보

이렇게 추가를 하고 에러가 사라졌습니다

개발 전 혹은 서비스 배포 전 API를 잘 추가 했는지 확인 하는 것이 좋아요

JSON Error: Single unpaired UTF-16 surrogate in unicode escape

nicksoon — Fri, 10 Jan 2025 13:57:36 +0900

PHP에서 JSON 데이터 처리: 나의 3시간을 날려버린 오류와 해결책

예기치 않은 오류는 개발 과정에서 피할 수 없는 일입니다.

최근에 PHP로 개발하면서 JSON 데이터를 배열로 변환하려고 할 때,

"Single unpaired UTF-16 surrogate in unicode escape" 오류에 부딪혔습니다.

이 오류는 작은 문제 같지만 결국 저를 괴롭히며 소중한 3시간을 날려버렸습니다.

JSON 데이터 디코딩의 기본

JSON 문자열을 배열로 변환할 때, 우리는 흔히 다음과 같은 코드를 사용합니다:

$arrayData = json_decode($jsonData,true);

하지만 이 방법이 실패할 수도 있습니다.

오류를 확인하는 방법은 다음과 같습니다:

$arrayData = json_decode($jsonData,true);
if (json_last_error() !== JSON_ERROR_NONE) {
    echo 'JSON Error: ' . json_last_error_msg(); // 에러 메시지 출력
}

제 경우, 출력된 오류 메시지는 다음과 같았습니다:

JSON Error: Single unpaired UTF-16 surrogate in unicode escape

이 오류는 꽤 머리 아픈 원인으로 연결되었습니다.

오류의 원인

불완전한 UTF-16 서로게이트 쌍
UTF-16 인코딩에서 특정 문자는 두 개의 16비트 코드 유닛(서로게이트 쌍)으로 표현됩니다. 하나가 결여될 경우, 이 오류가 발생할 수 있습니다.
귀여운 이모지 사용
다음과 같은 귀여운 이모지가 포함된 데이터를 수신했을 때도 문제가 발생했습니다:

...[
	{
    	"categoryId":"aa95b614cf7646169421427cae6459b1",
        "title":" 곱이곱다",
        "displayCount":12,
        "categoryType":"DISPLAY"
    },
    {
    	"categoryId":"1f6e1a2f75bf4003903a6feccd489f5f",
        "title":" 내일도착보장 ",
        "displayCount":12,
        "categoryType":"DISPLAY"
    },
    {
    	"categoryId":"b9f162e5fc464bf0a1dd8f70cac52d1e",
        "title":" 무료배송 ️",
        "displayCount":12,
        "categoryType":"DISPLAY"
    },
     ...

이러한 이모지는 JSON 데이터의 파싱을 방해했습니다.

해결 방법

이 문제를 해결하는 두 가지 방법을 발견했습니다:

1. 이모지를 제거해 줍니다

이모지를 사라지게 하기 위해 다음과 같은 정규 표현식을 사용할 수 있습니다:

$cleaned_data = pregReplace('/[\x{1F000}-\x{1FFFF}]|[\x{2600}-\x{27BF}]|[\x{1F900}-\x{1F9FF}]/u', '', $jsonData);

2.잘못된 유니코드 이스케이프 시퀀스 제거

불완전한 Unicode 이스케이프 시퀀스를 제거하는 방법은 다음과 같습니다:

$cleanedData = preg_replace('/\\\\u[dD][89abAB][0-9a-fA-F]{2}(?!\\\\u[dD][c-fC-F][0-9a-fA-F]{2})/', '', $cleanedData);

이 두 스텝을 다음과 같이 결합하여 최종 코드를 작성했습니다:

// 이모지를 제거해 줍니다.
$cleanedData = preg_replace('/[\x{1F000}-\x{1FFFF}]|[\x{2600}-\x{27BF}]|[\x{1F900}-\x{1F9FF}]/u', '', $jsonData); 
// 잘못된 유니코드 이스케이프 시퀀스 제거:
$cleanedData = preg_replace('/\\\\u[dD][89abAB][0-9a-fA-F]{2}(?!\\\\u[dD][c-fC-F][0-9a-fA-F]{2})/', '', $cleanedData); 

// 디코딩
$arrayData = json_decode($cleanedData,true);

이렇게 하면 JSON 데이터를 문제 없이 배열로 변환할 수 있었습니다.

개발할 때 겪는 시행착오가 귀중한 교훈으로 이어지는 법입니다.

이러한 경험이 다른 개발자에게도 도움이 되기를 바랍니다!

필요한 부분이나 추가하고 싶은 내용이 있다면 말씀해 주세요!

효율적인 JSON 저장을 위한 데이터베이스 정규형 이해하기

nicksoon — Thu, 9 Jan 2025 09:57:27 +0900

데이터베이스에서 텍스트를 저장할 때, 우리는 다양한 옵션을 고려해야 합니다.

TINYTEXT, TEXT, MEDIUMTEXT, LONGTEXT와 같이

각각의 타입은 저장할 수 있는 데이터의 크기에 따라 다르게 설정되어 있습니다.

많이들 이러한 숫자를 간과하기 쉬운데,

실제로는 데이터 관리의 기초에서 매우 중요한 요소입니다.

텍스트 타입의 구분:

TINYTEXT: 최대 256바이트의 작은 데이터에 적합합니다.
TEXT: 65,535바이트, 주로 일반적인 텍스트 정보에 사용됩니다.
MEDIUMTEXT: 16MB까지 허용되며, 대량의 텍스트 데이터를 저장할 수 있습니다.
LONGTEXT: 무려 4GB까지 저장 가능하여, 대량의 문서나 긴 문자열을 효과적으로 관리합니다.

저의 경험을 통해 한 가지 흥미로운 사례를 공유하고자 합니다.

처음에는 JSON 형식의 데이터를 TEXT 타입으로 저장했습니다.

그러나 데이터를 쌓다 보니, 예상치 못한 결과에 직면했습니다.

길이가 긴 JSON 데이터는 중간에 잘려버리는 일이 발생한 것입니다.

그렇게 결국 MEDIUMTEXT로 변경했더니, 데이터는 모두 안정적으로 저장되었습니다.

처음에는 50개, 100개, 200개 정도의 데이터까지는 별 문제가 없었습니다.

하지만 데이터가 쌓이면서 느끼는 속도 저하는 점점 심각해졌습니다.

예상 원인:

메모리 사용: 데이터가 많은 경우, 메모리의 부담이 커져 성능 저하를 초래합니다.
I/O 작업: 디스크에서 데이터를 읽고 쓰는 속도가 느려지면 전체 애플리케이션의 반응성이 떨어집니다.
네트워크 대역폭: 서버와 클라이언트 간의 데이터 전송 과정에서 속도 저하가 발생할 수 있습니다.

이 모든 사실은 데이터가 클수록 가져오는 속도가 느려진다는 점을 강조합니다.

그 결과, 저장하고자 했던 JSON 데이터들이 무겁게 느껴지기 시작했고,

마침내 필요하지 않은 데이터를 분리하여 저장하기로 결정했습니다.

속도를 유지하기 위해, 필수적인 데이터만 나누어 저장하고 기존의 MEDIUMTEXT 타입 사용도 고려했습니다.

이 과정에서 느끼는 것은 '마냥 간단하게 처리하려고 할 경우에 큰 문제에 직면할 수 있다'는 것이었습니다.

초반에는 단순한 데이터 저장이었지만, 점차 복잡해지면서 더욱 심도 있는 고민이 필요하다는 것을 깨달았습니다.

이뿐만 아니라, 이 과정은 정규형에 대해 다시 고민하게 해주었습니다.

데이터베이스 설계의 원칙인 정규형(Normalization)은 데이터의 중복을 최소화하고 무결성을 유지하는 데 중요한 역할을 합니다.

특히, 데이터의 크기가 커질수록 중복된 데이터를 줄이고,

필요에 따라 데이터를 나누어 구성하는 것이 효율적임을 깨닫게 되었습니다.

정규형을 적용하면 데이터베이스 구조가 명확해져 검색 성능을 향상시킬 수 있으며,

향후 데이터 관리가 훨씬 수월해집니다.

결국, 데이터 관리에서의 세심함과 계획이 얼마나 중요한지를 새삼 느끼게 되었습니다.

데이터의 양이 많아질수록, 적절한 저장 방식을 선택하고, 성능을 고려한 접근이 필요하다는 교훈을 얻게 된 것입니다.

이처럼 우리는 데이터의 크기뿐 아니라, 그 성능과 효율성을 모두 고려해야만 성공적인 데이터베이스 관리를 할 수 있습니다.

Turbopack란?

nicksoon — Tue, 31 Dec 2024 16:59:38 +0900

이번 next.js 를 하면서 글을 써야지 하고 마음먹은 것이 이녀석 때문입니다.

Turbopack이란? 갑자기 설치를 하면 좋을 것 같은 이름이었습니다.

하지만 아무것도 모르고 설치를 해야 하나? 괜히 ESline 에 걸려 에러만 나는 것은 아닌지 찾아봤습니다.

Turbopack는 JavaScript와 TypeScript에 최적화된 점진적 번들러로, Rust로 작성되었으며 Next.js에 내장되어 있다

라고 하는데요

점진적 번들러? Rust로 작성? Next에 내장? webpack의 후속작?

여러 알 수 없는 말을이 있을 겁니다. 이걸 다 설명하기는 너무 루즈하고 Vite와 비슷한데 성능이 우수하다고 생가하면 되는데요

그럼 Vite가 무엇인지 모를 수도 있고요

다시 쉽게 정리하자면 빌드를 빠륵게 하기 위해 여러 모듈들을 한 곳에 모으는 작업입니다.

이전에는 Vite를 사용했지만 next에서는 베타로 turbopack을 제공을 하게 된 것입니다.

Turbopack의 주요 특징

초고속 빌드 및 번들링
- 기존 Webpack, Vite보다 훨씬 빠른 성능.
- Rust로 구현되어 CPU 및 메모리 효율이 높음.
최적화된 개발 환경
- 실시간으로 변경 사항을 빠르게 반영하는 Hot Module Replacement (HMR) 지원.
- 대규모 프로젝트에서도 빌드 속도가 매우 빠름.
Incremental Compilation (증분 컴파일)
- 변경된 파일만 다시 빌드하여 불필요한 작업을 최소화.
- 대규모 코드베이스에서도 효율적으로 작동.
완벽한 Next.js 통합
- Next.js에 최적화된 설정을 제공.
- pages/와 app/ 디렉토리 모두 지원.
미래 지향적 번들러
- Turbopack은 Next.js 외에도 다양한 JavaScript 프레임워크에서 사용될 가능성이 높음.
- Vercel은 이를 Webpack처럼 널리 사용되는 번들러로 발전시키는 것을 목표로 함.

Turbopack vs Webpack vs Vite

특징TurbopackWebpackVite

특징	Turbopack	Webpack	Vite
기술 기반	Rust	JavaScript	JavaScript
속도	매우 빠름	느림	빠름
사용성	Next.js에 최적화	범용	범용
Hot Reloading	빠르고 효율적	느림	빠르고 효율적
빌드 최적화	Incremental Compilation	Full Bundling	Pre-bundling
확장성	초기 단계	매우 널리 사용됨	상대적으로 적은 도입률

이런 내용이 있더라고요 하 빠르구나 그럼 사용해야지 하고 사용하기로 했습니다.

 "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "build-start": "next build && next start",
    "lint": "next lint",
    "watch": "nodemon"
  },

이렇게 사용하기로 했습니다.

next 폴더 src 그리고 import alias

nicksoon — Tue, 31 Dec 2024 16:34:57 +0900

next를 설치하다 보니 src를 사용할 거니?

import alias를 사용할 거니? 하고 물어봤다

src에 담아서 개발을해? import alias는 '@/~' 을 사용한다고 ? 당연하지 라고 생각을 했어요

그럼 왜 당연할까요? 또 import alias는 기본 no로 되어 있어요

뭐 관리가 쉬워지고 import 코드가 깔끔해져서 그러긴 한데요 좀더 찾아봤어요

src/ 디렉토리를 사용하는 장점

프로젝트 구조의 명확성
- 모든 소스 코드 파일을 src/ 디렉토리 아래로 정리하여 루트 디렉토리가 깔끔해집니다.
- 루트 디렉토리에는 설정 파일(예: package.json, next.config.js)만 남고, 소스 코드와 명확히 분리됩니다.
대규모 프로젝트 관리
- 프로젝트가 커질수록 디렉토리가 많아지는데, src/ 디렉토리를 사용하면 구조적인 명확성을 유지할 수 있습니다.
모듈화된 파일 관리
- src/ 아래에 pages/, components/, utils/, api/ 등을 세분화하여 각 역할에 맞는 파일을 쉽게 찾을 수 있습니다.

project-root/
├── public/                # 정적 파일
├── src/                   # 소스 코드
│   ├── pages/             # Next.js의 라우팅 파일
│   ├── components/        # 재사용 가능한 컴포넌트
│   ├── styles/            # 전역 및 모듈 CSS
│   ├── hooks/             # 커스텀 React Hook
│   ├── utils/             # 유틸리티 함수
│   ├── context/           # React Context API 파일
│   └── api/               # API 호출 로직
├── .eslintrc.json         # ESLint 설정 파일
├── next.config.js         # Next.js 설정 파일
├── package.json           # npm 의존성 관리
└── README.md              # 프로젝트 설명

Import Alias란?

Import Alias는 상대 경로 대신 짧고 명확한 경로를 사용하여 파일을 가져올 수 있도록 설정하는 것입니다.

예시: Import Alias 없이

import Header from "../../components/Header"; 
import Footer from "../../components/shared/Footer";

예시: Import Alias 사용

javascript

코드 복사

import Header from "@/components/Header"; 
import Footer from "@/components/shared/Footer";

여기서 **@/**는 프로젝트의 루트 디렉토리를 의미하는 import alias입니다.

물론 alias를 사용할 때 문제점은 클릭해 해당 코드로 넘어가지지 않는 다는 건데요

alias를 세팅하고 우선 '../..' 를 사용해도 괜찮아요

이후 '@/~' 하면 되니까요

ESLint란

nicksoon — Tue, 31 Dec 2024 16:22:31 +0900

next.js 를 시작하면서 이것 저것 나오는데 궁금한 것들이 있어 정리해 보았습니다.

npx create-next-app@latest .

처음 next를 설치를 하게 되면서 여러가지 물어보더라고요

1. 타입스크립트를 사용할 거니? yes~! 이거 써야 할 말이 있으니까요?!

다음 ESline을 사용할 거니? Would you like to use eslint?

여시거 no를 사용하고 싶었지만 왜 no여야 하는지 왜 yes여야 하는지 고민을 해보고 싶었어요

물론 ESline을 사용하면 많은 어려움이 있었기 때문에 사용을 하고 싶지 않았어요

하지만 왜 나에게 문제가 발생을 했는지 찾는 것도 좋을 것 같아 ESline을 찾아봤어요

ESLint는 JavaScript 및 TypeScript 코드에서 오류를 찾아내고 스타일을 유지하도록 도와주는 정적 코드 분석 도구입니다.

아하 그렇구나?! 도와주는 코드구나?! 그런데 왜 나에게 시련을 주었을까?

다시 생각을 해보면 이전 JavaScript가 준 너프함과 안일함으로 인해 문제가 발생하지 않았나 생각해 봅니다.

그럼 다시 알아봐야죠?

ESLint의 주요 역할

1. 코드 품질 검사

- 문법 오류, 사용하지 않는 변수, 선언되지 않은 변수 사용 등 코드 품질 문제를 찾아냅니다.

예:

let unusedVariable;
console.log(a); // 'a' is not defined (에러)

2. 코드 스타일 유지

- 팀이나 프로젝트에서 일관된 코드 스타일을 유지할 수 있도록 규칙을 강제합니다.

예: 세미콜론 사용 여부, 들여쓰기 크기(스페이스 2개 vs 4개) 등.

3. 자동 수정 지원

- 일부 문제는 eslint --fix 명령어로 자동으로 해결 가능합니다.

예: 잘못된 들여쓰기, 세미콜론 누락 등.

이런 참 별거 아닌 내용이네요?!

그런데 저는 엄청 고생한 기억이 있어서 더 찾아보았습니다.

ESLint의 구성 요소

1. 규칙(Rules)

- ESLint는 다양한 규칙을 제공하며, 필요에 따라 활성화하거나 비활성화할 수 있습니다.

예:

- no-unused-vars: 사용하지 않는 변수를 경고.

- eqeqeq: == 대신 === 사용을 강제.

커스터마이징 가능한 규칙 설정 예:

{ "rules": 
	{ 
        "semi": ["error", "always"], // 세미콜론을 항상 사용 
        "quotes": ["error", "single"], // 문자열은 항상 작은 따옴표 사용 
        "eqeqeq": "error" // '==' 대신 '===' 강제 
    } 
}

2. 플러그인(Plugins)

- React, TypeScript 등 특정 라이브러리나 프레임워크에 맞는 규칙을 추가로 지원.

예: eslint-plugin-react, eslint-plugin-import.

3. 환경(Environment)

- 코드를 실행하는 환경을 정의합니다.

예: 브라우저, Node.js, ES6 등.

{ "env": 
	{ 
    	"browser": true, 
        "node": true, 
        "es6": true 
    } 
}

역시 환경에서도 문제가 발생을 했네요

꼭 뭔가 설치를 하면 안되고 받아오면 안되고 아주 난감했는데 이런 이유를 알게 되었네요

ESLint의 주요 장점

코드 품질 개선
- 실수로 발생할 수 있는 버그를 사전에 방지.
일관된 코드 스타일
- 여러 개발자가 참여하는 프로젝트에서 코드 스타일을 통일.
자동화 가능
- Prettier와 결합하거나 Git 훅에 추가하여 코드 스타일을 자동으로 검사 및 수정.

이런 이유로 사용해 보기 했어요

JavaScript Number Format 숫자 단위 변환

nicksoon — Fri, 27 Dec 2024 17:40:29 +0900

긴 숫자를 읽기 쉽게 변환하는 방법은 많은 곳에서 유용합니다.

특히, 큰 금액이나 데이터 크기를 간결하게 표시할 수 있습니다.

문제: 긴 숫자를 읽기 쉽게 변환하기

예를 들어, 24,343,800이라는 숫자를 그대로 표시하면 가독성이 떨어지고 UI가 깨지게 됩니다

만약 모든 값을 보여줘야 하는 중요한 값이 아니라면

이를 단위를 사용해 "2억+"처럼 표현한다면 훨씬 직관적일 것입니다.

아래와 같은 코드로 작성을 하면 좋을 것 같아요

function formatLargeNumber(number) {
    if (typeof number !== "number" || isNaN(number)) {
        throw new Error("입력 값은 숫자여야 합니다.");
    }

    const units = ["", "만", "십만+", "백만+", "천만+", "억+", "십억+"];
    let unitIndex = 0;

    // 10,000 단위로 나누기 시작
    do {
        if (unitIndex === 0) {
            number = Math.floor(number / 10000); // 첫 번째는 10,000으로 나눔
        } else {
            number = Math.floor(number / 10); // 이후부터는 10씩 나눔
        }
        unitIndex++;
    } while (number >= 10 && unitIndex < units.length - 1);

    return `${Math.floor(number)}${units[unitIndex]}`;
}

// 예제 사용
console.log(formatLargeNumber(24343800)); // 결과: "2억+"
console.log(formatLargeNumber(123456));   // 결과: "1십만+"
console.log(formatLargeNumber(9876543210)); // 결과: "9십억+"

코드 작동 방식

입력 검증

입력 값이 숫자인지 확인합니다. 숫자가 아니면 오류를 발생시킵니다.

단위 배열 정의

const units = ["", "만", "십만+", "백만+", "천만+", "억+", "십억+"];

units 배열은 단위(만, 십만+, 백만+ 등)를 나타냅니다.

숫자 나누기 및 단위 선택

첫 번째 반복:
- 10000으로 나눠 만 단위로 줄입니다.
이후 반복:
- 10씩 나눠 단위를 점점 올립니다.

결과 반환

최종적으로 변환된 숫자와 적절한 단위를 합쳐 반환합니다.

JavaScript 연산자 정리

nicksoon — Mon, 16 Dec 2024 23:06:46 +0900

JavaScript의 연산자를 하나씩 정리해보겠습니다.

1. 연산자의 개념

연산자는 코드에서 값을 계산하거나 평가하는 데 사용됩니다. 대표적인 예로는 산술 연산자, 할당 연산자, 비교 연산자 등이 있습니다.

참고 문서: MDN 자바스크립트 연산자

2. 값과 표현식

리터럴 (Literal)

리터럴은 코드에서 값을 나타내는 표기법입니다.

숫자 리터럴: 1, 123
문자열 리터럴: 'hello', "world"
템플릿 리터럴: 안녕, ${name}
함수 리터럴: function() {}

표현식 (Expression)

값으로 평가될 수 있는 코드를 의미합니다.

let b;       // 선언문
b = 2;       // 표현식, 할당문

let a = b = 2; // 표현식
console.log(a); // 2 출력

3. 산술 연산자 (Arithmetic Operators)

산술 연산자는 기본적인 수학 연산을 수행합니다.

연산자 설명 예시

+	더하기	5 + 2 → 7
-	빼기	5 - 2 → 3
*	곱하기	5 * 2 → 10
/	나누기	5 / 2 → 2.5
%	나머지	5 % 2 → 1
**	거듭제곱	5 ** 2 → 25

console.log(5 + 2); // 7
console.log(5 % 2); // 1
console.log(5 ** 2); // 25 (ES7+)

주의: 문자열과 숫자를 함께 사용할 경우 문자열 연결이 됩니다.

let text = '1' + 1; // 문자열 '11'
console.log(text);

4. 단항 연산자 (Unary Operators)

단항 연산자는 하나의 피연산자에 대해 연산을 수행합니다.

연산자 설명 예시

+	양수 변환	+5 → 5
-	음수 변환	-5 → -5
!	논리 부정	!true → false

let unaryA = 5;
unaryA = -unaryA; // -5
console.log(unaryA);

let unaryBoolean = true;
console.log(!unaryBoolean); // false

숫자로 변환:

console.log(+false);       // 0
console.log(+null);        // 0
console.log(+undefined);   // NaN
console.log(!!1);          // true

5. 할당 연산자 (Assignment Operators)

할당 연산자는 변수에 값을 할당합니다.

연산자 설명 예시

=	할당	a = 2
+=	더한 후 할당	a += 2 → a = a + 2
-=	뺀 후 할당	a -= 2
*=	곱한 후 할당	a *= 2
/=	나눈 후 할당	a /= 2
%=	나머지를 구한 후 할당	a %= 2
**=	거듭제곱 후 할당	a **= 2

let a = 1;
a += 2; // a = a + 2 → 3
console.log(a);

6. 증감 연산자 (Increment & Decrement Operators)

연산자 설명 예시

++	1 증가	a++, ++a
--	1 감소	a--, --a

let a = 0;
console.log(a++); // 0 → 출력 후 증가
console.log(++a); // 2 → 먼저 증가 후 출력

7. 비교 연산자 (Equality Operators)

연산자 설명 예시

==	값이 같으면 true	2 == '2' → true
===	값과 타입이 같으면 true	2 === '2' → false
!=	값이 다르면 true	2 != 3 → true
!==	값 또는 타입이 다르면 true	2 !== '2' → true

console.log(2 == '2');  // true (타입 무시)
console.log(2 === '2'); // false (타입까지 비교)

const obj1 = { name: 'js' };
const obj2 = { name: 'js' };
console.log(obj1 == obj2);  // false → 메모리 주소가 다름
console.log(obj1.name == obj2.name); // true → 값이 같음

8. 연산자 우선순위

연산자에는 우선순위가 있습니다. 곱셈, 나눗셈이 덧셈, 뺄셈보다 먼저 실행됩니다.

let a = 2, b = 3;
let result = a + b * 4;
console.log(result); // 14 → b * 4 먼저 계산

result = (a + b) * 4;
console.log(result); // 20 → 괄호가 우선순위

우선순위 참고: MDN 연산자 우선순위

마무리하며

연산자는 JavaScript의 기본이자 핵심 개념입니다. 각 연산자의 동작을 이해하고 잘 활용하면 더욱 효율적이고 깔끔한 코드를 작성할 수 있습니다.

JavaScript 기본 타입과 메모리 이해하기

nicksoon — Mon, 16 Dec 2024 22:05:47 +0900

JavaScript의 기본 데이터 타입

1. 숫자 타입 (Number)

숫자 타입은 정수, 음수, 실수를 포함합니다.

let integer = 123; // 정수
let negative = -123; // 음수
let double = 1.23; // 실수

console.log(integer); // 123
console.log(negative); // -123
console.log(double); // 1.23

// 다양한 진법
let binary = 0b1111011; // 2진수
let octal = 0o173; // 8진수
let hex = 0x7b; // 16진수

console.log(binary); // 123
console.log(octal);  // 123
console.log(hex);    // 123

NaN과 Infinity:

console.log(0 / 123); // 0
console.log(123 / 0); // Infinity
console.log(123 / -0); // -Infinity
console.log(123 / 'text'); // NaN (Not a Number)

BigInt

BigInt는 매우 큰 정수를 표현할 때 사용합니다.

let bigInt = 12345678910111213141516171819202122232425262728293031323334353637n;
console.log(bigInt); // 123456789...
console.log(typeof bigInt); // bigint

2. 문자열 타입 (String)

문자열은 텍스트 데이터를 표현하는 타입입니다. 작은 따옴표(')나 큰 따옴표("), 백틱(```)을 사용합니다.

let string = '안녕하세요';
string = `안녕!`;
console.log(string); // 안녕!

// 특수 문자 사용 예시
string = '안녕\\n nicksoon!\\t\\t 내 이름은\\\\';
console.log(string); // 줄바꿈, 탭, 백슬래시 포함

템플릿 리터럴:

let id = 'nicksoon';
let greeting = `안녕, ${id}  \\n즐거운 하루 보내요!`;
console.log(greeting);

3. 불리언 타입 (Boolean)

참(true)과 거짓(false)만을 표현합니다.

let isFree = true;
let isActivated = false;
console.log(isFree); // true
console.log(isActivated); // false

// Truthy와 Falsy 값
console.log(!!0); // false
console.log(!!1); // true
console.log(!!''); // false
console.log(!!' '); // true

4. Null과 Undefined

null은 비어있는 값, undefined는 값이 할당되지 않은 상태를 나타냅니다.

let variable;
console.log(variable); // undefined

variable = null;
console.log(variable); // null

객체 타입 (Object)

객체는 여러 데이터를 묶어서 저장할 수 있는 복합 데이터 타입입니다.

객체 생성과 사용

let apple = {
    name: 'apple',
    color: 'red',
    display: ' '
};
let orange = {
    name: 'orange',
    color: 'orange',
    display: ' '
};

console.log(apple);
console.log(orange);

값과 참조의 차이

*원시 타입(Primitive Type)**은 값 자체를 복사하지만, **객체(Object)**는 참조값(메모리 주소)을 복사합니다.

let a = 1;
let b = a; // 값 복사
console.log(a, b); // 1, 1

let appleObject = { name: 'apple' };
let orangeObject = appleObject; // 참조 복사

appleObject.name = 'orange';
console.log(appleObject); // { name: 'orange' }
console.log(orangeObject); // { name: 'orange' }

객체를 복사하려면 다음과 같이 **얕은 복사(Shallow Copy)**를 사용합니다:

let finappleObject = Object.assign({}, appleObject);
let mango = { ...appleObject };

finappleObject.name = '파인애플';
mango.name = 'mango';

console.log(finappleObject); // { name: '파인애플' }
console.log(mango); // { name: 'mango' }

const와 let

변수를 선언할 때 const와 let의 차이를 알아봅시다.

재할당 가능 여부 변경 가능 여부

	재할당 reassignable	변경 Mutable
let	Yes	Yes
const	No	Yes

let exA = 1;
exA = 2; // 가능

const exText = 'hello';
// exText = 'hi'; // 불가능

const exConstApple = {
    name: 'apple',
    color: 'red'
};
exConstApple.color = 'green'; // 객체의 속성 변경은 가능
console.log(exConstApple);

typeof를 통한 타입 확인

JavaScript는 동적 타입 언어이므로 변수의 타입이 실행 중에 변경될 수 있습니다.

let typeofVariable;
console.log(typeof typeofVariable); // undefined

typeofVariable = 'Hello';
console.log(typeof typeofVariable); // string

typeofVariable = 123;
console.log(typeof typeofVariable); // number

typeofVariable = function () {};
console.log(typeof typeofVariable); // function

typeofVariable = {};
console.log(typeof typeofVariable); // object

마무리하며

이 글에서는 JavaScript의 기본 데이터 타입과 객체 타입, 그리고 변수의 활용법에 대해 다루었습니다.

억까 문제(문제 해결방안, 사고력 키우기)

nicksoon — Mon, 16 Dec 2024 12:04:37 +0900

이번에 어느 분께 문제 해결방안에 대해서 이야기를 한 적이 있었습니다.

[문제]

한 기업은 고객에게 상품을 배송하기 위해 여러 단계를 거치는 물류 시스템을 운영하고 있다. 상품은 1차 창고에서 출발하여 2차 창고, 3차 창고를 거쳐 고객에게 도착한다. 각 구간의 운송 시간은 1차 창고에서 2차 창고까지 1시간, 2차 창고에서 3차 창고까지 2시간 30분, 3차 창고에서 고객까지 2시간이 소요된다. 또한 각 단계에서 상하차 시간이 추가로 소요되며, 1차 창고에서 상하차 시간은 30분, 2차 창고에서 상하차 시간은 1시간, 3차 창고에서 상하차 시간은 1시간이다. 운송 과정에서 각 구간별로 비용이 발생하며 1차 창고에서 2차 창고까지의 운송 비용은 100만 원, 2차 창고에서 3차 창고까지의 운송 비용은 50만 원, 3차 창고에서 고객까지의 운송 비용은 10만 원이다. 이 시스템에는 몇 가지 제약 조건이 있는데, 상품은 반드시 오전 7시까지 고객에게 도착해야 하며 배송은 매일 00시에 시작한다. 운송 시간과 상하차 시간을 모두 고려해야 한다. 이 기업의 물류 규모는 1차 창고가 1개, 2차 창고가 도시별로 20개, 3차 창고가 마을별로 50 곱하기 20개로 총 1000개이며 고객은 100 곱하기 50 곱하기 20명으로 총 10만 명이다.

이 문제에서 고객에게 상품을 오전 7시까지 배송하기 위해 필요한 모든 단계를 시간 순서대로 계산하고 주어진 조건에서 추가적인 비용 투자 없이 시간을 단축할 수 있는 방안을 제안하며 물류 비용을 최소화하면서 효율적으로 상품을 배송하기 위한 방안을 설명하시오.

억지 스러운 문제입니다. 정답이 없어요

그런데 또 현실 입니다. 기업들은 시간이 없는데 돈도 없어요

문제를 다시 정리해 볼게요

문제 분석

주어진 조건

분배 경로와 시간
- 1차 -> 2차: 1시간
- 2차 -> 3차: 2시간 30분
- 3차 -> 고객: 2시간
상하차 시간
- 1차 상하차: 30분
- 2차 상하차: 1시간
- 3차 상하차: 1시간
비용
- 1차 -> 2차: 100만 원
- 2차 -> 3차: 50만 원
- 3차 -> 고객: 10만 원
제약 조건
- 고객에게 오전 7시까지 도착해야 함.
- 운송 시간 외 상하차 시간이 포함됨.
물류 규모
- 1차 창고: 1개
- 2차 창고: 도시별 20개
- 3차 창고: 마을별 50 * 20개
- 고객: 100 * 50 * 20명

시간 계산

고객까지 도착하는 총 소요 시간:
- 운송 시간: 1+2.5+2=5.5시간1 + 2.5 + 2 = 5.5
- 상하차 시간: 0.5+1+1=2.5시간0.5 + 1 + 1 = 2.5시간
- 총: 5.5+2.5=8시간5.5 + 2.5 = 8시간

조건

1. 무조건 00시에 출발해야 한다

2. 이미 최적화된 거리 계산이다

3. 이미 적자이기 때문에 투자도 어렵다

이건 해결하라고 만든 것이 아니에요

분명 기업에서는 다른 투자나 시간대를 변경하거나 다른 상황을 만들어 내겠지만

저는 1:1로 대화하면서 해결?을 그것도 개발자에게? 개발적으로 동선을 생각하라는 건가?

알고리즘 문제인가? 한참을 고민하다가

상하차 시간을 줄이는 것 뿐이라고 이야기를 했어요

- 그런데 그 분도 답은 뭐다 라고 하지도 않고요

완전 억까였죠 이건 뭐지? 그냥 그렇게 끝났어요

그냥 나보고 해결 능력도 없고 창의성도 없데요 아니 뭐지?

그런데 이건 그냥 해결에서 볼때였고

다른 의도가 있었을 것 같아 또 정리를 해 보았습니다.

비판적 사고: 문제의 비현실적인 측면을 인지하고, 이를 논리적으로 설명하는 능력.
현실적인 한계의 인지: 자원이 부족하고 제약 조건이 많은 상황에서 가능한 대안을 제시하는 능력.
압박 테스트: 말도 안 되는 상황에서도 논리적으로 대응하고, 협조적인 태도를 유지하는 태도.

이렇게 생각을 했어요

다시 문제를 바꿔서 개발자 적으로

- End day는 짧다

- 인원은 한정적이다

- 시작은 이미 지났다

이때 어떻게 일정을 관리하고 개발을 진행을 하겠나요?

"그럼 면접을 볼때라면 이렇겠죠 야근을 해서라도 하겠습니다!"

그런데 위 시간이 야근을 포함해서 준 시간이다 라고 하면요?

말이 안되지만 또 이런 일이 많으니까요

그럼 이 일을 어떻게 해결하시겠나요? 뭐라고 대답하는 것이 더 좋을 까요?

저는 이일을 이렇게 생각하고 정리해 봅니다.

[개발자적인 접근 방식]

문제를 개발자 관점에서 바라보면, 다음과 같은 조건들이 주어질 수 있습니다:

End day는 짧다.
인원은 한정적이다.
시작은 이미 지났다.

야근을 포함해서도 시간이 부족하다면 어떻게 해야 할까요?

저는 다음과 같은 과정을 통해 해결책을 제시할 수 있다고 생각합니다:

1. 비현실적인 조건을 인지시키기

"이 문제는 주어진 시간 내에 모든 요구 사항을 만족시키는 것이 현실적으로 어렵습니다." 문제를 요청한 대상에게 비현실적인 조건임을 논리적으로 전달해야 합니다. 이를 통해 문제의 범위를 재조정하거나, 최소한의 목표를 명확히 할 수 있습니다.

2. 우선순위 설정

"모든 작업이 중요하다고 하지만, 반드시 처리해야 하는 핵심 작업부터 진행해야 합니다."

우선순위를 명확히 하고, 뒤로 미룰 수 있는 작업은 과감히 제외하거나 축소합니다. 예를 들어, 고객에게 상품이 도착하기 위해 반드시 필요한 단계(MVP)를 정의하고, 부수적인 작업은 후순위로 둡니다.

3. 팀 내 효율적인 분배

"남은 시간 동안 팀원들과 역할을 명확히 나누고, 각자가 맡은 부분을 빠르게 처리할 수 있도록 합니다."

회의는 간결하게 진행하며, 작업을 최대한 분산시켜 병렬적으로 처리합니다. 효율성을 높이기 위해 중복 작업이나 불필요한 과정을 제거합니다.

4. 생산성을 극대화

"코드 리뷰나 반복 작업은 생략하거나 간소화하고, 가능한 빠르게 배포 가능한 상태로 만듭니다."

기술적 부채를 감수하더라도, 지금 당장 필요한 작업에 집중합니다. 배포 후에 보완할 수 있는 부분은 다음 단계로 미룹니다.

면접관이 일부러 말이 안 되는 상황을 제시했을 경우,

현실적 한계와 대안을 논리적으로 설명하면서도 협조적인 태도를 보여주는 것이 중요하다고 생각이 듭니다.

[결론]

이와 같은 문제는 현실에서도 종종 발생합니다. 기업은 시간도 없고,

돈도 없으면서도 최대한 빠르고 효율적인 결과를 요구합니다.

이런 상황에서 중요한 것은 문제의 본질을 파악하고,

비현실적인 조건을 논리적으로 설명하며,

제한된 조건 내에서 최선의 결과를 도출하려는 태도입니다.

JavaScript 기초: 변수(Variable)와 메모리 이해하기

nicksoon — Mon, 16 Dec 2024 00:21:38 +0900

컴퓨터의 메모리와 JavaScript 변수에 대해 다뤄보려고 합니다. 프로그래밍을 공부할 때 가장 기본적이면서도 중요한 개념인 변수와 메모리 구조를 이해하는 시간을 가져보겠습니다.

컴퓨터의 구성 요소와 메모리

컴퓨터는 크게 하드디스크, 연산(CPU), 메모리로 나뉩니다.

하드디스크: 데이터를 영구적으로 저장합니다.
CPU: 데이터를 처리합니다.
메모리: 프로그램이 실행되는 동안 데이터를 임시로 저장합니다.

메모리 구조

메모리는 여러 칸으로 나누어져 있으며, 각 칸은 1바이트(byte) 단위로 구성됩니다. 예시:

1byte | 1byte | 1byte | 1byte | ...

메모리에는 프로그램이 실행될 때 다양한 영역이 할당됩니다:

Code 영역: 실행할 코드가 저장됩니다.
Data 영역: 전역 변수 및 상수가 저장됩니다.
Stack 영역: 함수 호출과 지역 변수가 저장됩니다.
Heap 영역: 동적으로 생성되는 데이터가 저장됩니다.

JavaScript의 변수(Variable)

변수는 데이터를 저장하는 이름이 주어진 메모리 공간입니다. 변수를 사용하면 메모리 주소를 몰라도 이름만으로 값을 저장하고 불러올 수 있습니다.

변수의 기본 개념

변수를 선언하고 값을 할당하는 기본 구조는 다음과 같습니다:

let a = 0; // let(키워드) a(변수 이름) = (할당 연산자) 0(값);
console.log(a); // 0 출력

a = 1;
console.log(a); // 1 출력

let b; // 값 할당 없이 변수 선언만 함
console.log(b); // undefined 출력

b = 2;
console.log(b); // 2 출력

변수 이름 짓기 (Naming Variables)

변수는 저장된 값을 잘 나타낼 수 있는 의미 있는 이름을 사용하는 것이 중요합니다.

추천 문서: MDN - 변수 이해하기

변수 이름 규칙

변수 이름을 지을 때 지켜야 할 규칙이 있습니다:

사용 가능한 문자

라틴 문자: a-z, A-Z, 0-9, _, $
대소문자 구분: apple과 Apple은 서로 다른 변수입니다.
Camel Case 추천: 단어를 이어 쓸 때 camelCase 방식 사용 (likeThis).

변수 이름 규칙

숫자로 시작할 수 없음: let 1apple; (X)
특수문자 사용 불가: _와 $만 예외적으로 허용됩니다.
한국어 및 이모지 사용 금지: let 사과;, let ; (X)
예약어 사용 금지: 예약어는 변수명으로 사용할 수 없습니다. (예약어 목록)

좋은 변수 이름 예시

// 나쁜 예제
let number = 20;

// 좋은 예제
let myAge = 20; // 나이를 표현하는 의미 있는 이름

// 나쁜 예제
let audio1;
let audio2;

// 좋은 예제
let backgroundAudio;
let windAudio;

// 꿀팁: 찾기 쉬운 변수명 사용
let audioBackground;
let audioWind;

변수 이름이 중요한 이유

변수 이름을 잘 지으면 코드의 가독성이 좋아지고, 팀 프로젝트에서도 더 원활한 협업이 가능합니다. 단순히 a, b처럼 아무 의미 없는 이름 대신, 저장된 값이 무엇을 나타내는지 바로 이해할 수 있는 이름을 사용해 보세요!

마무리하며

변수는 프로그래밍에서 가장 기본적이면서 중요한 개념입니다. 메모리의 구조를 이해하고, 올바르게 변수를 선언하고 사용하면 더욱 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

JavaScript를 실행하는 방법: 브라우저와 Node.js 활용하기

nicksoon — Mon, 16 Dec 2024 00:14:32 +0900

JavaScript를 실행하는 데에는 두 가지 주요 방법이 있습니다. 바로 브라우저와 Node.js를 사용하는 것입니다.

아래에서 각각의 방법과 실행 방법을 단계별로 알아보겠습니다.

1. 브라우저에서 JavaScript 실행하기

준비 단계: Chrome 다운로드

먼저 브라우저에서 JavaScript를 실행하려면 Chrome 같은 브라우저가 필요합니다.

Chrome은 다음 링크에서 다운로드할 수 있습니다:

Chrome 다운로드

실행 방법: Hello World 출력하기

Chrome 브라우저를 열기Chrome을 실행한 후, 개발자 도구를 열어야 합니다.
개발자 도구 실행Windows: Ctrl + Shift + JMac: Cmd + Option + J
JavaScript 코드 입력개발자 도구의 Console 탭에서 아래 코드를 입력하고 실행해 보세요:
console.log("Hello World!");
출력 확인Console 창에 Hello World!라는 메시지가 출력됩니다.

2. VS Code를 사용해 JavaScript 실행하기

준비 단계: VS Code 다운로드

코드를 작성하고 실행할 수 있는 편리한 에디터인 VS Code를 다운로드하세요:

VS Code 다운로드

VS Code로 JavaScript 실행하기

VS Code 설치 및 실행다운로드한 VS Code를 설치하고 실행합니다.
JavaScript 파일 생성index.js라는 새 파일을 만듭니다.
코드 작성아래와 같은 JavaScript 코드를 작성합니다:
console.log("Hello World!");
터미널에서 실행VS Code 하단의 터미널을 열고 다음 명령어를 실행합니다:터미널에 Hello World!가 출력됩니다.
node index.js

3. HTML 파일에서 JavaScript 실행하기

실행 준비: HTML 파일 생성

index.html 파일 생성아래와 같이 HTML 파일을 작성합니다:
html 코드 복사 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script> console.log("Hello World!"); </script> </body> </html>
Live Server로 실행VS Code에서 Live Server 플러그인을 설치한 후, HTML 파일을 실행합니다.
결과 확인브라우저에서 개발자 도구(F12)를 열고 Console 탭을 확인하면 Hello World!가 출력됩니다.

4. Node.js에서 JavaScript 실행하기

준비 단계: Node.js 다운로드

Node.js는 JavaScript를 브라우저 외부에서 실행할 수 있게 해줍니다. Node.js가 설치되어 있는지 확인하려면 터미널에서 다음 명령어를 입력하세요:

node -v

Node.js가 설치되어 있지 않다면 Node.js 다운로드 페이지에서 설치하세요.

Node.js로 JavaScript 실행하기

index.js 파일 생성다음 코드를 작성한 후 저장합니다:
console.log("Hello World!");
터미널에서 실행파일이 있는 디렉터리로 이동한 후, 아래 명령어를 실행합니다:Hello World!가 출력됩니다.
node index.js

Nodemon으로 자동 실행

Node.js 파일을 실행할 때마다 node index.js 명령어를 입력하기 번거롭다면, Nodemon을 설치해 자동으로 실행되도록 설정할 수 있습니다:

npm install nodemon -g

이후 아래와 같이 Nodemon으로 파일을 실행하면, 파일이 변경될 때 자동으로 실행됩니다:

nodemon index.js

요약

실행 환경 실행 방법 주요 특징

브라우저	개발자 도구에서 Console 사용	브라우저에서 바로 JavaScript 실행 가능
VS Code	Node.js와 터미널 사용	다양한 JavaScript 파일 실행 가능
HTML	<script> 태그 사용	웹 페이지와 함께 실행 가능
Node.js	node 명령어 사용	서버 환경에서 실행 가능

JavaScript: 브라우저와 Node.js에서 동작하는 가장 많이 사용하는 언어

nicksoon — Sun, 15 Dec 2024 23:21:09 +0900

많은 개발자들이 사용하는 JavaScript에 대해 이야기해보려고 합니다. JavaScript는 프론트엔드, 백엔드 어디서든 활약하는 다재다능한 언어입니다. 이번 글에서는 JavaScript의 동작 원리와 공부 방법에 대해 정리해보겠습니다.

JavaScript란 무엇인가?

JavaScript는 가볍고, 인터프리터 방식이자 Just-In-Time (JIT) 컴파일이 가능한 프로그래밍 언어입니다. 또한 **일급 함수(First-class functions)**를 지원하며, 객체 지향, 함수형 프로그래밍 등 다양한 스타일을 지원합니다.

사용되는 환경:

브라우저: 웹 페이지의 동적 기능을 담당합니다.
Node.js: 서버 사이드 애플리케이션 및 다양한 비 브라우저 환경에서 사용됩니다.

JavaScript는 프로토타입 기반의 단일 스레드 언어이며, 동적 언어 특성을 갖고 있습니다.

JavaScript 정의: JavaScript is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. It is prototype-based, multi-paradigm, single-threaded, and dynamic, supporting object-oriented, imperative, and declarative styles (e.g., functional programming).

JavaScript 엔진과 동작 원리

JavaScript는 런타임 시 코드를 한 줄씩 번역해서 실행하는 인터프리터 언어입니다.

이는 Java와 같은 컴파일 언어와는 다릅니다.

인터프리터 방식:

JavaScript: 코드가 실행될 때 런타임 시 한 줄씩 번역해서 실행합니다.
- 장점: 유연하고 실시간으로 코드 실행.
- 단점: 컴파일 언어보다 성능이 떨어질 수 있음.
컴파일러 방식 (예: Java): 코드를 컴파일러가 번역해서 실행 파일을 생성한 뒤 실행합니다.
- 장점: 미리 번역되기 때문에 실행 속도가 빠름.

하지만, JavaScript 엔진의 발전으로 성능이 크게 개선되었습니다.

브라우저별 JavaScript 엔진

브라우저마다 JavaScript 엔진이 다릅니다:

Internet Explorer: Chakra
Chrome: V8
Safari: JavaScriptCore
Firefox: SpiderMonkey
Edge: V8
Node.js: V8

표준 규격: ECMAScript

JavaScript는 ECMAScript라는 표준 규격에 따라 동작합니다.

ECMAScript는 버전별로 새로운 기능과 개선 사항이 추가되며, 이에 대한 변경 사항은 ECMAScript 위키에서 확인할 수 있습니다.

JavaScript는 어떻게 공부해야 할까?

1. JavaScript는 프로그래밍 언어이다

개발자는 정해진 문법을 사용하여 특정 로직을 수행하도록 프로그래밍합니다. 따라서 기본적인 문법과 구조를 확실히 다져야 합니다.

2. 외부 환경과의 상호작용

JavaScript는 브라우저와 Node.js 환경에서 동작하며, 각각 외부 API와 라이브러리를 사용할 수 있습니다.

프론트엔드: 웹 개발 시 Web APIs에 대한 이해가 필요합니다.
백엔드 (Node.js): Node.js 환경에서 제공하는 Node.js APIs를 학습해야 합니다.

기초 없이 다음 단계로 넘어가면 큰일 납니다. 특히 초반에 많은 내용을 건너뛰고 심화된 내용을 공부하는 것은 피해야 합니다.

1. 기초 내용

목표: 기본 문법과 사용법을 학습하고 개발자처럼 생각하는 법을 익힙니다.
주요 개념:
- 변수 선언: let, const
- 조건문과 반복문: if, for, switch, while
- 함수와 객체: function, object

2. 심화 내용

목표: 내부 구현과 고급 개념을 학습하여 기술 면접 대비 및 개발 역량을 강화합니다.
주요 개념:
- Prototype: 프로토타입 기반 상속 이해
- Hoisting: 변수와 함수 선언의 실행 흐름
- Scope: 변수의 범위와 유효성
- Closure: 함수와 렉시컬 스코프 활용

네이버 오픈 API 사용 개선 경험 공유

nicksoon — Fri, 6 Dec 2024 12:59:28 +0900

오늘은 네이버 오픈 API를 사용하여 쇼핑 정보를 가져오면서 겪었던 문제와 이를 해결했던 경험을 공유하려고 합니다.

이 과정에서 Too Many Requests 에러를 해결하고 효율적인 데이터 요청 방법을 찾았던 내용을 소개해 드릴게요.

문제 상황: Too Many Requests

저희 서비스에서는 네이버의 쇼핑 정보를 가져와야 했습니다.

특히 한 번에 2000개의 키워드에 대해 쇼핑 정보를 불러와야 하는 상황이었습니다.

네이버 오픈 API를 사용해 많은 데이터를 받아오려고 여러 번 요청을 보냈지만,

그럴 때마다 Too Many Requests라는 응답을 받게 되었습니다.

처음에는 "왜 이런 문제가 발생할까?"라고 고민했습니다.

당시 요청 방식은 1초에 상품 100개씩, 키워드 100개를 요청하는 구조였는데,

네이버 API는 이러한 대량의 요청을 한 번에 처리하기 어려웠던 것입니다.

결국 네이버도 API 트래픽이 많이 발생하면 부담이 되겠죠.

이전 요청 방식

API 키 사용 구조: API 키 하나로 10,000번 요청한 후, 다음 키로 넘어가는 구조였습니다.
요청 데이터 크기: 상품 정보를 100개씩 요청했습니다.
요청 빈도: 1초에 100개 키워드에 대한 요청을 보냈습니다.

이렇게 요청을 보내면 결국 API 서버에 많은 부하가 가게 되어,

Too Many Requests 에러가 발생하게 된 것이죠.

한동안 API를 사용하지 않고 문제를 해결할 방법을 고민했습니다.

해결 방법: 조건 변경 후 최적화

그 후, 요청 방식을 변경해 테스트를 진행했습니다. 변경된 조건은 다음과 같습니다.

API 키 순차 사용: 이전에는 API 키 하나로 10,000번 요청한 후에야 다음 키를 사용했지만,
이제는 API 키를 한 번 사용하면 바로 다음 키로 전환하는 방식으로 변경했습니다.
이를 위해 30개 이상의 API 키를 준비하고 순차적으로 사용했습니다.
요청 데이터 크기 조정: 상품 정보를 100개씩 받는 대신, 10개씩 받도록 조정했습니다.
이렇게 해서 각 요청의 부담을 줄였습니다.
요청 빈도 유지: 1초에 100개 키워드에 대해 요청을 보내는 빈도는 유지했습니다.

이렇게 개선된 방식으로 요청을 보냈고, 이전보다 더 빠르게 데이터를 받을 수 있었습니다. 무엇보다 Too Many Requests 에러 없이 안정적으로 데이터를 수집할 수 있었습니다.

요청 방식

개발 환경의 제약과 해결 방법

저희 개발 환경은 카페24에서 제공하는 서버였기 때문에,

Redis와 같은 고급 캐시 관리 도구를 사용할 수 없었습니다.

그래서 저는 .txt 파일을 활용해 순번을 저장하고, n분의 1 방식으로 동작하도록 구현했습니다.

(참, 저는 n분의 1 방식을 정말 좋아하는 것 같네요 )

이 방식으로 순차적으로 API 키를 관리하며 안정적으로 데이터를 가져올 수 있었고,

네이버 API의 요청 제한을 효율적으로 피할 수 있었습니다.

마무리하며

이번 경험을 통해 대량의 데이터를 API를 통해 가져올 때,

요청 빈도와 데이터 크기를 적절히 조절하는 것이 중요하다는 것을 다시 한 번 느꼈습니다.

네이버 오픈 API를 사용할 때에도 API 요청에 대한 부담을 줄이고,

여러 API 키를 순차적으로 활용하여 안정적인 데이터 수집이 가능했습니다.

여러분도 API 사용 시 Too Many Requests 문제가 발생한다면,

요청 빈도와 데이터 크기를 조정하고,

여러 키를 활용해 요청을 분산하는 방법을 고려해보세요!

읽어주셔서 감사합니다.

웹 페이지 최적화 과정: 크롬 Lighthouse 사용 경험 공유

nicksoon — Thu, 5 Dec 2024 13:24:35 +0900

안녕하세요. 오늘은 크롬 Lighthouse를 사용하여 웹 페이지의 성능을 최적화한 경험을 공유하려고 합니다.

이전에 웹 페이지의 로딩 속도를 3분에서 3초로 단축한 경험을 공유한 적이 있습니다.

하지만 그때에도 "정말? 어떻게? 결과는?"이라는 의문이 남아 있었습니다.

그래서 저는 크롬의 Lighthouse라는 훌륭한 도구를 사용하게 되었습니다.

Lighthouse 사용 방법

Lighthouse는 크롬 개발자 도구에서 사용 가능한 성능 측정 도구입니다.

F12(개발자 도구)를 열고 오른쪽 >> 버튼을 누르면 Lighthouse 탭이 보입니다.

개발자도구 상단

개발자도구 더보기

여기서 모바일 또는 데스크톱 환경을 선택해 페이지 성능을 검사할 수 있습니다.

저희 서비스는 데스크톱에 최적화된 서비스이기 때문에 데스크톱 환경을 선택했습니다.

크롬 Lighthouse

초기 성능 측정 결과

처음 Lighthouse로 측정했을 때, 페이지 로딩 속도는 3.6초였습니다.

시각적으로 로딩 과정을 확인할 수 있었지만, Performance 점수는 100점 만점에 34점으로 매우 낮은 결과가 나왔습니다. 어느 정도 낮을 것이라고 예상은 했지만, 34점은 생각보다 많이 낮아서 어떻게 개선해야 할지 고민이 되었습니다.

Lighthouse 리포트

성능 개선 과정

Lighthouse는 개선해야 할 부분에 대한 설명도 함께 제공해줍니다.

이를 바탕으로 문제를 해결하기 위해 몇 가지 시도를 했습니다.

원인 1: FCP 속도 개선

FCP(First Contentful Paint) 의 속도가 3.6초로 측정되었습니다. 3.6초가 엄청나게 느린 것은 아니었지만, 조금 더 빠르게 개선할 수 있는 방법이 있지 않을까 생각했습니다. 기존 데이터 가져오는 방식을 건별 요청에서 한 번에 묶어 요청하는 방식으로 수정하여 통신 효율을 높였습니다. 이로 인해 FCP 속도가 1.4초 ~ 1.6초로 크게 개선되었습니다.

원인 2: CLS 개선

CLS(Cumulative Layout Shift) 는 사용자가 페이지를 볼 때 레이아웃이 얼마나 갑작스럽게 변하는지를 나타내는 지표입니다.

저희 서비스에서는 데이터를 가져오는 과정이 오래 걸려, 데이터를 미리 보여주지 않고 로딩 화면을 먼저 보여주었습니다.

그러다 보니 데이터를 가져온 후 화면이 깜빡거리며 스크롤이 튀는 문제가 발생했습니다.

당시 CLS 점수는 0.708로 매우 낮았고, 이를 개선하기 위해 몇 가지 조치를 취했습니다.

이미지 크기 고정: 아이콘 이미지에 width와 height 속성을 추가하여 크기를 고정했습니다.
UI 안정화: 메인 레이아웃이 display: none에서 block으로 바뀌는 것을 방지하기 위해, opacity를 0에서 1로 변경하도록 수정했습니다.

이러한 조치를 통해 CLS 점수가 0.03으로 크게 개선되었고, 최종적으로 67점의 성능 점수를 얻을 수 있었습니다.

lighthouse 개선후

향후 계획

이후 업데이트에서는 회원 확인 부분을 PHP에서 JavaScript로 옮겨, FCP를 1초 이내로 줄이는 것을 목표로 하고 있습니다.

이렇게 최적화 과정을 거치면서 웹 페이지 성능을 지속적으로 개선하고 있으며, Lighthouse를 활용한 진단과 개선 작업이 큰 도움이 되었습니다.

tmux 사용

nicksoon — Wed, 4 Dec 2024 09:58:42 +0900

1. tmux란?

tmux는 하나의 터미널 안에서 여러 터미널 세션을 실행하고 관리할 수 있게 해주는 유틸리티입니다.

2. tmux new -s myapp의 의미

tmux: tmux 명령을 실행.
new: 새로운 tmux 세션을 시작.
-s myapp: 세션 이름을 myapp으로 지정.

이 명령을 실행하면 myapp이라는 이름의 새로운 세션이 시작되며, 세션 내부에서 일반적으로 명령어를 실행하거나 프로그램을 실행할 수 있습니다.

4. 유용한 tmux 명령

a. 세션에서 분리 (Detach)

Ctrl + b, d

b. 현재 세션 확인

tmux list-sessions

c. 세션에 다시 접속 (Attach)

tmux attach -t myapp

d. 세션 종료

exit

e. 기존 세션 분리 후 새로운 세션 생성

tmux new -s new_session

Recoil을 사용한 상태 관리 경험: 왜 우리는 Recoil을 선택했을까?

nicksoon — Tue, 3 Dec 2024 11:46:59 +0900

안녕하세요! 오늘은 Recoil을 사용해 리액트 애플리케이션에서 상태 관리를 했던 경험을 공유하려고 합니다. 결합도에 대해 생각해보면, 자료 결합도, 스탬프 결합도, 제어 결합도 등 다양한 결합도들이 있죠. 특히 전역 변수는 외부 결합도로, 뭔가 '좋아 보이지 않는' 그런 느낌이 있어요. 그럼에도 불구하고 리액트에서 상태 관리는 전역 상태가 될 필요는 없지만, Recoil 같은 라이브러리를 사용할 때는 대부분 전역 상태 관리로 하게 됩니다.

그렇다면 왜 수많은 상태 관리 방법 중에서 우리는 Recoil을 선택했을까요?

Recoil 선택의 이유

너무 쉬웠어요: Recoil이 처음 나왔을 때 그 사용 방법이 정말 쉬웠습니다. 설정도 간단했고, 상태 관리도 꽤 편리했죠. 그래서 처음 접한 우리 팀도 "이거 좋다, 사용해보자!"라고 쉽게 결정할 수 있었습니다.
새로운 건 써봐야 제맛: 솔직히 말해서, 새로운 게 나오면 써봐야 하는 그 마음이 가장 컸던 것 같아요. "좋은지 안 좋은지는 나중에 보고, 지금은 일단 써보자!"라는 마음으로 Recoil을 선택하게 되었죠.

그럼 다른 상태 관리 방법보다 정말 좋은 건지, 아니면 그냥 아무 생각 없이 쓴 것인지 궁금하시죠? 각 상태 관리 방식에는 장단점이 있습니다

상태 관리	장점	단점
Local State	간단하고 직관적, 상태 관리가 독립적	Prop Drilling 문제 발생 가능
Context API	전역 상태 관리 가능, 리액트 내장 기능 사용	성능 문제, 여러 컨텍스트가 복잡해질 수 있음
Recoil	쉬운 전역 상태 관리, 간단한 상태 공유	추가 학습 필요, 자료나 생태계 제한적
Redux	명확한 데이터 흐름, 미들웨어를 통한 비동기 처리 가능	많은 보일러플레이트, 코드 복잡도 증가
MobX	자동 반응형 업데이트, 간단한 사용	디버깅 어려움, 생태계 부족
Zustand	가볍고 간단한 설정, 리액트 방식과 유사	기능 제한, 대규모 프로젝트에 비적합

각 방식마다 장단점이 있지만, 쉽고 간단하다는 점이 우리 팀에 가장 큰 매력이었습니다. 무엇보다 빠르게 작업을 해야 하는 상황에서 Recoil은 정말 좋은 선택이었죠. 물론 Local State도 함께 사용하면서 더욱 강력한 상태 관리가 가능했습니다.

Prop Drilling과 Recoil의 등장

그럼 왜 Recoil을 사용하게 되었을까요? 리액트를 사용해 보신 분들이라면 모두 prop으로 값을 전달하는 것을 아실 겁니다. 컴포넌트를 재사용하기 위해서 컴포넌트를 잘게 쪼개고, 그러다 보면 props를 계속 전달하는 것이 필요해지죠. 그리고 그 값이 필요하지 않은 컴포넌트까지도 props를 전달해야 하는 상황이 발생합니다. 이게 바로 유명한 Prop Drilling 문제죠.

한 컴포넌트에서 자식 컴포넌트로, 또 그 아래로, 그 아래로… 이 과정을 반복하다 보면 코드가 끝도 없이 복잡해집니다. 한 번 변경하려고 하면 값을 여기저기서 리턴하고 또 리턴해야 하고, 글로 쓰기만 해도 머리가 아파옵니다. 이런 Prop Drilling 현상은 코드를 유지보수하기 어렵게 만들고, 개발자들에게 큰 스트레스를 주죠.

이때 등장한 것이 바로 Recoil입니다. Recoil을 사용하면 상태를 전역으로 관리할 수 있어 중간 컴포넌트가 불필요하게 값을 전달할 필요가 없고, 사용하지 않는 컴포넌트도 props를 물고 있을 이유가 없습니다. 전역 상태를 통해 필요한 컴포넌트에서만 값을 구독하고 사용하면 되는 거죠.

이렇게 상태를 관리하니 작업의 효율성이 높아졌고, prop의 스트레스에서 해방될 수 있었습니다. 개발자라면 다들 아시겠지만, prop 때문에 발생하는 문제에서 벗어나는 건 정말 큰 해방감이에요. 덕분에 우리는 더 빠르고 깔끔하게 작업할 수 있었습니다.

Recoil 간단 예시

Recoil을 이해하기 위해 간단한 예시를 살펴보겠습니다. 다음은 리액트 애플리케이션에서 Recoil을 사용해 카운터 상태를 관리하는 코드입니다.

import React from 'react';
import { RecoilRoot, atom, useRecoilState } from 'recoil';

// 전역 상태 정의 (atom)
const counterState = atom({
  key: 'counterState', // 각 atom은 고유한 키를 가져야 합니다.
  default: 0, // 초기값
});

function Counter() {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

export default App;

이 예시에서는 counterState라는 **전역 상태(atom)**를 정의하고, 이를 useRecoilState 훅을 통해 사용하고 있습니다. RecoilRoot로 애플리케이션을 감싸 전역 상태가 모든 하위 컴포넌트에서 접근 가능하도록 설정합니다. 카운터 컴포넌트는 counterState를 구독하고, 버튼을 통해 상태를 업데이트할 수 있습니다.

마무리하며

Recoil은 쉽고, 간단하고, 무엇보다 빠른 작업이 필요했던 저희 팀의 요구를 충족시켜 준 도구였습니다. 물론 모든 상황에서 Recoil이 정답은 아닐 수 있지만, 저희 팀이 겪었던 문제를 해결하고 효율적으로 작업을 마칠 수 있도록 도와준 훌륭한 도구였다고 생각합니다.

다른 상태 관리 도구들도 각자의 장점이 있지만, 여러분의 프로젝트 상황에 맞는 도구를 선택하는 것이 중요합니다. 저희처럼 새로운 것에 도전하고 경험해 보는 것도 좋은 방법일 수 있어요.

여러분도 Prop Drilling 문제로 고생하고 계신다면, Recoil 한번 써보시는 건 어떨까요? 감사합니다!

JavaScript에 재미있는 현상

nicksoon — Mon, 2 Dec 2024 14:32:44 +0900

미디엄 블로그를 보다가

Why 1==1 is true but 128==128 is false in Java

이라는 제목의 블로그 글을 보았어요

이유는 간단해요 java 자료형 integer는 -128 부터 127 까지라 안된다고 하네요 그래서 .equals()를 사용하라고 하네요

그럼 JavaScript에는 이런 재미있는 증상이 없을까 해서 기록해 봅니다.

우선 ! JavaScript에서도 흥미로운 동작이 발생하지만, Java처럼 명시적인 캐싱 메커니즘은 없습니다.(아쉽)

그러나 타입 변환, 객체 동작, 그리고 프리미티브와 객체 간의 비교에서 재미있는 현상이 있습니다. 몇 가지 예시를 살펴보죠.

1. 숫자 비교 (== vs ===)

JavaScript는 == 연산자와 === 연산자가 다르게 동작합니다:

==는 느슨한 동등 비교로, 타입 변환을 시도합니다.
===는 엄격한 동등 비교로, 타입 변환 없이 값과 타입을 모두 비교합니다.

console.log(128 == "128");  // true (타입 변환 발생)
console.log(128 === "128"); // false (타입과 값이 다름)

2. NaN과 NaN 비교

JavaScript에서 NaN은 "숫자가 아님(Not a Number)"을 나타내는 특수 값입니다. 놀랍게도 NaN은 자기 자신과도 같지 않다고 평가됩니다.

console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true (ECMAScript 6+에서 도입된 안전한 비교)

3. 객체와 프리미티브 간 비교

객체와 프리미티브를 비교할 때, 객체는 내부적으로 프리미티브 값으로 변환됩니다. 이로 인해 예상치 못한 결과가 나올 수 있습니다.

console.log([] == 0); // true (빈 배열이 숫자 0으로 변환)
console.log([] == ""); // true (빈 배열이 빈 문자열로 변환)
console.log([1, 2] == "1,2"); // true (배열이 문자열로 변환)

4. null과 undefined

null과 undefined는 느슨한 동등 비교 시 같은 값으로 평가되지만, 엄격한 동등 비교에서는 다릅니다.

console.log(null == undefined); // true
console.log(null === undefined); // false

5. 객체 참조 비교

JavaScript에서 객체를 비교할 때는 **참조(reference)**를 비교합니다. 두 객체가 같은 내용이라도 참조가 다르면 false가 나옵니다.

const obj1 = { value: 128 };
const obj2 = { value: 128 };
console.log(obj1 == obj2);  // false (다른 참조)
console.log(obj1 === obj2); // false (다른 참조)

const obj3 = obj1;
console.log(obj1 === obj3); // true (같은 참조)

6. Object.is와의 비교

ECMAScript 6에서는 **Object.is**를 통해 엄격한 동등 비교(===)보다 더 직관적인 비교를 할 수 있습니다. 예를 들어, 0과 -0은 ===로 같지만, Object.is로는 다르게 평가됩니다.

console.log(0 === -0);       // true
console.log(Object.is(0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

JavaScript 를 다룬다면 한번은 본 내용이지만 또 예외처리 할 때 매우 중요하지만 빼먹더라고요

그래서 필기겸 다시 기록해 봅니다

효율적인 배열 비교: Set을 사용해 코드 개선하기 처음에는 조금 복잡하게 코드를 작성했지만, 개선을 통해 훨씬 깔끔하고 효율적인 코드로 만들 수 있었어요. 이 과정을 함께 살펴볼까요?

nicksoon — Thu, 28 Nov 2024 11:38:43 +0900

안녕하세요! 오늘은 두 배열을 비교할 때 효율적으로 코드를 작성하는 방법에 대해 공유하려고 합니다. 처음에는 조금 복잡하게 코드를 작성했지만, 개선을 통해 훨씬 깔끔하고 효율적인 코드로 만들 수 있었어요. 이 과정을 함께 살펴볼까요?

초기 코드
처음 작성한 코드는 두 배열을 비교하면서 키워드의 위치를 확인하는 작업이었는데요, 아래와 같았습니다.

// 데이터를 순회하며 keywords 배열과 비교
data.forEach(item => {
    if (keywords.includes(item.keyword)) {
        // 특정 값의 인덱스 찾기
        const index = keywords.indexOf(item.keyword);
        // 이후 작업
    }
});

이 코드에서는 data 배열을 forEach로 한 번 순회하고, 각 항목마다 keywords 배열에서 값을 찾기 위해 includes와 indexOf를 사용했어요.

즉, data 배열을 순회하는 중에 keywords 배열을 매번 검색하게 되어, 반복 작업이 겹치면서 비효율적으로 보였습니다.

개선된 코드
위의 문제를 해결하기 위해, Set 자료 구조를 활용해 개선해 보았습니다. Set은 검색 속도가 빠르기 때문에 더 효율적으로 작업할 수 있었습니다.

// keywords 배열을 Set으로 변환
const keywordSet = new Set(keywords);

// data 배열을 순회하며 Set을 통해 키워드 존재 여부를 확인
data.forEach((item, index) => {
    if (keywordSet.has(item.keyword)) {
        console.log(`매칭된 항목 (인덱스: ${index}):`, item);
    }
});

개선된 코드 설명

Set 사용: keywords 배열을 Set으로 변환하여 키워드의 존재 여부를 빠르게 확인할 수 있도록 했습니다.
효율적인 검색: keywordSet.has(item.keyword)를 사용하여 키워드의 존재 여부를 확인하므로, includes와 indexOf를 사용하는 것보다 더 효율적입니다.
반복 횟수 감소: 이전 코드에서는 내부에서 여러 번 배열을 검색하는 작업이 있었지만, Set을 사용하면 검색이 더 간단해지고 반복 횟수가 줄어듭니다.

결과

초기 코드:
- data.forEach: 1번 반복
- keywords.includes: 각 데이터마다 검색 (최악의 경우 keywords 전체를 탐색)
- keywords.indexOf: 각 데이터마다 인덱스 검색
개선된 코드:
- data.forEach: 1번 반복
- keywordSet.has: 각 데이터마다 Set에서 키워드 존재 여부를 확인

이렇게 변경한 후 코드는 더 깔끔해졌고, 반복 횟수도 줄어들어 효율성이 개선되었습니다.

마무리
개발을 하다 보면, 처음에는 기능적으로 동작하게 만들지만, 시간이 지나면서 점점 코드의 효율성과 가독성을 개선해야 할 필요를 느끼게 됩니다. 이번 경우에도 Set을 사용해 키워드 검색의 효율을 높일 수 있었습니다. 간단한 코드 변경으로도 성능을 크게 향상시킬 수 있으니, 여러분도 비슷한 상황에 처한다면 이런 방법을 한 번 적용해 보세요!

프론트엔트 지식 GPT질문

nicksoon — Tue, 26 Nov 2024 15:28:42 +0900

안녕하세요! 오늘은 프론트엔드 지식을 채우기 위해 제가 어떤 식으로 공부하고 있는지, 그리고 GPT에게 받은 도움을 바탕으로 어떻게 정리했는지에 대해 이야기해보려고 합니다. 이직 준비와 프론트엔드 지식 확장을 위해 많이 다루어지는 주제를 찾아보았어요. 많은 사람들이 다루는 주제는 그만큼 중요하고, 프론트엔드 개발자라면 알고 있어야 한다고 생각했거든요.

Q: 구글에서 제일 많은 프론트엔드 블로그 주제 top 10 알려줘

이유는 간단해요. 많은 사람들이 다루는 주제는 그만큼 인기가 있고, 프론트엔드 개발자라면 반드시 알아야 하는 내용일 가능성이 높다고 생각했기 때문입니다. 그래서 GPT에게 이렇게 물어봤습니다.

GPT의 답변

프론트엔드 개발자들이 많이 다루는 인기 블로그 주제를 정리해드릴게요. 이 주제들은 트렌디하면서도 기본적이기 때문에 많은 독자들이 관심을 가질 가능성이 큽니다.

1. React의 상태 관리 (State Management)

Redux, MobX, React Context API 등 다양한 상태 관리 도구의 비교와 사용법.
상태 관리의 모범 사례와 프로젝트 적용 팁.
Redux: Redux 공식 문서
MobX: MobX 공식 문서
React Context API: React 공식 문서

2. JavaScript 비동기 처리: async/await, Promise

JavaScript의 비동기 처리 방식인 async/await과 Promise에 대한 심도 있는 설명.
비동기 코드의 실전 사례와 에러 처리 방법.
JavaScript 비동기 처리: MDN 웹 문서
async/await 가이드: JavaScript.info

3. CSS Flexbox와 Grid 시스템 완벽 가이드

Flexbox와 Grid 레이아웃을 이용한 반응형 UI 구현 방법.
둘의 차이점과 실무에서의 활용 사례.
Flexbox 레이아웃: MDN Flexbox
CSS Grid 레이아웃: CSS Tricks Grid 가이드

4. 프론트엔드 성능 최적화

웹페이지 로딩 속도 개선 방법: Lazy Loading, 코드 스플리팅, 이미지 최적화 등.
웹 성능 최적화: Google Web.dev
코드 스플리팅과 Lazy Loading: React 공식 문서

5. 웹 접근성 (Accessibility, a11y) 개선하기

웹 접근성 가이드: W3C WAI
ARIA 사용법: MDN ARIA

6. TypeScript로 JavaScript 프로젝트 개선하기

TypeScript의 장점과 기존 프로젝트로의 마이그레이션 팁.
TypeScript 공식 문서: TypeScript Handbook
TypeScript 마이그레이션: 타입스크립트 베이직 - 타입스크립트 공식 문서

7. 프론트엔드 테스팅: Jest와 Testing Library 사용법

Jest 공식 문서: Jest.io
React Testing Library: Testing Library 문서

8. 반응형 디자인을 위한 CSS와 Media Queries

반응형 디자인 개념: MDN Media Queries
반응형 웹 디자인 소개: Smashing Magazine

9. 웹팩(Webpack) 기초와 최적화

웹팩 공식 문서: Webpack.js
웹팩 최적화 가이드: Google Web.dev

10. 프론트엔드 배포 자동화: CI/CD 파이프라인 설정

GitHub Actions 공식 문서: GitHub Actions
Jenkins 설정: Jenkins 공식 문서

이렇게 GPT의 답변을 받아보니 생각보다 일하면서 사용했던 것도 많고, 알고는 있지만 적용하지 못했던 것들, 그리고 당연한 것 같지만 설명을 못했던 부분까지 잘 정리되어 있었어요.

원문을 보는 이유 저는 블로그가 아닌 원문을 보는 이유가 있어요. 근본적인 내용을 이해해야 확장도 가능하고, 블로그 내용을 보더라도 옳고 그름을 판단할 수 있기 때문이죠. 원문을 보면 저와 비슷한 환경에서 개발한 분들이 어떻게 구현하고 정의했는지 알 수 있어요. 이렇게 해야 문제가 발생하거나 업데이트 후 변경사항이 있을 때도 더 쉽게 대응할 수 있죠.

(물론 다 공식 문서가 아니에요 ㅋㅋㅋ GPT가 404 페이지나 다른 정보를 알려줘서 다 수정을 했어요)

물론 원문은 영어로 되어 있어서 어렵긴 하지만, 구글 번역기와 파파고가 있으니 저는 편하게 읽고 있습니다.

결론 물론 이 모든 내용을 다 공부해야겠죠! 면접 준비를 위해서라도 중요한 내용들이고, 이 글을 읽는 분들에게도 좋은 공부 주제가 되었으면 좋겠습니다. 이렇게 제 필기를 마치겠습니다. 하핫

센트리 사용

nicksoon — Sun, 24 Nov 2024 20:04:24 +0900

안녕하세요! 오늘은 센트리(Sentry)를 사용한 경험을 공유해보려고 합니다. 제가 왜 센트리를 도입하게 되었는지, 그리고 어떻게 사용했는지 이야기해볼게요.

센트리를 사용하게 된 계기 어느 날부터 지속적으로 고객들에게서 서비스가 안 된다는 클레임이 들어왔습니다. 문제는 고객들이 정확한 이유를 알려주지는 않는다는 점이었어요. 제 PC에서는 아무 문제가 없었기 때문에 더 답답했죠. 다행히 친절한 고객님들께서 계정 정보를 알려주셔서, 활동한 시간을 추적하며 원인을 추론하고 문제를 해결하긴 했습니다.

하지만 문제는 반복되었고, 개선이 되지 않아 정말 답답할 때, 사수로 오신 개발자 분께서 센트리(Sentry)를 추천해주셨습니다. 센트리는 실시간으로 에러를 모니터링하고 알림을 주는 아주 강력한 도구입니다. Sentry 홈페이지에서 자세한 내용을 확인할 수 있어요.

https://sentry.io/welcome/ 센트리 홈페이지

센트리 홈페이지

센트리를 설치하는 방법 센트리를 설치하는 방법은 두 가지가 있었습니다.

오픈 소스인 센트리를 서버에 직접 설치하는 방법
센트리 홈페이지에서 회원가입을 하고, 서비스를 대여하는 방식으로 오류를 수집하는 방법

저희는 서버에 도커(Docker)를 사용해 직접 설치하기로 했습니다. 그래도 이 블로그를 보시는 분들 중에는 서버에 도메인까지 연결할 환경이 되지 않는 분들도 있을 수 있으니, 두 번째 방법인 센트리 홈페이지를 통해 사용하는 방법을 나누어 볼게요.

센트리 사용 시작하기

1. GET STARTED 버튼을 통해 회원가입을 진행합니다.

2. 회원가입 페이지 (구글, 깃 AZURE? 로도 가입이 가능하다고 합니다)

회원가입 페이지

3. 회원 가입 후 Create Project 버튼을 클릭하여 프로젝트 생성을 시작합니다.

센트리 워크 페이지

4. 프로젝트 언어를 선택합니다 (저는 JavaScript를 선택했어요).

센트리 언어 선택

5. 알림을 언제 받을지 선택하는 단계가 나옵니다:

센트리 알림 옵션, 프로젝트 이름 바꾸기

우선순위가 높은 에러부터 알람
n분 동안 n번의 에러가 발생하면 알람
나중에 알림 설정

저는 편리하게 1번을 선택했습니다.

이후 센트리를 노션이나 다른 툴과 연결할 수 있지만, 저희는 연결하지 않았습니다.
프로젝트 이름을 정합니다. 기본 프로그램 이름으로 설정되어 있지만, 알기 쉽게 변경하는 것이 좋습니다.

6. 프레임 워크를 선택을 해 줍니다. 프레임워크가 없거나 유명?하지 않으면 없을 수 있어요

프레임 워크 선택

구성하기 생성을 완료하면 바로 각 언어에 맞는 구성 방법을 안내받을 수 있습니다. 각 언어마다 설명이 잘 되어 있어서 그대로 따라 하면 쉽게 설정할 수 있어요. 솔직히 말해서, 보고 하나씩 해보면 진짜 쉽습니다. 너무 쉽게 느껴질 수도 있지만, 사실입니다. 정말로요!

센트리 설명 페이지

센트리 사용 후 느낀 점 센트리를 설정하고 나서 처음 2주 동안 알림이 정말 많이 왔습니다. 이렇게 오류를 모니터링하면서, 어떤 오류가 발생했는지 바로 확인하고 중요도에 따라 빠르게 수정할 수 있었습니다. 심지어 센트리는 어떤 오류가 발생했는지 영상을 통해 보여주기도 해서, 문제 해결에 큰 도움이 되었어요.

결과적으로, 서비스에서 발생하는 이슈가 거의 사라졌고, 만약 발생하더라도 빠르게 대응할 수 있게 되어 매우 편리했습니다. 덕분에 고객들의 클레임도 줄어들고, 서비스 안정성도 크게 향상되었죠.

다음 포스트에서는 또 다른 개발 경험을 나눠보겠습니다. 기대해주세요!