시작하며

이번 글에서는 React Native가 무엇인지, 장단점과 React와의 차이점을 정리해봤습니다.

React Native란?

React Native는 크로스플랫폼 모바일 앱 개발 프레임워크입니다. JavaScript와 React 문법으로 코드를 작성하면 iOS와 Android 앱을 동시에 만들 수 있습니다.

각 플랫폼의 실제 네이티브 컴포넌트를 렌더링하기 때문에 네이티브 앱에 가까운 사용자 경험을 제공합니다.

장점

코드 재사용 — 하나의 코드베이스로 iOS와 Android를 동시에 커버할 수 있습니다. 비즈니스 로직과 UI 대부분을 공유할 수 있어 개발 비용이 줄어듭니다.

익숙한 구조 — React를 알고 있다면 러닝커브가 낮습니다. JSX, 컴포넌트 구조, 상태 관리 방식이 거의 동일해서 웹 개발자가 모바일로 빠르게 넘어올 수 있습니다.

빠른 개발 사이클 — Fast Refresh 덕분에 코드 수정이 즉시 반영됩니다. 매번 빌드를 새로 돌릴 필요가 없습니다.

단점

플랫폼별 예외 처리 — iOS와 Android가 다르게 동작하는 부분에서는 따로 직접 분기 처리를 해야 합니다.

라이브러리 호환성 — React Native 버전 업데이트가 잦고, 특히 Expo SDK 버전과 맞춰야 할 때 호환성 문제가 종종 발생합니다.

React(웹)와 다른 점

React를 알고 있다면 친숙하게 느껴지지만, 몇 가지는 확실히 다릅니다.

렌더링 대상 자체가 달라서 웹의 <div>, <span> 대신 <View>, <Text> 같은 네이티브 전용 컴포넌트를 사용합니다. 라우팅은 react-router 대신 React Navigation, 클릭 이벤트는 onClick 대신 onPress를 씁니다. 스크롤도 브라우저가 자동 처리해주는 것과 달리 <ScrollView>나 <FlatList>를 직접 사용해야 합니다.

스타일링은 기본적으로 StyleSheet API를 사용하지만, Tailwind CSS를 설치하여 문법을 그대로 쓸 수 있습니다. 다만 display: block 같은 개념이 없고 모든 View의 기본값이 flex-direction: column이라는 점은 알고 있어야 처음에 덜 헷갈립니다.

Expo를 쓰는 이유

React Native를 처음 세팅하면 Xcode, Android Studio, JDK, CocoaPods 등 환경 설정만으로 하루가 날아가는 경우도 있습니다. Expo는 이 문제를 해결해줍니다.

Expo는 React Native 위에 올라가는 개발 플랫폼으로, npx create-expo-app 하나로 바로 시작할 수 있습니다. 카메라, 위치, 알림 등 자주 쓰는 기능이 SDK로 이미 제공되고, Expo Go 앱으로 QR 코드 하나만으로 실제 기기에서 바로 테스트할 수 있습니다.

마무리

React Native는 웹 개발자가 모바일에 발을 들이기에 가장 좋은 선택지라고 생각합니다. 하나의 코드베이스로 두 플랫폼을 커버하면서 네이티브에 가까운 경험을 줄 수 있다는 점이 좋은 것 같습니다.

감사합니다!!!!!!!!

이번 글에선 Spotify api를 사용하면서 어떤일이 일어났는지 또 어떻게 해결했는지 그리고 기본적인 사용법에 대해서 간단하게 적어 보겠습니다.

사용법

앱 생성하기

먼저 Spotify api를 사용 하려면 앱을 생성해야합니다. 앱은 아래 보이는 링크인 spotify for developer 에서 생성할 수 있습니다. https://developer.spotify.com

이런식으로 dashboard에 들어가서 앱을 생성할 수 있습니다. 앱을 생성할 때 앱 이름, 앱 설명, 웹사이트(필수 아님), 리디렉션 URL과 같은 정보들이 들어가게 됩니다 앱을 생성 하면 이런식으로 Dashboard에 내가 생성한 앱이 뜹니다. 그리고 앱을 클릭하면 자신의 앱 정보와 client id, client secret 이 나오게 됩니다. 이것을 환경 변수에 넣거나 하드 코딩해서 api를 불러와서 쓸 수 있습니다.

주요 기능

검색

트랙, 아티스트, 앨범, 플레이리스트 등을 키워드로 검색할 수 있습니다.

GET https://api.spotify.com/v1/search?q={검색어}&type=track,artist,album

트랙 정보

특정 트랙의 제목, 아티스트, 앨범, 30초 미리듣기 URL, 커버 이미지 등을 가져올 수 있습니다.

GET https://api.spotify.com/v1/tracks/{track_id}

아티스트 정보

아티스트의 이름, 인기도(popularity) 등을 가져올 수 있습니다.

GET https://api.spotify.com/v1/artists/{artist_id}
GET https://api.spotify.com/v1/artists/{artist_id}/top-tracks

앨범 정보

앨범에 포함된 트랙 목록, 발매일, 커버 이미지 등을 가져올 수 있습니다.

GET https://api.spotify.com/v1/albums/{album_id}

플레이리스트

공개된 플레이리스트의 트랙 목록을 가져올 수 있습니다.

GET https://api.spotify.com/v1/playlists/{playlist_id}/tracks

실제 사용기

저는 디코봇에서 !노추 !가수 와 같은 키워드로 노래 추천과 가수를 검색하는 기능을 구현하였고 또한 디코봇을 만드는 여러 방법 중에서 discord.js라는 라이브러리를 이용하여 작업하였습니다.

Access Token 발급

위에서 설명했던 Spotify Api 앱 생성에서 받았던 client_id와 client_scret을 사용해야 합니다. 저는 유저 로그인이 필요 없는 Client Credentials Flow 방식을 사용했습니다.

async function getAccessToken() {
  const credentials = Buffer.from(
    `${process.env.SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`
  ).toString("base64");

  const response = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: {
      Authorization: `Basic ${credentials}`,
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: "grant_type=client_credentials",
  });

  const data = await response.json();
  return data.access_token;
}

토큰은 발급 후 약 1시간(3600초) 뒤에 만료되기 때문에, 매 요청마다 새로 발급받는 건 비효율적입니다. 그래서 토큰을 캐싱해두고 만료됐을 때만 새로 발급받는 방식으로 구현했습니다.

let cachedToken = null;
let tokenExpiresAt = 0;

async function getToken() {
  if (cachedToken && Date.now() < tokenExpiresAt) {
    return cachedToken;
  }
  const token = await getAccessToken();
  cachedToken = token;
  tokenExpiresAt = Date.now() + 3500 * 1000; // 여유 있게 3500초
  return token;
}

장르 검색 기능

처음에는 장르 검색 기능을 Spotify API의 기본 기능을 활용하여 구현하려고 했습니다. 하지만 확인해보니 API에서 장르 기반 검색을 직접 지원하지 않는다는 것을 알게 되었습니다.

물론 artist_id를 활용하여 간접적으로 구현할 수는 있었지만 이 방식은 구조가 복잡하고 실제로는 장르가 아닌 곡 제목 기반 검색으로 동작하는 문제가 있었습니다. 예를 들어 !노추 힙합과 같이 검색하면 장르와는 무관하게 “hip-hop”이라는 제목의 노래가 검색되는 이슈가 발생했습니다.

이 문제를 해결하기 위해, 클로드가 제안 해준 것을 참고하여 장르별 아티스트를 직접 정의하는 방식을 선택했습니다.

const GENRE_ARTISTS = {
  케이팝: ["BTS", "아이유", "NewJeans", "BLACKPINK", ...],
  팝: ["Taylor Swift", "Ariana Grande", ...],
  힙합: ["Travis Scott", "빈지노", ...],
  // ...
};

이처럼 장르별로 아티스트를 하드코딩한 뒤, 예를 들어 !노추 인디와 같이 입력하면 해당 배열에 포함된 아티스트(검정치마, 잔나비 등)의 음악을 검색하는 방식으로 구현했습니다.

이 방법을 통해 장르 검색 기능의 문제는 해결할 수 있었지만, 등록된 아티스트에만 의존해야 한다는 한계가 있어 추천 범위가 제한적이라는 단점이 있습니다.

추후에 더 고민해보고 더 나은 방향이 있으면 수정할 예정입니다.

구독 문제

처음 앱을 생성하여 코드를 짜고 개인 서버에서 요청을 보냈는데 어떻게 해도 계속 오류가 떴습니다. 저는 Spotify API를 무료 버전에서도 사용할 수 있을 것이라고 생각했지만 유료 구독이 필요했습니다. 따라서 아직 사용하지 않았던 3개월 무료 체험을 통해 구독을 진행했습니다.

하지만 또 다른 문제가 발생했습니다. 콘솔에서 유료 구독 정보가 서버에 반영되기까지 몇 시간이 소요될 수 있다는 메시지가 표시되었고 약 2시간 정도 기다렸음에도 정상적으로 적용되지 않았습니다.

따라서 해결하기 위해 기존에 생성했던 앱을 삭제하고 새로 생성하려 했지만 앱을 다시 만들기 위해서는 24시간을 기다려야 한다는 제한이 있어 예상보다 많은 시간을 소모하게 되었습니다.

limit 에러

처음에 limit을 20으로 설정했는데 계속 400 에러가 났습니다. 알고보니 Client Credentials 방식의 앱은 limit을 10 이하로만 설정해야 했습니다. 공식 문서에는 명확하게 나와있지 않아서 찾는 데 시간이 걸렸습니다.

// Client Credentials에서는 에러 발생
limit: 20

// 10 이하로 설정해야 정상 동작
limit: 10

URL 인코딩 문제

처음에는 Node.js의 https 모듈을 직접 사용해서 API를 호출했습니다. 그런데 검색어에 한글이나 특수문자가 들어가면 URL 인코딩이 제대로 되지 않아 요청이 실패하는 문제가 있었습니다. 해결 방법은 클로드가 제안 해주었습니다. https 모듈 대신 Node.js 18+에 내장된 fetch를 사용하고, URLSearchParams로 쿼리를 구성하면 인코딩을 자동으로 처리해줍니다.

// 인코딩 문제 발생 가능
const url = `https://api.spotify.com/v1/search?q=${query}&type=track&limit=20`;

// URLSearchParams로 안전하게 처리
const params = new URLSearchParams({ q: query, type: "track", limit: 10 });
const url = `https://api.spotify.com/v1/search?${params}`;

마치며

Spotify API 자체는 문서도 잘 되어있고 사용하기 어렵지 않았지만, 처음 사용해보기도 하고 여러 시행착오가 많았던 것 같습니다. 그래도 좋은 경험 이었던 것 같고 앞으로도 이런 새로운 시도를 많이 해보고 싶습니다!! 글 읽어주셔서 감사합니다.

이번 글에선 개학한지 1달이된 나의 모습, 좋았던점, 아쉬웠던점 그리고 앞으로의 계획을 정리해 보려고 합니다.

바뀐점

방학 때는 학교에서 자습과 과제를 하는 것이 일상이어서 개학을 해도 크게 달라지지 않을 것이라고 생각했습니다.
하지만 실제로는 생각보다 많은 부분이 달라졌고 또 달라져야한다고 느꼈습니다.

그중 가장 크게 바뀌어야하는건 책임감입니다.

후배들이 들어오고 멘토멘티를 진행하면서 단순히 배우는 입장이 아니라 알려주는 선배가 된 것을 체감하게 되었습니다.
또한 FE 스터디 부장과 여러 프로젝트를 통해 참여자가 아닌 이끄는 역할을 맡으며 책임감을 느끼게 되었습니다.

저는 스스로 책임감이 뛰어난 사람이라고 생각하지 않습니다.
그 만큼 실수도 많이 했습니다. 그래서 이러한 역할들이 부담되기도 하지만, 오히려 이를 통해 책임감을 키워야겠다고 생각하게 되었습니다. 앞으로의 상황을 대비하는 좋은 연습이라고 생각하고 있습니다.

좋았던점

최근에 책을 읽고 있습니다. 역행자라는 자기계발서를 읽고 있는데 정말 좋은 책인것 같습니다.

이 책에서 말하는 내용에서 자의식 해체 라는 말이 있었습니다. 자의식 해체는 자신을 제3자의 입장에서 객관적으로 보는것 입니다. 예를들어 내가 실수한 상황일때 자의식 보호(자신을 보호하려고 하는 생각 즉 자기합리화)가 발동합니다. "내 잘못은 없어 다 환경탓이야!" 라는 착각이 무의식적으로 스쳐 지나간다고 합니다. 물론 좀 극단적인 예시를 들긴 했지만 인간의 본성이 자아를 손상시키는 것에 예민하기 때문에 저정돈 아니더라도 자의식을 보호하려고 온갖 생각이 스쳐 지나갈겁니다.

책에선 자의식 해체를 하는 탐색, 인정, 전환 이 3가지 방법을 소개 합니다. 탐색은 내가 뭘 잘못했는지, 내 잘못이 무엇에서 비롯되었는지 탐색하는 것입니다. 인정은 말 그대로 자신의 잘못을 알았다면 깔끔하게 인정 하는 것입니다. 마지막으로 전환은 그러한 생각들을 실천으로 옮기는 것입니다. 이러한 방법들이 한번에 실행으로 옮겨지진 않지만 이러한 상황이 일어날때 기억하고 실행으로 옮긴다면 성공입니다.

또한 이 책의 저자는 22전략을 소개 합니다. 22전략이란 하루 2시간 책읽기와 글쓰기를 하는것입니다. 솔직히 2시간 책읽기는 몰라도 2시간 글쓰기는 좀 어렵긴 합니다. 그 만큼 이 저자는 책읽기와 글쓰는 능력을 강조하는 것 같습니다, 책은 과거의 위인과 소통할수있는 좋은 수단이라고 설명하면서요.

넵 뭔가 책에대한 소개를 한것 같지만 아무튼 책읽는 좋은 습관이 들여진 것 같습니다. 전공책 뿐만 아니라 이런 자기개발서나 소설책을 읽는 습관은 좋은 것 같습니다!!

아쉬웠던점

이번 한 달 동안 가장 아쉬웠던 점은
프로젝트 스프린트 기간을 맞추지 못한 것입니다.

저는 모든 일에서 약속을 지키는 것이 중요하다고 생각하지만 이번에는 스스로의 나태함으로 인해 기한을 지키지 못했습니다.

