오블완
-
1. 들어가며2024년 9월 초 즈음에 OpenAI에서 기술 스택 전환에 대한 내용이 화두가 된 적이 있습니다. 생태계가 꾸준히 RSC(React Server Component), SSR(Server Side Rendering)으로 발전하고 있으며, 머지 않아 SPA(Single Page Application)이 없는 것처럼 동작하는 react 생태계를 보게될 것이라는 예측이 항간에 나오고 있습니다. Vercel은 Next.js와 자사의 플랫폼 사용을 증가시키고, 이를 통해 수익을 창출하기 위해 노력해왔습니다. 이런 행보는 매우 자연스러운 일이죠. 하지만 여기서 문제가 되는 것은 많은 React Core 팀 멤버들이 Next.js 팀으로 이동하면서, React의 방향을 Next.js의 우선순위에 맞추는..
OpenAI(ChatGPT)가 Next.js에서 Remix로 전환한 이유1. 들어가며2024년 9월 초 즈음에 OpenAI에서 기술 스택 전환에 대한 내용이 화두가 된 적이 있습니다. 생태계가 꾸준히 RSC(React Server Component), SSR(Server Side Rendering)으로 발전하고 있으며, 머지 않아 SPA(Single Page Application)이 없는 것처럼 동작하는 react 생태계를 보게될 것이라는 예측이 항간에 나오고 있습니다. Vercel은 Next.js와 자사의 플랫폼 사용을 증가시키고, 이를 통해 수익을 창출하기 위해 노력해왔습니다. 이런 행보는 매우 자연스러운 일이죠. 하지만 여기서 문제가 되는 것은 많은 React Core 팀 멤버들이 Next.js 팀으로 이동하면서, React의 방향을 Next.js의 우선순위에 맞추는..
2024.11.11 -
1. React 상태 관리React에서 상태 관리는 애플리케이션 내에서 데이터의 동적인 변화를 추적하고 조작하는 그 행위 자체를 의미합니다. React에서 '상태(state)'는 컴포넌트의 렌더링 결과에 직접적인 영향을 미치는 데이터로, 사용자 입력, 서버로부터 받은 응답, 혹은 기타 이벤트에 따라 변경될 수 있다는 특징을 가지고 있습니다. 주요 특징은 아래와 같습니다.컴포넌트 상태: 각 컴포넌트는 자체적으로 상태를 가질 수 있도록, useState와 같은 훅을 통해 관리합니다.상태의 복잡성 증가: 애플리케이션 규모가 커지면서 여러 컴포넌트 간에 상태를 공유해야 하는 상황이 발생합니다.상태 관리의 중요성: 효율적인 상태 관리는 코드의 가독성, 유지보수성, 그리고 애플리케이션의 성능에 직접적인 영향을 줍니..
[React] Redux가 좋은 경우 vs Zustand가 좋은 경우1. React 상태 관리React에서 상태 관리는 애플리케이션 내에서 데이터의 동적인 변화를 추적하고 조작하는 그 행위 자체를 의미합니다. React에서 '상태(state)'는 컴포넌트의 렌더링 결과에 직접적인 영향을 미치는 데이터로, 사용자 입력, 서버로부터 받은 응답, 혹은 기타 이벤트에 따라 변경될 수 있다는 특징을 가지고 있습니다. 주요 특징은 아래와 같습니다.컴포넌트 상태: 각 컴포넌트는 자체적으로 상태를 가질 수 있도록, useState와 같은 훅을 통해 관리합니다.상태의 복잡성 증가: 애플리케이션 규모가 커지면서 여러 컴포넌트 간에 상태를 공유해야 하는 상황이 발생합니다.상태 관리의 중요성: 효율적인 상태 관리는 코드의 가독성, 유지보수성, 그리고 애플리케이션의 성능에 직접적인 영향을 줍니..
2024.11.10 -
1. 들어가며[프로젝트] - [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1 [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1카카오테크 부트캠프(카테부) 챗봇, "피카부"는 카카오테크 부트캠프에서 진행한 팀 미션으로부터 시작된 프로젝트입니다. 카카오테크 부트캠프에서는 각 과정별로(풀스택, 인공지능, 클라우cdragon.tistory.com지난 포스팅에서 카테부 챗봇인 "피카부(Pikaboo)" 프로젝트에 대한 내용을 정리하였습니다. 이번 포스팅에서는 개발을 진행하면서 발생했던 트러블 슈팅과 개인적으로 최적화를 진행했던 내용에 대해서 정리해보려 합니다. 2. 내용메시지를 스트림으로 받아올 때 문제사이드바 데이터 공백 문제채..
[kakao tech bootcamp] 카카오테크 부트캠프 챗봇(피카부) - 2 (트러블 슈팅)1. 들어가며[프로젝트] - [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1 [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1카카오테크 부트캠프(카테부) 챗봇, "피카부"는 카카오테크 부트캠프에서 진행한 팀 미션으로부터 시작된 프로젝트입니다. 카카오테크 부트캠프에서는 각 과정별로(풀스택, 인공지능, 클라우cdragon.tistory.com지난 포스팅에서 카테부 챗봇인 "피카부(Pikaboo)" 프로젝트에 대한 내용을 정리하였습니다. 이번 포스팅에서는 개발을 진행하면서 발생했던 트러블 슈팅과 개인적으로 최적화를 진행했던 내용에 대해서 정리해보려 합니다. 2. 내용메시지를 스트림으로 받아올 때 문제사이드바 데이터 공백 문제채..
2024.11.09 -
본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 text selection과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며 깃트폴리오의 궁극적인 목표는 이력서를 생성해주는 데에서 그치지 않고 AI와 커뮤니케이션을 통해 나에게 맞는 최적의 이력서를 뽑아내는 데에 있습니다. 그렇기 때문에 '내 이력서'를 확인하는 화면에서는 이력서의 내용뿐만 아니라 AI에게 이력서의 특정 부분을 수정 요청할 수 있도록 우측에 마련한 '채팅 사이드바'가 존재하는데요. 기획 단계에서 이 부분을 구현하는 방식에 있어서 팀원들끼리 다양한 의견이 오고 갔었습니다. 물론 가장 이상적인 상황은 요구사항만 딱 보내도 AI가 알잘딱하게 알아서 수정해주는 것일 것입니다. 하지만 ..
[kakao tech bootcamp] React에서 드래그한 텍스트를 관리 하는 방법 (text selection, getSelection API)본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 text selection과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며 깃트폴리오의 궁극적인 목표는 이력서를 생성해주는 데에서 그치지 않고 AI와 커뮤니케이션을 통해 나에게 맞는 최적의 이력서를 뽑아내는 데에 있습니다. 그렇기 때문에 '내 이력서'를 확인하는 화면에서는 이력서의 내용뿐만 아니라 AI에게 이력서의 특정 부분을 수정 요청할 수 있도록 우측에 마련한 '채팅 사이드바'가 존재하는데요. 기획 단계에서 이 부분을 구현하는 방식에 있어서 팀원들끼리 다양한 의견이 오고 갔었습니다. 물론 가장 이상적인 상황은 요구사항만 딱 보내도 AI가 알잘딱하게 알아서 수정해주는 것일 것입니다. 하지만 ..
2024.11.08 -
이 글은 최근 다양한 기업들의 기술 스택을 보면서 GraphQL이 많이 보이는 현상에 대한 궁금증으로부터 비롯되어 왜 요즘 많이 사용되고 있는 기술이며 어떻게 발전되었는지 그 과정들을 함께 살펴보려고 합니다. 1. "API를 위한 쿼리 언어""API를 위한 쿼리 언어" GraphQL 공식문서에 들어가보면 첫 페이지에 대문짝만하게 박혀있어서 가장 먼저 볼 수 있는 문장입니다.GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임입니다. GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.- ..
[CS 지식] GraphQL이 뜨는 이유(feat. RESTful API 와 다른 점은?)이 글은 최근 다양한 기업들의 기술 스택을 보면서 GraphQL이 많이 보이는 현상에 대한 궁금증으로부터 비롯되어 왜 요즘 많이 사용되고 있는 기술이며 어떻게 발전되었는지 그 과정들을 함께 살펴보려고 합니다. 1. "API를 위한 쿼리 언어""API를 위한 쿼리 언어" GraphQL 공식문서에 들어가보면 첫 페이지에 대문짝만하게 박혀있어서 가장 먼저 볼 수 있는 문장입니다.GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임입니다. GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.- ..
2024.11.07