Image CDN 개념 관련 질문

끝까지 다시 듣다보니 unsplash가 Image CDN의 역할을 해주셨다고 하여 첫 번째 질문에는 굳이 답해주지 않으셔도 될 것 같습니다 ㅎㅎ.. 죄송합니다! 두 번째 질문에만 답변 주시면 감사하겠습니다. 강사님 좋은 강의 제공해주셔서 감사합니다 :)

로그인 관련 문제

import { createWrapper } from 'next-redux-wrapper'; import { applyMiddleware, compose, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import createSagaMiddleware from 'redux-saga'; import reducer from '../reducers'; import rootSaga from '../sagas/index'; const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); }; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware(sagaMiddleware)) : composeWithDevTools(applyMiddleware(sagaMiddleware, loggerMiddleware)); // 배포용일 때는 devTools를 연결하지 않고 개발용일 때만 devTools를 연결 const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', // 이후에 배포할 때 production으로 바꿔주기 }); export default wrapper; import { createWrapper } from 'next-redux-wrapper'; import { applyMiddleware, createStore, compose } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import createSagaMiddleware from 'redux-saga'; import reducer from '../reducers'; import rootSaga from '../sagas'; const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware, loggerMiddleware]; const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper; 위와 같았던 store/configureStore.js를 아래의 제로초 선생님 코드를 복사하고 나니 로그인 문제가 해결됐습니다. 음 무엇이 문제였을까요

이미지 리사이징 403 forbidden

혹시 이미지 리사이징 안되시는 분들은 파일 이름이 '한글'이라서 인코딩 문제로 되지 않으실 확률이 높습니다! encodeURIComponent로 파일 이름을 감싸주면 정상적으로 인코딩되는데, 한글을 인코딩하면 초기에 설정했던 image 테이블의 src 컬럼 200글자를 넘어가는 경우가 많아 drop table 해주시고 3~400자 정도로 컬럼 설정 변경해주시면 모든 사진이 잘 업로드될 겁니다...!!

github으로 clone 해온 후 npx webpack 오류

아 해결했습니다!

aws 배포시 에러

아 helmet 설정이 true로 되어있었네요. 감사합니다!!!

테스트 커버리지 파일 이름

(사진) 터미널 늘리니깐 다시 제대로 나오네요! 감사합니다!

좋아요 기능 구현 문제

router.get('/hashtag', async (req, res, next) => { const query = req.query.hashtag; if (!query) { return res.redirect('/'); } try { const hashtag = await Hashtag.findOne({ where: { title: query } }); let posts = []; if (hashtag) { posts = await hashtag.getPosts({ include: [{ model: User, attributes: ['id', 'nick'] }] }); } return res.render('main', { title: `${query} 검색 결과 | NodeBird`, twits: posts, likes: twits.map((v) => v.Liker.map((v) => v.id)).includes(req.user.id), }); } catch (error) { console.error(error); return next(error); } }); 위와 같이 res.render를 통해 likes 배열을 받아왔고, 이를 이용해 {% if user and not (twit and likes) %} button class='like'>좋아요button> {% elif user and (twit and likes) %} button class='unlike'> 좋아요 취소button> {% endif %} 위와 같이 넌적스 파일을 만들었습니다. document.querySelectorAll('.like').forEach(function(tag){ tag.addEventListener('click',function(){ const isLoggedIn = document.querySelector('#my-id'); const twitId = tag.parentNode.querySelector('.twit-id').value; if (isLoggedIn){ axios.post(`/post/${twitId}/like`) .then(()=>{ location.reload(); }) .catch((error)=>{ console.error(error); }); } }); }); document.querySelectorAll('.unlike').forEach(function(tag){ tag.addEventListener('click',function(){ const isLoggedIn = document.querySelector('#my-id'); const twitId = tag.parentNode.querySelector('.twit-id').value; if (isLoggedIn){ axios.delete(`/post/${twitId}/like`) .then(()=>{ location.reload(); }) .catch((error)=>{ console.error(error); }); } }); }); like 버튼과 unlike 버튼의 이벤트 리스너는 위와 깉이 만들었습니다. 그리고 실제로 Like 테이블을 조회해보니 아래와 같이 좋아요 버튼을 누른 사람들이 조회가 됩니다. (사진) 그런데 문제는 좋아요 버튼을 눌러도 좋아요 취소 버튼으로 바뀌지 않습니다. 넌적스 파일에서 if와 elif 문을 잘못 작성한 것인지 이벤트 리스너를 잘못 구성한 것인지 오류가 뜨는 것도 아니다보니 정확한 이유를 찾지 못하겠습니다...

좋아요 기능 구현 문제

[Line 53, Column 80] parseSignature: expected comma after expression Template render error: (C:\Users\USER\git\Node.js\nodejsStudy\lecture\nodebird\views\main.html) [Line 53, Column 80] parseSignature: expected comma after expression라고 오류가 발생하고 오류가 발생한 줄의 코드는 {% set like = user and twit and twit['Liker'].map(function(value){ return value.id }).includes(user.id) %} 입니다! 혹시 res.render를 이용한 해결방안에 대해 조금만 더 설명해주실 수 있을까요?