Front-End
-
React로 CLOVA X 클론코딩하기Front-End/react 2024. 10. 27. 23:50
CLOVA X, ChatGPT 같은 생성형 AI 기반 채팅 서비스는 어떻게 만드는 걸까요? 랭체인, 라마인덱스 등 생성형 AI 개발을 위한 백엔드 프레임워크들은 다양한 방식으로 많이 쏟아져 나오고 있는데 정작 UI/UX나 프론트엔드 쪽으로는 생성형 AI 관련 아티클들을 많이 못 본 것 같아 아쉬움이 많습니다. 사실 CLOVA X같이 AI 답변 결과가 스트리밍 형식으로 렌더링 되는 UI를 구현하려면 프론트엔드도 신경 써야 할 부분이 생각보다 많은데요. 이번 포스팅에서는 React를 사용하여 CLOVA X 같은 생성형 AI 기반 채팅 서비스는 어떻게 만들 수 있는지에 대해 공유드리도록 하겠습니다. 🧑🏻🎨 UI 모델링먼저 서비스를 개발하기 전에는 UI모델링을 어떻게 가져가면 좋을지 설계하는 것이 가장..
-
해커톤에서 사용할 수 있는 다양한 프론트엔드(react, next) 빌드 및 배포 방법Front-End 2024. 6. 29. 16:50
지금까지 해커톤 및 사이드 프로젝트를 진행하면서 여러 방법으로 React와 Next를 빌드하고 배포하다 보니 한 번쯤은 정리해보고 싶어서 이번 포스팅에서는 저만의 프론트엔드 빌드 및 배포 노하우를 공유드리고자 합니다. 1. React 빌드 및 배포먼저 옛날에 가장 많이 사랑받았던 React 빌드 및 배포 방법에 대해 설명드리겠습니다. 불과 3~4년 전만 해도 React 공식가이드 문서에서 튜토리얼로 활용되었으며 아마 여러분들에게 가장 친숙할 거라 생각되는 create-react-app이라는 명칭의 React 부트스트랩(이하 CRA) 그리고 CRA에 내장된 기본 템플릿을 활용해서 빌드하는 방법입니다. 🐣 프로젝트 initnpm install -g create-react-appcreate-react-app..
-
Nextjs13을 활용한 간단한 심리테스트 만들기Front-End 2023. 3. 23. 23:06
2022년 10월 26일 수요일 Vercel에서 Nextjs의 새로운 버전인 Nextjs13을 발표하였습니다. ChatGPT와 GPT4에 물어봐도 명확하게 답변해주지 못하는 따끈따끈하고도 최신 기술인데요. 평소에 SSR프레임워크도 써보고 싶었고 Nextjs13 공부도 할 겸 간단한 심리테스트를 구현해 보았습니다. 사실 Nextjs 써보진 않았지만 평소에 해보고 싶은 게 있으면 앞뒤 안재고 무작정 도전하는 스타일이라서 이번에도 사이드 프로젝트에 그대로 투입하였습니다. 그래서 굉장히 우당탕탕 이슈도 많았고 별것 아닌 거에도 많이 헤매었었는데요. 프로젝트 초기 세팅부터 써본 것들 위주로 간단히 후기 남기고 기록으로 남기려고 합니다.🙂 혹시나 Nextjs13 찍먹 해보고 싶은 분들께 이 글이 조금이나마 도움이 ..
-
Storybook 도입할 수 있을까?Front-End 2023. 1. 31. 19:11
스토리북 사용 관련해서 많은 글을 찾아볼 수 있었지만 "내 환경과 회사에 Storybook을 도입하면 어떤 장단점이 있을까?" 에 대한 고민을 해결해주지는 못하였습니다. 그래서 고민하고 찾아봤던 내용들 위주로 공유하고 기록하고자 합니다. 🤔 왜 Storybook을 사용하려고 하는가? 저 같은 경우에는 회사에서 UI 기능 구현 요청이 들어오면 제일 먼저 하는 일이 비슷한 UI 찾기입니다. 그리고 실제로 어디에 있는지 알 방법이 없어서 일일이 페이지마다 직접 들어가서 찾아가는 수고스러움을 동반합니다. 제 방법이 맞는지 이런 경우 어떤 식으로 문제 해결하는지 다른분들에게 한번 여쭤보았습니다. 지인 프론트 개발자인 두 분에게 물어봤는데 두 분 다 같은 대답을 하였습니다. "아에 새로 만들어 버리면 되지 않을까?..
-
NVM Window 설치 및 사용방법Front-End/Javascript 2022. 11. 27. 17:00
nodejs나 react 사용 시 팀 프로젝트를 진행하다 보면 github에서 프로젝트를 내려받고 npm install & npm start를 한 순간 오류가 와장창...? 나오는 경험을 해보셨을 수도 있습니다. 이 순간 제일 짜증 나는 건 왜 나만 안돼?? 그러게요... 분명 깃헙 소스 제대로 받고 모듈 설치하고 실행만 했을 뿐인데 다른 팀원들은 똑같이 해서 잘만 나오는데 왜 나만 안되는걸까요?😂 그 해답은 nodejs 또는 npm 버전 충돌 문제에 있습니다. (저는 npm install시 package-lock.json 파일이 완전히 바뀌어서 알게 되었습니다.) 아마, 이런 경험을 해보신 분들은 기존에 또 다른 프로젝트에서 다른 버전의 nodejs와 npm을 사용하셨을 겁니다. 이럴 때는 기존의 no..
-
React CDN과 create react app (CRA)중 어떤 방법이 더 좋은걸까?Front-End/react 2022. 8. 4. 00:45
React 사용방법에는 다음과 같이 크게 2가지 방식이 있습니다. node 와 빌드 도구를 설치한 개발환경을 세팅 하는 방법 (예 : CRA 사용) cdn을 사용해서 온라인에서 바로 라이브러리를 끌어오는 방법 방식이 2가지나 있으니 의문이 들것입니다. 과연 어떤 방식을 선택해야 되는걸까요?? 결론부터 말씀드리자면, 개발 및 시도에는 CDN이 좋고 실제 응용 프로그램의 경우 CRA 방식이 좋습니다. CDN방식의 경우 결국 URL을 사용하여 서버에 대한 요청을 보내기 때문에 여러 리소스를 로드하는 경우 전체 페이지가 로드될 때까지 약간 더 기다려야 될 수 있습니다.(렌더링 속도 이슈) 간단하게 보여주기식 또는 테스트용도로 사용하는 경우에는 빠르게 개발할 수 있다는 장점이 있지만 그래도 실제 응용 프로그램에 ..
-
jquery ajax 호출시 Request Url 파라미터 뒤에 언더바(_) 붙는 이유Front-End/Javascript 2022. 2. 21. 17:43
서버의 API 호출시 개발자도구( F12 )에서 네트워크탭 XHR 부분을 확인해보면 Request URL parameter부분에 언더바("_")가 붙는 경우가 있습니다. 실제 개발코드를 보면 서버에서도 클라이언트에서도 "_"를 넣어준적이 없는데 이 녀석은 어디서 나타난 것일까요?? 언더바("_")는 제이쿼리 API인 $.ajax 또는 $.getJSON 함수를 사용중이고 {cache:false} 옵션을 사용한 경우에 자동으로 생성됩니다. 그 이유는 브라우저의 caching 기능을 방지하기 위해서 입니다. 브라우저 캐시란? 브라우저 캐시는 브라우저에서 로컬 웹 페이지 리소스를 저장하는 데 사용되는 메커니즘입니다. (캐시 : 빠른 억세스를 위해 값을 임시로 저장하는 데 사용; 작은 데이터베이스) 브라우저 캐시..
-
웹 접근성 지침 적용방법 (IR 기법)Front-End 2022. 2. 17. 00:01
웹 접근성이란?? 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는 모든 정보에 동등하게 접근하고 이용할 수 있도록 보장해 주는 것 1. 이미지() alt 속성을 사용하여 이미지에 대한 설명을 적습니다. 태그 예시 설명 이미지가 의미가 있을 때 사용한다. 모두 alt 속성 값을 넣는다. 💡 장식이나 배경 등의 의미가 없는 이미지에는 alt="" 삽입 또는 css-background 속성으로 표현한다.(이미지 스프라이트 기법) "메뉴 더보기", "다음 메뉴", "항목 열기" 등등 버튼의 기능을 명확히 이해할 수 있는 대체 텍스트를 제공한다. 💡 alt alternative의 약자로 ‘이미지의 대안, 이미지에 대한 설명’ 입니다. ( 태그에서만 사용 가능 ) alt 속성 사..