전체 글104 [스터디_실전에서 바로쓰는 Next.js] 12. 커스텀 인증, Auth0 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 커스텀 인증 인증은 구글, AWS Cognito 등 기존의 안전한 인증 서비스 업체들을 활용하는 것이 시간과 안정성 면에서 효율적이다. 그러나 직접 인증을 구현하면 인증의 작동 원리와 핵심을 더 깊게 이해할 수 있으므로 간단히 살펴보자. pages/api/login.js import { encode } from "../../lib/jwt"; import { serialize } from "cookie"; // 사용자 인증 함수 : 사용자가 입력한 이메일, 비밀번호가 유효한 경우 JWT를 생성해 반환한다. // 데이터베이스나 외부 인증 서비스를 통해 사용자 정보를 조회하는게 일반적이.. 2023. 9. 3. [스터디_실전에서 바로쓰는 Next.js] 12.1~2 인증과 JWT 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 인증과 사용자 세션 클라이언트와 서버가 통신을 할 때 이용하는 HTTP 프로토콜은 stateless하기 때문에 서버로 가는 모든 요청이 이전 요청과 독립적이다. 한 번 연결된 사용자의 상태를 저장하지 않기 때문에 매 요청마다 다른 사용자로 인식한다는 뜻이다. 그러나 서비스를 제공하다보면 사용자 인증, 언어 설정처럼 사용자의 상태를 기억할 일이 생긴다. 그래서 이런 필요에 의해 세션이나 토큰을 사용하게 되었다. 인증 정보의 저장 장소로 클라이언트보다는 서버가 더 안전하기는 하지만 계속 연결 상태를 물고 있기 때문에 한번에 여러 접속자가 몰릴 경우 과부하에 걸릴 수 있다. 이를 예방하.. 2023. 8. 27. [스터디_실전에서 바로쓰는 Next.js] 9. 테스트와 JEST 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 TEST '코드 지금 잘 돌아가고 있는데 리팩토링 했다가 안되면 어떡하지' 라는 생각이 든다면 테스트 추가를 통해 개선한 코드가 잘 동작하고 있다는 자신감을 얻을 수 있다. 새로운 기능을 추가할 때도 마찬가지다. 테스트는 코드와 개발자에게 안정감을 준다. JEST Jest는 가장 널리 사용되는 테스트 라이브러리로, 간결성에 중점을 둔 즐거운 JavaScript 테스트 프레임워크가 슬로건이다. 다양한 종류의 테스트를 지원하지만 주로 단위, 통합 테스트에 특화되어 있으며 'jest-puppeteer' 플러그인을 통해 e2e 테스트 또한 가능하다. TEST의 종류 단위테스트 전체 코드의.. 2023. 8. 20. 프론트엔드 개발을 위한 서비스 구조 (Typescript, React, Styled-components, React-query, MobX, React-intl) 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 프론트엔드 개발을 위한 서비스 구조 회사에서 서비스 리뉴얼에 들어가며 레거시 리팩토링도 함께 진행한다고 해서 서비스 구조를 어떻게 가져가면 좋을지 생각해 보았다. 결국 리뉴얼만 하고 리팩토링은 무기한으로 미루어졌지만, 생각한 내용을 한 번 정리해두는 게 좋을 것 같아 글을 남기게 되었다. 📦src ┣ 📂assets ┃ ┣ 📂fonts ┃ ┗ 📂images ┣ 📂domain ┃ ┣ 📂dashboard ┃ ┗ 📂user ┣ 📂infrastructure ┃ ┣ 📜http.ts ┃ ┗ 📜storage.ts ┣ 📂repositories ┃ ┣ 📜DashboardRepository.ts ┃ .. 2023. 8. 15. [실전에서 바로쓰는 Next.js] UI 프레임워크 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 UI 프레임워크 웹 앱을 개발하다보면 UI에서 상당히 비슷한 접근성 규칙이나 유틸 함수를 자주 사용하게 된다. 이럴 때 UI 라이브러리가 필요하다. 우리는 다음과 같은 이유로 UI 라이브러리를 사용한다. 1. 많이 사용하는 기능을 추상화 2. 서로 다른 UI 간에도 코드 재사용을 최대화 3. 생산성 향상 4. UI 컴포넌트에 테마 적용 가능 Chakra UI 차크라UI의 메인 슬로건은 '빠르게 접근 가능한 React 앱 만들기'다. 개발자가 라이브러리를 쉽게 사용할 수 있고, 웹 표준을 따르고 있으며, 리액트 기반 라이브러리라는 것을 유추해 볼 수 있으며, 이를 위해 미리 디자인된.. 2023. 8. 13. 이전 1 2 3 4 5 6 7 ··· 21 다음
