TIL

[Day 61] 2022-0915: oAuth 깃허브 인증, Next.js

🐈오늘 공부한 것 ✔️oAuth oAuth란 흔히 네이버 로그인, 카카오 로그인, 깃허브 로그인 등 소셜 로그인을 가능하게 해주는 프로토콜이다. 토큰이 꼭 권한을 부여하는 쪽에서 생성하지 않아도 된다고 했는데, oAuth에서는 이미 사용자 정보를 가지고 있는 제 3의 서비스에서 인증 절차를 대신 해주고, 여기서 발급받은 권한 토큰(액세스 토큰)을 가지고 리소스 서버로 부터 정보를 요청하여 사용자에게 보여줄 수 있는 기술이다. 소셜 로그인은 유저 입장에서도, 개발자 입장에서도 편리하다. 이미 다른 곳에 있는 유저 정보를 활용해서 구현할 수 있기 때문에 이런 유저 정보 관리에 대한 신경을 덜 써도 되고, 유저 입장에서는 회원 가입이 간편화되기 때문에 편리하게 느낄 수 있다. 또 유저의 민감 정보가 직접 서비..

[Day 60] 2022-0914: JWT 로그인 인증 구현, Next.js

🐈오늘 공부한 것 ✔️토큰 개념 서버에 유저 인증 정보를 담고있는 세션과 달리 토큰은 쿠키처럼 클라이언트에 암호화된 인증 정보를 가지도록하여 서버에 부담을 주는 세션의 단점을 보완한 인증 방식이다. 토큰은 암행어사 마패처럼 유저에게 유효한 토큰이 있다면 서버의 특정 정보에 대해서 접근할 수 있는 권한을 부여받는다. 토큰을 발급하면서 권한의 범위를 지정할 수도 있다. 실제로 주고받는 데이터는 암호화된 데이터인데 서버에서 이를 복호화 하기 때문에 키는 노출이 되지 않아 비교적 안전하다. 또한 토큰을 발급해주는 서버가 그 토큰을 꼭 생성하지는 않아도 된다. ✔️JWT JSON Web Token 의 약자로, 말그대로 JSON 포맷으로 사용자 속성을 적용하는 웹 토큰의 한 종류이다. JWT 는 header, pa..

[Day 59] 2022-0913: Cookie & Session + 로그인 구현, https, mkcert

🐈오늘 공부한 것 ✔️Cookie & Session Cookie 쿠키 쿠키란 HTTP 프로토콜이 가진 무상태성을 보완하기 위해 사용하는 데이터의 일종이다. HTTP가 stateless 라는 것은 서버가 이전에 받은 요청에 대해 기억하지 못하는 것을 의미한다. 이런 특성 때문에 클라이언트에서 미리 모든 정보를 담아 요청을 보내어 여러 서버가 많은 요청을 처리할 수 있다는 장점이 있다. 반면에 기억해줬으면... 하는 것들을 기억하지 못하기 때문에 쿠키라는 데이터에 기억해줬으면 하는 것들을 담아 서로 주고받으면서 상태를 유지할 수 있게 된다. 쿠키를 사용하기 위해서 서버가 클라이언트에 쿠키를 보내게 되면 브라우저가 쿠키를 가지고 있게 된다. 쿠키는 명시적으로 삭제하기 전까지는 브라우저에 보관되기 때문에 브라우..

[Day 58] 2022-0912: Next.js

🐈오늘 공부한 것 ✔️투두리스트 리뷰 https://friedegg556.tistory.com/227 구현한 스타일링 코드와 리덕스 툴킷으로 리팩토링한 과정을 글로 정리했다. 처음에 할 때는 쉬워보였다가 중간에 안풀릴때는 엄청 어려웠다가 다 끝내고 다시 보니 또 엄청 쉽게 느껴지는 마법... ✔️Next.js 노마드 코더의 Next.js 시작하기 강의를 수강중이다. 오늘 배운 내용은 Next.js 프로젝트에서 css 적용하는 방법과 app 컴포넌트, 레이아웃 컴포넌트로 전체 페이지에 스타일 일괄 적용하기 그리고 next.config.js 파일로 redirect, rewrite 설정하기. CSS module 과 styled jsx 후술할 _app.js 파일을 제외한 일반 page 파일이나 컴포넌트 파일에 ..

[Day 57] 2022-0909: Next.js , 알고리즘

🐈오늘 공부한 것 ✔️Next.js Next.js 란 리액트 라이브러리의 프레임워크이다. 프레임워크란 그것을 사용하기 위해서 정해진 규칙이 있어서, 그에 맞춰 코드를 작성하면 프레임워크가 이를 정상적으로 동작하도록 관리하는 것이다. 리액트는 라이브러리이기 때문에 제공하는 기능을 내가 직접 가져다 쓰면서 구조와 흐름을 개발자가 제어하지만, 프레임워크는 뼈대 위에 내가 코드를 얹으면 프레임워크가 이를 제어한다는 차이가 있다. 렌더링 같은 경우도 일반적인 리액트 코드에서는 react-dom 을 불러와서 직접 사용해야 하지만 Next.js 에서는 그럴 필요가 없다. 추상화가 되어있어서 내가 코드를 짜면 프레임워크가 그 일을 대신해준다. Next.js 설치 및 프로젝트 생성 npx create-next-app@l..

