본문 바로가기

개발

(16)

heroku 자동배포 오류 배포한 웹사이트에 에러를 발견해서 추가 수정하였는데 자동배포가 되지 않았다. 그래서 뭐가 문제인지 몰라 한참 헤메다가 heroku 알림을 보니 보안 업데이트로 인한 정책변경으로 깃허브와 뭐가 연동이 안된다고 한다. 구글링 해보니 heroku CLI를 설치해 배포를 진행하면 되는 거 같아 해보니 잘 해결됐다. 다음 프로젝트 배포 시에도 이런 상황이 또 발생할 수 있으니 일단 기록해두자. heroku login heroku git:remote -a git push heroku main // 브랜치는 main 또는 master

react + express 프로젝트 배포 후기 (heroku 이용) 현재 react와 express를 이용한 프로젝트를 진행중인데 거의 완성되어가서 미리 연습삼아 배포를 해보았다. 혼자서 배포하는 것은 처음이라 수많은 에러를 만났고 해결하는데 꽤 복잡했다. 그래서 그 과정 순서를 간단히 기록해본다. #. 프로젝트 세팅 먼저 heroku를 이용해 배포하는데 깃허브 레파지토리를 연동해야함으로 새로운 레파지토리를 생성했다. 기존에 client와 server를 각각의 레파지토리를 만들어 개발했어서 모두 클론해서 하나로 합쳤다. 1) server 폴더 안에 server.js 파일의 수정이 필요했다. '/' 경로에 get 요청 시 client 폴더의 index.html 파일을 보여주도록 코드를 추가했다. 그리고 기존에 PORT 값이 5000으로 고정값이였는데 heroku에서 연 포..

session vs jwt 로그인 로그인을 구현하는데 자주 사용되는 방식으로 세션(Session)방식과 토큰(JWT)방식이 있다. 그래서 간단히 이 두가지 방식은 어떻게 다른지를 간단히 정리해보고, 내가 JWT을 이용해 로그인을 구현한 방식도 기록해보려 한다. #. http stateless 먼저 http는 connectionless(비연결성), stateless(무상태) 라는 두가지 특성을 가지고 있다. 비연결성이란 클라이언트가 서버에 요청을 보내어 서버가 클라이언트에 응답을 마친 후 연결을 끊어버리는 특징을 말한다. 즉 클라이언트와 서버가 한번의 통신이 이루어진 후 그 연결성이 끊어지는 것. 그리고 무상태란 비연결성 특징으로 인해 서버가 클라이언트 식별할 수 없는 특징을 말한다. 클라이언트와 서버가 한번의 통신 후 연결이 끊어지기 때..

redux-saga를 이용한 비동기 구현 react, react-toolkit, redux-saga 이 세가지 조합으로 비동기 작업을 구현하는 방법을 기록해보자 - 🚀 #. 목표: list 페이지 진입 시 서버에 데이터를 요청하고 받은 데이터를 화면에 보여주기 1) 가장 먼저 api 호출하는 코드를 작성해보자. axios를 이용해 get 요청을 서버에 보내고 서버가 응답해준 데이터를 리턴한다. // api code export const latestVideos = async () => { try { const result = await axios.get('/videos/latest'); if(result) return res.data; } catch(err) { console.log(err) } } 2) react-toolkit을 이용해 act..

React + Express 무한 스크롤 기능 프로젝트를 하면서 무한 스크롤 기능을 구현해보았다. 프론트에서도 처음 구현하는 기능이었지만 백엔드도 처음이라 여러 시행착오를 겪었다. 그래서 그 과정을 간략히 기록하고자 한다. #. 무한 스크롤 기능 많은 데이터를 한번에 불러오게 되면 그만큼 사용자에게 로딩되어 보여지는 속도가 늦어지게 된다. 따라서 처음 로딩되었을 때 사용자에게 일정 데이터만 먼저 제공하고 이후 사용자가 더 많은 데이터를 보려고 스크롤을 움직이는 액션을 취하면, 그때 추가로 또 일정 데이터를 제공해주는 것을 반복하는 것이 무한 스크롤 기능이다. #. 백엔드 구현 목표: 클라이언트에서 데이터 요청 시 알맞는 데이터를 넘겨주는 것! 백엔드를 구현하는데 가장 시행착오를 겪었다. 백엔드에서 어떻게 데이터를 보내주는냐에 따라 프론트엔드에서 데이..

자바스크립트 동기와 비동기 #. 동기는 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 즉 A 요청 후 응답을 받을 때까지 다음 B 동작은 실행될 수 없는 것이다. 동기는 동시에 일어난다는 뜻이다. 따라서 동기는 전체 작업의 흐름이 하나의 줄기에 따라 순차적으로 실행된다고 생각하자! #. 비동기는 요청을 즉시 처리하지 않아도 그 대기 시간동안(응답오기 전까지의 시간) 다른 동작이 이루어지는 방식이다. 즉 C 요청 후 응답 받을 때까지 기다리는 것이 아닌 다음 B 동작도 바로 실행시키는 것이다. 따라서 비동기는 전체 작업의 흐름이 하나의 큰 줄기 안에서 여러 갈래로 나뉘었다가 다시 큰 줄기로 모이는 병렬적으로 실행된다고 생각하자! #. 자바스크립트는 단일 스레드, 동기식으로 동작한다. 즉 한 번에 하나의 작업을 ..

React + Redux(Redux-toolkit) + Redux-saga 현재 개인 프로젝트로 React와 Redux, Redux-saga를 이용해 개발 중이다. 그래서 각각 어떤 이유로 이용했는지 정리하고자 글을 적어본다. #. React 리액트는 기능 단위, UI 단위로 캡슐화하여 코드를 관리하기 때문에 재사용성이 높다. 또한 Virtual DOM을 통해 이벤트 발생 시 실제 DOM과 변경사항을 비교하여 변경된 부분만 재랜더링한다. 따라서 데이터가 변경되었을 때 효율적으로 랜더링을 수행할 수 있어 상호작용이 많은 UI라도 사용자에게 좋은 퍼포먼스를 제공할 수 있다. #. Redux / Redux-toolkit 리액트는 단방향으로 데이터를 전달할 수 있기 때문에 컴포넌트 구조가 복잡할수록 데이터를 추적하고 관리하는데 어려움이 발생한다(*Props Drilling 이슈). 이..

redux-saga #. redux-saga란? redux-saga(이하 리덕스 사가)는 redux의 미들웨어로서 비동기 동작을 실행 할 수 있게 한다. 즉 외부에서 데이터 가져오기(fetch)와 같은 비동기 동작들을 더 효율적으로 실행하고, 쉽게 관리하기 위한 라이브러리이다. 예를 들어, redux의 action이 발생하면 reducer가 액션을 처리하기 전에 비동기 작업을 요청하거나 다른 액션을 발생시키는 등 다양한 작업을 할 수 있도록 미들웨어로 동작한다. #. redux-saga 사용하는 이유 1) 주로 서버에 비동기 요청을 할 때 컴포넌트에서 요청하지 않고 Saga에서 모아서 관리해주기 위해 사용한다. 컴포넌트에서 직접 async/await 문법을 통해 서버에 API 요청을 보내는게 가장 간편하다. 하지만 이러한 ..

이전 1 2 다음

티스토리툴바