또한 일정이 늦어질 것 같았음에도
팀원들에게 미리 공유하지 못했고,
그로 인해 프로젝트 전체 흐름에도 영향을 주었다고 느꼈습니다.

개선할점

앞으로는 맡은 역할에 대해 더 큰 책임감을 가지고
끝까지 포기하지 않고 수행하는 것이 중요하다고 생각합니다.

특히 일정에 문제가 생길 것 같을 때는
혼자 해결하려 하기보다, 팀원들과 미리 소통하는 것을 가장 우선으로 개선해야 할 부분이라고 느꼈습니다.

앞으로의 계획

이번 한 달을 돌아보며 단순한 노력보다
방향성과 꾸준함이 더 중요하다는 것을 느꼈습니다.
앞으로는 아래와 같은 방향으로 개선해 나가려고 합니다.

1. 포트폴리오 초안 작성 해보기

포트폴리오 초안을 작성 해보면서 내가 부족한 부분이 뭔지 앞으로 남은 2학년동안 어떤걸 더 공부하고 해보면 좋을지 알아가보려고 합니다.

2. 오픈소스 기여

전부터 오픈소스 기여는 해보고 싶다고 생각 했었습니다. 하지만 실력도 아직 부족하고 어디서부터 시작해야 할지도 막막합니다. 그래도 찾아보면서 작은것부터 조금씩 도전 해보고 싶습니다.

3. 프로젝트 진행

• 광탈페
• 광산
• gsmc v4

등등 여러 프로젝트를 진행 하면서 개선점이나 기여한 부분 이슈를 해결한 경험을 잘 정리해서 포트폴리오에 잘 정리하려고 합니다.

4. 사이드 프로젝트

아직 구체적인 계획이나 아이디어가 떠오르지 않았지만 크롬 확장자로 배포를 해서 사용해보고 싶은 마음은 있습니다. 아이디어가 떠오르면 바로 계획하고 실행 하려고 합니다!

마무리

이번 글에선 개학하고 한달된 제 모습을 회고하면서 기록 하였습니다. 글을쓰며 아직 부족한점이 많고 해야할 것도 많다고 느꼈습니다. 앞으로 이러한 부족한점 개선 하며 성장해 나가도록 하겠습니다! 감사합니다

이번 글에선 사이트에 들어가서 로그인 하거나 어떠한 절차를 거쳐야할때 봇검사를 하는데 이때 캡챠인증이라고 뜹니다. 많은 사람들을 귀찮게 하는 캡챠인증이 제대로 작동 하는지, 봇이 제대로 걸러지는지 확인 해보려고 합니다.

캡챠(CAPTCHA)인증이란?

CAPTCHA는 "Completely Automated Public Turing test to tell Computers and Humans Apart"의 약자로 쉽게 말하면 컴퓨터와 사람을 구별하기 위한 자동화된 테스트입니다.

캡챠 너 쓸모 있는거냐?...

결론부터 말하면 어느 정도는 효과가 있다고 합니다!... 자 그럼 이제부터 캡챠가 효과적인 이유에 대해 설명 하도록 하겠습니다.

기본적인 자동화 봇 차단

대부분의 단순한 봇은 다음과 같은 방식으로 동작합니다.

• HTTP 요청 자동 반복
• 스크립트를 통한 회원가입 자동 생성
• 댓글 스팸 자동 작성

이러한 단순 스크립트 기반 봇은 캡챠에서 대부분 차단된다고 합니다. 특히 회원가입이나 로그인 시도에서 큰 효과가 있습니다.

공격 비용 증가

캡챠는 공격을 완전히 막는 것이 아니라 비용을 증가시키는 역할을 한다고 합니다.

봇이 캡챠를 우회하려면 다음과 같은 방법이 필요합니다.

• OCR(문자인식) 기반 이미지 해석
• 머신러닝 모델 사용
• 캡챠 해결 서비스 이용 (사람이 대신 풀어주는 서비스)

이 과정은 시간과 비용이 발생하기 때문에 대규모 공격이 어려워집니다.

행동 기반 분석과 결합

최근 캡챠는 단순한 문제 풀이가 아니라 사용자 행동 패턴 분석을 함께 사용합니다.

예를 들어 다음과 같은 요소를 분석합니다.

• 마우스 움직임
• 클릭 패턴
• 타이핑 속도
• 브라우저 환경

이러한 방식은 대표적으로 Google reCAPTCHA에서 사용됩니다. 특히 reCAPTCHA v3는 사용자에게 문제를 거의 보여주지 않고도 봇 점수를 계산한다고 합니다.

캡챠의 한계

하지만 캡챠가 완벽한 해결책은 아닙니다.

AI가 캡챠를 풀 수 있음

최근 AI 기술이 발전하면서 이미지 인식 모델이 기존 캡챠를 상당히 잘 풀 수 있게 되었습니다.

특히 다음과 같은 경우가 있습니다.

• OCR(문자인식) 모델로 문자 캡챠 해석
• 딥러닝으로 이미지 분류
• 자동 클릭 스크립트

즉 기술적으로 완벽한 방어는 어렵습니다.

캡챠 해결 서비스 존재

이번 글을 쓰며 찾아보면서 인터넷에는 캡챠를 대신 풀어주는 서비스도 존재한다고 합니다...

동작 방식은 다음과 같습니다. 봇이 캡챠 이미지를 전송하고 실제 사람이 문제 해결한 뒤 결과를 다시 봇에게 전달 이 방식은 매우 저렴한 비용으로 이용 가능하기 때문에 대규모 스팸 공격에 사용되기도 합니다.

사용자 경험(UX) 저하

캡챠의 가장 큰 문제 중 하나는 사용자 경험을 떨어뜨릴 수 있다는 점입니다.

예를 들어

• 이미지가 너무 어려움
• 여러 번 반복 인증
• 모바일에서 불편함

특히 접근성 측면에서도 문제가 발생할 수 있습니다. 매번 캡챠 인증 하기 너무 귀찮은 것 같습니다...

마무리

이번 글에선 캡챠가 도움이 되는지 실제로 봇은 잘 거르는지에 대해 알아보았습니다. 캡챠인증이 정말 귀찮긴 하지만 도움이 된다고 합니다. 글 읽어주셔서 감사합니다.

시작하며

개발을 하다보면 CORS에러가 뜬걸 많이 보셨을 겁니다. 이번 글에선 그런 CORS가 무엇인지, 왜 발생하는지, 어떻게 해결하는지 알아보겠습니다.

CORS란?

CORS(Cross-Origin Resource Sharing)는 다른 출처의 리소스를 요청할 수 있도록 허용하는 브라우저 보안 정책입니다. 쉽게 말하면 내 웹사이트가 다른 서버에 있는 데이터를 요청해도 되는지 검사하는 규칙입니다.

Origin이란?

CORS를 이해하려면 먼저 Origin을 알아야 합니다. Origin은 도메인, 프로토콜, 포트의 집합입니다. 예시로 https://kanghyeon.com:3000 이런 주소가 있다면 프로토콜은 https 도메인은 kanghyeon.com 포트번호는 3000입니다.

CORS는 왜 발생할까?

기본적으로 브라우저에는 Same-Origin Policy(SOP, 동일 출처 정책) 이 있습니다. 이 정책은 같은 Origin에서만 리소스 요청을 허용하는 보안 정책입니다.

예를 들어

http://localhost:3001 이러한 서버에서 https://kanghyeon.com 이곳으로 요청을 보내면 Origin이 다르기 때문에 브라우저가 요청을 차단합니다.

이때 등장하는 개념이 바로 CORS입니다.

위에서 설명한 것처럼 SOP가 서로 다른 출처일 때 리소스 요청과 응답을 차단하는 정책이라면, CORS는 서로 다른 출처라도 리소스 요청과 응답을 허용할 수 있도록 하는 정책입니다.

그래서 우리가 만나는 에러도 대부분 CORS가 가능하도록 설정하라는 내용으로 이루어져 있습니다.

뒤에서 설명할 해결 방법에 등장하는 헤더인 Access-Control-Allow-Origin도 허용되는 출처에 대한 접근 제어라는 의미라고 이해할 수 있습니다.

CORS 에러 대응

서버에서 응답헤더 세팅하기

서버에서 Access-Control-Allow-Origin 헤더를 설정해서 수락할 출처를 명시적으로 지정할 수 있습니다. 이 헤더를 세팅하면 출처가 다르더라도 리소스 요청이 허용됩니다.

예를들어

Access-Control-Allow-Origin: https://kanghyeon.com

이런식으로 특정 웹사이트 https://kanghyeon.com 에서만 오는 요청을 허용하게 설정할 수도 있고,

Access-Control-Allow-Origin: *

이런식으로 모든 사이트의 요청을 허용하게 설정할 수도 있습니다.

하지만 *를 사용하여 설정하게 된다면 모든 접근을 허용하기 때문에 보안에 취약해질 수 있습니다. 따라서 Access-Control-Allow-Origin: https://kanghyeon.com 이와 같이 직접 출처를 세팅하는 방식이 더 좋습니다.

proxy 서버 사용하기

웹이 리소스를 직접적으로 요청하는 대신, 프록시 서버를 사용하여 웹에서 리소스로 요청을 전달하는 방법이 있습니다. 이 방법을 사용한다면 웹이 리소스랑 동일한 출처에서 요청을 보내는 것처럼 보여서 CORS 에러를 방지 할 수 있습니다.

예를들어 https://kanghyeon.com에서 동작하는 웹이 https://api.kanghyeon.com에서 데이터를 요청한다면 두 도메인이 다르기 때문에 CORS 설정을 제대로 하지 않으면 요청이 실패할 수도 있습니다. 이 문제를 해결하려면 웹에서 직접 https://api.kanghyeon.com에 api를 요청하는 대신, 같은 https://kanghyeon.com에 위치한 프록시 서버를 통해 api 요청을 중간에서 하도록 구성 해주면 됩니다. 때문에 브라우저 입장에선 https://kanghyeon.com에서 요청한 것처럼 보이기 때문에 CORS 검사 없이 응답 받는게 가능 합니다.'

흐름

브라우저 → https://kanghyeon.com (프록시 서버) → https://api.kanghyeon.com

마치며

이번 글에서는 CORS라는 개념에 대해 알아보았습니다.
개발을 하며 많이 접했던 오류여서 찾아보게 되었는데, 에러를 어떻게 대응하는지에 대한 부분이 특히 도움이 많이 되었던 것 같습니다.

이 밖에도 다양한 해결 방법이 있지만, 이번 글에서는 가장 기본적인 개념과 대표적인 해결 방법 위주로 정리해보았습니다.
글 읽어 주셔서 감사합니다!!

출처: https://docs.tosspayments.com/resources/glossary/cors#%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C-access-control-allow-origin-%EC%9D%91%EB%8B%B5-%ED%97%A4%EB%8D%94-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

올 한 해는 저에게 있어 굉장히 의미 있는 해였던 것 같습니다. 얻은 것도, 잃은 것도, 배운 것도 많았다고 생각합니다. 최근 주변 선배들이나 블로그 글을 보며 아직 많이 노력해야겠다는 생각이 들었습니다. 이 글을 적으며 앞으로 2026년을 어떻게 살아가야 할지 방향을 잡아보고자 합니다.

마이스터고등학교에 지원했던 배경과 동기

저는 중학교 2학년 초반까지만 하더라도 마이스터고라는 것이 있는지도 몰랐습니다. 그러다 5기 선배님과 부모님들끼리 아는 사이여서 GSM에 대해 알게 되었습니다. 중학교 2학년 때 학교 설명회에도 갔었고, 자마고와 공동으로 진행한 설명회도 있어서 함께 다녀왔습니다.

두 학교의 설명을 모두 들어보니, 자마고보다는 평소 컴퓨터를 좋아하고 관심도 많았던 저에게 소마고가 더 잘 맞을 것 같다고 생각했습니다. 학교에 들어오기 전에는 기숙사 생활에 대한 로망도 조금 있었습니다. 친구들과 함께 지내며 학교생활을 하면 재미있을 것 같다는 생각도 들었습니다.

그리고 가장 결정적인 이유는 취업을 빨리 해서 돈을 벌고 싶었기 때문입니다. 물론 4년제 대학을 나와 취업하는 방법도 있지만, 고등학교 때 내신을 챙기며 교과 공부를 하고 야자와 학원까지 다니는 생활은 저와 정말 맞지 않다고 느꼈습니다. 그래서 이러한 이유들로 마이스터고를 선택하게 되었습니다.

어떠한 개발자가 되고 싶은지

저는 배우는 것을 즐기는 개발자가 되고 싶습니다. 제가 선택한 전공인 프론트엔드는 새로운 기술과 트렌드가 빠르게 변화하는 분야라고 생각합니다. 그만큼 배워야 할 것도 많고, 꾸준한 학습이 중요하다고 느꼈습니다.

상태 관리 라이브러리만 봐도 zustand, redux, recoil, jotai 등 다양한 것들이 있고, 제가 아직 사용해 보지 못한 기술들도 훨씬 더 많습니다. 저는 이런 기술들을 단순히 알고 넘어가는 것이 아니라, 직접 사용해 보고 비교해 보며 상황에 맞게 실제 프로젝트에서 활용할 수 있는 개발자가 되고 싶습니다.

앞으로도 새로운 기술들을 계속해서 배우며, 배운 내용을 실제 프로젝트에 적용해 성장해 나가는 개발자가 되고 싶습니다.

개발 공부를 어떤 방식으로 하는지, 그 방식이 나에게 맞는지

저는 최근 프로젝트를 진행하면서 공부를 병행해 왔습니다. 친구들과 함께 프로젝트를 하며
“여기에는 이 기술이 더 좋을까?”,
“상태 관리 라이브러리를 추가해 볼까?”
와 같은 고민을 하면서 기술을 하나씩 배워 나갔던 것 같습니다. 이러한 방식은 배운 내용을 바로 프로젝트에 적용해 볼 수 있어서 습득력이 확실히 빠르다고 느꼈습니다.

또한 AI를 활용하며 공부했습니다. AI가 작성해 준 코드를 그대로 사용하는 것이 아니라, 코드를 분석하며 어떤 방식으로 사용되는지, 왜 이렇게 작성해야 하는지를 찾아보고 직접 AI에게 질문하면서 공부했습니다. 물론 시간에 쫓겨 코드를 충분히 확인하지 못한 채 프로젝트에 사용했던 경험도 있었습니다. 하지만 시간이 부족하더라도 이런 방식으로 천천히 코드를 분석하면서 공부하면 블로그를 찾아보거나 강의를 보는 것보다 빠르게 배울 수 있었고, 나중에 비슷한 상황이 왔을 때도 이러한 경험들이 도움이 될 것이라고 생각합니다.

