본문 바로가기

전체 글

React Native 이벤트 처리 리액트 네이티브에서는 이벤트가 처리되는 방식이 리액트와는 조금 다르다.드롭다운 컴포넌트를 구현하고 사진과 같이 드롭다운이 열려있을때 바깥 영역을 터치하면 닫히도록 하는 hook을 구현하는 중이었다. 드롭다운은 보통 페이지 내부의 메뉴 버튼같이 toggle 가능한 아이콘을 클릭하면 나오는 UI이기때문에 드롭다운 컴포넌트는 컴포넌트 트리상 페이지 컴포넌트 내부에 위치해 있을 것이다.따라서 영역 바깥을 터치했을때 닫히게 하려면 이벤트 버블링 개념을 이용해서 구현해야될 것이다. 이벤트 버블링❓특정 화면 요소에서 이벤트가 발생했을 때, 그 이벤트가 최상위 부모 요소를 만날 때까지 DOM 트리(컴포넌트 트리)를 따라 위로 올라가며 전파되는 현상. 기존에 리액트에서는 이벤트 처리를 보통 event 객체에서 처리.. 더보기
큐(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).. 더보기

티스토리툴바