<aside>
문제에 대한 답이나 직접적인 해결책은 검색하거나 GPT 활용 금지
문법이나 사용법 등은 검색 가능
반드시 이벤트 처리(2-1)부터 시작한 후, Fetch API 적용(2-2) 순서대로 작업하세요.
</aside>
미니퀘스트 해보기
: 일부 해봤습니다.
프론트엔드 JS 코드 작성하여 바닐라로 커뮤니티 완료
<aside>
아직 fork, upstream이 익숙하지가 않아서 upstream 리포로 바로 merge가 되어버렸습니다!
PR를 찰리에게 따로 못날려서 그냥 오가니제이션 리포지토리 링크를 남겨두겠습니다!
</aside>
<aside>
<aside>
이슈 1️⃣ ) 게시글 목록 불러오기 → 각 게시글에 대한 요약정보를 표현하는 component를 동적으로 계속 추가해야함. 이것을 구현하기 위해 어떤 방법을 사용할까?
방법 1 : /component 디렉토리에 컴포넌트.html 파일로 게시글 component 구조를 미리 만들어두기 → .js 로 해당 컴포넌트.html 구조 코드를 로드해오고, 그 내부에 동적데이터를 채운 후, 기존화면.html 에 append 하는 방식
const response = await fetch('/components/postCard.html');
const html = await response.text();
document.querySelector('#postlist-container').innerHTML = html;
// 이후부터는 그냥 태그로 접근해서 text를 설정하면됨.
.js 에서 구조를 일일이 createElement 하지 않고 .html 구조를 재사용가능.
.js 파일을 목적별로 분리할 수 있음 (컴포넌트 생성, api 호출, 페이지 구성)컴포넌트.html 파일이 다른디렉토리에 있으므로, .js 에서 fetch() 를 통해 코드를 불러온 후에 컴포넌트를 생성해야 함.👉 .html 파일로 컴포넌트를 미리 만들어두는건, 정적 컴포넌트 (헤더, 좌우프레임 등등) 에 유리할 듯. 방법 4와 함께 사용하여 재사용성을 극대화할 수 있을듯.
👉 하지만, 동적으로 해당 컴포넌트를 반복 생성 및 추가하는데는 부적절할듯. 왜냐하면 .html 파일을 .js 에서 계속 동적으로 로딩해야함 (다른 경로의 .html 파일을 읽고 코드를 로드하기 위해서는 또 fetch() 필요)
방법 2 : 기존화면.html 파일 내부에 <template> 태그로 컴포넌트를 생성해 둔 후, .js 파일에서 그 태그를 불러와 사용. 구조를 복제해서 동적데이터를 채워넣고, 기존화면.html 의 <body> 에 채워넣는 방식
const tpl = document.getElementById("post-card-template");
const node = tpl.content.firstElementChild.cloneNode(true);
node.querySelector(".post-card__title").textContent = title;
.html 에 접근하지 않고 원래 .html 파일만 사용할 수 있음. fetch() 등을 쓰지 않아도 됨..js 파일이 목적에 맞게 분리가 안됨. (컴포넌트 생성, 동적데이터 채우기, body에 append하는 기능 모두 한 js 파일 내에 위치)👉 외부 .html 접근이 필요없어서 fetch() 를 안써도 되는 것은 장점이지만, 프로젝트 구조가 기능별 분리가 안되고, 확장성이 없다. 컴포넌트를 외부에서 재사용할 수도 없다.
방법 3 [✅채택] : 컴포넌트를 생성하는 컴포넌트생성.js 파일을 따로 두어서, 컴포넌트를 미리 정의한 .html 파일 없이, createElement 등으로 엘리먼트 자체를 동적으로 생성해서 추가하고 전체를 반환하는 방식
const node = document.createElement(tag);
node.textContent = text;
.js 파일을 목적별로 분리할 수 있음 (컴포넌트 생성, api 호출, 페이지 구성).html 파일로 구조가 미리 정의되어있지 않기 때문에, DOM구조를 일일이 구성하는 긴 .js 코드를 매번 호출해야 함.👉 지금처럼 동적으로 계속 같은 구조를 <body>에 append 해야되는 경우에 제일 적합할 것 같다.
컴포넌트.html 파일이 따로 필요가 없다. 외부 .html 접근을 위해 fetch() 할 필요가 없다.컴포넌트생성.js 파일을 반복적으로 호출하기만 하면 계속해서 동적으로 body에 추가할 수 있다.방법 4 :
<iframe> <object> <embed> 등의 태그의 src=component.html 을 설정하는 법
: 한 번 정적 컴포넌트를 사용하는 데는 유리할 수 있음.
</aside>
<aside>
이슈 2️⃣ ) 도메인 IP가 같은 주소더라도 (같은 서버에 FE, BE를 둘다 띄웠더라도) 포트가 다르면 다른 origin으로 인식한다. 브라우저측에서 백엔드 서버를 믿지 않기 때문에 CORS 문제가 발생한다.
</aside>
<aside>
이슈 3️⃣ ) 아직 유저 인증/인가는 구현되지 않았다. FE측에서는 원래 쿠키/세션/jwt토큰 방식 각각에 대해 유저 정보를 어떻게 저장하고, BE로 어떻게 보내는가?
방법 1 : 세션ID + 쿠키 (세션 저장소)
→ 서버가 로그인 성공 시점에 세션 저장소에 세션을 생성, 클라이언트에 세션ID를 보내줌 (Set-Cookie 헤더를 통해 내려주면 클라이언트(브라우저)는 자동으로 세션ID를 쿠키에 저장함) → 클라이언트는 요청 시 credentials: "include" 옵션만 켜주면, 쿠키가 자동 전달됨.
방법 2 : JWT토큰 + 헤더 (무상태)
방법 3 : JWT토큰 + 쿠키 (무상태)
⇒ 우선은 임시 구현된 상태 (서버에서 하드코딩 : userId=1 무조건) → 일단 방법1 로 구현 (가장 간단, 아직 jwt 안배움) → 나중에 JWT토큰 배우면 방법3으로 업그레이드
</aside>
<aside> 💡
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>
<aside>
</aside>