🏃🏻2024년 제6회 K-디지털 트레이닝 해커톤🏃🏻 : 챗봇 페이지 만들기

오랜만에 파이팟 친구들을 만나서 놀았딴

인턴 월급 올려서 재계약하고 부캠 열심히 하고 다들 멋졍

---

🏃🏻챗봇 페이지 만들기

word-break: break-word; // 길이가 긴 단어도 말 줄임 처리

 단어가 말풍선 너비를 초과할 때 줄바꿈을 자동으로 처리해주는 속성

 

글로벌타입 설정

/** @jsxImportSource @emotion/react */
import { Global, css } from "@emotion/react";

const globalStyles = css`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body,
  #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
`;

 

채팅 로직

- 

 

임시로 뭐 보내면 냠냠오고 추천 보내면 이미지롤 가게

버튼들 달았다는 콩콩

---

🏃🏻전달

<레이아웃>
생각해보니까 어차피 앱으로 할 거고 웹으로 보여줄 일 없으면
그냥 width 100퍼루 
아이폰 14 프로 규격 보면서 작업중
그 외 아이폰 갤럭시도 비율로 해서 괜찮아 보임 

<추가된 쓸 만한 common>- 많이 나오는 회색 선 - 두께 길이 프롭
- text 도 common에 - 두께 크기 마진 줄간격 정렬 프롭 (폰트 넣어야함
- 헤더 위에 상단바 생각해서 마진 탑 벌려놓음

<라이브러리>
음성 라이브러리 설치
npm install react-icons

<기타>
- 마진패딩없애는 글로벌스타일 app에 적용

---

🏃🏻피드백

npm install react-typed

react-typed

JavaScript 모듈 시스템 간의 호환성 문제

CommonJS 형식으로만 제공되고, ES 모듈 방식으로 import할 수 없어 발생하는 오류

 

CommonJS (CJS):

• Node.js 환경에서 주로 사용되는 모듈 시스템
• 모듈을 가져오고 내보낼 때 require와 module.exports를 사용
  예: const module = require("module-name"); 또는 module.exports = myFunction;

ES 모듈 (ESM):

• ES6(ECMAScript 2015)에서 도입된 표준 모듈 시스템
• 모듈을 가져오고 내보낼 때 import와 export 키워드를 사용
  예: import myFunction from "module-name"; 또는 export default myFunction;
• 브라우저 환경과 모던 JavaScript 빌드 도구(Vite, Webpack)에서 널리 사용

 

일부 라이브러리(특히 오래된 라이브러리)들은 여전히 CommonJS 형식으로만 제공

브라우저 환경이나 ES 모듈을 기본으로 사용하는 도구(Vite, Webpack 등)에서는 import 문을 통해 ES 모듈 방식으로 가져오려고 할 때 오류가 발생

 

npm install typewriter-effect

typewriter-effect

오이쁜데

---

계에에에속기획만하다가

이제야 개발 시작..

난 내가 기획 좋아할 줄 알았는데

별로 안 좋아하는 듯

현실은 BM과의 싸움이었던 거야..