블로그의 모든 것
109 게시글
스프린트 미션 - 3
## 스프린트 미션 오늘은 스프린트 미션 3을 진행했다. 블로그에는 따로 적지 않았지만, 미션 1과 미션 2는 스타일 라이브러리 없이 순수 HTML과 CSS로 레이아웃과 디자인을 구현하는 과제였다. 이번 미션은 그 페이지에 `media query`를 적용해 **반응형 디자인**을 만드는 것이었다. 이번에는 내 작업 속도를 확인해 보고 싶어서 목표 시간을2025.09.24# etc# 스프린트 부트캠프JavaScript를 이용한 DOM에 접근하기
오늘은 부트캠프에서 **JavaScript를 이용한 DOM에 접근하는 방법**에 대해 배웠다. 평소엔 React로만 개발을 해왔기 때문에 바닐라 JavaScript를 이용해서 직접 DOM을 다루는 경험은 거의 없었는데, 이번 기회에 정리해두면 좋을 것 같아서 블로그에 기록해본다. ## 1. 자바스크립트로 태그 선택하기 DOM(Document Object2025.09.23# javaScript스프린트 부트캠프 3 주차 후기
이번 주는 **자바스크립트 기초**를 다뤘다. 변수, `return`문, 반복문, 조건문 등 기본적인 내용을 중심으로 다시 정리하는 느낌이었다. ## 스프린트 미션 2, 코드 리뷰 지난 미션에서 개발 습관과 컨벤션 관련 피드백을 받았기 때문에 이번에는 커밋 전에 검수를 꼼꼼히 했다. 다행히 같은 지적은 받지 않았다. 대신 중복 스타일 관리에 대해 질문했2025.09.20# etc# 스프린트 부트캠프Git 병합 방식 정리
부트캠프에서는 매주 토요일마다 주어진 주제를 정리해 **위클리 페이퍼**를 작성하고, 팀원들과 함께 의견을 나누는 시간을 갖는다. 이번 주 주제는 **Git에서 branch merge 방법들과 각 방법의 특징**이었다. 그래서 Git의 대표적인 병합 방식 세 가지를 정리해 보았다. ## Fast-forward Merge * **개념**: 브랜치에 다른2025.09.19# gitTDZ(Temporal Dead Zone) 정리
오늘은 자바스크립트에서 자주 헷갈릴 수 있는 개념인 **TDZ(Temporal Dead Zone)**에 대해 정리해 보았다. ## TDZ란 무엇인가 TDZ는 직역하면 "임시 사각지대"인데, **`let`과 `const`로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간**을 말한다. 즉, 변수가 스코프 안에 존재하긴 하지만 아직 사용할 수 없는2025.09.18# javaScript프롬프트 엔지니어링 정리
오늘 프롬프트 엔지니어링 강의를 수강하고 핵심만 정리했다. ## 1) 구체적으로 묻기 - 목표, 산출물, 제약을 명확히 쓴다. - **요청하지 않은 내용은 답하지 말 것**을 조건으로 건다. > 예) “아래 요구사항만 충족해 답변하고, 불필요한 배경 설명은 하지 마세요.” > ## 2) 맥락 제공하기 - 단순 “방법 알려줘”2025.09.17# etc디자인 강의 정리
스프린트 부트캠프를 시작하면 부트캠프 강의뿐만 아니라 코드잇에서 제공하는 모든 강의를 들을 수 있다. 그래서 평소 1인 개발을 하면서 궁금했던 **디자인 강의**를 들어 보았고, 그 내용을 정리해 보았다. ## 디자인의 기본 원칙 1. **일관성 지키기** 2. **중요도에 따라 구분하기** 3. **기능에 따라 영역 나누기** ## 레이아웃 레이2025.09.16# etc스프린트 부트캠프 2 주차 후기
2주차의 핵심은 **스프린트 미션 진행**과 **유닉스 커맨드, Git 학습**이었다. ## 유닉스 커맨드와 Git 학습 2주차에는 실용적인 유닉스 커맨드와 Git을 배웠다. 개인적으로 1주차보다 더 의미 있는 시간이었다. 그동안 Git을 사용해 왔지만, 사실상 `pull`, `push`, `merge` 정도만 알고 있었기 때문이다. 유닉스 커맨드2025.09.13# etc# 스프린트 부트캠프Git Reset 정리 soft, mixed, hard
Git을 공부하다 보면 커밋을 취소하거나 되돌려야 하는 상황이 자주 생긴다. 이때 자주 쓰이는 명령어가 `git reset`이다. 그런데 reset은 옵션에 따라 동작이 달라지기 때문에 헷갈리기 쉽다. 그래서 이번에 한 번 정리해 보았다. ## soft 옵션 - **동작**: 커밋만 취소하고 변경 사항은 그대로 유지된다. - **Staging Area2025.09.12# gitMerge와 Rebase는 언제 사용할까?
Merge와 Rebase는 언제 사용할까? Git을 공부하다 보면 merge와 rebase라는 두 가지 방식이 자주 등장한다. 둘 다 브랜치의 변경 사항을 반영하기 위한 명령어지만, 사용하는 상황과 결과가 조금 다르다. Merge를 사용할 때 보통 협업 프로젝트에서는 merge가 많이 사용된다. 이유는 단순하다. 브랜치 간의 변경 내역을 그대로 기록하2025.09.11# git포크와 브랜치의 차이
## 포크와 브랜치의 차이 과제를 제출할 때 보통 원본 레포지토리를 포크해 오고, 그 포크한 저장소에서 브랜치를 따서 작업한 뒤 마무리되면 원본 레포지토리에 PR을 보낸다. 그런데 문득 "실제 서비스용 메인 브랜치만 두고 필요할 때마다 브랜치를 따서 작업 후 합치면 안 되는 걸까?"라는 의문이 들어 포크와 브랜치의 차이를 정리해 보았다. ## 브랜치(2025.09.10# gitFlexbox 정리 `align-items` vs `align-content`
오늘 팀 미팅 시간에 align-items와 align-content의 차이에 대한 이야기가 나와서, 헷갈리지 않도록 따로 정리해 보았다. ## align-items - 대상: 한 줄(line) 안의 아이템들 - 역할: 교차축(cross-axis, 보통 세로 방향)에서 아이템을 어떻게 정렬할지 결정 - 특징: 줄의 개수와 상관없이 아이템 개별 위치를2025.09.09# css<meta name="viewport"> 정리
이번에는 반응형 웹에서 꼭 필요한 `<meta name="viewport">` 태그를 정리해 보았다. 모바일 브라우저들은 예전 데스크톱 전용 웹사이트를 정상적으로 보여주기 위해 기본 뷰포트 너비를 약 980px로 가정한다. 그래서 `<meta name="viewport">`가 없으면, 모바일 화면에서도 문서 전체가 축소된 상태로 표시되고 사용자가 직접2025.09.08# html스프린트 부트캠프 1 주차 후기
## 시작하기에 앞서 면접에서 계속 떨어지고 기술 면접을 볼수록 내가 CS 지식과 기본기가 부족하다는 걸 많이 느꼈다. 그래서 기본기를 다지고 다양한 협업 기회를 얻기 위해 스트린트 부트캠프에 합류했다. 우선 후기를 작성하기 이전에 부트캠프에서 내가 가져가야 하는 부분과 마음가짐에 대해서 스스로 질문해 보는 시간을 가져보았다 **Q1. 이 부트캠프를2025.09.06# etc# 스프린트 부트캠프메타 태그 간단 정리
HTML을 공부하면서 **메타 태그(meta tag)**에 대해 다시 한번 정리해 보았다. 메타 태그는 쉽게 말해 HTML 문서의 **메타데이터(문서에 대한 정보)**를 담는 태그다. 보통 <head> 안에 작성되며 직접 화면에 표시되지는 않는다. 하지만 브라우저, 검색엔진, SNS가 페이지를 이해하는 데 중요한 역할을 한다. 대표적으로 자주 쓰이는 메2025.09.05# htmlCSS 사이즈 단위 정리
이번에는 CSS에서 자주 사용되는 **사이즈 단위**를 정리해 보았다. 개발하면서 px, %, em, rem 같은 단위들을 계속 접하지만 정확히 어떤 기준으로 크기가 정해지는지 헷갈릴 때가 많았다. 이번 기회에 확실히 짚고 넘어가려고 한다. ## px `px`은 **픽셀 단위**로, 화면 크기와 상관없이 고정된 절대적인 크기를 가진다. 그래서 브라우저2025.09.04# cssNext.js app router 마이그레이션 전환하기
저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다. App Router는 React 18을 지원하기 위해 도입된 방식으로 React 18에서 제공하는 서버 컴포넌트, 클라이언트 컴포넌트, Suspense 같은 여러 기능들을 사용할 수 있습2025.02.19# next메이플 헬퍼 기능 기획
오늘은 메이플 헬퍼에 추가하려는 기능들을 기록하면서 다시 한 번 정리하는 시간을 가져보려 합니다. 기존 메이플 유틸리티 서비스들은 **정보 제공**에만 집중해 실제 유저들이 일상 속에서 겪는 사소한 불편함을 해소해 주는 서비스는 찾아보기 힘듭니다. 저는 메이플 헬퍼를 이런 부분을 파고들어 유저들이 생각하지 못했던 서비스들을 제공하려 합니다. 그래서2025.02.08# etc# 메이플 헬퍼Element previously highlighted
이번에 블로그를 Next.js로 마이그레이션 하면서 코드 하이라이팅에 문제가 생겼습니다. ## 문제 해결 코드 하이라이팅이 중복으로 적용돼 에러 메세지가 출력됬고 코드가 변경될 때 마다 이전의 하이라이팅을 제거하고 다시 하이라이팅을 적용해주어야 합니다. 하지만 저는 `react-highlight`를 이용해 간단하게 해결 했습니다. `react-high2025.02.01# frontEndNext.js Form 구성 요소
이번에 블로그를 Next.js로 마이그레이션 하면서 `Form`를 유용하게 사용해 사용방법을 공유하려 합니다. ## Next.js에서의 Form 사용법 HTML에서 `<form>` 태그를 사용해 텍스트, 체크박스, 라디오 박스와 같은 요소들을 구조화해 사용할 수 있는 문법 입니다. Next.js에서는 `Form`이 화면에 보이면 해당 경로를 미리 불러와2025.01.25# next2025년 블로그 리펙토링 회고록
## 목표 이번에 리펙토링을 계획하게 된 이유들 입니다. 1. 게시글을 `tsx`파일로 관리하고 있어 관리가 힘들고 글을 작성할 때 접근성이 떨어짐 2. 블로그 SEO 개선 필요 이런 문제를 해결하기 위해 어떤 방법을 사용하면 좋을까 생각하다 Next.js의 app라우터를 이용해 관리하기 쉬운 폴더구조를 만들고 서버사이드 렌더링을 이용해 SEO를 개선2025.01.18# etc2025년 추가된 HTML, CSS 기능
2025년이 되어 HTML과 CSS에 새로운 기능들을 소개하며 활용할 방법들을 고민하도록 하겠습니다. 직접 정보를 보고싶은 분은 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 확인할 수 있습니다. ## 1. CSS Layers (@2025.01.12# frontEndtsx파일을 리드미파일로 바꾸기
오늘은 개발 블로그를 리뉴얼 하는 과정에서 tsx파일을 리드미파일로 변환했던 작업이 있어 이 경험을 공유하려고 합니다. 우선 저의 개발 블로그는 react기반의 프로젝트로 tsx 파일을 생성해 블로그 글을 작성하고 있었습니다. 하지만 이 방법은 접근성이 너무 떨어지고 유지보수가 너무 힘들다는 단점이 있어 불편함을 많이 느꼈고 이번 기회에 next로2025.01.04# frontEnd메이플 헬퍼 SEO 개선하기
서비스를 배포한 이후 검색 결과 상단에 노출되지 않았지만 SEO를 개선해 노출도를 향상시켰던 내용을 기록하려 합니다. ## SEO 개선 3가지 방법 ### 메타태그 최적화 적절한 메타태그 사용은 검색 엔진과 사용자에게 페이지의 핵심 정보를 전달할 수 있는 중요한 포인트 입니다. 저의 경우는 `HeadMeta`컴포넌트를 만들어 활용했습니다. ```js2024.12.27# frontEnd# 메이플 헬퍼Tailwind CSS 반응형 레이아웃 만들기
이전에 메이플 헬퍼 서비스에 Tailwind CSS를 이용해 반응형 레이아웃을 적용한 과정을 공유하려 합니다. ## Tailwind CSS의 반응형 레이아웃 유틸리티를 사용해 CSS의 media query처럼 반응형 작업이 가능합니다. 와 Array.prototype.sort()를 활용했던 경험을 바탕으로 이 메서드들의 작동 원리를 깊이 이해하기 위해 직접 구현해보았습니다. ## reduce() 직접 구현하기 `reduce()` 함수의 특징으로는 다음이 있습니다. - 초기값이2024.11.09# javaScript자바스크립트는 싱글 스레드인데 비동기 처리가 가능한 이유
문뜩 자바스크립트는 싱글 스레드 언어인데 웹 및 node.js 환경에서 비동기로 동작할 수 있을까? 사실 비동기로 동작할 수 있는 이유는 웹 및 node.js 환경은 싱글 스레드가 아니기 때문에 가능하다는 걸 알지만 어떤 원리로 동작하는지는 모르기에 한번 찾아보았습니다. ## 자바스크립트의 동작 방식 자바스크립트의 동작 구조의 핵심 요소는 `Call2024.10.26# javaScript인터페이스와 인터셉터를 이용한 공통된 에러, 헤더 URL 처리
메이플스토리 API를 활용한 웹 서비스 개발 중 API 키 노출 방지와 중복 코드 최소화를 위해 Next.js API 라우트와 Axios 인터셉터를 결합한 경험을 공유합니다. 특히 TypeScript의 Generic을 활용해 타입 안정성을 강화한 과정을 중점적으로 설명드리겠습니다. ## 문제 상황 클라이언트에서 바로 Nexon API를 호출하게 되면2024.10.19# frontEnd메이플 헬퍼 기획 - 2
## 기술 스택 및 아키텍처 설계 ### 기술 스택 - **Next.js**: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 프레임워크. - **React**: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리. - **TypeScript**: JavaScript에 타입 안정성을 추가해 개발 생산성 향상. -2024.10.12# etc# 메이플 헬퍼비동기 작업 동시 요청
오늘은 비동기 작업을 테스트하다 생긴 경험에 대해 적어보려고 합니다. ## 주요 내용 - 데이터 요청시 모든 데이터를 받아옵니다. - 받은 데이터 중 필요한 데이터만 필터링합니다. - 필터링된 데이터의 세부 정보에 대한 요청을 한번에 보내고 모든 요청이 완료된 후 한번에 응답을 받습니다. 이 내용이 제가 초기에 생각한 동작입니다. 하지만 제가 구현한 기2024.10.05# frontEnd메이플 헬퍼 기획 - 1
저는 평소에 메이플스토리 라는 게임을 즐겨하는데 이 게임은 유저들이 만든 Nexon Open API 기반의 유틸리티 서비스들이 있습니다. ## 메이플 헬퍼, 왜 기획하게 되었나? 메이플스토리는 RPG 게임으로 주간마다 잡을 수 있는 보스가 있습니다. 이 보스를 잡고 얻은 전리품으로 캐릭터를 더욱 강하게 만들 수 있는데요 기존에 있는 서비스는 캐릭터를2024.09.28# etc# 메이플 헬퍼피그마 사용법
그동안 팀 프로젝트를 진행하며 디자인 협업 툴로 피그마를 많이 사용했습니다. 피그마를 사용하면서 느낀 점은 정말 편리하고 다루기 쉽다는 생각이 많이 들었고 앞으로 개발을 하며 이런 디자인 툴 하나 정도는 다룰 줄 아는 게 큰 도움이 될 거 같다는 생각이 들어 피그마의 간단한 단축키와 사용 방법을 정리해 보았습니다. ## 단축키 피그마를 사용하며 주2024.09.14# figma# etcrequire와 import의 차이점
라이브쳇 개발을 하며 백엔드 서비스에는 require를 프론트 서비스에는 import를 사용했는데 문뜩 어떤 차이가 있는지 궁금해져서 정리해보려 합니다. ## require와 import `require`와 `import`는 자바스크립트에서 모듈을 불러오는 문법으로 `require`는 CommonJS에서 사용하는 모듈 시스템 `import`는2024.09.07# javaScript클로저란 무엇인가?
오늘은 you don`t know javascript를 읽고 클로저라는 개념에 대해 정리해 보도록 하겠습니다. ## 클로저란? 클로저는 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경을 같이 기억하는 기능을 말합니다. 간단하게 말해서 함수 내부에서 함수 외부에 있는 변수에 접근할 수 있는 상황을 의미하며 외부 함수가 실행을 마쳤음에도 내부 함수2024.08.31# javaScript타입스크립트 정리 - 2
저번주에 타입스크립트의 기본 문법과 속성에 대해 정리했는데 오늘은 타입스크립트에서 제공하는 유틸들에 대해 정리해보도록 하겠습니다. ## 유틸리티 타입 ### `Partial<T>` `Partial<T>`는 객체의 타입을 `?` 옵셔널 프로퍼티로 만들어줍니다. ```typescript interface Person { name: string;2024.08.24# typeScript타입스크립트 정리
타입스크립트를 사용한 지 1년 정도가 되었는데 그동안 작성했던 타입스크립트 정리 글에 잘못된 부분들이 많아 이 게시글을 작성하며 다시 정리해 보려고 합니다. ## `TypeScript` 란? 타입스크립트는 자바스크립트를 기반으로 한 정적 타입 언어입니다. 컴파일 시점에서 타입 오류를 확인할 수 있고 타입을 명시해 유지보수하기 쉽고 미리 오류를 잡을 수2024.08.17# typeScriptTailwind CSS 사용법
 이번에 next.js로 프로젝트를 구성하면서 Tailwind CSS를 사용하기로 해서 자세하게 알고 넘어가보려 합니다. ## Tailwind CSS Tailwind CSS는 유틸리티-퍼스트(Utility-first) 접근 방식을 기반으로2024.08.10# frontEndnext.js의 데이터 패칭
next.js에서 데이터를 가져올 때 사용되는 함수들이 있습니다. `getStaticProps()` `getStaticPaths()` `getServerSideProps()` 전부 데이터를 가져올 때 사용되는 함수지만 차이점이 있어서 이에 대한 정보를 정리해보려 합니다. ## getStaticProps() `getStaticProps()`는 빌드 시점에서2024.08.03# nextnext.js의 Hydration
Next.js 공식문서를 읽어보던 중 중요한 개념이 보여 정리하고 넘어가려고 합니다. 우선 Hydration을 알기 전에 React와 Next의 기본 동작 방식에 대해 알아야 합니다. React는 브라우저에서 요청이 들어오면 빈 HTML 파일과 JS 파일로 번들링된 React 파일을 넘겨줍니다. 그 이후 브라우저가 JS파일을 읽어 화면을 그려나가기2024.07.27# next브라우저 렌더링 과정
저번주에는 웹의 동작방식에 대해 알아보았으니 오늘은 브라우저 렌더링 과정에 대해 알아보려 합니다. ## 브라우저 렌더링 순서 서버로 부터 파일을 받아오면 다음과 같은 과정을 거칩니다. **1. HTML 파싱** - 브라우저는 HTML 파일을 읽고 DOM 트리를 생성합니다. >script 태그를 만나면 코드 실행을 위해 DOM 생성을 중단합니다. >2024.07.20# cs웹의 동작 방식
오늘은 어렴풋이 알고 있었던 웹의 동작 방식에 대해 올바르게 알고 넘어가기 위해 글을 작성합니다. 요즘 개발을 하고 서버에 배포를 하다보면 동작 원리에 대해 궁금증이 많아지고 있습니다. ## WEB의 동작 원리 1. 우선 사용자가 웹 브라우저에 URL을 입력하거나 링크를 클릭을 합니다. 2. 브라우저는 DNS 서버를 통해 해당 URL을 IP 주소로 변환2024.07.13# cs서버리스 개념
요즘 AWS에 배포한 서비스들의 서버 비용이 너무 많이 청구되어 비용문제를 해결하기 위해 알아보던 중 서버리스에 대해 알게 되었고 이를 정리하기 위해 글을 작성합니다. ## 서버리스 아키텍쳐 란? 서버리스는 진짜로 서버가 없다는 의미가 아니라 서버를 직접 관리하지 않아도 코드를 실행할 수 있는 환경 입니다. >코드를 실행할 저장공간은 있어야합니다.2024.07.06# server2024 HTML 변경사항
이미 6월 말이 되어버렸지만 문뜩 2024년 HTML과 CSS 변경사항이 궁금해져 글을 작성해 보려 합니다. ## 2024년 HTML 변경 사항 ### `user-valid` 및 `user-invalid` 가상 클래스 새로운 `:user-valid`와 `:user-invalid`를 이용해 사용자가 입력한 값에 따라 스타일링이 가능해졌습니다. ```2024.06.29# html마크다운 문법을 알아보자
최근 디스코드 봇에 대해 가시성을 개선해달라는 문의가 들어와 개선한 내용에 대한 글을 써보려 합니다. 디스코드 봇은 마크다운 문법을 지원해 이를 이용해서 스타일링이 가능합니다. 그래서 오늘은 마크다운 문법에 대해 적어보겠습니다. ## 문법 ### 헤더 (Headers) h1, h2, h3, h4, h5, h6 태그를 # 기호를 사용하여 헤더의2024.06.15# etc자바스크립트의 값과 레퍼런스
오늘은 you don`t Know JavaScript 책을 읽고 그 내용에 관해 글을 써보겠습니다. 자바스크립트에는 원시 자료형(값)과 참조 자료형(레퍼런스)이 존재합니다. 원시 자료형은 불변 하고 값 자체가 변수에 할당된다는 특징이 있고 참조 자료형은 변경 가능하고 변수에 저장된 메모리 주소가 할당된다는 특징이 있습니다. ### 값 (Value)2024.06.08# javaScriptHTTP 응답 코드 종류
라이브 쳇 개발을 하며 HTTP 응답과 HTTP 응답 코드에 대해 궁금해져 이 글을 작성합니다. HTTP 응답 코드는 HTTP 요청이 성공적으로 완료되었는지 알려주는 코드입니다. 이 응답은 5그룹으로 나누어져있고 숫자로 그 상태를 나타냅니다. ## HTTP 응답 코드의 종류 1xx: Informational (정보 응답) - 클라이언트의 요2024.06.01# cs데이터 시각화 차트 라이브러리 사용하기
라이브 채팅을 배포한 후 이를 관리하기 위한 백오피스를 만들고 있는중 운영중인 다양한 서비스의 시각화 데이터를 얻고 싶어 차트 라이브러리에 대해 알아보았습니다. 대표적인 차트 라이브러리로는 Chart.js, D3.js, Recharts등이 있지만 전 React와 호환성이 좋은 Recharts라이브러리를 사용하기로 했습니다. ## Recharts Rec2024.05.25# froentEndEC2 인스턴스 서버 환경 구성하기 - 2
이전 포스트에서 서버에 배포하고 실행까지 했지만 이번엔 도메인 연결과 HTTPS인증까지 다루려고 합니다. ## 탄력적 IP 주소 할당 EC2 인스턴트는 기본적으로 동적 IP를 할당받기 때문에 인스턴스를 재부팅하거나 종료할 경우 IP가 변경됩니다. HTTP 인증과 같은 작업에는 고정된 IP주소가 필요하기 때문에 탄력적 IP주소를 할당해 줍니다.  [https://web.dev/articles/optimize-2024.03.06# frontEnd프론트엔드 성능 측정
## 웹 성능이란 웹 성능은 페이지의 로딩 시간, 렌더링 속도, 사용자 경험등을 나타내는 말이다. 따라서 웹 성능 측정은 아주 중요한 과정이며 오늘은 웹 성능 측정 도구중 하나인 Lighthouse에 대해서 기록하도록 하겠다. ## [https://developer.chrome.com/docs/lighthouse/performance/perf2024.03.05# frontEnd백준 25206번 알고리즘 [node.js]
## 문제 [https://www.acmicpc.net/problem/25206](https://www.acmicpc.net/problem/25206) 인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을2024.02.27# 알고리즘discord.js로 봇을 만들어보자 - 5
## CSR 웹 사이트 크롤링 서버에서 페이지가 완성된 후 전달되는 SSR과는 다르게 클라이언트 측에서 렌더링 되는 CSR은 axios를 통해 크롤링 할 수 없다 하지만 Selenuim를 이용하면 브라우저를 생성해 렌더링이 된 후 내용을 얻을 수 있어 CSR에서도 이용할 수 있다 Selenuim은 다양한 브라우저로 사이트를 동작하고 테스트하기 위해 만들2024.02.19# etc# 디스코드 봇 만들기discord.js로 봇을 만들어보자 - 4
얼마전에 메이플 공식 api가 업데이트 됐다고 해서 디스코드 봇을 업데이트하기로 했다. 그래서 메이플 공식 api사용법과 이번에 추가한 내용을 블로그에 담으려 한다. ## [https://openapi.nexon.com/](https://openapi.nexon.com/)  2. EC2 인스턴스 이름2023.10.25# etc# 디스코드 봇 만들기discord.js로 봇을 만들어보자 - 2
## 봇 개발  여기에는 문제점이 있었는데 크롤링을 인기도 랭킹에서 하다보니 인기도가 0인 캐릭터들은 검색이 되지 않는 문제가 있었다. 이 문제를 해결하기 위해선 종합랭킹 에서 크롤링을 해와야하는데 여기는 일반월드와 리부트월드가 나눠져 있어서 조건문을 통해 일반월드 검2023.10.05# etc# 디스코드 봇 만들기프론트엔드 기술면접 정리 - 2
## Http (Hypertext Transfer Protocol) 웹 프로토콜 중에 하나. 인터넷으로 데이터를 주고받을 수 있는 통긴규약. Request와 Reponse로 이뤄져 있음. Http - 암호화 X - 빠름 Https - 보안, 암호화 O - 설치 및 인증서 유지에 대한 비용이 듦 - 중간에 정보를 탈취해도 볼 수 없도록 암호화를 지원한다2023.09.27# cs프론트엔드 기술면접 정리 - 1
앞으로의 기술면접을 대비해 그동안 공부했던걸 한번 정리해보려 한다. ## Web 1. 주소창에 입력된 주소를 통해 서버를 찾아간다. 2. 이후 DNS가 연결해줄 곳을 찾는다 3. 서버에서 HTML 파일을 클라이언트로 보내준다 4. HTML문서는 파싱되어 DOM을 생성한다.(객체 형식) 5. 중간에 CSS를 로드하는 link혹은 style 태그를 만나면2023.09.21# csdiscord.js로 봇을 만들어보자
## 프로젝트 소개 메이플스토리라는 게임을 하다가 디스코드로 내 캐릭터에 대한 정보를 볼 수 있으면 편하겠다는 생각이 들었고, 친구와 이야기 하다 너무 재미있을 것 같아 당장 만들어보았다. discord.js가 너무 잘 만들어져 있어 생각보다 간단하게 만들 수 있었다. ## 프로젝트 axios를 이용해 HTTP 요청으로 웹에 대한 정보를 가져와 ch2023.09.08# etc# 디스코드 봇 만들기침플레닛 회고록
## 팀프로젝트 회고록 최근 침플래닛 이라는 팀프로젝트가 성공적으로 마무리 되어 처음으로 회고록을 작성해 보려 한다. 이번 프로젝트를 진행하면서 개인적으로 많은 성장을 이뤄냈다고 생각해 정리해보도록 하겠다. ## 프로젝트 진행과정 내가 프로젝트에 합류 했던 당시 이미 모든 팀원이 구해져 있던 상황이였다 기획 : 1명 백엔드 : 3명 프론트 : 2명2023.08.25# etcTypeScript 환경에서 createContext 사용하기
최근 타입스크립트 환경에서 creactContext를 사용하다 아래와 같은 에러가 발생해 createContext 사용방법과 해결방법을 정리해보려 한다. ```javascript //ERR "Type Object must have a '[Symbol.iterator]()' method that returns an iterator." ``` #2023.08.16# typeScript타입스크립트 타입 추론
## 타입추론 타입스크립트에서는 명시적인 타입 표시가 없을때 타입에 대한 정보를 제공한다. ```javascript // 일반적인 유형 let x = 3; // x는 number로 추론된다. // 구조분해 코드 let arr = [0, 1, null]; let [a, b, c] = arr; // a, b, c는 number |2023.08.15# typeScript코드 포멧팅 prettier
## 코드 포멧터 Prettier 여러 사람들과 개발을 하게되면 각자 개발 습관에 따라 세미콜론(;), 줄간격, 행 등이 각각이 달라 코드가 뒤죽박죽이 되는 상황이 생기게 됩니다. 이때 Prettier를 사용하게 되면 정해진 규칙에 따라 모맷팅 해주기 때문에 수고 없이 코드를 짜기만 하면 됩니다. ## 사용방법 ```javascript yar2023.07.27# frontEndreact에서 addEventListener와 state
## 문제점 최근 개발을 하다 window.addEventListener로 호출한 함수 내에서 state값이 초기 값 그대로 읽히는 경우가 있었다. 아래와 같이 코드를 작성 했을 떄 state값은 계속 변경 되지만 console.log()로 state값을 읽을땐 초기값만 출력이 된다. ```javascript import { useState, u2023.07.18# reactnpm ERR! Cannot read properties of null (reading 'edgesOut')
최근 배포를 하던 와중에 npm ERR! Cannot properties of null (reading) 이런 에러가 발생했다. ## 문제는? 최신버젼의 styled-components에서 npm i styled-components를 수행하는 동안 생기는 문제였다. ## 해결방법 V5 사용, npm install styled-components@2023.07.13# frontEnd타입스크립트 제너릭
## 제너릭이란? 제너릭이란 타입을 파라미터처럼 사용 할 수 있는걸 의미한다. 제너릭의 장점으로는 다양한 타입에 대한 재사용성이 올라간다는 점이 있다. ```javascript const returnFunction = (arg: number): number => { return arg; }; ``` 위의 코드를 보면 받은 파라미터를2023.07.11# typeScript타입스크립트 커스텀 타입
## 커스텀 타입이란? 타입스크립트에는 커스텀 타입이라는게 있다. 커스텀 타입은 말 그대로 타입을 커스텀 하여 만들 수 있다는 말인데 기존 타입에 새로운 이름을 지정해준다거나 새로운 타입을 선언해주는 것 이 가능하다. ```javascript type Name = string; type Age = number; type Preson =2023.05.20# typeScript타입스크립트 인터페이스
타입스크립트에서는 인터페이스를 활용해 변수의 타입으로 사용할 수 있다. 인터페이스는 클래스와 비슷한데 클래스와는 다르게 정의만 할 뿐 구현이 되지 않는다는 차이점이 있다. 타입스크립트에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해 정의할 수 있다. - 객체의 스펙(속성과 속성의 타입) - 함수의2023.05.13# typeScript타입스크립트 타입 종류
타입스크립트에 대한 수요가 늘어나 타입스크립트를 공부하면서 정리해보려 한다. 타입스크립트는 타입을 지정해 줌으로써 기존 자바스크립트에서 발생하는 에러를 미리 예방 할 수 있다는 장점이 있다. ## 타입스크립트 기본타입 - Boolean - Number - String - Array - Tuple - Enum - any - void - Object -2023.05.09# typeScriptreferrer 외부 링크 금지 이미지
팀프로젝트를 진행하던 도중 외부에서 불러온 이미지가 로드되지 않고 404를 반환하는 이슈가 있었다. 404를 반환한 이유를 알아보니 네이버에서 이미지를 가져올 때 보안에 관련된 이유로 404를 반환하는 것 이였다. 반환 하는 이유는 Referer 체크로 외부 링크를 금지하여 404를 반환 하는 것이다. 이를 해결 할 수 있는 방법으로는 이미지에 (refer2023.05.06# html무한 스크롤 구현하기 (Intersection observer API)
팀프로젝트를 진행하면서 무한스크롤을 이용해서 게시글들을 보여주기로 했다. 페이지네이션이 아닌 무한 스크롤을 선택한 이유는 모바일 환경 지원이 이유이기도 하다. 무한 스크롤을 만들어 본 적이 없어 어떻게 만들어야 하나 찾아보던 중 세 가지 방법으로 만들 수 있다고 했다. 첫번째는 스크롤 이벤트 헨들러를 이용한 방법이고 두번째는 Debounce 와 Thrott2023.05.01# frontEndyaml파일 문법
## yaml이란? yaml은 YAML ain’t markup language의 약어로 마크업 언어가 아닌 데이터에 특화됨 을 보여주는 말이다. json 파일의 상위 버젼이라고 생각할 수 도 있다. 주석을 달 수 없고 json의 중괄호와 대괄호 남발로 코드길이가 질어지게 된다는 단점을 보안하고자 해서 나온 방식이다. 또한 문법을 보면 Python과 매우2023.04.24# etcReact 커스텀 Hook 만들기
리엑트를 다룰 때 useState나 useEffect같은 Hook을 많이 사용해 봤을거다. 근데 이 Hook을 개발자가 원하는대로 만드는게 가능하다. 커스텀 훅은 반복되는 로직을 관리하는데 매우 용이하다. ## 사용방법 커스텀 훅을 만드는 방법은 그렇게 어렵지 않다. 이전에 커스텀 훅을 만들때 지켜야 할 규직이 몇가지 있는데 다음과 같다. - 커스텀2023.04.20# react자바스크립트 반복문
## 반복문의 종류 - for 문 - for...in 문 - for...of 문 - while 문 - do...while 문 ## for 문 for 문은 특정한 조건이 거짓이 될 때 까지 반복한다. ```javascript for([초기문]; [조건문]; [증감문]) { // 반복하여 실행할 코드 }; for(let i = 02023.04.15# javaScriptSymbol에 대해서
Symbol은 ES6에서 추가된 7번째 데이터 타입이다. 심볼은 주로 이름의 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해서 사용한다. ## Symbol의 생성 Symbol은 Symbol()함수를 호출하어 생성한다 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시타입의 값이다. ```javascript const mySymbol2023.04.11# javaScriptpackage.json에 대해서
## package.json이란? package.json이란 패키지 매니저로 설치한 모듈들의 의존성을 명세하고 관리하는 파일이다. ## 구성요소 ## name, version 패키지의 이름과 버젼을 명세하기 위해 필요한데 몇가지 규직이 존재한다. - 이름은 214자 이하여야 한다. - 범위가 지정된 패키지의 이름은 점 또는 밑줄로 시작할 수2023.04.06# javaScriptnpm vs yarn
## npm npm(Node Package Manager)은 Node.js의 기본 패키지 매니저로 라이브러리와 패키지를 관리하고 설치, 업데이트, 제거 등을 할 수 있다. package.json 파일을 사용해 의존성과 버젼을 관리한다. ## yarn yarn은 Facebook에서 만든 패키지 매니저인데 순차적으로 설치하는 npm과 달리 병렬로 설치2023.03.30# javaScriptHTTP/HTTPS의 개념
## HTTP/HTTPS란? HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙이다. 사용자가 웹 사이트에 방문을 하면 자용자 브라우저가 웹 서버에 HTTP요청을 전송하고 웹 서버는 HTTP로 응답한다. HTTP는 네트워크 통신을 작동하게 하는 기본 기술이다. HTTPS(Hypertext Trans2023.03.25# csRecoil에 대해 알아보자
개발을 하다보면 전역 상태 관리라는 말을 한번쯤은 들어봤을거다. 프로젝트의 규모가 커져감에 따라 수많은 state와 props가 점점 복잡해져 이러한 상태를 관리해주는 라이브러리들이 생겼다. 그 후 react에서 Context API라는게 나오긴 했지만 여전히 상태관리 라이브러리를 사용 하고 있다. ## Recoil란? Recoil은 hook을 사용하2023.03.20# frontEndci/cd에 대해 알아보자
## ci/cd에 대해 알아보자 ci/cd는 지속적인 통합, 지속적인 배포라는 뜻을 가지고 있다. 그럼 왜 지속적인 통합과 배포가 필요한가라고 하면 서비스를 배포할 때 마다. 개발자들이 직접 수정, 빌드, 테스트, 배포를 하게 된다면 상당히 많은 시간이 소요된다. 이때 ci/cd를 맞게 작성한다면 빌드, 테스트, 배포를 하는 시간을 크게 줄일 수 있어2023.03.16# frontEnd7계층에 대해 알아보자
## 7계층이란? 7계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 것 을 말한다. 각각 물리층, 데이터링크층, 네트워크층, 전송층, 세션층, 표현층, 가장 상위계층에 속하는 응용층 으로 나뉘고 두 컴퓨터가 네트워크를 형성하여 데이터를 주고 받기 위해서는 7계층이 모두 필요하여 각각의 계층은 독립된 기능을 제공한다 또한 서로 인접한 계층 간에만 의2023.03.12# cs팀프로젝트 기록 - 1
## 시작 계기 그동안 클론코딩을 하면서 기본적인 html, css, js 익혔고 이번에는 팀프로젝트에 참여해서 협업을 하는 경험을 하고 싶었다. 그래서 동아리같이 팀 단위로 개발하는 곳 을 알아보던 와중 왁물원이라는 네이버 카페에서 카페회원들 끼리 자체적으로 카페 내부 서비스를 만들어 보고 싶다는 글이 올라와 얼른 신청을 했다. 왁물원은 우왁굳이라는2023.03.06# etcJsdoc주석에 대해서 알아보자
JSDoc 주석은 JavaScript 코드에 추가되는 문서화 주석이다. 이 주석은 함수, 변수, 객체의 설명, 타입정보 등을 제공할 수 있다. ## JSDoc 주석 사용법 ```javascript /** * 가격과 개수 입력받아 출력하는 함수 * @param {number} price 가격 입력란 입니다 * @param {num2023.02.26# javaScriptAxios를 배워보자
## Axios란? Axios는 Promiss기반 HTTP 클라이언트이다. 간단하게 백엔드랑 통신을 쉽게 해주는 라이브러리이다. 특징으로는 HTTP요청과 응답을 JSON형태로 할 수 있다는 점이다. ## 사용방법 axios로 백엔드와 통신을 할 때는 get(조회), post(등록및 전송), put(수정), delete(삭제) 이렇게 4가지의 HTT2023.02.21# frontEndRESTful이란?
## RESTful이란? RESTful 는 REST API의 REST를 잘 따르는 시스템을 RESTful하다 라고 할 수 있다. RESTful은 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적으로 발표한 것이 아니다. 즉, REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭된다. 그럼 REST는 무엇일까? REST는 (Repre2023.02.16# csdisplay Grid를 배워보자
gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다. ## Grid Properties gird는 flex와 같이 Container와 Item이라는 두가지 개념으로 구분되어 있는데 Container는 Item을 감싸는 부모 요소이며 그 안에 Ite2023.02.11# cssreact-router에 대해서 알아보자
## react-router란? react-router는 클라이언트 측 라우팅이 가능하게 도와주는 라이브러리다. react-router를 사용하면 간단하게 url을 변경하면서 여러 페이지로 이루어진 어플리케이션을 만들 수 있다. ## 패키지 설치 ```javascript # npm 설치 npm install react-router-dom2023.02.09# frontEndHTML Sementic Tag란?
## Sementic Tag란? 우선 Sementic Tag의 뜻은 의미가 있는 태그라는 뜻이다. 반대로 div와 span태그와 같은 태그는 non-sementic tag라고 한다 그럼 div 태그로 만들 수 있는데 왜 의미가 있는 태그가 필요할까? ## Sementic Tag 가 필요한 이유 3가지 마크업을 통해 보다 많은 검색에 노출 시킬2023.02.07# htmlstyled-component를 사용해보자
react를 처음 공부할 때 html과 js는 한 파일에서 작성하는데 css도 한 파일에서 작성 할 수 있지 않을까 란 생각이 들어 찾아보다가 styled-component를 알게 되었다. styled-component는 js in css 로 말 그대로 js파일 내부에 css를 작성한다는 뜻으로 styled-component의 장점으로는 css의 컴포넌트화2023.02.03# frontEndstyled-component 전역 스타일링에 대해 알아보자
이전에 포스트에서 styled-component 사용법에 대해서 다뤘었는데 오늘은 GlobalStyle과 Theme에 대해 알아보겠다. ## GolbalStyle 사용방법 간단하게 createGlobalStyle 이라는 함수를 사용해 css를 작성한 후 최상위 컴포넌트에 추가해주면 된다. ```javascript //globalStyle.js2023.02.03# frontEnd클립보드를 이용하여 텍스트를 복사하기
텍스트를 복사하는 기능을 만들고 싶을 때 클립보드 기능을 이용하면 쉽게 만들 수 있다 ```javascript const handleCopyClipBoard = async (text) => { navigator.clipboard.writeText() }; ``` 이렇게 클립보드API를 이용하면 간단하게 클립보드를 이용한 복사기능을2023.02.01# frontEnd백준 1712번 알고리즘 [node.js]
[https://www.acmicpc.net/problem/1712](https://www.acmicpc.net/problem/1712) ## 문제 첫 줄에 A, B, C 가 주어지는데 A는 고정비용 B는 가변비용 C는 판매가격이라고 할 때 최초로 총 수입이 총 비용보다 많아져 이익이 발생하는 손익분기점을 넘기는 값을 구하는 문제이다 ## 풀이 간2022.12.01# 알고리즘백준 2292번 알고리즘 [node.js]
[https://www.acmicpc.net/problem/2292](https://www.acmicpc.net/problem/2292) ## 문제 육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서2022.12.01# 알고리즘백준 4344번 알고리즘 [node.js]
[https://www.acmicpc.net/problem/4344](https://www.acmicpc.net/problem/4344) ## 문제 육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서2022.12.01# 알고리즘React-router 404 not found
## 문제발생 블로그에 댓글 기능을 추가하고 싶어 Giscus을 알아보고 바로 블로그에 적용을 한 후 잘 동작하나 확인을 하던 와중 갑자기 404NotFound가 떠버리는 상황이 발생했다. ## 이유 우선 깃허브 페이지는 SPA를 지원하지 않는다. 하지만 나는 React에서 SPA를 구현하기 위해 React Router를 사용했고 깃허브 페이지는2022.11.10# frontEnduseEffect 무한루프
이 블로그를 만들면서 useEffect를 사용했는데 렌더링이 계속 일어나 사이트가 다운됐었다 우선 useEffect 가 무슨 일을 하는지 알아보자. useEffect는 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트가 된 후 컴포넌트가 마운트 되기 전 실행된다. 이때 종속정에 특정 state나 props를 전달하면 혹은 변경될 때 useEffect가 실행된2022.09.28# reactFragment를 알아보자
리엑트에서 컴포넌트 단위로 개발을 하면서 의미 없는 div태그로 감싸여진 코드들을 볼 수 있다. 이는 jsx를 사용하면서 return은 두개의 값을 반환 할 수 없어 하나의 최상위 태그를 사용해야 하기 때문이다. 이때 Fragment를 사용하면 의미 없는 태그 사용을 막을 수 있다. ```javascript const Table = () => {2022.01.02# react