다가오는 겨울방학에는 이론 공부를 조금 더 탄탄히 하며 내년 2학년을 준비하면 좋을 것 같습니다. 또한 이러한 지식을 바탕으로 내년에 10기가 들어오게 된다면, 직접 가르쳐 주면서 복습하고, 제가 잘 기억나지 않거나 처음 접하는 개념이 나온다면 함께 공부하면 도움이 많이 될 것 같습니다!

지금까지 개발한 프로젝트 경험 정리

올해 마무리한 프로젝트는 3개 정도가 있는 것 같습니다.

HCBC

HCBC는 incube 동아리에서 팀을 꾸려서 완료한 프로젝트입니다.
랜덤 채팅 프로그램으로, 웹소켓 기반의 실시간 채팅이 구현되어 있는 프로젝트입니다.

이 프로젝트에서 좋았던 점은 첫 프로젝트 치고 나쁘지 않은 경험이었다는 점입니다. 이때만 해도 AI를 많이 썼던 것 같습니다. 물론 AI를 써서 개발하는 것이 나쁘지는 않지만, AI에 거의 의존해서 개발했던 점이 조금 아쉬웠습니다.
그리고 첫 프로젝트인 만큼 소통도 잘되지 않았고, 그로 인해 충돌도 많이 났습니다. API 통신도 처음 해봐서 오류도 굉장히 많이 나왔고, 여러 가지 면에서 아쉬운 점이 많았습니다.

HCBC 프론트 레포: https://github.com/HelloCarBotCube/HCBC-Front

GSMC

GSMC는 저희 학교인 GSM의 인증제를 관리하는 서비스입니다.
저는 이 프로젝트에서 얻어간 점이 많다고 생각합니다. 처음 했던 프로젝트인 HCBC와는 다르게 PR 템플릿, 라벨, Gemini 코드 리뷰 등 선배님들과 함께한 프로젝트인 만큼 프로젝트 세팅부터 남달랐습니다.

저는 이 프로젝트에서 클라이언트 부분은 자주 묻는 질문을 담당했고,

어드민에서는 학생 필터, 학생 부분 점수 조회, 심사 요청 조회, 심사 요청 자세히 보기 페이지를 개발하였습니다.

이 프로젝트에서 좋았던 점은 선배님들과 같이 프로젝트를 하며 협업에 대해 배우게 되었다는 점입니다.
아쉬웠던 점은 제 전공 실력이 부족해서 많은 부분에 기여하지 못했던 것입니다. 만약 기회가 되어 다음 버전을 릴리즈하게 된다면 더 열심히 하고 싶습니다!

GAMI

GAMI는 멘토링을 도와주는 서비스입니다.
웹소켓을 사용하여 실시간 채팅을 구현했고, 익명 게시판으로 자유롭게 자신의 생각을 올릴 수 있습니다.

저는 이 프로젝트에서 첫 프로젝트였던 HCBC 때보다 발전했다는 것이 느껴졌던 것 같습니다.
이 프로젝트에서는 회원가입, 익명 게시판, 마이 페이지, 어드민 페이지를 개발하였습니다.

이 프로젝트에서 좋았던 점은 소통이 나름 잘됐다는 것입니다. 하루에 할 일을 todo로 적어서 올리고, PR을 올리면 바로바로 확인해 주는 등 소통이 잘 이루어져 프로젝트가 원활하게 진행되었습니다.
아쉬웠던 점은 명세서를 확실하게 잡아놓지 않아서 API가 명세서나 디자인과 다르게 개발된 경우가 있었다는 것입니다. 아이디어 페스티벌 특성상 프로젝트 기간이 길다 보니 이런 실수가 있었지만, 이를 통해 프로젝트를 처음 시작할 때 기능을 세세하게 잘 정리해 두는 것이 중요하다고 느꼈습니다.

프로젝트 레포: https://github.com/CKOLBo/GAMI-Client

올해 목표

저는 단순히 프로젝트만 하는 것이 아니라, 저만의 개발 성향과 스타일을 정립하고 이를 바탕으로 포트폴리오를 준비하고 싶습니다. 2025년에 마무리했던 프로젝트들은 대부분 개발 → 릴리즈 → 수정의 과정에서 끝났습니다. 하지만 올해부터는 트러블슈팅 과정이나 성능을 개선했던 부분 등을 따로 정리하는 습관을 기르고 싶습니다.

또한 작년을 돌아보며 후회한 점이 많았던 만큼, 올해는 정말 후회 없이 최선을 다하고 싶습니다. 사람이 하루아침에 바뀌지는 않겠지만, 당장 해볼 수 있는 것부터 실천해 나가고 싶습니다. 예를 들어 TIL을 하루에 하나씩 작성하는 것처럼, 작은 습관들을 하나씩 바꿔 간다면 올해는 후회 없이 보낼 수 있을 것이라 생각합니다.

마지막으로 오픈소스에 기여하거나 직접 라이브러리를 만들어 보고 싶다는 목표도 가지고 있습니다. 지금 당장은 쉽지 않겠지만, 앞서 세운 목표인 ‘후회 없이 열심히 살아가기’를 꾸준히 실천해 나간다면 분명히 해낼 수 있을 것이라고 생각합니다.

마치며

이번 글은 저에게 굉장히 많은 도움이 된 것 같습니다. 앞으로 올 한 해를 어떻게 살아가야 할지, 작년에 잘한 점은 무엇인지, 고칠 점은 무엇인지 다시 한 번 되돌아볼 수 있었습니다. 앞으로도 꾸준히 성장하는 프론트엔드 개발자가 되기 위해 열심히 하겠습니다!!! 감사합니다!!!

시작하며

이번 글에서는 ai가 초보 개발자에게 어떠한 영향을 미치는지 그리고 초보 개발자인 제가 어떤영향을 받았는지 알아보도록 하겠습니다.

AI 너 뭐 되냐?

사실 전 중학교 때까지만 해도 AI를 잘 쓰지 않았습니다. 그냥 검색하고 직접 찾아보는 게 더 익숙했고, AI를 굳이 써야겠다는 필요성도 못 느꼈습니다.

하지만 고등학교에 올라오고 시간이 지나면서 ChatGPT, Gemini 같은 여러 AI 기술들이 엄청나게 발전하기 시작했습니다. 요즘 구글검색을 해도 gemini가 브라우저 맨위에서 검색에 대한 답을 해줍니다.

물론 아직 부족한 점도 많고 가끔 틀린 정보를 알려줄 때도 있습니다. 하지만 예전과 비교하면 그런 오류도 확실히 줄었고 앞으로 더 발전해서 거의 완벽에 가까워진다면 진짜 무서울 것 같다는 생각도 듭니다.

결론: ai 뭐 된다 편리하다

ai가 초보 개발자에게 미치는 긍정적 영향

다시 본론으로 돌아 와서 ai가 초보자에게 미치는 긍정적 영향에 대해 알아보겠습니다.

학습 속도 향상

초보 개발자가 어려움을 느끼는 지점은 대부분 검색해도 답이 나오지 않을때 입니다. AI는 이런 시간 낭비를 줄여 줄 수 있습니다. 모르는 개념을 설명해달라고 하면 예제, 비유, 맥락까지 정리해서 알려줍니다.

디버깅 난이도 낮춤

초보가 가장 스트레스를 많이 받는 건 디버깅이라고 생각 합니다. 오류 메시지를 읽어도 무슨 말인지 모르고 어디서부터 손대야 할지도 모를 수 있습니다.

• 오류 원인
• 의심되는 부분
• 해결 가능한 여러 접근 방식을 단계별로 설명해준다.

이를 통해 디버깅의 감을 익힐 수 있습니다. ai가 고쳐주는 게 아니라 어떻게 고쳐지는지 보는 과정이 공부가 될 수 있습니다.

ai가 초보 개발자에게 미치는 부정적 영향

문제 해결 능력 저하

원래 왜 이 코드가 오류가 날까?를 스스로 고민하며 성장해야 합니다. 그런데 ai는 오류 메시지를 던지면 바로 해결책을 내놓습니다. 그러다 보면 자연스럽게 원인을 파악하는 과정이 생략되고, 문제를 직접 추적하는 능력이 약해집니다.

예를들어 오류 로그를 보기도 전에 "ai야 이거 고쳐줘!!!" "이거 이런식으로 수정 해줘" 라고 한다면 스스로 생각 할 능력을 잃습니다.

ai를 전적으로 믿음

초보때는 개발 실력이 없으니까 ai가 틀린 코드를 작성해도 무조건 믿고 바로 적용하는 안좋은 습관이있습니다.(저 포함..) 하지만 실제로는

• 프로젝트 구조와 안 맞는 코드일 수 있고
• 비효율적인 방식일 수도 있고
• 심지어 틀린 내용일 때도 있음

초보는 그걸 구분하기 어려워서 잘못된 지식을 그대로 학습할 위험이 있습니다.

자기 코드에 대한 책임감이 약해짐

ai가 코드를 많이 짜주면 자신이 만든 코라는 느낌이 줄어듭니다. 그러면 자연스럽게

• 디버깅이 어려워지고
• 유지보수도 어려워지며
• 코드에 대한 주인의식도 낮아진다.

특히 팀 프로젝트에서는 큰 문제입니다. AI가 만들어준 코드라 내가 깊게 이해한 게 아니면 나중에 팀원이 질문했을 때 설명도 못 합니다.

의존도가 높아져서 스스로 생각하는 시간이 부족

ai가 편하다고 해서

• 구조 설계
• 코드 작성
• 디버깅
• 글 정리

모든 걸 떠넘기게 되면, 초보 개발자에게 가장 중요한 사고하는 힘이 약해집니다.

이건 시간이 지나면 큰 차이를 만듭니다. ai 없이 백지 상태에서 코드를 짜기 어렵습니다. 이 능력에서 초보 개발자들의 격차가 생깁니다.

ai를 잘 쓰는 방법?

저도 물론 잘 못하지만 이번에 제가 곰곰히 생각해보며 전공 동아리 프로젝트와는 다르게 ai 의존도를 낮춰보려고 노력하면서 적용했던점과 이번에 블로그를 쓰며 조사했던것을 담은 내용이라는 점 참고 해주시면 감사하겠습니다 더 좋은 방법이 있으시다면 피드백 해주세요!

고민하고 질문하기

바로 묻는 건 가장 안좋은 습관입니다. 3분만이라도 스스로 원인을 추측해보면 사고력이 엄청 자랄 수 있을거라고 생각됩니다.

예를 들어 “이 오류 메시지가 말하는 게 뭐지?” “어디까지 내가 확인해봤지?”

이런 질문을 스스로 해보고 ai에게 물어보면 사고력을 기를 수 있을 것 같습니다.

ai의 답 의심해보기

ai에 의존도가 높을수록 중요한 습관입니다.

• 왜 그렇게 해야 하는지 이유까지 물어보기
• 코드 실행해보고 실제 동작 확인
• 문서나 공식 레퍼런스와 비교

이 과정을 통해 ai가 준 정보는 정답이 아니라 참고 자료라고 생각을 해야 합니다.

ai를 선생님이라고 생각하기

ai는 사실 코드보다 설명에 더 강하다고 합니다. 따라서 ai에게 무작정 코드를 짜라고 시키는것 보다 설명을 모르는 개념에 대해 설명을 해달라고 해서 이해하는게 훨씬 더 좋다고 생각합니다.

예를들어

• “왜 이 Hook은 이렇게 동작해?”
• “여기서 왜 useState를 안쓰고 useRef를 써?”
• “이 패턴의 단점은 뭐야?”

이런 식으로 개념, 원리, 이유를 물어보는게 저는 굉장히 도움이 많이 되었습니다.

ai가 짜준 코드 정리 해보기

단순히 “AI에게 답을 받았다”로 끝내지 말고

• 모르는 내용 찾아보기
• 노션 정리
• 개념 요약
• 스스로 다시 설명해보기

이 과정을 거쳐서 ai를 코드 짜는 기계가아닌 학습도구로 활용해야 합니다.

마치며

이번 글에서는 ai가 초보 개발자에게 미치는 영향에 대해서 알아보았습니다. 개발에 대한 지식이 없는 상태에서 무작정 ai 한테 코드를 짜달라고 한다면 자신의 실력도 제대로 늘지 않을 뿐더러 코드이해 조차 힘듭니다. 따라서 저도 이번 글을 작성하며 많은 깨닳음을 얻은 것 같습니다.

이 글에서는 메모리 구조에 대해 알아보도록 하겠습니다. 프로그램이 실행될 때 메모리가 어떻게 나누어지는지, 그리고 각 영역이 어떤 역할을 하는지 알아보도록 하겠습니다.

메모리 구조가 뭘까용??

프로그램은 실행 될때 운영체제로 부터 메모리 공간을 할당 받습니다. 그리고 이 메모리는 크게 4가지로 나뉩니다

• 코드
• 데이터
• 힙
• 스택

코드 영역

프로그램을 실행시키기 위해 구성되는 것들이 저장되는 영역입니다. 한마디로 명령문들이 저장되는 것인데, 제어문, 함수, 상수들이 이 영역에 저장됩니다. CPU가 이 영역의 코드를 하나씩 읽어 실행합니다. 쉽게 말해 코드가 실행되기 위해 저장되어있는 영역입니다.

특징

• CPU가 실행할 명령어가 들어 있음
• 읽기 전용이기 때문에 실행 중 수정 불가
• 프로그램 전체에서 공유됨
• 예를 들어 C에서 작성한 int main() {} 함수의 컴파일 결과도 여기 저장됩니다.

데이터 영역

데이터 영역은 우리가 작성한 코드에서 전역변수, 정적변수 등이 저장되는 공간입니다. 또한 데이터영역은 크게 두가지로 나뉩니다.

초기화된 데이터 영역

int a = 10; // 초기값 있음

초기화되지 않은 데이터 영역

static int count; // 초기값 없음

특징

• 프로그램 시작 시 함께 생성
• 프로그램 종료까지 메모리에 남아 있음
• 전역 상태를 저장하는 공간

힙 영역

사용자에 의해 관리되는 영역입니다. 흔히 동적으로 할당 할 변수들이 여기에 저장된다고 보시면 됩니다. 필요할 때 메모리를 요청하고, 사용이 끝나면 다시 해제해야 합니다.

예시

C언어

int* p = malloc(sizeof(int) * 10);

