개발일기

Cypress 웹 애플리케이션의 E2E(end-to-end) 테스트를 위한 javascript 기반 프레임워크이다. 브라우저에서 직접 실행되어 실제 사용자 경험을 시뮬레이션하고 테스트할 수 있다.  E2E(end-to-end) 테스트의 중요성- 실제 사용자 관점에서 애플리케이션의 전체 흐름을 테스트- 통합테스트와 단위테스트로는 발견하기 어려운 문제 식별- 주요 기능이 예상대로 작동하는지 확인  Cypress 설정 및 실행우선 개념 파악을 위한 설치이기 때문에 기본 설정만 // npm install --save-dev cypressimport { defineConfig } from "cypress";export default defineConfig({  e2e: {    baseUrl: 'http://lo..

git ActionCI/CD를 자동화 하는 gitHub의 내장 도구즉, 코드를 푸시할 때 자동으로 테스트, 빌드,배포하는 작업을 설정할 수 있는 개념개념워크플로우 : 자동화된 작업의 전체 프로세스이벤트 : 워크플로우를 실행하는 트리거(pull, pull_request, schedule 등)잡(job) : 하나 이상의 작업 단위(”빌드”작업, “테스트”작업)스텝 : 특정한 명령어(스크립트) 실행 단계러너 : github Action을 실행하는 환경(github이 제공하는 VM)Vercel정적 사이트 및 서버리스 애플리케이션을 쉽게 배포할 수 있는 플랫폼주요기능자동배포 : 깃헙, 깃랩, 빗버킷과 연동하여 자동으로 배포프리뷰 배포 : PR이 생성될 때 미리보기 배포 제공서버리스 함수 : 백엔드 기능을 추가할 ..

챗토리의 컴포넌트 구조ChatContainer : 채팅 화면 전체를 담당헤더, 채팅 내용(MessageList), 입력영역(MessageInput)을 컴포넌트로 가짐MessageList: 메세지 목록을 표시MessageInput : 메세지 입력 영역jsx: Javascript XML의 약자로, 자바스크립트 내에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법.클래스 속성은 className으로 작성(html의 class와 다름)중괄호를 사용해 javascript 표현식 삽입 가능모든 태그는 닫혀야 함우리는 그동안 화면은 html로, css는 디자인, js로 로직을 작성해 왔다. 보통은 분리된 파일로 관리한다. 페이지 로직이 js 안에서 분리되어 동작하는 동안 html안에서는 내용이 마크업 되었다..

실제세팅참고할만한 프로젝트 구조를 참고하여 만들려고 했었다. bulletproof-react 프로젝트를 pork하여 세팅을 벤치마크 하였다.그 과정에서 storybook 이라는 유용한 라이브러리를 알게 되었다.서버 없이 데이터를 렌더링해볼 수 있는 Mocking 가능한 Mock API 를 알게 되었다.구현 완료UI 최적화는 Cursor의 도움을 받아 작성하였다.Google OAuth 로그인으로 유저 정보를 조회하고 로그인처리하였고, 유저정보를 localStorage에 저장하였음.Gemini API를 사용하여 챗봇을 구현하였다.Open AI를 사용하려고 했으나 질문 횟수에 제한이 있고, 실제로 사용하는데 어려움이 있었다. (대체하기로함)대화 내용 역시 localStorage에 저장하였음.챗봇이 입력중일때 ..