WEB 6

HTTP 그게 뭔데! ver1

intro바야흐로 웹 개발자라면 http 통신에서 살고 있는 21세기 개발자에게 필수지식이 되어버렸다. http에 대해 잘 모르는 frontEnd 개발자라도 자바스크립트에 기본으로 내장되어있는 fetch 함수는 사용 혹은 구경은 해본경험은있을것이라 생각한다. (웹 개발자니까.. 서버랑은 통신 해본경험은 있을거 아녀..) 통신할때 꼭 필요하다는 http! 우리가 알게 모르게 사용하고 있는 이 http에 대해서 얇고 넓은 지식을 한번 이 포스팅에 담아보도록 하겠다. 내용전공자라면 정말 지겹게 듣는다던 osi 7계층 (나는 비전공자 ^ㅅ^;;) 이 모든것에 다룰 자신도 없고 그럴 필요도 (필요할 수도?) 없다고 생각한다.해당 포스팅은 7 ~ 4 계층 까지 정말 웹에 필수? 적인 내용만 담을거 이기 때문이다 우..

WEB 2024.08.05

[OAuth] [JWT] [Spring] 구글 소셜 로그인 Google Login

구글 소셜로그인 Intro 많은 서비스들이 사용자들이 쉽게 접근하여 서비스 이용까지 불편함을 겪지 않기 위해 소셜 로그인을 적극 활용한다. 내가 주로 사용하는 트렐로, 인프런 등등 웹 서비스 하는 사이트들은 간편한 로그인 서비스 기능을 제공한다. 우리 서비스도 사용자들의 편의성을 고려하여 도입하기로 하였고 이번 기회에 직접 구현하면서 많은 것들을 배웠다. 우선 해당 포스팅을 통해 로그인 기능을 구현하고자 하는분들이 이해하고 따라 만들기 위해 선수 지식들이 필요하다. 구체적인 코드와 내가 만난 여러 에러들을 공유하고 후에 해당 기능을 구현할때 큰 어려움이 없었으면 한다. 클라이언트 단은 react 를 사용하였고 패키지 관리는 yarn 으로 했다. 서버는 spring-boot 를 사용하였다. 라이브러리 관리..

WEB 2024.03.01

[JAVA Spring ] 카카오 로그인 기능 FeignClient 도입기

spring 서버에서 카카오 서버에게 리소스에 접근권한을 가지는 토큰을 요청할때 기존의 RestTemplate를 사용해왔는데 다른 개발자들의 FeignClient를 사용하여 소셜 로그인을 구현한 코드를 보았는데 훨씬 간결하고 사용하기 편해보였다. 간단한 인터페이스 선언방식을 사용하여 마치 Spring Data Jpa, 혹은 mybatis 의 @mapper 어노테이션을 사용하여 실제 구현코드 없이 구현할 수 있어서 코드 간결성과 유지보수에 용이해보여 프로젝트에 도입하기로 결정했다. 우선 기존의 RestTemplate 로 작성한 코드부터 살펴보고 추후 도입한 FeignClient를 도입한 코드와 비교해 보자. String kakaoTokenUrl = "https://kauth.kakao.com/oauth/t..

WEB 2024.02.17

[REACT] dotenv 환경변수 설정, 빌드 환경변수

React 빌드 환경변수 설정현 프로젝트에서 빌드 시 동적으로 도메인 명을 바꾸는 작업이 필요했다.개발에서는 http://localhost:8080 실제 서비스 운영에는 도메인을 올릴 거 기 때문에 서버에 요청하는 uri이 각 빌드마다 달라야 했다.React dotenv-cli 라이브러리 설치https://www.npmjs.com/package/dotenv-cli dotenv-cliA global executable to run applications with the ENV variables loaded by dotenv. Latest version: 7.3.0, last published: 6 months ago. Start using dotenv-cli in your project by running..

WEB 2024.02.15

Email 인증 로그인 시스템 구축하기

# 1. 전체 개발 프로세스 소개 1. 회원가입, 로그인 화면 개발 2. 사용자 이메일 인증번호 전송 및 인증번호 DB 저장 3. 사용자 인증번호 3분 이내 입력 3분 초과 시 재 전송 요청 4. 인증번호 매칭 시 회원가입 성공 후 화면으로 이동 해당 포스트는 react 화면단 보다 백엔드 프로세스를 실제 코드 및 설명 진행 # 2. 이메일 검증 프로세스 1. 이메일 전송 2. 서버에서 전송한 이메일로 인증번호 6자리 전달 3. 서버에서 해당 인증버호, 이메일 DB 저장 4. 사용자가 검증 버튼 클릭 하여 인증번호 확인 5. 인증번호 통과 시 회원가입 6. 인증번호 불일치 재 입력 또는 재발송 # 2. 개발환경 구성 react, spring, maven, postgreSql # 3. 개발 코드 및 설명 ..

WEB 2024.02.13

OAuth [JWT] 로그인 인증 시스템 구축

# 1 OAuth JWT 소셜 로그인 1. 소셜로그인 3가지 카카오, 네이버, 구글 # 개발환경 백엔드: spring-boot 2.6.4 maven 프론트엔드: react DB: postgreSQL 카카오 소셜로그인 OAuth 구현하기 ### 카카오 소셜로그인 전체 프로세스 1. 카카오 Developer 관련 api 및 관련 문서 해당 링크 : https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 카카오 콘솔에 필요한 내용 설정 3. 개발 환경 구성 4. 초기화 및 로그인 구현 # 2. 카카오..

WEB 2024.02.13