JS

자바스크립트 객체/배열도 대부분 힙에 저장 예)

• JS의 객체/배열/함수 → 모두 힙에 저장
• number, string등 원시타입들은 스택에 저장됨

  const obj = { name: "강현" }; // 객체는 힙에 저장
  

#### JAVA
```java
new String("Hello"); // 힙에 저장

특징

• 필요할때 동적으로 생성
• 개발자가 직접 관리(할당/해제)해야 함
• 크기가 자유롭고 유연함
• 하지만 잘못 사용하면 메모리 누수 발생
• 객체나 동적 배열처럼 크기가 유동적인 데이터가 저장됨

스택 영역

스택 영역은 함수를 호출 할 때 지역변수와 매개변수가 저장되는 공간입니다. stack pop 과 같이 함수가 종료되면 해당 함수에 할당된 변수들을 메모리에서 해제시킵니다.

예

void test() {
    int x = 3; // 스택에 저장
}

특징

• 함수가 호출될 때 push, 종료될 때 pop
• 매우 빠른 접근 속도
• 자동으로 메모리 관리됨
• 크기는 제한적(overflow 가능)

그래서 아래와 같은 코드는 스택 오버플로우를 일으킵니다:

int arr[10000000]; // 너무 큰 배열 → 스택 오버플로우

마치며

이번 글에서는 프로그램이 실행될 때 메모리가 어떻게 나뉘는지 간단하게 정리해보았습니다. 처음 봤을때는 생각 보다 쉬워 보였지만 자료를 찾다 보니 생각 보다 깊은 내용도 많고 많이 어려워서 내용 보완 할 점이 많다고 생각 합니다. 글 읽어 주셔서 감사합니다

출처: https://st-lab.tistory.com/198

오늘은 전부터 헷갈리고 잘 사용해보지 못했던 useRef에 대해 알아보도록 하겠습니다.

useRef 그래서 넌 뭐냐

useState는 값이 변경되면 즉시 컴포넌트를 다시 렌더링하기 위한 용도이고, useRef는 렌더링과 무관하게 유지해야 하는 값을 저장하는 데 사용됩니다.

• useRef는 반환된 객체의 current 프로퍼티로 값에 접근하고 수정할 수 있습니다.
• useRef는 값이 바뀌어도 컴포넌트가 다시 렌더링되지 않습니다.

여기까지만 들었을때 저는 왜 굳이 쓸까? 어디에 쓸까? useState쓰면 되는거 아닌가 라는 고민이 되었습니다.

사용법 부터 알아보자~

기본 사용법

• 먼저 import로 useRef를 불러옵니다: import { useRef } from 'react';

• 초기값을 넣어 변수에 할당합니다: const inputRef = useRef(null);

• 필요할 경우 JSX에서 ref 속성으로 연결: <input ref={inputRef} type="text" />

• JavaScript에서 .current 속성으로 참조하거나 값을 변경할 수 있습니다: inputRef.current.focus();와 같이 사용하면 함수에서 해당 input에 포커스를 줄 수 있습니다.

  렌더링 없이 값 저장하기

  import { useRef } from 'react';
  

export default function Counter() { const countRef = useRef(0);

const increase = () => { countRef.current += 1; console.log(countRef.current); // UI는 안 바뀌지만 값은 증가 };

return 카운트 증가; }

![](https://velog.velcdn.com/images/mgang0_0/post/5b46ad8c-8eaf-40c9-828f-33059cb8c01c/image.png)

- `useRef(0)`
    `useRef`를 호출하면 `{ current: 초기값 }` 객체를 반환한다. 여기서는 `countRef.current`가 0으로 시작합니다
    이때 countRef 자체는 컴포넌트가 재렌더링되어도 동일한 객체를 가리킵니다

- `countRef.current += 1`
    `.current` 값만 변경되므로 `React`가 리렌더링을 트리거하지 않는다.
    콘솔에서 값은 바뀌지만 화면에는 반영되지 않습니다

### 돔 직접 접근
```ts
import { useRef } from 'react';

export default function InputFocus() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleFocus = () => {
    inputRef.current?.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleFocus}>포커스 이동</button>
    </>
  );
}

• const inputRef = useRef(null); useRef에 초기값을 null로 전달하면 처음 렌더링 시 inputRef.current는 null 상태입니다. 이후 React가 <input ref={inputRef} />를 렌더링하면서 해당 DOM 요소를 inputRef.current에 자동으로 넣어줍니다. 즉, 아직 참조할 대상이 없다 → 렌더링 후 DOM을 가지게 됩니다

• <input ref={inputRef} /> ref 속성에 useRef로 만든 ref 객체를 전달하면, React가 렌더링 후 해당 DOM 노드를 inputRef.current에 할당하게 됩니다. 개발자는 DOM을 직접 찾을 필요 없이 ref.current를 통해 바로 접근할 수 있습니다.

• inputRef.current?.focus() ref를 통해 얻은 실제 DOM 노드에 접근해, 브라우저의 기본 DOM API인 .focus()를 호출하게 됩니다. 이를 통해 버튼 클릭 시 input 요소로 포커스가 곧바로 이동하게 됩니다.

어디에 쓸까?

메시지 도착 시 스크롤을 맨 아래로 내려야 할때

채팅 앱을 사용해본 사람이라면 누구나 익숙한 기능이 있습니다. 새로운 메시지가 생기면 자동으로 스크롤이 아래로 내려가는 것 이걸 구현하려면 마지막 메시지 엘리먼트를 직접 선택해서 스크롤을 이동시켜야 합니다. 그래서 이렇게 ref를 만들었습니다.

const messagesEndRef = useRef(null);

그리고 메시지가 업데이트될 때 실행해줍니다.

messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });

• state로 DOM을 직접 선택할 수 없다
• state는 값의 변경 → 렌더링이 목적
• 그러나 스크롤처럼 DOM 조작은 렌더링과 무관한 영역

따라서 이러한 경우에는 useRef를 사용해야합니다.

스크롤을 움직임을 감지 할때

채팅에 자동 스크롤이 있다고 해서 항상 스크롤을 내려가면 안 됩니다. 사용자가 과거 메시지를 읽으려고 위로 올렸는데 아래 메시지가 올 때마다 자동으로 내려가 버리면 안됩니다.

그래서 실시간으로 사용자가 스크롤을 올렸는지를 감지해야 했는데, 또 DOM 요소에 직접 이벤트를 달아야 했습니다.

const messagesContainerRef = useRef(null);

이제 이 DOM 요소에 직접 scroll 이벤트를 붙입니다.

useEffect(() => {
  const handleScroll = () => {
    if (!messagesContainerRef.current) return;

    const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;

    // 사용자가 맨 아래에 있는지 여부
    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;

    setIsUserScrolling(!isAtBottom);
  };

  const container = messagesContainerRef.current;
  if (container) {
    container.addEventListener('scroll', handleScroll);
    return () => {
      container.removeEventListener('scroll', handleScroll);
    };
  }
}, []);

사용자가 맨 아래에 있는지 확인하는 공식

scrollHeight - scrollTop - clientHeight < 50

scrollHeight - clientHeight → 스크롤 가능한 가장 아래 위치

거기서 현재 scrollTop을 빼서 얼마나 아래에 가까운지를 측정

50px 정도 여유를 둔 이유는 미세한 스크롤 변화에도 갑자기 자동 스크롤이 꺼지거나 켜지는 걸 방지하기 위함입니다.

최종 결정

useEffect(() => {
  if (messages.length > previousMessagesLengthRef.current && !isUserScrolling) {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }

  previousMessagesLengthRef.current = messages.length;
}, [messages, isUserScrolling]);

새 메시지가 추가됐는지 체크

messages.length > previousMessagesLengthRef.current

• 이전 렌더 때 저장해둔 메시지 개수(previousMessagesLengthRef.current)보다 지금 메시지 개수가 많으면 → 새 메시지가 도착한 상황이라고 판단.

사용자가 스크롤을 위로 올려서 읽고 있는 중인지 체크

!isUserScrolling

• 사용자가 과거 메시지 읽으려고 스크롤을 위쪽에 두고 있는 중이면 자동 스크롤하면 안 됨.
• 따라서 사용자가 아래쪽(최신 위치)에 있을 때만 자동 스크롤 가능.

조건 충족 시 자동 스크롤 실행

messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });

• 새 메시지가 추가되었고 사용자가 현재 스크롤 맨 아래에 있다면 → 부드럽게(smooth) 맨 아래로 자동 이동.

현재 메시지 개수를 ref에 저장

previousMessagesLengthRef.current = messages.length;

• 다음 렌더 때 “이전 메시지 개수”로 사용하기 위해 업데이트해 둠.
• ref는 값이 바뀌어도 리렌더링이 일어나지 않음 → 이 용도에 최적.

마치며

오늘은 리액트 훅중 하나인 useRef에 대해 알아보았습니다. useRef에대해 개념정도는 알고 있었지만 왜 쓰는지 또 어디에 쓰는지 잘 알지 못하였지만 이 블로그를 쓰면서, 프로젝트에도 적용을 해보면서 잘 알게 된 것 같습니다. 글 읽어 주셔서 감사합니다.

시작하며

오늘은 리액트의 상태관리 라이브러리 중 하나인 Zustand에 대해 알아보도록 하겠습니다!

상태관리...? 너 뭔디

Zustand에 대해 알아보기 전에 상태관리에 대해 알아 보도록 하겠습니다. 상태(state)는 리액트 컴포넌트속 데이터를 의미 합니다. 이러한 상태는 시간에 따라, 사용자와의 상호작용에 따라 업데이트되며, 이렇게 변화하는 상태를 올바르게 반응하게 해주는 관리를 상태 관리라고 합니다.

왜 필요함?

• 복잡한 시스템 관리 프로젝트 규모가 커질수록 각 상태를 개별적으로 추적하고 관리하는 것은 매우 비효율적입니다. 상태 관리는 여러 컴포넌트에서 공유되는 데이터를 중앙에서 일관성 있게 관리하게 해줍니다.
• 성능 최적화 리액트는 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트를 리렌더링합니다. 적절한 상태 관리는 상태 변경에 따라 필요한 컴포넌트만 선택적으로 리렌더링하도록 제어하여 성능 저하를 막아줍니다.
• Props Driling 문제 해결 부모 컴포넌트에서 자식컴포넌트로 props를 전달 할때 코드가 복잡해지면서 Props Driling 현상이 발생하는데 이때 상태관리 라이브러리를 사용 하면 직접 접근을 하여 이러한 현상을 막을 수 있다.

Zustand

리액트에서 사용 할 수 있는 가볍고 빠른 상태관리 라이브러리 입니다. 현재 까진 리덕스보다 다운로드 수가 더 적지만, 최근 1년으로 본다면 Zustand가 급격히 성장하고 있습니다. 왜 그럴까요? 너 뭐 되냐 Zustand?!!

그래서 왜씀?

결론부터 말하면 뭐 됩니다...ㄷㄷ

• 설치용량 작음
  가볍습니다 다른 라이브러리에 비해 설치 용량이 적음 1.1kb입니다
• 불필요한 리렌더링이 적어서 빠름
• 사용법이 쉬움
• 리액트 밖에서도 사용가능 Redux는 리액트에 묶여있는 느낌이지만 Zustand는 순수 js 라이브러리여서 리액트 밖에서도 사용 가능 합니다.
• 코드가 깔끔해짐 전역 상태 로직이 하나의 store 안에 정리되기 때문에 프로젝트 규모가 커져도 유지보수가 쉬워집니다

이때 store는 애플리케이션의 여러 상태(State)를 중앙에서 관리하는 패턴을 말합니다

기본 사용법

설치

npm install zustand

store 만들기

Zustand는 create() 함수를 사용해 전역 상태 store를 만듭니다.

import { create } from "zustand";

const useCounterStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

• create() : Zustand store를 만드는 함수
• set : 상태를 업데이트할 때 사용하는 함수
• count : 전역 상태로 관리할 값
• increase, decrease : 상태를 변경하는 액션 함수

즉, 전역에서 공유 가능한 useState라고 보면 이해가 쉽습니다.

컴포넌트에서 사용하기

function Counter() {
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

• useCounterStore()를 호출하면 store에 있는 상태와 함수를 가져올 수 있습니다.

• count 값이 바뀌면 이 컴포넌트만 리렌더링됩니다. 불필요한 렌더링을 막아 성능이 좋습니다.

  selector

  function Counter() {
  const count = useCounterStore((state) => state.count);
  const increase = useCounterStore((state) => state.increase);
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>
  );
  }

• Zustand는 selector를 사용해 “필요한 상태만” 구독 가능

• 따라서 count만 바뀌면 count를 구독하는 컴포넌트만 리렌더링

• 불필요한 렌더링 최소화

마치며

오늘은 상태관리 라이브러리중 하나인 Zustand에 알아보았습니다. Zustand는 작은 프로젝트뿐 아니라, 중간 규모 이상의 프로젝트에서도 큰 힘을 발휘합니다. 글 읽어 주셔서 감사합니다.

그래프는 정점(Vertex) 과 간선(Edge) 의 집합으로 표현됩니다.

• 정점 여러가지 특성을 가질 수 있는 객체(식별이 가능한 특성) 노드라고도 불림
• 간선 정점들 사이의 관계 링크라고도 불림

예를 들어,

V(G1) = {0, 1, 2, 3}
E(G1) = {(0,1), (0,2), (0,3), (1,2)}

이렇게 표현할 수 있습니다. 여기서 V(G)는 정점들의 집합, E(G)는 간선들의 집합을 의미합니다.

무방향 그래프 vs 방향 그래프

그래프는 간선의 방향성 유무에 따라 두 가지로 나뉩니다.

무방향 그래프

• 간선에 방향이 없는 그래프
• A—B가 있다면 B—A도 자동으로 연결된 상태입니다.
• 친구 관계, 도로 지도 등 양방향 관계를 표현할 때 사용

  특징

• A에서 B로 갈 수 있으면 B에서 A로도 가능
• 간선 수는 중복 없이 한 번만 기록 (예: A-B 한 줄)

방향 그래프 (Directed Graph)

• 간선에 방향이 있는 그래프
• A → B는 가능하지만, B → A는 아닐 수도 있습니다.
• 인스타그램 팔로우, 웹페이지 링크 등 일방향 관계를 표현할 때 사용

  특징

• 간선이 방향성을 가지므로, 연결 구조가 복잡할 수 있음
• 사이클(순환)이 생기면 특정 정점으로 되돌아오는 경우도 존재

