기록하고 싶은 것들

오늘은 OAuth에 대해 배우고, 관련 실습을 진행하였다. OAuth 인증을 중개해주는 메커니즘 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 (ex google, github, facebook 로그인) 실습 구현 단계는 아래와 같다 우선 실습전에, https://github.com/settings/developers 위의 링크에서 OAuth 앱을 등록해 주었다. 개발환경에서 진행했기 때문에, Authorization callback URL을 (http://localhost:3000)로 리디렉션하였다. 그리고 ClientId와 ClientSecret을 서버에 저장하여 사용하였다. 로그인 클라이언트 Login.js 로그인 버튼을 클릭시, GitHub로부터 사용..

문제 axios.delete로 logout url에 accessToken을 같이 보내주었는데, 서버에서 요청을 받기는 하지만, accessToken을 인식하지 못하는 에러가 발생했다. return axios .delete("http://localhost:4000/logout", { accessToken }) .then((res) => setIsLogin(false)); 다른 api에서 동일하게 사용했던 방법이 막히고 해결했다고 생각했던 부분에서 또 막히니 당황스러웠다. 그렇게 또 한 시간을 코드의 이상한 부분을 찾다가, 문득 delete api 에 body를 보내주나? 라는 의문이 들어서 검색을 해보았다. stackoverflow에서 비슷한 상황을 찾을 수 있었다. 해결 방법 DELETE의 경우 conf..

오늘은 토큰에 대해서 배웠고, 토큰을 이용한 로그인, 로그아웃 실습을 진행하였다. 실습 중에서 가장 어려움을 겪었던 부분이 있었는데, 그 부분을 간단히 적어보려고 한다. 토큰 웹 보안에서의 토큰은 인증과 권한 정보를 담고 있는 암호화된 문자열 의미 이를 이용해 특정 애플리케이션에 대한 사용자의 접근 권한을 부여가 가능하다 오늘 진행한 실습의 전체적인 과정과 유사한 이미지이다. 이중에서 오늘 가장 어려움을 겪었던 부분은 F, G, H 부분이다. 이 부분에 대해서 설명을 하자면, accessToken이 만료된다면 refreshToken을 이용하여서 다시 accessToken을 얻어온 뒤, 클라이언트로 보내는 과정이다. 이 과정에서 어려웠던 점은 조건 분기를 적절하게 해야되는 것이었다. 쿠키로부터 받아온 ac..

오늘은 Cookie에 대해서 배웠고, 실습을 진행하였다. 쿠키 HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일 실습 - 로그인 로그아웃 구현 클라이언트와 서버가 쿠키를 주고 받으면서 로그인, 로그아웃을 구현을 실습하였다. 작동흐름에 따라 실습내용을 정리해보고자 한다. 로그인 1. 서버로 로그인 요청 우선 Axios를 통하여 로그인을 처리하는 post 요청을 보내준다. 클라이언트 axios.post("http://localhost:4000/login", {loginInfo, checkedKeepLogin}) 2. 서버에서 로그인 요청 처리 서버 /login.js data에 저장된 아이디, 비밀번호와 요청받은 ..

빌드 만든 일기장을 배포를 하기 위해서는 빌드 작업을 거쳐야 한다. 따라서, 해당 디렉토리에서 build명령어를 실행해 주었다. npm run build 해당 명령어를 실행 뒤에는 build라는 디렉토리가 생성된다. 배포를 위해 , 지금까지 만든 결과물이 압축된 형태로 위치해있다. 배포 이번 프로젝트에서는 쉽게 배포를 할 수 있게 도와주는 firebase를 사용하였다. 프로젝트를 생성해준 뒤, firebase를 조작할 수 있는 아래의 툴을 설치해 준다. npm install -g firebase-tools 이후 프로젝트의 최상단 디렉토리 에서, 아래 명령을 실행해준다. firebase login 이후 firebase에 로그인하였던 구글계정으로 로그인을 해주면, 아래와 같은 이미지가 뜨며, 로그인이 되었다..

오늘은 SEO에 영향을 미치는 요소인 오픈그래프 요소에 대해서 공부해보고, 실습을 진행해 보았다. 오픈 그래프(Open Graph)란? 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여, 페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을 모든 웹페이지에서 가능하게끔 하는 프로토콜의 한 종류이다. property 속성값 설명 og:url 페이지의 표준 URL입니다. og:site_name 사이트의 이름입니다. og:title 콘텐츠의 제목입니다. og:description 콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다. og:image 미리보기로 표시될 이미지입니다. og:type 콘텐츠 ..

오늘은 기존의 적었던 다이어리의 상세 내용을 볼 수 있는 Diary page를 구현하였다. 정보 불러오기 params로 전달받은 diary의 id를 설정해준뒤, useEffect를 이용하여, id와 diaryList가 변경될 때마다 id에 해당하는 diary를 찾아 setData로 data의 상태를 변경시켜, 정보를 전달 받는다. useEffect(() => { if (diaryList.length >= 1) { const targetDiary = diaryList.find( (it) => parseInt(it.id) === parseInt(id) ); //일기 존재 여부에 따라 설정 if (targetDiary) { setData(targetDiary); } else { alert("없는 일기입니다."..

오늘은 감정 일기장의 일기를 수정할 수 있는 페이지인, Edit page를 구현해보았다. 아래의 비교 이미지와 같이 New 페이지와 동일하게 DiaryEditor 컴포넌트를 사용하여 거의 동일한 형태를 띄고있다. 하지만, Edit 페이지는 기존에 적었던 일기의 정보를 받아와야 하며, 수정의 기능과 삭제의 기능이 있어야 한다. 따라서 Edit 페이지에서는 DiaryEditor에 isEdit이라는 props를 내려주어, 세부적인 사항이 isEdit 여부에 따라 변경되게 해주었다. new와 edit 페이지 비교 일기 정보 불러오기 Edit과 originData의 상태가 변경할 때마다, originData의 정보를 불러와 useState를 이용해 저장해주어 날짜, 감정, 일기내용을 불러오도록 만들어주었다. us..

목차 콜백과 비동기 프로그래밍 Promise async와 await 비동기 순회 1. 콜백과 비동기 프로그래밍 콜백 함수란? 다른 함수에 매개변수로 넘겨진 함수 함수 안에서 실행하는 또 다른 함수 function say(callback) { callback(); } const hi = function () { console.log("hi"); }; say(hi); 비동기 프로그래밍이란? 특정 코드의 연산이 끝날 때까지 기다리지 않고,그 동안 다른 코드를 실행하는 것 ex) 특정 파일을 다운받을 동안 다른 코드를 실행 console.log(1); setTimeout(() => { console.log(2); }, 3000); console.log(3); //1 3 2 1.1 타이머 setTimeout() ..

오늘은 Redux 상태관리 실습의 추가적인 기능을 구현해보았다. actions/index.js action 부분에서는 Action 객체를 생성하는 액션 생성자 사용하여서 코드를 작성하였다. addCart의 경우는 새롭게 추가될 itemId를 받아서 itemId와 1개의 수량을 나타내는 payload 객체, 알맞은 타입을 반환해주었다 removeFromCart의 경우는 삭제에 필요한 itemId를 받아서, itemId를 나타내는 payload 객체와, 알맞은 타입을 반환했고, setQuantity의 경우 수정할 itemId와 수량을 받아서, itemId와 수량을 나타내는 payload 객체와 알맞은 타입을 반환해 주었다. pages/ShoppingCart.js Action 객체를 Reducer로 전달해 주..