ALL

[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 파일이나 컴포넌트 파일에 ..

[WIL] 2022 - 09 W1

💛한 주간 공부한 것 ✔️부트캠프 react-redux 복습 웹 표준화 / 웹 접근성 네트워크 ✔️알고리즘 투포인터 알고리즘, 슬라이딩 윈도우 알고리즘 강의 및 문제풀이 ✔️개인공부 투두 리스트 리덕스 툴킷 리팩토링 & 깃헙 배포 Next.js 학습 💛좋았던 점 추석 연휴가 있는 주간이라 오랜만에 기분 좋게 공부도 하고 또 푹 쉴 수 있었다. 다시 에너지가 충전된 기분이라서 더 열심히 달릴 수 있을 것 같다...! 한달간 붙잡고 있던 투두 리스트를 블로그에 정리하면서 리뷰했다. 엄청 간단한 프로젝트인데도 의외로 쓸 말이 많아서 놀랐다. Next.js 를 배워보고 싶어서 노마드 코더에서 새로운 강의를 결제했다. 부트캠프 과정에서 다루는 스택은 아니라 엄청난 도움이 될 것 같지는 않은데, 배워서 나중에 개인..

[Toy] 리액트, 리덕스 툴킷, styled-components 로 만든 투두 리스트

🐱개요 배운 내용을 연습하기 위한 토이 프로젝트 입니다. 리액트, 리덕스 툴킷, styled-components 를 활용하여 만들었습니다. LINK https://hyejj19.github.io/react-todo/ GITHUB GitHub - hyejj19/react-todo: 리액트로 만든 간단한 Todo List 리액트로 만든 간단한 Todo List. Contribute to hyejj19/react-todo development by creating an account on GitHub. github.com 🐱기능 할 일 추가 및 삭제 반응형 디자인 🐱결과물 🐱프로젝트 구조 폴더 구조 컴포넌트 구조 FigJam 을 사용해 컴포넌트 구조와 각 컴포넌트별 필요한 props와 state를 간단하게 정..

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

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

[알고리즘] 최대매출

문제 현수의 아빠는 제과점을 운영합니다. 현수 아빠는 현수에게 N일 동안의 매출 기록을 주고 연속된 K일 동안의 최대 매출액이 얼마인지 구하라고 했습니다. 만약 N = 10이고 10일 간의 매출 기록이 아래와 같습니다. 이 때 k = 3 이면, 12 15 11 20 25 10 20 19 13 15 연속된 3일간의 최대 매출액은 11 + 20 + 25 = 56만원 입니다. 여러분이 현수를 도와주세요. 풀이 1번 풀이 // 1번째 시도한 코드 // : lt와 rt를 선언해서, rt를 증가하면서 더하고, // rt - lt 가 k - 1 보다 클 경우(index가 0부터 시작하므로 -1을 해줌) // sum 에서 lt를 빼면서 증가 // sum에 rt를 더하고 max 값과 비교하여 max를 갱신하여 리턴 fu..

[알고리즘] 연속 부분수열 2 (투포인터 알고리즘)

문제 N개의 수로 이루어진 수열이 주어집니다. 이 수열에서 연속 부분수열의 합이 특정 숫자 M 이하가 되는 경우가 몇 번 있는지 구하는 프로그램을 작성하세요. 풀이 const M = 5; const arr = [1, 3, 1, 2, 3]; function solution1(M, arr) { const N = arr.length; let lt = 0; let count = 0; let sum = 0; for (let rt = 0; rt M) sum -= arr[lt++]; // 이..

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

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