네트워크(Weighted Graph)

각 간선에 가중치(weight) 가 부여된 그래프를 네트워크 또는 가중치 그래프라고 합니다. 예를 들어 도로의 거리, 통신 비용, 연결 속도 등을 표현할 때 사용됩니다.

정점의 차수 (Degree)

그래프에서 인접 정점은 간선으로 직접 연결된 정점을 말합니다. 무방향 그래프에서 정점의 차수 는 인접한 정점의 수입니다. 모든 정점의 차수를 합하면 간선 수의 두 배가 됩니다. 방향 그래프에서는 들어오는 간선의 수를 진입 차수, 나가는 간선의 수를 진출 차수 라고 합니다.

경로와 사이클

• 경로(Path): 한 정점에서 다른 정점으로 이동하는 순서의 나열
• 단순 경로(Simple Path): 같은 간선을 반복하지 않는 경로
• 사이클(Cycle): 시작과 끝이 같은 단순 경로

연결 그래프와 완전 그래프

• 연결 그래프: 모든 정점 쌍 사이에 경로가 존재하는 그래프
• 비연결 그래프: 일부 정점이 다른 정점과 연결되어 있지 않은 그래프
• 완전 그래프: 모든 정점이 서로 직접 연결된 그래프

정점이 n개일 때 간선의 개수 = n × (n - 1) / 2

그래프의 표현 방식

인접 행렬

인접 행렬 (Adjacency Matrix)

인접 행렬(adjacency matrix)은 2차원 배열을 사용하여 그래프를 표현하는 방법입니다.

그래프의 정점 수가 n이라면, n × n 크기의 2차원 배열 M을 생성하고,
정점 i와 j를 연결하는 간선이 존재할 경우 M[i][j] 값을 1로 설정합니다.

특징

• 자기 자신과의 간선(자가 간선)은 허용하지 않으므로,
  인접 행렬의 대각선 성분은 모두 0으로 표시됩니다.
• 무방향 그래프의 경우,
  정점 i와 j가 연결되면 M[i][j]와 M[j][i]가 대칭적으로 1이 됩니다.
• 방향 그래프의 경우,
  정점 i에서 j로의 간선이 있을 때만 M[i][j] = 1로 표시되며,
  일반적으로 대칭이 아닙니다.

인접 리스트

인접 리스트(adjacency list)는 그래프를 효율적으로 표현하는 방법으로,
각 정점에 인접한 정점들을 연결 리스트 형태로 저장하는 방식입니다.

특징

• 각 정점은 헤더 노드를 가지며, 이 헤더 노드들은 배열로 구성되어 있습니다.
• 정점 번호를 배열의 인덱스로 사용하면, 해당 정점의 연결 리스트에 쉽게 접근할 수 있습니다.
• 무방향 그래프의 경우, 간선 (i, j)는
  • 정점 i의 연결 리스트에 j,
  • 정점 j의 연결 리스트에 i
    를 각각 추가하여 양방향으로 표현됩니다.
• 인접 정점이 연결 리스트에 추가되는 순서에 따라 리스트 내 정점의 순서가 달라질 수 있습니다.

그래프 탐색 알고리즘

그래프 탐색은 모든 정점을 한 번씩 방문하는 과정입니다. 대표적인 두 가지 방법은 DFS(깊이 우선 탐색) 과 BFS(너비 우선 탐색) 입니다.

DFS (Depth-First Search)

그래프의 시작 정점에서 출발하여 시작 정점 v를 방문했다고 표시합니다.
그 다음, v에 인접한 정점들 중 아직 방문하지 않은 정점 u를 선택합니다.

• 만약 방문하지 않은 인접 정점이 없다면 탐색을 종료합니다.
• 방문하지 않은 정점 u가 있다면, 그 정점을 새로운 시작 정점으로 하여 DFS를 재귀적으로 수행합니다.
• 탐색이 끝나면 다시 이전 정점으로 돌아와,
  인접한 정점들 중 방문하지 않은 정점이 있는지 확인합니다.
  없으면 종료하고, 있다면 그 정점을 시작 정점으로 하여 DFS를 다시 수행합니다.

BFS (Breadth-First Search)

너비 우선 탐색(BFS)은 시작 정점으로부터 가까운 정점을 먼저 방문하고,
멀리 떨어져 있는 정점을 나중에 방문하는 그래프 순회 방법입니다.

탐색 과정

1. 시작 정점을 큐(Queue)에 넣고, 방문 표시를 합니다.
2. 큐에서 하나의 정점을 꺼내어, 그 정점에 인접한 정점들 중 방문하지 않은 정점을 모두 큐에 넣습니다.
3. 큐가 비어 있을 때까지 이 과정을 반복합니다.

마무리

그래프는 단순한 자료구조 같지만, 지도 탐색, SNS 친구 추천, 네트워크 연결, 인공지능 경로 탐색 등 수많은 실제 서비스의 기반이 됩니다.

출처: 신민기씨 블로그 https://velog.io/@minki091212/%EA%B7%B8%EB%9E%98%ED%94%84Graph

시작하며

오늘은 자료구조 중 하나인 트리(Tree) 에 대해 알아보겠습니다.

트리 너 뭥미

트리는 노드(Node)들이 마치 나무 가지처럼 계층적으로 연결되어 있는 비선형 자료구조입니다.

비선형 자료구조?

비선형 자료구조란 데이터를 순서대로 나열하지 않고, 서로의 관계를 통해 구조적으로 표현하는 방식을 말합니다. 예를 들어 트리와 그래프가 있습니다. 이런식으로 생겼습니다.

선형 자료구조?

그렇다면 선형 자료구조란 무엇일까요? 선형 자료구조란 데이터가 한 줄로 차례차례 정렬되어있는 구조 입니다 각 데이터 요소는 바로 이전 요소와 바로 다음 요소와만 직접적으로 관계를 가집니다. 예를 들어 배열, 연결리스트, 스택, 큐와 같은 것 들이 있습니다. 이런 식으로 생겼습니다.

트리의 기본 용어

• 루트(root) 트리의 맨 꼭대기, 최상위노드 예) 저 사진의 트리의 루트는 A
• 노드(node) 트리의 기본 단위(데이터)
• 단말 노드 자식이 없는 노드(차수가 0인 노드)
• 비단말 노드 적어도 하나의 자식을 갖는 노드
• 간선 노들들을 잇는 선
• 서브트리 하나의 노드와 그 노드들의 자손들로 이루어져있는 것
• 차수 노드가 가지고 있는 자식 노드이 개수 예) D의 차수는 2
• 레벨 각층의 번호 예) B의 레벨은 1
• 높이 어떤 노드부터 가장 깊은 리프 노드까지 경로 길이 예) 저 사진에 나와있는 트리의 높이는 3

  이진 트리

  이진 트리는 단말노드를 제외한 각 노드의 차수가 2개인 것 특징으로는 구현이 편하고 서브트리간 순서가 존재 합니다.

• 왼쪽 자식노드 오른쪽 자식노드 그래서 같은 루트에 같은 자식노드 하나를 가지고 있어도 자식노드의 위치가 각각 왼쪽과 오른쪽으로 다르다면 그 두 트리는 서로 다른 트리가 됩니다.

최대 2개이기 때문에 자식이 1개 있을 수도 있고, 없을 수도 있습니다.

이진 트리의 장점

차수가 2개라 구현이 편하다 서브트리간 순서가 존재

포화 이진 트리

노드가 더이상 들어가지 않는 이진트리의 포화상태 입니다.

완전 이진 트리

왼쪽부터 값이 차례대로 노드에 값이 차있는 상태입니다.

간선 개수 구하기

노그의 개수가 n이면 간선의 개수 n-1 루트는 부모로 가는 간선이 없음 따라서 간선의 개수는 n-1

노드 개수 구하기

높이가 h인 이진트리 경우 최소 h의 노드를 가짐 최대 2^h-1개의 노드를 가짐

class Node:
    def __init__(self, data):
        self.data = data
        self.left = None
        self.right = None

def count_nodes(root):
    if root is None:
        return 0
    return 1 + count_nodes(root.left) + count_nodes(root.right)

root = Node(1)
root.left = Node(2)
root.right = Node(3)
root.left.left = Node(4)

print(count_nodes(root)) 

• Node 클래스: 트리의 기본 구조
• count_nodes() 함수: 재귀로 왼쪽 + 오른쪽 + 현재 노드 수를 합함

이진 탐색 트리 (Binary Search Tree, BST)

정의

이진 탐색 트리(BST)는 왼쪽 서브트리에는 작은 값, 오른쪽 서브트리에는 큰 값이 저장되는 이진 트리(Binary Tree) 구조입니다. 이 규칙을 이용하면 탐색, 삽입, 삭제 연산을 효율적으로 수행할 수 있습니다.

주요 연산

삽입 (Insert)

이진 탐색 트리는 왼쪽 < 루트 < 오른쪽 규칙을 유지해야 합니다. 따라서 새 값을 넣을 때, 현재 노드 값과 비교하면서 왼쪽 또는 오른쪽으로 이동하며 삽입한다.

def insert(tree, i, key):
    while len(tree) <= i:
        tree.append(None)
    if tree[i] is None:
        tree[i] = key
    elif key < tree[i]:
        insert(tree, 2*i+1, key)   # 왼쪽으로 이동
    elif key > tree[i]:
        insert(tree, 2*i+2, key)   # 오른쪽으로 이동

삭제 (Delete)

노드를 삭제할 때는 세 가지 경우를 고려해야 합니다:

• 단말노드인 경우 그냥 삭제
• 자식이 하나인 경우 부모랑 자식이랑 이어줌
• 자식이 둘인 경우 오른쪽 서브트리의 가장 작은 값 즉 자신 바로 다음으로 큰 값으로 대체

하지만 배열 기반 트리에서는 링크를 직접 이어주는 게 어렵기 때문에, 단순히 해당 값 위치를 None으로 바꾸는 방식으로 구현하였습니다.

def delete(tree, i, key):
    if i >= len(tree) or tree[i] is None:
        return
    if tree[i] == key:
        tree[i] = None
    elif key < tree[i]:
        delete(tree, 2*i+1, key)
    else:
        delete(tree, 2*i+2, key)

실행 코드

def insert(tree, i, key):
    while len(tree) <= i:
        tree.append(None)
    if tree[i] is None:
        tree[i] = key
    elif key < tree[i]:
        insert(tree, 2*i+1, key)
    elif key > tree[i]:
        insert(tree, 2*i+2, key)

def delete(tree, i, key):
    if i >= len(tree) or tree[i] is None:
        return
    if tree[i] == key:
        tree[i] = None
    elif key < tree[i]:
        delete(tree, 2*i+1, key)
    else:
        delete(tree, 2*i+2, key)

# 실행
t = []
for x in [50, 30, 70, 20, 40, 60, 80]:
    insert(t, 0, x)
print("삽입 후:", t)

delete(t, 0, 70)
print("삭제 후:", t)

트리의 순회

트리의 모든 노드를 일정한 규칙에 따라 방문하는 과정을 “순회”라고 합니다. 크게 전위, 중위, 후위, 레벨 순회가 있습니다.

전위 순회 (VLR)

루트 → 왼쪽 → 오른쪽 트리 구조를 복사하거나 표현할 때 유용합니다.

def preorder(i):
    if i >= len(tree) or tree[i] is None:
        return
    print(f"[{tree[i]}]", end=' ')
    preorder(2*i + 1)
    preorder(2*i + 2)

중위 순회 (LVR)

왼쪽 → 루트 → 오른쪽 이진 탐색 트리에서 오름차순 정렬된 결과를 얻을 수 있습니다.

def inorder(i):
    if i >= len(tree) or tree[i] is None:
        return
    inorder(2*i + 1)
    print(f"[{tree[i]}]", end=' ')
    inorder(2*i + 2)

후위 순회 (LRV)

왼쪽 → 오른쪽 → 루트 트리를 삭제하거나 메모리 해제할 때 주로 사용됩니다.

def postorder(i):
    if i >= len(tree) or tree[i] is None:
        return
    postorder(2*i + 1)
    postorder(2*i + 2)
    print(f"[{tree[i]}]", end=' ')

# 트리를 배열로 표현
tree = [1, 2, 3, 4, 5, None, 6]

# 전위 순회
def preorder(i):
    if i >= len(tree) or tree[i] is None:
        return
    print(f"[{tree[i]}]", end=' ')
    preorder(2*i + 1)
    preorder(2*i + 2)

# 중위 순회
def inorder(i):
    if i >= len(tree) or tree[i] is None:
        return
    inorder(2*i + 1)
    print(f"[{tree[i]}]", end=' ')
    inorder(2*i + 2)

# 후위 순회
def postorder(i):
    if i >= len(tree) or tree[i] is None:
        return
    postorder(2*i + 1)
    postorder(2*i + 2)
    print(f"[{tree[i]}]", end=' ')


# 실행
print("preorder : ", end='')
preorder(0)
print("\ninorder  : ", end='')
inorder(0)
print("\npostorder: ", end='')
postorder(0)

레벨 순회 (Level-order Traversal)

레벨 순회는 각 노드를 레벨순으로 검사하는 순회 방법입니다. 루트 노드의 레벨이 1이고 아래로 내려갈수록 레벨은 증가합니다. 동일한 레벨의 경우 왼쪽에서 오른쪽으로 방문합니다. 레벨 순회 코드는 큐에 하나라도 노드가 있으면 계속 반복하는 코드로 이루어져 있습니다. 먼저 큐에 있는 노드를 꺼내어 방문한 다음 그 노드의 자식 노드를 큐에 삽입하는 것으로 한번의 반복을 끝냅니다. 이러한 반복을 큐에 더 이상의 노드가 없을 때까지 계속합니다.

class Node:
    def __init__(self, data):
        self.data = data
        self.left = None
        self.right = None

def level(root):
    if root is None:
        return
    q = [root]
    while q:
        n = q.pop(0)
        print(n.data, end=' ')
        if n.left:
            q.append(n.left)
        if n.right:
            q.append(n.right)

root = Node(1)
root.left = Node(2)
root.right = Node(3)
root.left.left = Node(4)
root.left.right = Node(5)

level(root)

• 배열 q[]를 큐처럼 사용
• 루트부터 꺼내서 출력하고
• 왼쪽→오른쪽 자식을 차례로 넣음

시작하며