[Day 56] 2022-0908: 네트워크, 요즘 느끼는 것

🐈오늘 공부한 것 ✔️IP와 IP 패킷 패킷 교환 방식 이전에는 회선 교환 방식이 있었다. 수신자, 발신자가 각각 전용 회선을 가지고 있어서 요청이 왔을 때 이들을 연결시켜주는데 중간에 그 역할을 담당하는 오퍼레이터가 있다. 오퍼레이터를 거쳐야 하기 때문에 즉시성이 떨어지고, 수신자가 다른 회선과 연결되어 있으면 발신자는 기다려야하는 상황이 생긴다. 이를 보완하기 위해 생겨난 것이 패킷 교환 방식인데, 현대의 인터넷 프로토콜에서는 데이터를 패킷 단위로 잘게 쪼개서 보낸다. 출발지에서 목적지까지 무사히 전달되기 위해서는 규칙이 필요한데, 이 때 IP 패킷이라는 개념이 등장. IP 패킷은 택배처럼 출발지 IP와 목적지 IP 주소를 포함하고 있어서 네트워크에 존재하는 노드들이 서로 데이터를 전달-전달 하면서 ..

[Day 55] 2022-0907: TodoList gh-pages 배포

🐈오늘 공부한 것 ✔️TodoList 리덕스 툴킷 리팩토링 및 배포 https://hyejj19.github.io/react-todo/ 거의 한달간 useState를 사용했다가, styled-components를 연습해봤다가 리덕스 툴킷까지 적용하는 연습을 했던 투두리스트 버전 1을 깃헙 페이지로 배포했다. 최적화까지 해보려고 했는데 일단 다른 것도 만들어 본 뒤 다시 보면 새로울 것 같아 여기서 마무리... 상태를 많이 사용하지도 않고 컴포넌트도 몇 개 없다보니 새로 배운 내용으로 고치는 것은 별로 오래걸리지 않았는데, 좀 힘들었던 부분이 createSlice 를 만들어서 state를 셋팅해주는 부분... 처음 알게 되었는데 immer.js 라이브러리가 사용되면 state가 Proxy 객체로 보이기 때..

[Day 54] 2022-0906 : 웹 접근성

🐈오늘 공부한 것 ✔️웹 접근성 웹 접근성이란 말 그대로 '모든' 사용자가 환경에 구애받지 않고 동등한 수준의 정보와 기능을 접근할 수 있도록 하는 것이다. 대표적인 예시로는 대체 텍스트를 넣거나 콘텐츠를 명확하게 구분할 수 있는 시각적인 효과와 정보를 제공하는 것이 있다. 웹 접근성 향상을 위해서 WAI-ARIA 와 같은 방법을 사용할 수 있는데, HTML 시맨틱 태그로 의미 전달이 충분하다면 굳이 사용할 필요가 없으나, 그렇지 못한 경우에는 사용할 수 있다. WAI-ARIA 는 HTML 태그 안에 role, state, property 라는 속성으로 분류하여 적용할 수 있다. role은 현재 html 태그와 기능이 서로 대응되지 않을 때 요소의 역할에 대해 추가적인 정보를 제공할 수 있고, state..

[Day 53] 2022-0905 : react-redux, 웹 표준화, SEO, 알고리즘

🐈오늘 공부한 것 ✔️react-redux 복습 https://friedegg556.tistory.com/218 주말에 복습한 내용인데 오늘 아침에 정리를 마무리했다. 과제까지 풀면서 했던 내용인데도 어이없는 곳에서 실수한 부분이 꽤 있어서, 그 부분까지 같이 정리했다. 이후에 리덕스 툴킷도 같이 공부했는데 그건 추가로 더 공부한 뒤에 정리해보겠음. ✔️웹 표준화와 SEO 이번 유닛의 주제는 웹 표준화, SEO(Search Engine Optimization) 그리고 웹 접근성이다. 예전에 HTML을 처음 접했을 때 배웠던 내용들을 복습하는 느낌이었다. 특히 meta 태그의 두 가지 종류, name과 property에 대해서 새롭게 알게 되었다. 먼제 인터넷과 웹이 있을 때, 인터넷은 전 세계적으로 연결..

[Day 52] 2022-0903 : Redux, git push --mirror, 완전탐색 알고리즘

🐈오늘 공부한 것 ✔️Redux 정리 https://friedegg556.tistory.com/215 리덕스 공식문서의 fundamentals 챕터에 있는 바닐라 자바스크립트에 적용된 리덕스 코드를 분석하며 정리해보았다. 자바스크립트에서 동작하는 방법을 보니 리덕스의 원리(?) 에 대해서 더 이해하기가 쉬웠고, 왜 react-redux 라이브러리가 리액트에서 이를 쉽게 사용할 수 있게 도와주는지 더 잘 알게 되었다. 바닐라 자바스크립트에서는 데이터의 변경을 자동으로 감지하지 않기 때문에 subscribe 같은 별도 함수에 콜백함수를 전달해야하고, 또 DOM 이벤트를 감지하도록 이벤트 리스너를 설정하는 등 조금 복잡한 과정이 있었다. 리액트에서는 상태가 업데이트 되었을 때 화면을 변경할 수 있고 또 컴포넌..