분류 전체보기 28

React 컴포지션 패턴

개요대다수의 개발자들은 si로 개발하는것 보다 실제 기능을 추가하는 일이 더 많을 것이다하지만 막상 기능을 추가하거나 수정하는일에 선뜻 나서기가 어렵다그 이유는  수정 후 (혹은 기능 추가 후) 다른곳에서 어떻게 동작할지 예측이 어렵다 즉 Side Effect의 위험이 도사리고 있기 때문이다그런 위험을 최대한 낮추고 빠르게 기능을 수정 및 추가하기위해 각 디자인 패턴들이 존재하고 이번 포스트에는 컴포지션이라는 패턴을 학습하고 실제 업무에 적용하고 느낀점을 공유하고자 포스팅을 올리게 되었다. 실제 코드와 함께 적용한 내용을 정리하면서 최대한 보기 쉽게 공유하고자 한다. React 컴포지션 패턴이란React에서 컴포넌트는 하나의 모듈을 의미하는데 모듈을 마치 레고의 하나의 온전한 부품이라고 비유할 수 있다...

디자인패턴 2024.05.25

[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

자릿수의 합 구하기

자릿수의 합 문제 : N개의 자연수가 입력되면 각 자연수의 자릿수의 합을 구하고 그 합이 최대인 자연수를 출력하세요 자릿수의 합이 같은경우에는 원래 숫자가 더 큰숫자를 답으로 지정합니다. 235 와 1234 가 동시에 답이 된다면 1234를 답으로 출력합니다. 입력설명 : N개의 자연수의 갯수가 주어지고 그 다음줄에 N개의 자연수가 주어진다. 각 자연수의 크기는 10,000,000 를 넘지 않는다. 출력설명 : 자릿수의 합이 최대인 자연수를 출력한다. 방법은 2가지의 방법이 있다. 한가지는 String으로 변환후에 내장메소드를 사용하는방법과 또 다른 한가지는 숫자계산을 이용해서 문자로 바꾸지 않고 해결하는 방법이 있다. 아무래도 내장메소드를 사용하지 않고 숫자만을 사용해서 문제 해결하는방법이 더 좋다고 ..

등수출력 프로그램 작성하기.

문제 설명 : 시험을 본 학생들의 점수가 입력이 되면 각 학생의 등수를 입력된 순서대로 출력하는 프로그램을 작성하세요 입력 : 같은 점수로 입력될 경우에는 높은 등수로 동일 처리된다. 즉 가장 높은 점수가 92점인데 3명만 존재한다면 1등이 3명이고 그다음 학생은 4등 처리가 된다. 출력 : 입력된 순서대로 등수를 출력한다. 입력예제 : 87, 89, 92, 100, 76 출력 예제 : 4, 3, 2, 1, 5 문제 접근방법 : 우선 입력받은 학생들의 점수를 배열로 가져온다면 score [0]으로 첫 번째 점수부터 접근할 수 있다. 그렇다면 score[0] 부터 score [4]까지 하나씩 비교하면서 더 큰 점수가 있다면 answer [] 배열로 선언한 등수를 늘려주면 순서대로 이 점수가 몇 등인지 알아..