React와 Node.js 로 만든 Todo List Mini Project 회고록

🗣️ 프로젝트 소개

Full stack Mini Project

 

⏰ 개발 기간

2023.04.28 ~ 2023.04.30

 

⚙️ 개발 환경

• Front-End : React
• Back-Ent : Node.js Express
• Server : Mysql

 

✍ Todo List 기능 

- 파비콘 설정

- document.title 변경

- 엔터 입력/ 빈값 입력 x

- 반응형

-show / create / edit / delete

- 취소선

- 내림차순 정렬

- checkbox 크기 변경

 

✍ 코드 기술

Client

• Public 
  • index.html에서 favicon.ico 수정
• src 
  • components
    • AppTodo.js
      • OnBuutonClick
        • addItem 함수 실행
        • 공백 입력 X
        • input 초기화
      •  onEnterKeyDown
        • Enter 입력
        • onKeyPress -> keyDown 으로 했을 때 아이템이 2번 출력됨. 리액트 한글 중복 입력 문제
    • Todo.js
      •  [readOnly, setReadOnly]
  • styles
    •  _utils.scss
      •  color
    •  AddTodo.scss
      • AddTodo.js에 적용할 scss
      • input 기존 디자인 변경
      • 배경 투명색 background : transparent;
      • 기존 테두리 삭제 border: none;
      • 테두리 아래만 주기 border-bottom
    • App.scss
      • 전체 컨테이너 스타일
      • * 폰트 적용
      • .left-todos : 전체 todos의 개수에 대한 색 지정
      • title text-shadow 그림자 지정
    • Todo.scss
      • input 기본 디자인 변경
      • checkbox 변경
      • display:none 으로 기존 디자인 안 보이게
      • input checkbox 사이즈 조정
      • :checked로 content 변경
    • app-config.js
      • 컴포넌트가 아니므로 파일명은 소문자로 지정 
  • App.js (메인 컴포넌트)
    • AddTodo, Todo 하위 컴포넌트 임포트
    • 라이브러리 : useState, useEffect, axios 등
    • ./app-config에서 API_BASE_URL 불러오기
    •  상태를 관리하는 todoItems라는 상태 변수와 이 상태를 업데이트하는 함수 setTodoItems가 선언
    •  useEffect 훅을 사용하여 컴포넌트가 처음 마운트 될 때 getTodos 함수를 호출하여 서버에서 Todo 리스트를 가져 옴.
    • <함수 정리>
      1.  addItem 함수
         • 새로운 Todo 항목 추가
         • axios를 사용하여 서버에 POST 요청을 보내고 응답받으면 새로운 todo항목을 상태 배열에 추가
      2. deleteItem
         • Todo 항목 삭제
         • axios를 사용하여 서버에 delete 요청을 보내고 응답 받으면 해당 Todo 항목을 상태 배열에서 제거
      3.  updateItem
         • Todo 항목 업데이트
         • axios를 사용해 서버에 PATCH 요청을 보내고 응답 받으면 해당 Todo 항목을 상태 배열에서 업데이트
         • document.title 설정으로 페이지 제목 변경
      4.  App 컴포넌트는 AddTodo`와 `Todo` 컴포넌트를 사용하여 Todo 리스트를 렌더링
      5.  todoItems의 배열의 길이  : 현재 투두 목록 개수를 보여주기 위함 
  • index.js
    •  App 컴포넌트 렌더링

 

Server

•  config
  • config.json : 개발환경에서 사용되는 데이터베이스 연결 정보를 정의한 JSON 객체
• controller
  • Ctodo.js : sequelize 모델을 사용하여 DB에서 데이터를 읽고 쓰고 , http 응답을 보내기 위해 res 객체를 사용
    1. exports.getTodo  : /todos로의 GET 요청 청리, findAll() 메서드를 사용하여 데이터베이스에서 모든 기존 할 일을 검색
    2. exports.postTodo : /todo/create로의 POST 요청을 처리, 클라이언트에서 제공한 데이터를 사용하여 새로운 할 일을 생성
    3. exports.patchTodo : /todo/edit/:todoId로의 PATCH 요청 처리, 클라이언트에서 제공한 데이터를 사용하여 기존 할 일을 업데이트
    4. exports.deleteTodo : /todo/delete/:todoId로의 DELETE 요청 처리, 클라이언트에서 제공한 ID와 일치하는 할 일을 데이터베이스에서 삭제
• models
  
  • index.js
    •  Sequelize로 DB 연결, Todo모델과 연결
    • 모듈 불러오고 config.json 파일에서 해당되는 설정으로 sequelize 인스턴스 생성
    • DB 객체, sequulize 인스턴스, Sequelize 모듈 할당 =>  다른 파일로 내보냄
    • model 연결 /Todo 파일에서 sequelize 모듈을 인수로 받는 Todo 모델을 가져와 db.Todo에 할당. 이렇게 데베 연결
  •  Todo.js
    • Todo 함수 정의
    • 인수로 Sequelize와 DataTypes
    • define() 메서드로 첫 번째 인수는 테이블 이름, 두 번째 인수에는 칼럼 정의 객체와 테이블 옵션 객체 포함.
    • 컬럼 정의 객체 : id, title, done
    • 테이블 옵션 객체 : tableName, freezeTableName, timestamps
    • 다른 파일에서 이 모델을 사용할 수 있도록 module.exports
•  node_modules
• routes
  • todo.js
    • express 라우터 설정 파일
    • 해당 경로에서 요청이 들어오면 함수 실행
    • :todoId는 동적인 요청 파라미터
    • 라우터 객체를 내보내서 다른 파일에서 라우터 사용할 수 있도록 exports
• app.js
  • app.use() 메서드로 CORS 미들웨어 적용
  • 루트 경로에 대한 요청과 응답
  • ./routes/todo에서 정의된 라우터 객체 >`app.use()` 메서드를 사용하여 `/api` 경로로 mount
• todo.sql
  •  kdt 데이터베이스 사용
  • todo 테이블 생성 

 

📝 배운 점

CORS 사용

• CORS 미들웨어를 express앱에 적용해서 사용했다. CORS는 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해주는 웹 보안 방침이다. 미들웨어만 불어와서 쓰다보니, 더 자세한 동작방식이 궁금해져서 CORS에 대한 동작 원리를 알아보았다.
• CORS 정리 - 블로그

keydown 한글 입력 중복 문제 해결

•  엔터로 입력한 텍스트를 keydown 이벤트로 처리했다. 이런 방식은 엔터가 2번씩 입력되는 현상이 생겼다. 여러 번의 테스트 결과 영어는 1번만 정삭적으로 입력되었고, 한글에만 이런 문제가 발생했다. 이 문제의 원인이 IME 때문이었다. IME를 통해 언어를 변환하는 과정에서 keydown 이벤트는 OS뿐만 아니라 브라우저에서도 처리되었기에 중복 현상이 일어났다. onKeyPress 처리해서 해결했다. 

❗ 추가할 기능

• checked.done 된 아이템은 목록 하단으로 이동
• 아이콘 크기 설정
• 부트스트랩 아이콘 사용하고 싶었지만, 그날 부트스트랩 페이지 오류로 사용하지 못했다.

 

✏️ 기록

Github

GitHub - stop-zero/kdt-web6-mytodo