오늘은 제가 프로젝트를 만들면서 자주 사용하게 될 axios에 대해 공부한 내용을 정리해보려고 합니다. 처음 날씨 api를 불러와 통신할 때는 fetch를 사용했지만 이번에는 보다 간결하고 다루기 쉬운 axios를 적용해보기로 했습니다.

axios란?

axios는 Node.js와 브라우저 모두에서 사용할 수 있는 Promise 기반의 HTTP 요청 라이브러리입니다. 간단히 말해, axios는 서버에 데이터를 요청하거나, 서버가 보낸 응답을 받아오는 도구라고 생각하면 됩니다.

용도 서버에 요청 보냄 -> 서버로부터 응답 받아옴 예시 로그인 요청, 유저 목록 가져오기, 게시글 등록, 클릭한 상품

이 모든 과정에서 axios를 사용할 수 있습니다. 프론트엔드와 백엔드가 데이터를 주고받을 때 필수적으로 활용되는 도구 중 하나입니다.

axios를 사용하는 이유

• 코드가 간결하다 같은 작업을 fetch로 구현하려면 then, JSON 변환, 에러 처리까지 많은 코드를 작성해야 하지만, axios는 비교적 단순하고 직관적인 문법을 제공합니다.

• 자동 JSON 변환 서버에서 JSON 데이터를 주고받을 때 별도의 변환 과정 없이 자동으로 처리됩니다.

• 에러 처리 용이 요청 실패 시 에러 상태 코드, 메시지 등 상세 정보를 쉽게 확인할 수 있어 디버깅할 때 유용합니다.

• 인터셉터 지원 요청 전/후에 특정 로직을 공통으로 넣을 수 있습니다. (예: 토큰 추가, 에러 처리 등)

• 타임아웃 설정 요청에 시간 제한을 걸어두어 일정 시간 내에 응답이 없으면 자동으로 오류 처리가 가능합니다.

기본적인 사용법

import axios from 'axios'

// GET 요청 (데이터 조회)
axios.get('/api/users')
  .then((response) => {
    console.log('유저 목록:', response.data)
  })
  .catch((error) => {
    console.error('에러 발생:', error)
  })

// POST 요청 (데이터 전송)
axios.post('/api/login', {
  id: 'testUser',
  password: '1234'
})
  .then((response) => {
    console.log('로그인 성공:', response.data)
  })
  .catch((error) => {
    console.error('로그인 실패:', error)
  })

axios는 Promise를 기반으로 하므로 .then()과 .catch()로 결과를 다룰 수 있습니다. 하지만 async/await 문법으로 조금 더 깔끔하게 작성할 수도 있습니다.

async/await 문법으로 작성하기

import axios from 'axios'

async function fetchUserList() {
  try {
    const response = await axios.get('/api/users')
    console.log('유저 목록:', response.data)
  } catch (error) {
    console.error('에러 발생:', error)
  }
}

fetchUserList()

async/await을 사용하면 코드 흐름이 동기적으로 보이기 때문에 가독성이 좋아지고 에러 처리 구조도 단순해집니다. 요즘은 대부분 async/await 방식으로 axios를 사용하는 경우가 많습니다.

기본 설정 (axios 인스턴스)

프로젝트가 커질수록 매번 주소를 적는 것이 번거로워집니다. 이럴 때는 axios 인스턴스를 만들어 baseUrl등 여러설정들을 등록해두면 좋습니다.

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://my-project-server.com/api',
  timeout: 5000, // 요청 제한 시간 (ms)
  headers: {
    'Content-Type': 'application/json',
  },
})

export default api

이렇게 만들어둔 인스턴스를 사용하면

import api from './api'

// api.get('/users')
// api.post('/login')

처럼 간단하게 호출할 수 있습니다. 코드 중복이 줄고 유지보수도 쉬워집니다.

프로젝트 적용 중 생긴 문제

백엔드에서는 카테고리 값을 영문 Enum 형태로 관리하고 있었고 프론트엔드는 사용자가 보기 쉽게 한글 카테고리명을 보여주고 있었습니다. 그래서 프론트에서 선택한 한글 카테고리를 영어 코드로 변환해 전송해야 했습니다.

아래는 당시 프론트 쪽 코드의 일부입니다.

const categories = [
  '운동', '맛집', '동물', '여행', '영화',
  '게임', '독서', '공부', '음악', '🔞',
  '웹툰', '외향형', '내향형', '애니메이션'
];

const categoryMap = {
  운동: 'EXERCISE',
  맛집: 'RESTAURANT',
  동물: 'ANIMAL',
  여행: 'TRIP',
  영화: 'MOVIE',
  게임: 'GAME',
  독서: 'READING',  // 문제의 원인
  공부: 'STUDY',
  음악: 'MUSIC',
  '🔞': 'SEXUAL_PLEASURE',
  웹툰: 'WEBTOON',
  외향형: 'EXTROVERT',
  내향형: 'INTROVERT',
  애니메이션: 'ANIMATION',
};

그런데 회원가입 요청을 보낼 때 독서를 선택한 사용자만 회원가입이 실패하는 현상이 발생했습니다. 콘솔에서 확인해보니 API 응답이 500에러를 반환하고 있었습니다.

원인 분석 백엔드에서 사용하는 Enum 이름은 LEADING이었는데 프론트엔드에서는 READING으로 백엔드에서 오타가 나서 잘못 매핑되어 있었습니다.

프론트엔드와 백엔드 코드에 다음과 같은 차이가 있었습니다.

백엔드

프론트엔드

const categoryMap = {
  운동: 'EXERCISE',
  맛집: 'RESTAURANT',
  동물: 'ANIMAL',
  여행: 'TRIP',
  영화: 'MOVIE',
  게임: 'GAME',
  독서: 'READING',
  공부: 'STUDY',
  음악: 'MUSIC',
  '🔞': 'SEXUAL_PLEASURE',
  웹툰: 'WEBTOON',
  외향형: 'EXTROVERT',
  내향형: 'INTROVERT',
  애니메이션: 'ANIMATION',
};

이러한 불일치는 회원가입 시 유효성 검사 단계에서 거부되어 에러로 이어졌습니다. 눈으로 보면 금방 알 수 있지만 실제 프로젝트에서는 이런 부분이 쉽게 놓치기 쉽습니다.

문제 해결

우선 백엔드 Enum 리스트를 정확히 확인한 뒤 프론트에서 사용하는 categoryMap을 수정했습니다.

수정 후 다시 회원가입을 진행하니 문제가 완벽히 해결되었습니다. 회원가입 요청이 정상적으로 서버에 전달되고 선택한 카테고리들도 올바르게 저장되었습니다.

느낀 점

이번 문제를 통해 깨달은 건 프론트엔드와 백엔드 간 데이터 명세 일치가 얼마나 중요한가 또 소통의 중요성을 다시한번 느꼈습니다. 백엔드에서 Enum 값을 조금만 바꿔도 프론트엔드 로직이 바로 깨질 수 있기 때문에 api 명세서가 정확히 정리돼 있어야 합니다.

마치며

이번에 axios를 직접 적용해보면서 단순한 API 요청뿐 아니라 인터셉터, 인스턴스 설정, 에러 처리 등 다양한 기능이 있다는 걸 알게 되었습니다. 처음에는 fetch로도 충분하다고 생각했지만 실제 프로젝트에서는 axios의 편리함이 훨씬 크게 느껴졌습니다.

앞으로 axios 인스턴스와 인터셉터를 좀 더 적극적으로 활용하여 프로젝트를 잘 마무리 하도록 하겠습니다

상태관리란?

컴포넌트마다 데이터를 직접 관리하는 번거러움을 피하고자 데이터를 리액트에서 중요한 데이터를 자동으로 관리하기 위한 데이터 관리를 말합니다.

간단하게 알아보자면

로컬 상태

특정 컴포넌트 내에서만 데이터를 관리 hook과 props를 사용해 관리합니다. 하지만 어플리케이션의 크기가 점점 커질수록 반복 작업이 늘어나 유지보수가 어려워지는 단점이 있습니다.

전역 상태

프로젝트 전체의 상태관리를 총괄하는 방법입니다 대표적으로 Redux, Zustand가 있습니다 전역에서 관리하기 때문에 컴포넌트 상태 값 반영하고 변경하는 것이 가능 합니다 props 과정이 생략돼 작업이 적고 유지보수가 간편해 지는 장점이 있습니다 하지만 상태관리 오류시 나타나는 사이드 이펙트가 커지는 단점이 존재 합니다.

Zustand

가장 많이 쓰이는 zustand에 대해 알아 보겠습니다. zustand를 사용하면 전역 상태를 저장하는 ‘스토어’를 생성하고, 이 스토어의 상태를 컴포넌트에 필요한 만큼만 가져와서 사용합니다.

생명주기

리액트에서 생명 주기란 특정 컴포넌트의 생성 변경 소멸의 과정을 의미합니다. 생성-mount 변경-update 소멸-unmount 라고 지칭 합니다. 이러한 생명주기 이벤트에 연결할 수 있는 함수들을 생명주기 함수 라고 합니다.

Mount (컴포넌트 생성 시)

컴포넌트가 처음 만들어질 때 실행됩니다. 초기 state 값을 설정하고, 필요한 이벤트를 등록합니다. 전달받은 props 값에 따라 state를 업데이트하거나 초기 렌더링을 처리합니다. 외부 API를 호출해 데이터를 가져오고 state에 저장할 수도 있습니다.

Update (컴포넌트 업데이트 시)

props나 state가 변경되면 실행됩니다. 변경된 부분만 다시 렌더링하여 화면을 갱신합니다. 불필요한 연산을 줄이기 위해, 특정 state가 바뀔 때만 관련된 함수가 실행되도록 처리합니다.

Unmount (컴포넌트 제거 시)

컴포넌트가 화면에서 사라질 때 실행됩니다. 타이머나 인터벌 같은 비동기 작업을 정리해 불필요한 연산을 없앱니다. window 등 전역 객체에 등록된 이벤트 리스너를 제거합니다. 컴포넌트가 사라질 때 애니메이션이나 전환 효과를 처리할 수도 있습니다.

컴포넌트가 생성, 업데이트, 소멸될 때마다 개발자가 직접 로직을 처리할 수도 있지만, 이런 작업들을 컴포넌트의 생명주기 이벤트에 미리 등록해두면, 각 단계에 맞는 기능이 자동으로 실행됩니다. 매번 이벤트를 직접 관리하면 비효율적이기 때문에, React의 생명주기 함수를 잘 활용해 코드를 작성하는 것이 좋습니다.

시작하며

리액트를 공부하면서 컴포넌트와 props에 대해 많이 접하게 되었습니다. 그래서 제가 배운 내용을 글로 적어 보려고 합니다!

Props란?

props는 properties(속성)의 약자입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용합니다.

function Welcome(props) {
  return <h1>안녕, {props.name}!</h1>;
}

function App() {
  return <Welcome name="강현" />;
}

Welcome 컴포넌트에서 name값을 사용하고 싶을때 어떻게 할까요? 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회 할 수 있습니다. props는 객체 형태로 전달되며 만약 name 값을 조회하고 싶다면 props.name을 사용하여 조회 할 수 있습니다.

여러 개의 props

props는 여러 개 전달이 가능합니다. 예를 들어 color라는 값을 추가로 전달하면, 다음과 같이 사용할 수 있습니다.

<Hello name="react" color="red" />

컴포넌트에서 props를 반복해서 사용하다 보면, 비구조화 할당 문법이 훨씬 코드를 간결하게 만들어줍니다. 함수의 파라미터에서 props를 구조 분해하면 아래와 같습니다.

function Hello({ name, color }) {
  return <div style={{ color }}>{name}</div>;
}

이렇게 하면 props.name과 props.color 대신, 바로 name, color를 사용할 수 있어 코드가 더욱 읽기 쉬워집니다.

props는 읽기 전용

props는 부모에서 자식으로만 흐르는 데이터 입니다. 즉 자식 컴포넌트는 props를 변경할 수 없습니다. 만약 데이터를 수정해야 한다면, 부모에서 state를 관리하고 props로 다시 내려주는 방식으로 처리해야 합니다.

function CounterDisplay({ count }) {
  return <h2>현재 카운트: {count}</h2>;
}

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <CounterDisplay count={count} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

count는 부모인 Counter에서 관리됨 CounterDisplay는 단지 그 값을 받아서 보여주기만 함

props의 구조 분해 할당

props.name, props.age 처럼 매번 props.을 쓰는 것은 귀찮을 수 있습니다 이럴땐 구조 분해 할당을 사용하면 깔끔 해집니다.

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age}살</p>
    </div>
  );
}

function App() {
  return <UserCard name="강현" age={17} />;
}

props state 차이

props는 읽기 전용입니다 상위에서 하위로만 전달 가능 합니다. 하지만 state는 컴포넌트 내부에서 변경이 가능합니다. props는 상위 컴포넌트에서 관리 합니다. 하지만 state는 해당 컴포넌트 내부에서 관리 합니다. props의 용도는 컴포넌트 간 데이터 전달이고 state의 용도는는 UI의 상태를 동적으로 변경합니다.

props 기본값 defaultProps

props가 전달되지 않았을 때 사용할 기본 값을 저장할 수 있습니다.

function Hello({ name = "게스트" }) {
  return <h1>안녕, {name}!</h1>;
}
Hello.defaultProps = {
  name: "게스트",
};

이 코드에서는 props를 전달하지 않아도 에러 없이 기본값이 표시됩니다.

children props

컴포넌트 태그 사이에 넣은 내용을 참조 해야 할 떄는 props.children을 활용합니다. 예를 들어 Wrapper 컴포넌트 내부에 자식들을 렌더링하려면 아래와 같이 작성합니다.

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return <div style={style}>{children}</div>;
}

이 Wrapper 컴포넌트로 감싼 자식들의 내용을 모두 받아 렌더링 합니다. 이를 활용해 여러 컴포넌트를 그룹화 하고 레이아웃을 간편히 구성 가능 합니다.

마무리

오늘은 props의 개념과 state와의 차이점을 간단하게 알아 보았습니다. React에서 컴포넌트 간의 데이터 전달과 내부 상태관리를 효과적으로 할 수 있습니다. 앞으로 저도 프로젝트에 잘 적용하며 써보도록 하겠습니다. 감사합니다.

시작하며

오늘은 동기,비동기에 대해 알아보겠습니다.

동기란?

