개인공부 (13) 썸네일형 리스트형 [Next.js] 13.4.16에서 api 처리 시 겪은 에러 핸들링 Next.js 12버전을 사용해오다가, 대규모 업데이트가 된 지금 12를 계속 사용하는 것에는 문제가 있다고 판단하여 새로운 프로젝트에서는 13버전을 사용하기로 결정. 아래는 api를 적용하면서 겪었던 문제를 해결한 방법이다. 어떤 유튜브 동영상에는 root > pages > api 폴더를 생성하고 파일이름도 route로 하지 않아도 api 자체를 만들 수 있었지만 최신 버전에서는 유효하지 않다. 우선 app > api > 설정 directory name > route.js 혹은 route.ts 안에 GET, POST, PUT 과 같이 METHOD 별로 함수이름을 정해야지만 서버 개발이 가능 함수 이름을 아무렇게나 해도 작동했었던 것과 달라서 기초적인 것이었지만 찾는데 오래걸렸음 front 단에서 pos.. Next.js에서 api get, post 요청을 터미널에서 하는 법 프론트쪽 개발이 아직 되어있지 않을 때 확인하는 또 다른 방법을 기록한다. 물론 get 요청의 경우 http://localhost:3000/api/~~~로 접속을 하는 것 자체가 get이라 응답을 확인할 수 있다. 터미널에 아래와 같이 입력을하면 get요청이 실행된다. curl -v 'http://localhost:3000/api/~~~' post요청의 경우 아래와 같이 실행할 수 있다. curl -v -X POST 'http://localhost:3000/api/~~~~' -H 'Content-Type: text/plain; charset=utf-8' --data-binary @포스트요청할위치/파일이름.확장자 까먹지 말고 필요할 때 활용할 것 Docker 학습 복기 도커란? 웹 어플리케이션(서버, 데이터베이스 등)을 마치 각각의 가상 머신안에 실행시켜주는 것과 같은 환경을 제공함으로써 어떠한 개발 환경에서든 표준화된 작업 환경을 가질 수 있도록 해주는 것 아래는 참고로 chatGPT의 정의 도커를 사용하면 개발자는 운영체제(OS)나 하드웨어 환경에 구애받지 않고 개발한 애플리케이션을 여러 환경에서 실행시킬 수 있습니다. 도커는 리눅스 컨테이너 기술을 기반으로 하며, 컨테이너 안에는 애플리케이션과 그에 필요한 라이브러리, 운영체제 등이 포함됩니다. 도커의 구조 hub → image → container 도커의 명령어 아래 명령어에서 사용된 이미지는 httpd 아파치 서버 이미지이다. 초급 도커 설치후 이상 없는지 확인하는 명령어 docker images // 여기서 .. [노마드코더]cloudflare workers로 노션을 Database로 써보자! 우선 이 글은 노마드코더의 노션 api 관련 동영상을 따라하다가, cloudflare workers에서 막혀서 답답했던 제가 싫어 작성하였음을 알려드립니다! 혹시 저와 같은 고민을 하셨던 분들이 있으셨다면 참고하시면 좋을 것 같아요! 🙏 https://youtu.be/XCAwSBdeejU 위 동영상을 보면 니꼬선생님께서 정말 친절하게 next.js에서 데이터를 프론트에 예쁘게 뿌리는 코드, notion api를 사용하는 법, cloudflare workers에 들어갈 코드를 설명해주셨음을 알 수 있습니다. 하지만 cloudflare workers에 들어가는 코드를 그대로 작성하면 안되실거에요. 어떻게 해결했는지 지금부터 설명드리겠습니다. cloudflare 회원가입 오른쪽은 클라우드 플레어 워커스 url.. 2021년 6월 5일 cmarket 리덕스 스프린트를 위한 redux 흡수하기(뇌피셜 + 튜토리얼/ 공식문서 훑어보기) 리덕스 뇌피셜 component 속 eventHandler 함수(ex : handleClick or handleQuantityChange or handleDelete 등...) 안에서 dispatch()에 본 component에서 set해야하는 state에 해당하는 action을 기재한다. action에는 타입(후에 reducer에서 타입으로 case를 구분)과 reducer로 전달하는 매개변수(state를 변화시키는 재료들)가 담겨있다. : 함수의 매개변수를 전달하는 느낌 reducer에는 state를 변화시키는 실질적인 함수들이 들어가 있다. 원래 eventHandler함수의 {}바디에 해당하는 것들이 저장되어 있는 듯. : 매개변수를 가지고 실제로 현재의 state를 변화시키는 함수 같은 느낌 질문.. 2021년 5월 22일 프로그래머스(약수의 개수와 덧셈) 약수의 개수와 덧셈 //내가 작성한 코드 function solution(left, right) { let result = ''; let count = 0; for(let i = left; i 2021년 5월 19일 프로그래머스(가운데 글자 가져오기, K번째수) K번째수 //내가 작성한 코드 function solution(array, commands) { var answer = []; for(let i = 0; i < commands.length; i ++){ answer.push(array.slice(commands[i][0]-1, commands[i][1]).sort(function(a, b) {return a - b;})[commands[i][2]-1]); } return answer; } 어려운 문제는 아니지만 얼마나 효율적으로 풀 수 있냐를 판단하는 문제라고 생각했다. 효율적인면에서 그리고 제 3자가 보기에 최악의 코드로 문제를 풀어냈다. 통과는 했지만..이게 무슨 의미가 있나 싶다. 다른 사람이 쓴 코드를 보고 현타가 왔다. function solu.. 2021년 5월 9일 클래스를 이용한 모듈화, 프로토 타입 예습 내일의 일정을 확인해보니 클래스를 이용한 모듈화, 프로토 타입이라는 것을 공부해야하는 것으로 나와있었다. UR클래스에는 아직 강좌가 열리지 않아서 확인을 못했지만 해당 내용은 코드스테이츠를 수강하기 전에 객체를 공부하며 함께 본 기억이 있었기에 그때 공부했던 자료를 찾아보기 시작했다. 그당시 중요하다고 생각한 내용을 적어 놨었는데 아래와 같다. 객체에 추가된 값으로 정의되는 속성을 property라고 한다. 속성들 중에 값이 함수인 것들을 method(동작, 기능)라고 한다. this란? 객체가 메서드를 실행했을때 메서드를 실행한 주체 객체, 자바스크립트 함수 안에서 this는 함수가 실행되는 context에 따라 값이 바뀐다. 생성자(constructor) 함수란 객체를 생성해내는 함수. functio.. 이전 1 2 다음
