NARA-API
1.CRA vs NextJS
리액트 기반 프런트엔드 프레임워크 선택이 필요하다. NextJS를 선택하고자 하는 이유는 단순하다. 현재 ReactJS 공식문에서에서 서술하기로는 CRA는 초심자를 위한 빌드패키지라고 서술하고 있으며, NextJS는 SSR(Server Side Rendering)을 위한 프레임워크이며 NodeJS 사용자를 위한 추천한다고 젹혀 있다. 지금 작업 중인 프로...
2.Localhost의 Https 적용
개발을 위해 local환경에서 Https를 적용해야 할 일이 있다. 임시로 로컬을 위한 인증서를 발급하고 적용하는 과정을 기록한다. (Express서버 기준) 인증키 생성 공개키 생성 서버에 적용 Https서버 생성 서버 Listen 참고 : https://
3.Https에서 Http데이터 호출 에러
조달청 API는 http 통신이지만 사이트는 Https 기반으로 작동하고 있기에 http로 부터 받은 데이터를 웹에 표현할 때 발생하는 에러이다. 나의 경우는 아래 링크를 참고했다. https://stackoverflow.com/questions/35178135/
4.HTTPS 통신을 위한 certbot 설정
https://twpower.github.io/44-set-free-https-by-using-letsencrypt 해당 링크의 자동화 된 Let's Encrypt 를 통해 HTTPS 설정을 했다. webroot에 직접 설정하는 방법도 있으나, certbot을 설치
5.ubuntu 환경에서 nextjs구동을 위한 nginx설정
6.문제는 언젠가 해결된다.
NextJS 12버전에 nginx reverse proxy 적용 결과 나온 에러다. 로그 상으로 momentjs 모듈에서 발생한 에러로 보이지만, create-next-app으로 새로운 웹을 만들어도 같은 문제가 발생했다. 해결방법을 찾으려고 각종 국내 및 해외 개
7.Docker container간 연결 오류
프론트엔드 container와 백엔드 container 간의 연결의 오류로 인해 발생한 에러이다. 각 서버는 localhost를 바라보고 있으나, 도커에 올라간 각 컨테이너에서 localhost는 내 접속환경의 주소가 아니라 각 컨테이너에 배정된 주소를 뜻하기에 각
8.JWT 인증 방식
JWT인증 방식은 사용자에게 JSON형태의 정보를 전달하여 서버에서 유저의 상태를 stateful하게 저장할 필요가 없다. 특히, 사용자의 디바이스에 구애받지 않아 요즘 같은 멀티 디바이스 환경에 최적화 된 인증방식이다.
9.포트번호 입력 없이 도메인 접속
www.naraapi.com 도메인에 웹을 운영중이다. 하지만 접속을 위한 Frontend 접근을 위해서는 3000번 포트로 접속해야하는데 http의 경우 80번, https의 경우 443번이 기본 포트인 관계로 도메인명만 입력한다면 자동으로 기본포트로 접속하게 된다.
10.Material UI에서 Tailwind로
Material UI로 CSS를 쓰다가 다른 CSS로 바꿔야겠다는 생각이 들었다. 큰 이유는 아니지만 굳이 이유를 들자면 다음과 같다. Material UI는 멋이 없다. 커스텀 편의성이 떨어진다. 페이지가 파란색 계열의 단조로운 폰트와 라인 디자인만으로 만들어졌다
11.Mongoose Model 명명
Mongoose는 자동으로 model함수의 첫 인자인 model명의 소문자 + 복수형의 collection을 찾는다.
12.MongoServerError: bad auth : Authentication failed.
Mongoose url 입력 후 접속 시 계속 인증 에러가 발생했다. 보통 이런 경우 2가지 이유로 인해 인증이 되지 않는다. 1.샘플 url 오타 (특히, password가 replace 되지 않은 경우) 2.네트워크 접속 규칙에 의한 연결 거부 2가지 경우를 모
13.TypeError: Utils is not a constructor (Material UI)
Material UI DateRangePicker 사용중 타입 에러가 발생했다. 방법은 공식문서에 나와있다. Requirements This component relies on the date management library of your choice. It su
14.NextJS Router 이동 중 Loading창
페이지 이동 간 로드 페이지 작성이 되어 있지 않았다. 그로 인해, 나라장터 API 호출하는 동안 페이지는 아무반응이 없어 사용하는 내 입장에서 사이트가 멈춘 건지, 아니면 외부 자료를 로드하는 중인지 알기 어려웠다. 그래서, API 받는 중 로드 화면을 만들었다.
15.Prop 'href' did not match.
Material-UI의 링크 이동은 공식적으로 태그 대신에 비즈니스 로직을 구현하여 이동하는 것을 권장한다. 만약 태그를 그대로 사용 시, 다음과 같은 오류를 볼 수 있다. Material-UI의 컴포넌트는 href를 props로 쓰지 않기 때문에 비즈니스 로직을 구
16.().map is not a function
정상적인줄 알았던 코드에서 계속 "{name}.map is not a function"이라는 에러가 떴다. 구글링 결과 map함수의 상속관계에 대한 문제임을 확인했다. Object 객체에는 map함수가 없고 하위객체인 Array에 지원하는 함수다. 따라서 Object
17.Axios multi request (Deprecated)
3가지 url을 요청하여 하나의 JSON데이터를 Frontend로 넘기고 싶었다. 문제는 기존의 axios.get()으로는 한번에 3종류의 api를 받을 수 없다. 이상하게도 axios 공식 문서에는 나오지 않았지만 구글링 결과 axios multi request기능