한번에 하나씩 순서대로 수행하는 것입니다. 한마디로 번호표라고 생각 하시면 편합니다. 예를 들어 병원에서 번호표를 뽑고 진료를 기다리고 있을 때 자기 차례가 오기 전까지 앞 번호를 뽑은 사람들이 차례대로 한명씩 진료를 받는 방법이 동기라고 생각하시면 됩니다 주로 티케팅 예매 사이트에서 순차대로 먼저 클릭한사람 먼저 서버에 요청을 보낸사람 순으로 처리해줄때 사용합니다 그렇다면 동기 프로그래밍은 무엇일까요 간단한 예를 들어 보겠습니다

console.log("작업 1");
console.log("작업 2");
console.log("작업 3");

이런식으로 간단한 코드를 본다면 console.log를 작업1 ~ 작업3 까지 차례대로 하나씩 코드를 실행 합니다.

비동기란?

비동기란 동시에 여러 작업을 수행하는 것입니다. 예를 들자면 동시에 여러 손님을 받는 식당입니다. 손님이 동시에 여러개의 주문을 넣는 다면 동시에 여러 요리를 해야하기 떄문에 비동기 작업이라고 볼 수 있습니다. 주로 로그인기능을 구현할때 순서 상관없이 처리해줄 때 사용합니다 그렇다면 비동기 프로그래밍은 무엇일까요 간단한 예를 들어보겠습니댜.

console.log('1');

setTimeout(() => {
    console.log('2');
}, 2000);

이 코드는 1이 실행된 이후에 2초뒤에 콘솔창에서 2가 출력되는 코드 입니다.

setTimeout(() => {
    console.log('2');
}, 2000);

console.log('1');

여기서 위 코드 처럼 함수 선언을 먼저 한다면 실행 결과가 2가 먼저 출력되고 2초뒤에 1이 출력될 것 같지만 setTimeout이 비동기 함수이기 때문에 2초가 지나기 전에 먼저 1이 출력되고 2초후 2가 출력됩니다. 한마디로 비동기 작업이기 때문에 타이머가 끝나길 기다리지 않고 먼저 다른 값을 출력합니다.

비동기 콜백

콜백함수란 다른 함수의 인자로 전달되는 함수

function main(callback) {
  callback();
}

main(() => {});

위 코드 처럼 함수를 main에서 호출할 때 인자로 전달 돼는 함수를 콜백함수라고 합니다. 콜백 함수를 전달 받는 함수는 전달 받은 콜백을 함수 내부에서 호출 하도록 구현 되어있습니다.

콜백지옥

콜백함수를 쓴다면 비동기 작업도 순차적으로 실행 가능 합니다

// 1.로그인
function login(username, callback) {
  setTimeout(() => {
    callback(username);
  }, 1000);
}

// 2. 장바구니에 넣기
function addToCart(product, callback) {
  setTimeout(() => {
    callback(product);
  }, 1000);
}

// 3.결제하기
function makePayment(cardNumber, product, callback) {
  setTimeout(() => {
    callback(cardNumber, product);
  }, 1000);
}

login("홍길동", (username) => {
  console.log(`${username}님 안녕하세요`);
  addToCart("시계", (product) => {
    console.log(`${product}를 장바구니에 담았습니다`);
    makePayment("0000000000000000", product, (cardNumber, item) => {
      console.log(`${cardNumber.slice(0, 6)}로 ${product}를 구매했습니다`);
    });
  });
});

다만 이런식으로 코드를 짜게 된다면 가독성도 안좋을 뿐만 아니라 콜백함수를 계속 호출하는 콜백지옥에 빠지게 됩니다 또한 유지보수도 힘들어지게 됩니다.

그렇다면 이러한 문제를 어떻게 해결 할까요? 바로 Promise를 사용하면 됩니다.

Promise

정의

Promise는 비동기 작업의 상태(진행중, 성공, 실패)를 나타내는 객체입니다. 비유하자면 비동기 작업이 끝나면 결과값이나 에러가 들어가는 상자와 같습니다. 세 가지 상태(pending, fulfilled, rejected)가 있으며 작업의 결과에 따라 상태와 값이 결정됩니다. pending은 대기 상태 result는 undefined fulfillde는 성공했을 때 완료상태 result는 결과값 rejected는 실패했을 때 오류상태를 나타냄 result는 error

사용법

new Promise(익시큐터 함수)로 생성할 수 있습니다. 익시큐터 함수는 두 개의 인자(resolve, reject)를 받으며 비동기 작업이 성공하면 resolve, 실패하면 reject를 호출하면 됩니다. 생성 즉시 익시큐터 함수가 실행됩니다.

익시큐터 함수는 new Promise()에 괄호 안에있는 함수를 뜻합니다

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({ name: '철수' });
  }, 1000);
});

비동기 함수로 활용

비동기 작업마다 Promise를 반환하는 함수로 만들고 원하는 시점에 호출해 비동기 작업을 실행할 수 있습니다. 함수 내부에서 new Promise로 작업을 변환하고 return하면 됩니다.

then, catch, finally

then: Promise가 성공(fulfilled)하면 실행되는 콜백을 등록합니다. catch: 실패(rejected) 시 에러를 처리합니다. finally: 작업 성공/실패와 관계없이 무조건 실행되는 마지막 후처리 콜백을 지정할 수 있습니다.

getData()
  .then((data) => { console.log(data); })
  .catch((err) => { console.log(err); })
  .finally(() => { console.log('작업 완료'); });

Promise Chaining

then의 반환값이 또 다른 Promise라면 다음 then에서 결과가 이어받아집니다. 여러 비동기 작업을 순차적으로 이어붙여 관리할 수 있어 '콜백 지옥'을 예방합니다.

getData()
  .then((data) => getMoreData(data))
  .then((moreData) => processData(moreData))
  .catch((err) => handleError(err));

Fetch API와 Promise

fetch란 JavaScript에서 서버와 데이터를 주고받기 위해 사용된다. fetch 등 많은 현대 웹 API는 Promise를 반환합니다. then/catch/finally와 chaining으로 비동기 데이터 요청 및 처리 로직을 간결하게 구성할 수 있습니다. 예시코드

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log("에러발생");
  })
  .finally(() => {
    console.log("마무리 작업");
  });

사진 차럼 fetch로 링크에있는 test서버의 데이터들을 불러오고 콘솔에서 출력 혹시 오류가 발생한다면 .catch로 에러 검출 finally로 꼭 실행되야하는 후처리 작업

Promise로 가독성 좋은 코드 짜기

promise

// 1.로그인
function login(username) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (username) {
        resolve(username);
      } else {
        reject(new Error("아이디를 입력해주세요"));
      }
    }, 1000);
  });
}

// 2.장바구니에 넣기
function addToCart(product) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (product) {
        resolve(product);
      } else {
        reject(new Error("장바구니에 넣을 상품이 없어요"));
      }
    }, 1000);
  });
}

// 3.결제하기
function makePayment(cardNumber, product) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (cardNumber !== 16) {
        reject(new Error("잘못된 카드 번호 입니다."));
        return;
      }

      if (!product) {
        reject(new Error("결제할 상품을 넣어 주세요"));
        return;
      }
      resolve(product);
    }, 1000);
  });
}

login("홍길동")
  .then((username) => {
    console.log(`${username}님 환영합니다`);
    return addToCart("시계");
  })
  .then((product) => {
    console.log(`${product}를 장바구니에 넣었어요`);
    return makePayment("0000000000000000", product);
  })
  .then((product) => {
    console.log(`${product}를 구매했습니다`);
  });

비동기 콜백

// 1.로그인
function login(username, callback) {
  setTimeout(() => {
    callback(username);
  }, 1000);
}

// 2. 장바구니에 넣기
function addToCart(product, callback) {
  setTimeout(() => {
    callback(product);
  }, 1000);
}

// 3.결제하기
function makePayment(cardNumber, product, callback) {
  setTimeout(() => {
    callback(cardNumber, product);
  }, 1000);
}

login("홍길동", (username) => {
  console.log(`${username}님 안녕하세요`);
  addToCart("시계", (product) => {
    console.log(`${product}를 장바구니에 담았습니다`);
    makePayment("0000000000000000", product, (cardNumber, item) => {
      console.log(`${cardNumber.slice(0, 6)}로 ${product}를 구매했습니다`);
    });
  });
});

쇼핑몰 로그인 → 장바구니 담기 → 결제 등 순차 작업에 Promise chaning을 사용하면 가독성 좋은 코드로 쉽게 관리할 수 있습니다. 각 단계에서 발생 가능한 에러마다 catch를 중간중간 넣어 유연하게 에러를 처리할 수도 있습니다.

Async & Await

Async란?

async 키워드는 함수를 비동기 함수로 만들어 줍니다. async가 붙은 함수는 항상 Promise가 반환됩니다. 함수 내부에서 일반 값을 반환하면 그 값이 자동으로 Promise로 변환되어 반환됩니다. 내부에서 직접 Promise를 반환하면 중첩되지 않고 그대로 반환됩니다. 예시

async function getUser() {
  return '안녕';
}

→ 내부적으로 Promise.resolve('안녕') 형태로 반환됩니다.

Await란?

await는 Promise가 완료될 때까지 기다리는 키워드입니다. 반드시 async 함수 내부에서만 사용할 수 있습니다. 해당 Promise가 resolve될 때까지 코드를 일시 중단하고 결과값을 받아 변수에 담습니다. 예시

function networkRequest() {
  return new Promise((resolve) => {
      setTimeout(() => {
      console.log('데이터를 받아왔습니다');
      resolve('서버1');
    },2000);
  })    
}

async function getUser() {
  const result = await networkRequest();
  console.log(result);
}

const user = getUser();
user.then((name) => console.log(name));

await은 비동기 작업이 완료될 때까지 기다려서 코드가 마치 동기적으로 실행되는 것처럼 보입니다.

에러 처리

try...catch 문을 활용하면 비동기 함수 내부의 에러를 쉽게 처리할 수 있습니다. await으로 호출되는 함수에서 throw가 발생하면 catch 블록으로 전달됩니다. 예시

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('에러 발생:', error.message);
  }
}

에러가 발생하면 코드가 멈추지 않고 안전하게 처리됩니다.

fetch api와 await&async

await&async

async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users")
  const data = await response.json();
  console.log(response);
}  

fetchData();

promise

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log("에러발생");
  })
  .finally(() => {
    console.log("마무리 작업");
  });

이 코드는 URL에서 사용자 데이터 JSON을 비동기적으로 받아와서 데이터가 완전히 로드된 후 콘솔에 출력하는 기능을 합니다. 이처럼 async와 await를 쓰면 복잡한 Promise 체인 없이도 마치 동기 처리하듯 깔끔하고 직관적인 비동기 코드 작성이 가능합니다.

마치며

오늘은 비동기,동기 , 콜백함수, promise, async, await에 대해 알아보았습니다. promise개념이 조금 어려웠지만 여러 영상이나 블로그 찾아보면서 공부 해보았습니다. promise와 async,await을 잘 사용하면 비동기 프로그래밍을 효율적이게 구현할 수 있을것 같습니다. 글 읽어주셔서 감사합니다 피드백 많이 해주세요!

시작하며

자바스크립트에서 함수를 선언하는 방식은 다양하지만 특히 일반 함수와 화살표 함수는 자주 비교되는 개념입니다. 이 글에선 두가지의 차이점과 화살표 함수를 사용하는 이유를 정리해보겠습니다.

함수 선언 방식

일반 함수

const add = function(a, b) {
    return a + b;
};

• function 키워드를 사용해 선언
• 함수 이름을 가질 수도 있고, 익명 함수로 표현식에 할당할 수도 있음

  화살표 함수

const add = (a, b) => {
    return a + b;
};

• function 키워드 대신 =>기호를 사용하여 함수를 간결 하고 간단하게 작성 가능
• 한줄 반환 시 return과 {} 생략 가능

  const greet = (name) => `Hello, ${name}!`;

  위 코드 처럼 return 키워드를 생략할 수 있고 이때 중괄호{} 는 생략해야 합니다. 또, 중복된 매개변수 이름을 선언 할 수 없습니다.

  화살표 함수와 일반 함수의 차이

  화살표 함수와 일반 함수의 차이에 대해 알아보겠습니다.

this 바인딩 차이

먼저 바인딩이란 쉽게 말해서 변수, 함수, 객체 등이 어떤 값이 연결되는 것을 의미합니다. 즉 함수가 실행될 때 this가 무엇을 가리키는지를 결정하는 연결 과정을 바인딩이라고 합니다.

일반함수

window.a = 10;

function foo() {
  console.log(this.a);
}

foo(); // 10

기본 바인딩이 적용될 경우 this는 전역 객체에 바인딩된다.

화살표 함수

const obj = {
  name: "JS",
  arrow: () => console.log(this.name),
};

obj.arrow(); // undefined (전역 this)

화살표 함수는 자신만의 this를 가지지 않고 정의된 위치의 this를 그대로 사용합니다. 따라서 eventListener나 콜백에서 this를 헷갈리지 않고 사용할 수 있습니다.

arguments 객체

arguments란 프로그래밍에서 함수가 호출될 때 함수에 전달되는 실제 값을 의미합니다.

일반 함수

function normalFunc(a, b) {
  console.log(arguments); // [1, 2, 3]
}
normalFunc(1, 2, 3);

화살표 함수

const arrowFunc = (...args) => {
  console.log(args);  // {0: 1, 1: 2, 2: 3}
};
arrowFunc(1, 2, 3);

