본문 바로가기

분류 전체보기

큐(queue) 큐는 '줄을 서다'라는 뜻을 가지고 있으며 먼저 들어간 데이터가 먼저 나오는 자료구조이다. 생활 속의 예시를 살펴보자면 맛집에서 줄을 섰다고 했을 때, 먼저 줄을 선 사람이 먼저 입장하는 원리다. 따라서 선입선출 또는 FIFO(First In First Out)의 특성을 가진 자료구조이다. 큐는 스택과 마찬가지로 삽입하는 연산(push), 꺼내는 연산(pop)을 통해 데이터를 관리한다. 데이터가 삽입되고 빠져나가는 과정을 그림으로 살펴보자면 아래와 같다. 숫자 2, 5를 push하고, pop 할때도 먼저 들어온 2, 5 순으로 제거된다. 큐의 활용 큐는 여러 프로그래밍 언어에서 상당히 활발하게 사용된다. 대표적으로 여러 이벤트가 발생했을 때 발생한 순서대로 처리할 때 큐가 활용된다. 작업 .. 더보기
배열 배열은 하나의 변수 이름으로 동일한 타입의 데이터를 그룹화하여 관리할 수 있고, 인덱스라는 것으로 원하는 데이터에 임의 접근할 수 있다는 장점이 있는 자료형이다.배열 선언배열을 선언하는 방법은 여러가지 있다.이름이 arr이고 길이가 6인 정수형 배열을 선언하는 3가지 방법을 예제로 알아보자. 리터럴const arr = [0, 0, 0, 0, 0, 0]; 배열 생성자const arr1 = new Array(6); // [undefined, undefined, ...]const arr2 = [...new Array(6)].map((_, i) => i + 1); // [1, 2, 3, 4, 5, 6] Array.fill() 함수const arr = new Array(6).fill(0); // [0, 0, 0,.. 더보기
Next.js app router 확장 프로그램 하이드레이션 에러 과제 테스트 도중 서버 컴포넌트로 상품 목록 API를 불러와서 테스트로 상품 타이틀만 map으로 렌더링 하던 도중 하이드레이션 에러가 났다. 코드는 아래와 같이 정말 기본적인 코드였다.// src/utils/apis/fetchProducts.tsexport async function fetchProducts() { const res = await fetch('https://someapi.com/products', { method: 'GET', headers: { 'Content-Type': 'application/json', Accept: 'application/json', }, cache: 'force-cache', }) if (!res.ok) { th.. 더보기
웹 접근성을 고려하여 AI 채팅에 적용하기 웹 접근성❓웹 접근성(Web Accessibility) 이란 모든 사용자가 모든 기기에서 웹 플랫폼 상의 정보에 쉽게 접근할 수 있도록 정의해 놓은 전문적인 규칙들이다. 비장애인은 웹사이트를 이용할 때 전혀 불편함 없이 이용하지만, 장애인은 그렇지 않다. 눈으로 볼 수 없는 경우도 있을 것이고, 마우스를 사용하지 못하는 경우도 있을 것이다. 최근에 개발 동료가 웹 접근성에 대해서 알려줬고 스크린리더에 대해서도 처음 알게 됐다. 그래서 현재 개발 중인 서비스에 적용해 보기로 했다. 우선 마우스를 사용하지 못하면 어떻게 웹 사이트를 사용해야 될까? 키보드 만으로 사용할 수 있도록 개발해야 된다. 키보드로 웹사이트를 사용할때는 클릭 가능한 요소들을 Tab 버튼으로 탐색하게 된다. , 등의 HTML 태그나.. 더보기
AI 기능 구현 중 발생한 CORS 에러 해결 트러블 슈팅CORS 🤦🏻‍♂️우선 결과적으로 이번 프로젝트에 app router를 선택하길 정말 잘했다. Naver Clova Studio를 이용하여 채팅, 대화 요약, 키워드 추출 기능에 AI를 사용했는데, 이때 Naver Clova Studio API로 요청을 보내게 된다. 처음에는 클라이언트에서 요청을 보냈었는데, CORS 에러가 떴다.보통 Open API가 아닌 기업용 API는 CORS 허용 설정을 일부러 막아놓는 경우가 많다. CORS가 무엇인지는 아래의 글을 참고하길 바랍니다. CORS란? feat. SOP, Preflight Request와 Simple RequestCORS ❓CORS를 알아보기 앞서 오리진과 SOP를 먼저 알아보자.오리진(origin)사진과 같이 오리진은 프로토콜, 호스.. 더보기
Next.js AI 채팅, 대화 요약, 키워드 추출 기능 구현 해커톤에서 진행한 프로젝트에서 AI 기반 채팅 서비스를 만들어야 했다.네이버 AI를 통해 채팅, 대화 요약, 키워드 추출 기능을 구현하는 과정을 기록해 본다. AI 채팅 flow채팅 기능은 Naver HyperCLOVA X 모델을 사용하여 구현했다. 채팅 기능을 연결하는데 필요한 Chat Completions API 문서를 읽어보니 아쉽게도 자바스크립트 요청 예시는 없었다. curl 기반의 요청 예시를 Next.js에서 사용할 수 있게끔 형식에 맞게 변환했다. role: 'system'은 프롬프트를 작성해 아이들의 친구 “토리”라는 페르소나 역할을 부여하는 역할을 해주는 시스템 프롬프트다.role: 'user'에는 유저가 작성한 채팅 내용을 전달받아 API에 요청한다. 리스폰스로는 시스템 프롬프트 맥락에.. 더보기
React Hook Form + Zod로 복잡한 유효성 검사 처리 백오피스 서비스를 구현하면서 담당 페이지인 회의실 예약 기능에서 복잡한 폼 유효성 검사를 해야됐다. 사진과 같이 회의 시간이 겹칠때라던지 각 인풋에 대해서 유효성 검증을 진행한다. 따라서 폼 관련 기능을 간편하게 사용할 수 있고, 비제어 컴포넌트 방식으로 리렌더링 방지까지 도와주는 React-Hook-Form을 사용하고 Zod와 결합해 스키마 기반 유효성 검증을 하기로했다. useFormuseForm은 리액트 훅 폼에서 제공하는 폼을 쉽게 관리할 수 있는 훅이다. 각 필드를 살펴보자.// ReservationForm.tsxconst methods = useForm({ defaultValues: defaultReservation, resolver: zodResolver(reservationSchema).. 더보기
TanStack Query로 낙관적 업데이트 구현 백오피스를 개발하면서 사내에 있는 회의실을 예약할 수 있는 회의실 예약 페이지를 담당했다. 사진과 같이 타임라인 기반의 UI로 30분 단위로 나뉘어있는 박스를 클릭하면 열리는 드로워를 통해 회의실을 예약할 수 있다. 회의실 예약 기능을 구현했을때 초기에는 예약 확인 모달과 우측 드로워는 먼저 닫히는데, 서버에서 아직 데이터를 불러오는 중이어서 예약 막대가 비어있다가 데이터가 불러와진 후에 보라색으로 나타났었다. 이게 생각보다 거슬려서 프론트엔드단에서 더 낫게 할 수 있는 방법이 뭐가 있을지 고민하다가 좋아요 기능에 많이 사용하는 낙관적 업데이트(Optimistic Updates)를 적용해 보기로 했다. 프로젝트에서 TanStack Query를 사용하고 있었고, TanStack Query에는 낙관적 업데이.. 더보기

티스토리툴바