수정 블로그

ServiceMemberService.javapackage code.code_api.service;import code.code_api.domain.CodeMember;import code.code_api.dto.MemberDTO;import code.code_api.dto.MemberModifyDTO;import java.util.stream.Collectors;public interface MemberService { MemberDTO getKakaoMember(String accessToken); void modifyMember(MemberModifyDTO memberModifyDTO); //엔터티 > DTO 변환 default MemberDTO entityToDTO(CodeM..

카카오 로그인 기능 추가하기Kakao Developer 가입https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 내 애플리케이션에 들어가서 애플리케이션 추가 플랫폼 등록 Redirect URI 활성화 및 등록 동의항목 설정 보안에서 시크릿 코드 발급 자세한 사용방법은 다음 웹사이트를 참조한다.https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로..

기본 설정먼저 연동할 Github 리포지토리로 이동한 후, main 브랜치의 [Code]를 클릭해 HTTPS의 URL 주소를 복사합니다. 비주얼 스튜디오 연동비주얼 스튜디오 실행 후 [Git 리포지토리 복제...] 클릭 복사한 주소 입력 후 Enter 폴더 선택 후 복제 완료된 파일에서 작업하시면 됩니다. 지역 저장소(내 컴퓨터)에서 원격 저장소(깃허브)로 커밋하기예시를 위해 App.css 파일을 수정하겠습니다. 파일을 수정하면 왼쪽 사이드 [소스 제어]에 숫자가 생긴 걸 볼 수 있습니다. 클릭하면 다음처럼 변경 사항이 보입니다. 다음처럼 하단의 main 누르시고 main이 아닌 feature 브랜치 선택하시면 됩니다. 제대로 지정되었으면 다음처럼 "feature"에 커밋이라고 뜨게 됩니다. 커밋 메시지..

build.gradle에 다음 코드 추가implementation 'org.springframework.boot:spring-boot-starter-security'implementation 'com.google.code.gson:gson:2.11.0'implementation 'io.jsonwebtoken:jjwt-api:0.11.5' runtimeOnly 'io.jsonwebtoken:jjwt-impl:0.11.5' runtimeOnly 'io.jsonwebtoken:jjwt-jackson:0.11.5' application.yml 수정logging: level: org.hibernate.SQL: debug org.hibernate.orm.jdbc.bind: trace org..

환경설정application.ymlspring: application: name: code-api datasource: url: jdbc:h2:tcp://localhost/~/testApi driver-class-name: org.h2.Driver username: sa jpa: hibernate: ddl-auto: update properties: hibernate: format_sql: true thymeleaf: prefix: classpath:/templates/ suffix: .html servlet: multipart: max-request-size: 30MB #한번에 전송하는 데이터 사이즈 ..

환경설정하단의 명령어를 입력해 라이브러리들을 설치한다.npm i react-dom react-router-domnpm i react-bootstrap bootstrapnpm i axiosnpm i @tanstack/react-querynpm i @tanstack/react-query-devtoolsnpm install @reduxjs/toolkitnpm install react-reduxnpm install react-cookie index.js 수정import 'bootstrap/dist/css/bootstrap.min.css';import { BrowserRouter } from 'react-router-dom'import { Provider } from 'react-redux'import store..

React QueryReact 앱에서 서버 데이터를 쉽게 가져오고, 캐시 하고, 자동으로 업데이트하는 라이브러리. 서버 상태 관리의 복잡함을 줄여준다.  React Query 설치다음 명령어를 입력해서 React Query를 설치해 준다.npm i @tanstack/react-query 사용법은 다음 링크를 참조한다.https://tanstack.com/query/latest/docs/framework/react/overview Overview | TanStack Query React DocsTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in mo..

Redux Toolkit으로 쇼핑몰 예제 수정Redux Toolkit을 이용해 이전에 만들었던 쇼핑몰 예제의 로그인 기능을 수정해 보자.로그인 기능은 product와 다르게 동기적인 기능이므로 createAsyncThunk를 사용하지 않아도 된다.  createAsyncThunkRedux Toolkit에서 제공하는 유틸리티 함수로, 비동기 작업을 간단하고 일관되게 관리하기 위한 도구. 이를 통해 비동기 작업(예: API 호출)을 수행하고, 작업의 상태(예: 로딩, 성공, 실패)를 쉽게 처리할 수 있다. Redux 수정authenticateReducer > authenticateSlice 변경import { createSlice } from '@reduxjs/toolkit'let initialState =..

Redux Toolkit Redux Toolkit은 Redux를 사용할 때, 복잡한 설정과 보일러플레이트 코드 작성 부담을 줄여주기 위해 제공되는 공식 라이브러리이다. Redux를 쉽게 사용할 수 있도록 도와주는 도구 모음이며, Redux의 핵심 기능들을 더 간단하고 효율적으로 사용할 수 있게 만들어준다.  Redux Toolkit으로 쇼핑몰 예제 수정Redux Toolkit을 이용해 이전에 만들었던 쇼핑몰 예제를 수정해 보자. Redux Toolkit 설치다음 명령어를 입력해서 Redux Toolkit을 설치한다.npm install @reduxjs/toolkit 사용법은 다음 링크를 참조한다.https://ko.redux.js.org/redux-toolkit/overview/ Redux Toolkit..

쇼핑몰 예제 Redux 적용하기지난번에 만들었던 쇼핑몰 예제에 Redux를 적용해 보자. Redux 설치다음 명령어를 입력해 Redux를 설치한다.npm install redux react-redux index.js 코드를 다음처럼 변경한다.import { BrowserRouter } from 'react-router-dom';import { Provider } from 'react-redux';import store from './redux/store';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ); Redux-thunk Redux에서 비동기 작업을 처리하기 위한 미들웨어이다..