공부하는 비오

401에 좀더 주목했어야 했다...하하 Unauthorized라길래 인증문제인가싶어서 passport랑 router만 열심히 들여다봤는데 어디 잘못된게 보여야말이지.... 에러 발생이유는 서버로 email이랑 password를 둘다 넘겨주어야하는데, email만 넘겨줘서...^^;;; 별거아닌 에러지만 시간을 좀 오래썼기때문에 기록.

Error 2021. 1. 16. 14:17

배포 : 실제 서버에 배포 빌드: 즉석에서 해놓은 것들(리덕스데브툴, 핫리로더, 코드스플리팅해놓은 것들...)을 미리 준비하는 과정이 필요함. 빌드 => html, css, js로 결과물이 나옴. 이걸가지고 배포한다. 개발에 필요한 것들은 빼버리고 실제 필요한 것들만 남겨둠. npm run build하면 크키별로, 번들별로 크기를 알려준다. 하지만 chunks 파일들은 어떤게 있는지 알기가 어렵다. 이때 이용할 수 있는 라이브러리가 @next/bundle-analyzer 이 라이브러리를 사용하면 빌드했을 때 각 번들별로 사이즈를 확인할 수 있다. 커스텀 webpack 설정하기 우선 webapck을 커스텀해보자. 공식문서에서 필요한 부분을 찾아서 작성할 수 있다. next.config.js: Custom ..

Next.js 2021. 1. 13. 20:27

손쉽게 날짜를 생성해주는 라이브러리 비슷한 역할을 하는 라이브러리들이랑 비교해보면 moment가 제일 많이 쓰인다. day.js는 점유도는 낮지만 사이즈 면에서 매력적이다. 어쨌든 점유도가 제일 높은 Moment를 사용해보자. 사용방법 moment() : 현재 날짜 moment(post.createdAt) : 인자(게시글생성일)가 알아서 모멘트객체로 바뀜. moment를 사용하지않으면 new Data.getFullYear() + new Data.getMonth() + ... 이렇게 조합해야하지만, format이나 fromNow 메서드 등을 통해 쉽게 표현할 수 있다. Moment.js | Docs moment.relativeTimeThreshold(unit); // getter moment.relativ..

React/React 관련 라이브러리 2021. 1. 13. 14:40

라이브러리 설치하는데 나타난 경고창. 사실 그 전에도 계속 뜨던 경고창이었는데 오늘에서야 신경이 쓰였다. (저 경고를 무시해도 설치는 잘 된다) 읽어보니 취약성이 발견됐다고, npm audit fix로 해결할 수 있고, npm audit으로 세부사항을 볼 수 있다고 한다. npm audit fix audit fix했더니 axios를 업데이트했다. 아마 버전업데이트가 안되서 생기는 취약성인듯. 하지만 두개는 해결되고 두개는 manual review가 필요하다고 한다. ???이게뭐지? 구글링해본결과, 서브버전일경우는 이 명령어로 해결이 가능하지만, 아예 버전이바뀌는경우 (2.x.x에서 3.x.x)에는 새로 설치해주어야 한다고한다. (정확하지않을수있음 주의. 혹시 틀렸다면 덧글로 알려주세요😭) npm audi..

Error 2021. 1. 13. 11:28

next에서 만든 React Hooks 라이브러리이다. 이 라이브러리를 사용하면 데이터를 쉽게 가져올 수 있다. (리덕스를 거치지 않아도 된다.) const fetcher = (url) => axios.get(url, { withCredentials: true }).then((res) => res.data); const { data, error } = useSWR('url', fetcher); fetcher : 데이터를 어떻게 가져올지 useSWR : 첫번째 인자가 fetcher의 인자로 들어감. data에 해당 api로 응답받은 데이터가 들어온다. 오류처리는 error를 사용할 수 있다. 로딩중은 data와 error 값이 없을 때이므로 !data && !error 로 조건문을 걸어주면 된다. ** 코..

Next.js 2021. 1. 12. 15:51

Next에서 동적라우팅하기 pages폴더에 [이름].js 로 파일을 만들면 /pages/[id] 로 접속할 수 있다. 컴포넌트 안에서는 router.query 로 접근할 수 있다. getServerSideProps getServerSideProps에서는 context.params 를 통해 접근할 수 있다. 혹은 context.query를 사용해서. 컴포넌트 완성본 SEO를 위해서도 HEAD를 만들어 여러 속성들을 지정해 주는 것이 좋다. og: 공유하기하면 미리보기뜸. 예를 들면 이런거 정 이야기 : 네이버 블로그 취미컬렉터 정비오의 기록 blog.naver.com

Next.js 2021. 1. 6. 20:22

next의 data patching 방법으로는 getStaticProps, getServerSideProps 가 있다. - getStaticProps: static data를 위해 data fetching (빌드 후 데이터변경불가. 빌드할 때 미리 HTML로 만들어놓음) 서버에 무리를 덜 주고 HTML이므로 더 빠르게 제공할 수 있지만, 정적 정보를 제공하게되므로 사용하기가 어려움. - getServerSideProps: SSR을 위해 data fetching (빌드와 상관없이 매 요청마다 데이터를 서버에서 가져옴) 동적 정보를 제공해야하는 경우. 대부분의 경우 로그인에 따라 화면이 다르게 나오므로 서버사이드프롭스를 사용. ex. 프로필페이지 (로그인한 사용자에 따라 다른 페이지를 보여줌) next와 함..

Next.js 2021. 1. 6. 10:12

모델.findOrCreate({ where: { options: 이름 } }); 모델 테이블에서 이름을 찾는다. 이름이 없으면 이름을 만든다. [ 이름, boolean값 ] 을 반환한다. ( boolean값은 만들었으면 true, 아니면 false를 반환한다.) 정규표현식을 사용하여 글에서 hashtags를 분리한다. (배열에 담겨짐) findOrCreate 메서드를 사용하여 Hashtag 테이블에 저장한다. tag.slice(1).toLowerCase() 해시태그에서 #을 뺀 값을 소문자로 저장한다. PostHashtag 테이블에 해시태그를 저장한다.

Sequelize 2021. 1. 5. 14:23