혼자 적어보는 노트

✅ 오늘의 학습 오늘도 역시 과제 구현을 중점적으로 진행했다. 과제를 구현하며 가장 많이 본 에러... Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. 보통 javascript module에서 import export시 확장자 명이나 경로를 잘못 입력했을 때 발생하는 오류이다.. 하지만 VanillaJS에서 route에서 url을 변경하고 새로고침 시에도 해당 오류가 발생했다. 이유는 SPA를 구현하기위해 ..

📑 과제 피드백, 복습 오늘은 지난 주에 제출했던 Todo App 과제에 대해 멘토님에게 피드백을 받은 것을 확인하게 되었다. 멘토님이 피드백을 주시기 전에 팀원 분들이 여러가지 적어주었는데 내가 놓치고 있었던 부분들이 많았던 것 같다. 1. 호출되면서 실행되는 함수들은 묶어서 관리하자! const initialize = () => { hasNew(new.target); // ... } initialize(); 생성자 함수가 호출되자마자 실행되는 부분들은 상단에 지저분하게 작성하는 것 보다는 조금은 나누어서 관리를 해주어도 좋을 것 같다. 2. map을 사용한 toggle ✍ 이전에 작성한 코드 const nextState = [...this.state]; const todo = nextState.fin..

✅ 학습 목차 - [DAY 16] VanillaJS를 통한 자바스크립트 기본 역량 강화 (8) ✅ 새롭게 학습한 부분 - 자동 저장 편집기 만들기 (실습) debouce 사용 let timer = null; const editor = new Editor({ $target: $page, initialState: post, onEditing: (post) => { if (timer !== null) { clearTimeout(timer); } timer = setTimeout(async () => { setItem(postLocalSaveKey, { ...post, tempSaveDate: new Date(), }); }, 500); }, }); 이전에 스터디를 하면서 처음 접했던 기능이지만 한번 더 복습 ..

express 서버로 사용자 로그인을 구현했지만 새로고침 시에 로그인이 풀리는 현상이 발생한다. 로그인 자체가 해제된 것 처럼 보이지만 개발자 도구의 Cookie를 확인해보면 connect.sid에 passport와 express에서 만든 session id 값이 들어있는 것을 확인할 수 있다. 새로고침을 할 때마다 쿠키를 서버에 전송하고 로그인 한 유저의 정보를 서버에 요청을 하여 정보를 받아오는 방법을 사용할 수 있다. [ router ] router.get("/", async (req, res, next) => { try { if (req.user) { // 로그아웃 한 상태라도 요청을 보내기 때문에 체크해 준다. const user = await User.findOne({ where: { id: ..

로그인을 한 후 포스트를 게시하려고 하는데 401 에러가 발생했다. 401 에러는 로그인 한 유저인지 확인하기 위해 작성을 해놓았던 부분이다. exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); } else { res.status(401).send("로그인이 필요합니다."); } }; post 업로드 요청을 보냈을 때 서버의 middleware에 위와 같이 로그인을 감지하도록 했고 로그인한 상태가 아닐 경우 401코드로 응답하게 했다. 하지만 로그인을 한 상태임에도 불구하고 포스트를 작성하면 오류가 생긴다. 왜일까? 로그인 이후 서버에 요청을 보낼 때 쿠키값을 함께 전달하여 서버에서 로그인 한 유저를 알 수 있는데..

✅ 학습 목차 - [DAY 15] VanillaJS를 통한 자바스크립트 기본 역량 강화 (6) ✅ 새롭게 학습한 부분 - TodoList 만들기 실습 (API 활용) 오늘은 TodoList를 API와 접목시켜서 실습하는 과정에서 처음 알게된 부분이나 기억하고 체크해야 될 부분들을 정리 하기로 했다. 1. 낙관적 업데이트 api요청이 정상적으로 처리될 것이라고 보고 클라이언트 측에 ui로 먼저 업데이트를 시키고 이후에 서버에서 데이터를 받고 업데이트를 하는 방식. = api의 응답이 느릴 때 사용자의 경험 측면을 향상시키기 위함 좋은 방법이지만 서버측에서 오류가 생겼을 때에는 어떻게 처리해야 할 지 한번 더 고려해보아야 할 것 같다 2. 로딩중 처리 state에 isLoading을 추가하여 api요청 전에..

✅ 학습 목차 - [DAY 14] VanillaJS를 통한 자바스크립트 기본 역량 강화 (6) ✅ 새롭게 학습한 부분 - History API 📄 history API 브라우저에서 페이지를 로드하면 세션 히스토리를 갖게 된다. 세션 히스토리는 페이지를 이동 할 때마다 쌓이게 되며, 이를 통해 뒤로가기, 앞으로 가기 등의 이동이 가능하다. pushState / replaceState 두 개의 메서드를 사용하면 화면 이동(새로고침) 없이 현재 url을 업데이트 할 수 있다, ==> 이 특징을 이용하여 SPA가 가능하게 된다. history.pushState(state, title, url) : 세션 히스토리에 새 url 상태를 쌓는다. history.replaceState(state, title, url) ..

✅ 학습 목차 - [DAY 13] VanillaJS를 통한 자바스크립트 기본 역량 강화 (5) ✅ 새롭게 학습한 부분 - fetch api fetch API - 비동기 http요청을 좀 더 쓰기 편하게 해주는 api - XMLHTTPRequest를 대체 🙌 - Promise기반으로 동작한다 ( = then, async await 가능) 데이터 요청을 통해 Response 객체를 받은 후에는 json이나 text로 바꾸어서 사용한다. .blob() const $image = document.createElement("img"); const imageUrl = "https://cors-anywhere.herokuapp.com/http://placeimg.com/640/480/any"; //cors 에러가 생..