서은영 개인 스터디 - cheomuk/ChatbotWebSite GitHub Wiki

관련 저장소

https://github.com/eunnyoung/ChatBot_Front

2022.01.09

  • map 이란?
    map은 하나의 array에 있는 item을 내가 원하는 무엇이든지로 바꿔주는 역할을 하고, 그건 결국 새로운 array로 return 해준다.
    출처: 노마드 코더

2022.01.10

  • 챗봇 대화기능이 투두리스트 생성 기능과 비슷한 것 같아서 적용해보았다.

2022.01.11

  • 소켓 기술: 통신을 위한 프로그램을 생성하여 포트를 할당하고, 클라이언트의 통신 요청 시 클라이언트와 연결하는 내•외부 송수신 연계 기술이다.

2022.01.12

2022.01.14

css 에서 위치 정렬이 가장 어렵게 느껴진다.
코드 한 줄만 필요하거나 요소에 영향을 주는 것이 아니라,
여러 코드가 서로 영향을 주고 받고, 또 필요하기 때문이다.

개인 저장소를 만들었다.
이것저것 코드를 덮고 복사, 붙여넣기 하다보면 기존 코드와 상당히 달라지게 된다.기존 코드를 보존하기 위해서 매번 주석 처리를 한다면 전체 코드가 상당히 길어지게 되고 가독성이 현저히 떨어진다.그래서 이전 버전의 코드를 쉽게 복원하려는 용도로 프로젝트 관련 저장소를 만들어 파일 업로드 하려고 한다.
git 을 협업 및 버전 관리를 위해 사용하는 건 알고 있었지만, 프로젝트를 해보니 그 필요성을 새삼 체감하게 된다.
(개인 저장소를 삭제하고 프론트엔드 저장소를 만들었다. 2022.01.15)

교수님께서 많이 연습하면 구현하는 시간이 점점 줄어든다고 하셨다.
map 은 굉장히 많이 쓰이기 때문에 중요한 함수라고 강의 시간에 설명해주셨는데
map 투두 리스트에도 사용되고, 투두 리스트도 다방면에 응용할 수 있는 쓸모 있는 기술인 거 같아서
눈 감고도 코드 떠올릴 수 있을 정도로 반복해서 연습해야겠다는 생각이 들었다.

  • css 중앙 정렬:
    열을 중앙 정렬한다.
    align-items: center;
    행을 중앙 정렬한다.
    justify-content: center;

  • flex-direction:
    위는 flex-direacton: column; 일 경우에 해당하고 flex-direaction: row; 일 경우는 달라질 수 있다.
    column 일 경우 요소가 1행, 2행, 3행 ... 이렇게 행을 기준으로 위에서 아래로 정렬된다면,
    row 일 경우 요소가 1열, 2열, 3열 ... 이렇게 왼쪽에서 오른쪽으로 배치된다.
    참고 자료: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

2022.01.15

  • addEventListener:

  • 현재 문제점:

  1. 새로 input 한 chat이 기존 chat의 아래에 생기는 게 아니라 최상단에 생성된다. 새로 input 한 chat이 최하단에 생성되도록 바꿔야 한다.
  2. UnderBar.js 파일의 코드가 너무 길어지고 있다. 분리를 해야 되는데 어떻게 분리하는지 모르겠다.
  3. 챗봇과 사용자의 챗 배열 리스트를 따로 관리해서 만들어야 될 텐데 어떻게 해야하는지 모르겠다.

2022.01.19

  • 개선해야할 점:
    채팅 메시지가 많이 쌓이면 우측에 스크롤이 생긴다.
    이 스크롤을 하단에 고정 시키는 방법을 찾아야겠다.

2022.01.23

  • setInterval
  • setTimeout
  • prototype.getDate
  • padStart

2022.01.26

  • parentElement 는 현재 노드의 부모를 말한다.
⚠️ **GitHub.com Fallback** ⚠️