일반 함수는 함수 안에서 전달된 모든 인수를 arguments 객체로 확인할 수 있습니다. 반면 화살표함수는 arguments가 없고 대신 ``...args`나머지 매개변수를 사용해야 합니다.

생성자 함수

생성자 함수란 new키워드를 사용해 객체를 만들어주는 함수입니다.

일반 함수

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = new Person("Tom", 20);
console.log(p1.name); // "Tom"

이름 첫 글자를 대부분 대문자로 씁니다. 코드 안에서 this는 새로 만들어질 객체를 가리킵니다.

화살표 함수

const PersonArrow = (name, age) => {
  this.name = name;
  this.age = age;
};

const p2 = new PersonArrow("Tom", 20); // 에러

화살표 함수에는 자체적인 this가 없기 때문에 new와 함께 쓰면 에러가 납니다.

화살표 함수 장점

문법이 간결하다

가장 큰 이유 중 하나는 짧은 문법입니다. 위에서 설명 한것 처럼 function 키워드가 필요없고 한 줄로 반환할 때 {} 와 return 도 생략 가능 합니다.

콜백 함수에서 깔끔

map, filter, forEach 같은 배열 매서드에서 특히 유용합니다.

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

반복되는 짧은 콜백 함수는 화살표 함수로 쓰면 가독성이 더 좋아집니다.

마치며

오늘은 화살표 함수와 일반함수의 차이점 그리고 왜 쓰는지에 대해 알아보았습니다. 화살표 함수는 짧고 직관적입니다 따라서 상황에 맞게 잘 쓰면 가독성을 정말 좋아지게 할 수 있습니다. 글 읽어주셔서 감사합니다. 피드백 많이 해주시면 감사하겠습니다.

오늘은 React를 배우며 아직 기본기가 제대로 안잡힌거 같은 JS복습 할겸 많이 쓰이는 JS 함수들에 대해서 알아보겠습니다

함수란?

함수는 특정 작업을 수행하도록 묶어 놓은 코드 블록입니다. 쉽게 말하면 필요할 때 불러 쓸 수 있는 코드 묶음 이라고 생각 하시면 됩니다. 함수는 코드 재사용, 가독성 향상, 유지보수를 위해 없어서는 안 되는 존재입니다.

다음은 기본적인 함수 예시입니다

// 함수 선언
function sayHello(name) {
  return `hello ${name}`;
}

//함수 호출
console.log(sayHello("function")); //  hello function

function 함수 선언 name 매개변수 -> 호출할때 전달할 값 return 함수가 돌려주는 결과값

함수 선언 방법

대표적으로 3가지 소개해 보겠습니다

1. 선언식 함수

function add(a, b) {
  return a + b;
}

• function 키워드로 생성
• hoisting이 적용돼 어디서든 호출 가능 호이스팅이란 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상입니다

  2. 표현식 함수

  const add = function(a, b) {
  return a + b;
  };

• 변수에 함수를 담는 방식
• 선언 이후에만 호출 가능

3. 화살표 함수

const add = (a, b) => a + b;

-> 이런식으로 짧고 간결하게 작성 가능 하다는 장점이 있습니다.

자주 쓰이는 함수

문자열 관련 함수

trim()

문자열 양쪽끝에 공백을 제거

let str = "   hello world   ";
console.log(str.trim()); // 출력: "hello world"

사용 에 : 로그인 입력 창에서 사용자가 실수로 공백을 넣었을때

toUpperCase()/toLowerCase()

문자열을 모두 대문자/소문자로 변환

let word = "JavaScript";
console.log(word.toUpperCase()); // 출력: "JAVASCRIPT"
console.log(word.toLowerCase()); // 출력: "javascript"

사용 예 : 검색 기능에서 대소문자 구분없이 검색할 때

includes

문자열에 특정 값이 포함 돼 있는지 확인

let sentence = "I love JavaScript!";
console.log(sentence.includes("love")); // true
console.log(sentence.includes("hate")); // false

사용 예 : 키워드 검색, 비밀번호 검증(특정 문자 포함 여부)

slice(start, end)

문자열의 일부를 잘라서 반환

let text = "Hello JavaScript";
console.log(text.slice(0, 5)); // 실행: "Hello"
console.log(text.slice(6));    // 실행: "JavaScript"

사용 예: 문자열 일부만 보여주고 싶을 때 게시글 미리보기 기능

배열 관련 함수

forEach()

배열의 각 요소를 순회 하며 실행

let arr = [1, 2, 3];
arr.forEach(num => console.log(num));
// 실행
// 1
// 2
// 3

사용 예: 단순 반복작업 유용

map()

배열의 각 요소를 변환하여 새로운 배열을 반환

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2);
console.log(doubled); // 실행: [2, 4, 6]

사용 예: 데이터를 변환해서 새로운 리스트를 만들 때

filter()

조건에 맞는 요소만 걸러서 새로운 배열을 반환

let nums = [1, 2, 3, 4, 5];
let even = nums.filter(n => n % 2 === 0);
console.log(even); // 실행: [2, 4]

reduce()

배열을 순회하며 누적 값을 계산

let nums = [1, 2, 3, 4, 5];
let sum = nums.reduce((acc, cur) => acc + cur, 0);
console.log(sum); //실행: 15

사용 예: 합계,평균,누적 계산 할 때

find()

조건을 만족하는 첫번째 요소 반환

let users = [
  { id: 1, name: "JS" },
  { id: 2, name: "함수" }
];
console.log(users.find(user => user.id === 2));
// 실행: { id: 2, name: "함수" }

사용 예: 특정 아이디, 특정 조건에 맞는 첫 데이터를 가져올 때

수학 관련 함수

Math.floor(), Math.ceil(), Math.round()

• floor(): 내림
• ceil(): 올림
• round(): 내림

  console.log(Math.floor(4.9)); // 4
  console.log(Math.ceil(4.1));  // 5
  console.log(Math.round(4.5)); // 5

Math.random()

0 이상 1 미만의 난수를 반환

console.log(Math.random()); // 예: 0.2743...
console.log(Math.floor(Math.random() * 10) + 1); // 1~10 사이 랜덤 숫자

사용 예: 랜덤 추첨, 주사위 게임 등에 활용됩니다

Math.max() / Math.min()

배열이나 여러 숫자 중 최대값/최솟값을 구합니다

console.log(Math.max(3, 10, 7)); // 실행: 10
console.log(Math.min(3, 10, 7)); // 실행: 3

날짜 관련 함수

Date()

• getFullYear() : 연도 가져옴
• getMonth() : 달 가져옴
• getDate() : 일 가져옴
• getDay() : 요일 가져옴
• toLocaleDateString() : 몇년 몇월 며칠 가져옴

  let now = new Date();
  

console.log(now.getFullYear()); // 2025 console.log(now.getMonth() + 1); // 9 (월은 0부터 시작) console.log(now.getDate()); // 6 console.log(now.getDay()); // 요일 (0=일요일 ~ 6=토요일) console.log(now.toLocaleDateString()); // "2025. 9. 6."

``` 사용 예: 블로그 게시글 날짜, 예약시스템, 채팅 타임스탬프 등 활용

마치며

오늘은 함수 선언방법 그리고 어떤 종류가 있는지 간단하게 알아보았습니다. 이렇게 내장함수를 잘 활용하면 복잡한 반복문을 줄이고 코드 가독성을 크게 높일 수 있습니다. 여기에 적지 못한 수많은 함수가 있습니다 그건 제가 또 공부해서 점차 추가해보도록 하겠습니다. 부족한 점 있다면 피드백 많이 해주세요!! 글 읽어주셔서 감사합니다.

안녕하세요 오늘은 깃 브랜치 전략 'Git Flow'에 대해 알아 보겠습니다. 그전에 먼저 깃 브랜치 전략은 뭘까요? 바로 알아보도록 하겠습니다.

Git Branch 전략?

여러 개발자가 더 효율적이고 효과적으로 협업 하기위해 git branch에 규칙을 정하고 저장소를 잘 활용하기 위한 workflow를 정의하는 것 입니다. workflow란 특정 순서에 따라 발생하는 반복적인 프로세스와 작업을 관리하는 시스템입니다.

그럼 왜 git branch 전략을 쓸까요? 여러 개발자가 협업할때 중요합니다. 각자 다른 기능을 담당하는 브랜치를 사용하여 작업하면, 개발 중인 기능이나 수정사항이 서로 독립적이게 되며 영향을 주지 않고 동시에 진행될 수 있습니다.

Git Flow 전략

그럼 이제 git branch 전략에 가장 핵심 가장 많이 쓰는 git flow 전략을 알아볼게요.

브랜치 종류는 5가지가 있습니다.

• master: 제품 출시 버전을 관리하는 메인 브랜치
• develop: 다음 출시 버전을 위해 개발하는 브랜치
• feature: 새로운 기능을 개발하는 브랜치
• release: 다음 출시 버전을 준비하는 브랜치
• hotfix: 출시된 제품의 버그를 고치기 위한 브랜치

여러 사람이 함께 협업할때는 이러한 git flow 전략이 중요 합니다. 자세히 살펴보면 master branch가 사용자들이 쓰는 버전?main?이라고 생각 하시면 편합니다. master에서 develop 브랜치를 파서 거기서 feature 브랜치를 팝니다. 그리고 feature에서 기능 개발을 하다 완성 되었으면 develop으로 push후 1차 test를 합니다. 이상이없다면 바로 master로 merge해도 됩니다. 하지만 정말 큰 프로젝트라면 눈에 안보이는 작은 오류가 있을 수도 있습니다. 그렇다면 develop에서 release브랜치를 팝니다. 마지막으로 최종 test를 한뒤 안전하게 master로 push 하면 됩니다. 하지만 master로 merge 한 후에 충돌이나 버그가 났다면 이때는 긴급하게 바로 고쳐야하기 때문에 복잡한 develop feature release 과정을 거치지 않고 바로 hotfix브랜치를 파서 고친후 master로 merge 합니다.

마무리

오늘은 개발자가 협업을 할때 꼭 알아야하는 git branch 전략 그중에서도 git flow에 대해 알아 보았습니다. git branch 전략에는 github flow, gitlab flow등 여러가지 전략이 있습니다. 이것은 제가 더 공부를 열심히 한 뒤 꼭 추가하고 또 협업할때 꼭 유용하 써보겠습니다. 글 읽어주셔서 감사합니다.

출처 : Git Branch 전략 비교 - Git Flow vs GitHub Flow

시작하며

저는 오늘 DOM에 대한 개념을 또 VDOM은 뭔지 간략하게 소개 해보려고 합니다. 부족한 점이 많을 수도 있지만 그런점 피드백 많이 해주시면 감사하겠습니다.

DOM 이란?

문서 객체 모델 DOM은 *HTML,XML 문서 구조를 객체로 표현한 것입니다. * DOM의 풀네임은 Document Object Model 이라고 합니다.

그럼 '문서 구조'는 무엇일까요? HTML은 head body등 여러 태그가 문서구조를 이루고 있습니다. HTML 요소의 계층을 반영해서 만든 객체가 DOM입니다. HTML 문서를 객체로 표현하면 JavaScript와 같은 스크립트 및 프로그래밍 언어가 웹페이지에 접근할 수 있습니다. 즉 DOM은 HTML로 구성된페이지와 스크립트와 같은 프로그래밍 언어를 연결시켜 주는 역할을 합니다.

DOM 접근

각 언어마다 DOM에 접근하는 방법은 다 다릅니다. java script에서는 document.getElementByld("#id")매서드가 있습니다. html 코드에서 id선택자를 사용해 불러오는 것입니다.

예시코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="darkMode.css" />
  </head>
  <body>
    <h1>안녕하세요</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
    <h2>자바스크립트 연습중</h2>

    <input type="button" value="다크모드" id="darkModeBtn" />
    <input type="button" value="라이트모드" id="lightModeBtn" />
  </body>
  <script src="darkMode.js"></script>
</html>

const darkModeBtn = document.getElementById("darkModeBtn");
const lightModeBtn = document.getElementById("lightModeBtn");
const body = document.querySelector("body");

darkModeBtn.addEventListener("click", function () {
  body.style.backgroundColor = "black";
  body.style.color = "white";
});

lightModeBtn.addEventListener("click", function () {
  body.style.backgroundColor = "white";
  body.style.color = "black";
});

첫번째 코드는 html 이고 두번째는 js 입니다. js,html 코드를 살펴 보시면 html 코드에 input type="button"의 id인 darkModeBtn을 getElementById로 js에 가져와서 click 이벤트로 버튼이 클릭시 바탕화면 폰트 컬러가 각각 다크 모드에 맞게 변하는 코드 입니다.

DOM의 계층 구조

DOM은 HTML 문서의 구조의 계층을 표현하는 객체로 'tree(트리)구조'를 가집니다. 이때 트리구조란 노드들이 나무 가지처럼 연결된 자료구조입니다. 트리구조는 나무를 거꾸로 뒤집어 놓은 모양과 유사합니다. 예시코드와 함께 설명을 해보겠습니다.

  <body>
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  </body>
</html>

예시 코드를 트리구조 처럼 표현 하면 다음과 같습니다.

• html은 document의 자식
• body는 html의 자식
• div는 body의 자식
• h1과 p는 div의 자식, 서로 형제 이런식으로 구성 됩니다.

브라우저에서의 작동

브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(데이터)를 생성 합니다. 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 랜더링 합니다. 또한, JavaScript를 사용해 웹 화면에 콘텐츠를 추가, 수정, 삭제하고 이벤트를 처리할 수 있도록 프로그래밍 인터페이스 제공을 합니다.

Vitural DOM(VDOM) 뭘까??

가상 DOM(Virtual DOM)은 웹 개발에서 UI 업데이트 성능을 향상시키기 위해 사용되는 기술입니다. 실제 DOM의 복사본을 메모리에 유지하고 변경 사항이 있을 때마다 전체 DOM을 다시 렌더링하는 대신 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 반영하는 방식으로 작동합니다 이 방식 덕분에 전체 DOM을 매번 새로 고치지 않고, 필요한 부분만 효율적으로 업데이트할 수 있습니다.

Virtural DOM은 왜 쓸까요?

일반 DOM은 직접 수정하는게 느립니다 예를 들어 글자 하나 바꾸려고 해도 브라우저는 레이아웃 다시 계산하고 화면을 다시 그려야 해서 성능이 떨어질 수 있습니다

리액트는 이런 문제를 줄이려고 Virtual DOM (VDOM)이라는 방식을 씁니다.

React에서 DOM 동작

리액트 컴포넌트에서 데이터가 변하면 어떻게 될까요? 보통이라면 브라우저는 바로 DOM을 수정해야 하지만 리액트는 그렇게 하지 않습니다. 리액트는 먼저 Virtual DOM(가상 DOM)이라는 걸 업데이트해요. DOM을 바로 건드리지 않고 메모리 속에서 가상의 DOM을 만들어놓고 거기에 변화를 적용하는 겁니다. 또한 리액트는 바뀐 부분만 DOM에 반영합니다. 글자 하나가 달라졌다면 그 글자만 고치고 버튼 색상만 변했다면 버튼 색상 부분만 수정합니다. 전체 화면을 다 새로 그리는 게 아니라 꼭 필요한 부분만 살짝 고치는 방식으로 동작하는 겁니다.

마치며

오늘은 프론트엔드개발자라면 한번쯤은 들어봤을 DOM 그리고 VDOM에 대해 알아보았습니다. 아직 부족한 점, 부실한 점 많지만 앞으로 많은 피드백 받으며 성장하는 개발자 되도록 하겠습니다.

출처 : https://docs.tosspayments.com/resources/glossary/dom 출처 : 유노코딩 DOM이란 뭘까요? 초 짧은 설명..!