본문 바로가기

자바스크립트7

[Axios] withCredentials과 CORS 오랜만에 블로그에 포스팅을 하는 것 같다. 거의 두 달 만인가? 최근에 이런저런 일들로 나를 돌보지 못해 블로그도 거의 손을 놓다시피 했는데... 이제는 다시 나를 돌볼 수 있게 되었으니 블로그에 신경을 써보려 한다. 2달 만의 포스팅은 오늘 배운 Axios의 withCredentials 옵션과 CORS의 관계에 대해서 알아보자. 🧑🏻‍💻 Access Token을 보내고 싶었을 뿐이야. 현재 진행하고 있는 프로젝트에서는 이메일과 패스워드를 통해 로그인이 이뤄진다. Next.js 프론트 클라이언트에서 이메일과 패스워드를 request body에 담아 post 요청을 보내면 Python Django 백 엔드 클라이언트에서는 Access Token과 Refresh Token을 보내주는데, Access Toke.. 2023. 12. 29.
[React.js] TypeScript에서의 setState 등등에 대해 알아보자 🤔 any 지양하기. 졸업 작품의 프론트를 Next.js + TypeScript로 작성하고 있다. 자식 컴포넌트에서의 상호 작용이 state를 변경시켜야 할 필요가 있어서 부모 컴포넌트에 선언된 setState 함수를 자식 컴포넌트에 props로 넘겨주면서 의문이 생겼다. TypeScript를 통한 React 개발에서 보통 props를 넘겨받을 때, interface나 type alias를 활용하여 해당 props의 타입을 지정해주고는 하는데, props로 number, string 같은 원시 타입만 넘기는 것도 아니고 때때로 ReactNode 같은 타입들도 넘겨야 할 필요가 생기고는 한다. 이전까지는 ReactNode나 HTML 엘리먼트, setState 함수 등을 props로 넘겨줄 때에 정확한 타입.. 2023. 10. 20.
[React.js] React에서 페이지네이션 구현하기 🧑🏻‍💻 그런 욕심이 들 때가 있다. 대학교 졸업 학기, 현장 개선 캡스톤 디자인 수업 (일명 졸업작품)을 듣고 있다. 팀장을 맡아서 우리 대학의 취업 역량 강화 프로그램 점수를 기반으로 하는 랭킹 커뮤니티 사이트를 개발하고 있는데, 사용자들의 랭킹을 보여줄 때 한 페이지에 30개의 데이터만 보여주고 싶었다. 못해도 전체 재학생 수가 1,000명은 족히 넘을 것이므로 한 페이지만으로 랭킹을 보여주기에는 가독성이 떨어지니까. 그래서 페이지네이션 처리가 필요했는데, 백엔드를 개발하는 팀원에게 부탁하기에는 이미 그가 만들어 주기를 기다리고 있는 수많은 API가 줄을 서 있었기에 팀장으로서 이 정도 처리는 프론트에서 하겠다 자신있게 말을 하고는 페이지네이션에 대한 자료를 이것저것 찾아보았다. 💡 페이지네이션(P.. 2023. 10. 18.
[Linux / Node.js] 난 그냥 리눅스 서버에서 node.js가 쓰고싶었어 🥲 ssh 서버에서 React 프로젝트를 실행시키려고 했다. 이제는 뭔가 하면서 삽질한 기록을 남겨보려고 한다. 매번 같은 문제로 삽질을 하는데도 기억은 휘발되고 기록은 없어 경험에게 도움을 구할 수가 없다는 문제가 생겨서 곤란한 상황이 오늘 생겨버렸기 때문이다. 오늘은 그놈의 Thumbnail Maker를 Linux Ubuntu ssh 서버의 개발 서버에 열어보려고 시도했는데 왠걸 갑자기 try~catch의 오류를 뱉거나, npm, yarn 모두 오류를 내뿜으며 실행을 시켜주지 않았다. 이리저리 알아보다가 node.js, npm, yarn의 버전 문제였다는 것을 알아냈기에 ssh 서버에서 nvm을 통해 버전을 관리해주고자 했는데 nvm이 설치가 잘 되지 않는 문제가 생겼다. 캡처를 못해놓고 해결해버려서.. 2022. 12. 9.