2023_12_18 TIL

Node.js 백오피스 프로젝트 [6일차, 마지막날]

 

오늘 한 일

 

오늘 오전에는 오후에 있는 발표를 위해 다시 한 번 코드를 마무리하는 시간을 가졌다. 그리고 오후 발표를 마치고 이번 프로젝트를 하며 공부했던 부분들을 정리하는 시간을 가졌다. 새로 배운 내용도 있지만 주로 전에 공부했던 내용들을 다시 한 번 되짚어 보는 시간이었던 것 같다.

 

이번 프로젝트를 회고해보면 기분 좋기도하고 아쉽기도 한 프로젝트였던 것 같다. 

우선 좋았던 부분은 기본과제에서 API 구현이나, 라우터 연결 등 백엔드 부분에 있어서는 많이 해봤던대로 모두 구현할 수 있다는 점이 기분이 좋았다. 

 

반대로는 웬만한 기능들은 구현할 수 있을 것  같다고 생각은 하지만 구현을 하는 데 있어 너무 오랜시간이 걸린다는 점이 마음에 많이 걸리는 것 같다. 주어진 시간 내에 기능들을 구현해야 한다고 생각했을 때 시간이 부족해서 완성하지 못하는 부분이 많아 아쉬웠다.

 

 

 

배운 부분

 

1. DB이름 안에  ' - ' 을 넣으면 SQL문법에서 use '데이터베이스 이름' 을 사용할 수 없다.

 

 

2. 프론트와 백을 연결하다가 생긴 의문을 해결하다가 js 파일을 연결해놓은 것은 없는데 프론트엔드와 백엔드가 어떻게 fetch하나로 연결되는 건가? 라는 의문이 생겼다.( localhost라던가 쿠키, 세션이라던가, AWS라던가 뭔가 데이터의 저장소 또는 데이터 이동 통로가 필요한 거 아닌가? 라는 생각이 들었다.

 

일단 프론트와 백을 연결하는 부분은 fetch로 보내주는 부분 이외에 app.js 파일에서 

app.use("/", express.static(path.join(__dirname + "/src", "assets");
app.use(express.static("assets"));

 

이러한 코드를 적어 넣게되면 프론트와 백을 연결할 수 있고, 정적인 파일에 백엔드의 경로를 연결하는 것으로 이해하면 된다.

 

또한 fetch는 자바스크립트, 브라우저의 내장 함수로써 fetch를 타고 데이터가 브라우저를 돌아다니게 된다.

 

 

 

 

3. HTML 태그 안의 텍스트 가져오기. 
   

<button id="printText">
  div 태그 안의 문자열 출력
</button>

<div id="content">
  <p>Hello,</p>
  <p>My Name is</p>
  <p>JavaScript!</p>
</div>
출처: https://developer-talk.tistory.com/859 [DevStory:티스토리]

 위와 같은 HTML 코드가 있다고 할 때 텍스트를 가져오는 문법 3가지(innerText, innerHTML, textContent의 차이점에 대해 알아보자)

 

① innerText
     : innerText를 사용하게되면 선택한 요소 및 자식요소에 존재하는 순수 텍스트만을 가져온다.

② innerHTML
     : innerHTML은 선택한 요소 안의 HTML 태그를 포함한 모든 텍스트를 가져온다. innerHTML은 주석으로 작성된 텍스트

       도 가져온다.

 

③ textContent

      : textContent는 innerText와 마찬가지로 HTML태그가 제외된 텍스트만을 가져온다. 하지만 textContent를 사용하게 
        되면 줄 바꿈(\n)이 적용되지 않는 텍스트를 가져온다는 문제점이 있다.

 

 

4. git merge 안전하게 하기

 

https://yoonchan1121.tistory.com/118

[Git] git merge 안전하게 하기

 

 

 

참고자료

 

https://developer-talk.tistory.com/859