개발새발

[Spring] parameter 1 of constructor in required a bean of type 'org.springframework.security.crypto.password.passwordencoder' that could not be found.

칸쵸. — Thu, 25 Jan 2024 17:23:58 +0900

회원가입 기능을 구현하려는 중...

보안을 위해 Spring security에서 제공하는 기능 주 중 하나인 PasswordEncoder를 사용하고자했다.

import org.springframework.security.crypto.password.PasswordEncoder;

분명 import까지 야무지게 해왔는데

***************************

APPLICATION FAILED TO START

***************************

Description:

Parameter 1 of constructor in com.penpick.users.service.UserService required a bean of type 'org.springframework.security.crypto.password.PasswordEncoder' that could not be found.

음...

passwordEncoder가 bean으로 등록되지 않아서 생기는 문제같다.

고민 좀 하다가 SecurityConfig 파일에 들어가서 @Bean 설정한 메서드를 하나 추가해줌

@Bean

public PasswordEncoder passwordEncoder() {

PasswordEncoder encoder = new BCryptPasswordEncoder();

return encoder;

}

BCryptPasswordEncoder 를 Super Class로 하도록 설정

그리고 다시 실행

DB 저장. 성공적.

로그인, 로그아웃 상태에 따른 화면 구현에 대한 고찰

칸쵸. — Sat, 20 Jan 2024 20:42:35 +0900

1. 개발환경

React로 페이지 구현

SpringBoot로 서버 구현

2. 기존 코드

import React, { useState, useEffect } from 'react';

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

import axios from 'axios';

import User from './UserList';

import SignUp from './SignUp';

import Login from './Login';

function App() {

const [userEmail, setUserEmail] = useState('');

const [isAuthenticated, setIsAuthenticated] = useState(false);

useEffect(() => {

const fetchUserData = async () => {

try {

const res = await axios.get('http://localhost:8080/userdata', {

withCredentials: true,

});

setUserEmail(res.data.userEmail);

// setAuthentication 함수 호출

setAuthentication(setIsAuthenticated, res.data.userEmail);

} catch (err) {

console.error('세션 데이터 불러오기 실패', err);

}

};

fetchUserData();

}, []);

// setAuthentication 함수를 외부로 분리

const setAuthentication = (setIsAuthenticated, userEmail) => {

if (userEmail !== '') {

setIsAuthenticated(true);

}

};

return (

<Link to="/">UserList</Link>

{isAuthenticated || (

<Link to="/signup">SignUp</Link>

<Link to="/login">Login</Link>

</>

)}

<h1>React & SpringBoot로 회원관리</h1>

{isAuthenticated || (

</>

)}

</Routes>

</Router>

);

}

export default App;

3. 문제점

문제 1)

화면의 렌더링 이후 세션값을 받아와서, 로그인 상태라면 재렌더링이 발생한다
렌더링 이전에 세션값 유무를 판단하는 방법이 없을까?

해결:

// isAuthenticated 값이 false인 경우 아무것도 렌더링 하지 않는 if문 추가
  if (!isAuthenticated) {
    return null;
  }

문제 2)

이렇게 될 경우 세션값이 존재하는 상황에서는 의도한 화면이 구현되나,
문제는 로그아웃(세션값X) 상태에서 화면을 렌더링 할 경우 아무것도 나오지 않는 불상사가 일어난다
세션값이 없는 상태에서 렌더링 되는 화면은 어떻게 지정할 것인가...?

어쩐지 모순인 상황
1)

로그인 상태(세션값 O) -> 첫 렌더링(세션값 읽어오기 전) : 아무것도 리턴 X -> 세션값 읽어오고 재렌더링 : 로그인 상태에서 보일 요소 등장!

로그아웃 상태(세션값x) -> 첫 렌더링(세션값 읽어오기 전) : 아무것도 리턴 X -> 세션값 읽어옴(여전히 값 없음) -> 아무것도 안보임
-> 아니 그럼 로그인은 어케함?!

해결:

드디어 해결했다!!!! if문과 함께 삼항연산자를 사용해서 해결 완료 ㅠㅠ

3. 최종 코드

import React, { useState, useEffect } from 'react';

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

import axios from 'axios';

import User from './UserList';

import SignUp from './SignUp';

import Login from './Login';

function App() {

const [userEmail, setUserEmail] = useState('');

const [isAuthenticated, setIsAuthenticated] = useState(false);

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {

const fetchUserData = async () => {

try {

const res = await axios.get('http://localhost:8080/userdata', {

withCredentials: true,

});

setUserEmail(res.data.userEmail);

setAuthentication(res.data.userEmail);

} catch (err) {

console.error('세션 데이터 불러오기 실패', err);

} finally {

setIsLoading(false);

}

};

fetchUserData();

}, []);

const setAuthentication = (userEmail) => {

if (userEmail !== '') {

setIsAuthenticated(true);

}

};

// 초기 로딩 중에는 아무것도 반환X

if (isLoading) {

return null;

}

// 초기 렌더링 시에는 세션값이 있는지 여부에 따라 적절한 화면을 반환

return (

{isAuthenticated ? (

null

) : <>

<Link to="/signup">SignUp</Link>

<Link to="/login">Login</Link>

</>}

<h1>React & SpringBoot로 회원관리</h1>

{!isAuthenticated && (

</>

)}

</Routes>

</Router>

);

}

export default App;

~ 요약 ~

1. isLoading : 초기 로딩 중에는 null 반환해서 아무것도 안보이게 하기

2. 그리고 세션값을 읽어와서 세션값 유무에 따라 다른 화면이 나타나게 하기

3. 삼항 연산자를 통해 isAuthenticated 상태에 따라 다른 인터페이스를 렌더링

멍청한 thymeleaf

칸쵸. — Mon, 8 Jan 2024 16:53:16 +0900

나는... 내 잘못인줄로만 알고 멍청한 나를 자책했지만......

알고보니 그냥 멍청한 thymeleaf 탓이었음...

멍청한놈.........

URI / URL / URN

칸쵸. — Fri, 5 Jan 2024 02:07:42 +0900

URI(Uniform Resource Identifier)

종합적인 자원 식별자로 리소스를 유일하게 식별하고 위치를 지정하는 일반적인 식별자
두 가지 유형 존재 URL URN

URL(Uniform Resource Locator)

URI에 속해있는 Locator로 리소스가 어디에 있는지를 나타냄
URL은 일반적으로 프로토콜과 호스트명, 리소스 경로 등의 요소로 구성
**프로토콜(protocol) : http, https

URN(Uniform Resource Name)

자원의 위치에 의존하지 않고 이름 자체로 자원을 식별
위치가 아닌 자원 자체가 무엇인지에 중점을 둔 식별자

서적으로 따지면 ISBN 과 도서 구역의 차이인듯

[Git] 최종 commit을 변경하는 git amend

칸쵸. — Fri, 5 Jan 2024 01:45:37 +0900

~ 상황 가정 ~

나는 분명 작업 공간에 test1.txt 파일을 만들었는데,

커밋 메시지를 "test3.txt 파일 생성"이라고 실수로 잘못 작성해버렸다..!

작업공간

아차 내 실수!

이전 커밋 기록이 존재한다면 git reset --soft가 먹히겠지만,

방금 전의 커밋이 작업 공간 내의 처음이자 마지막 커밋이라면 어떻게 할 것인가?

~~??? : .git 폴더를 삭제하고 다시 git init 합니다~~

1. git amend

최종 커밋을 변경해주는 명령어

정확히 말하자면 git commit --amend -m "변경내용" 으로 작성하는 것이 맞다.

변경된 커밋 메시지 확인 가능

2. 다른 방법들

Master branch에 순서대로 v1 / v2 / v3 / v3-1 / v3-2 라는 커밋이 기록되었다고 가정하자.

막상 커밋을 하고 보니, v3-2라는 메시지가 마음에 들지 않는다... 어떻게 할 것인가?

방법 1)

git commit --amend -m "변경메시지"

v3-2가 브랜치의 Header(마지막 커밋)이기 때문에 적용 가능

방법 2)

git reset --soft v3-1 해시코드

git commit -m "변경메시지"

v3-2 이전에 커밋이 존재하기 때문에 적용 가능

방법 3)

git rebase i HEAD~3

I (INSERT실행)

변경메시지 입력

esc

:wq

아싸리 가장 최근 커밋(v3-2)를 기점으로 바로 위 3개 커밋(v3-2, v3-1, v3)까지 합쳐버린다 (위 2개 방법과는 다른 결과)

vi에디터에서 변경 메시지를 작성할 수 있다는 것이 특징

상황에 따라, 입맛따라 편하고 적당한거 골라서 잘 쓰는게 최고인 것같다.

정 어려우면 진짜 .git 삭제하고 git init 이 정답이 될지도 (단, 처음이자 마지막 커밋을 수정한다는 가정 하에)

HTTP의 정의 및 구조

칸쵸. — Tue, 2 Jan 2024 23:04:07 +0900

1. HTTP 란?

Hypertext Transger Protocol

클라이언트와 서버 간의 통신을 위한 프로토콜로, 주로 웹에서 데이터를 주고 받을 때 사용한다.

2. HTTP의 구조

메서드 / 헤더(Header) / 바디(Body)

메서드(GET, POST)

GET : 주로 api나 DB에서 데이터를 가지고 오는데 사용
POST : DB나 서버에 데이터를 제출하고싶을 때 사용

헤더(Header)

인증 토큰이나 캐시, 사용자 정보와같은 내용을 meta나 데이터 헤더부분을 이용해서 전달

눈에 보이지는 않지만 중요한 정보를 담을 때 자주 사용된다

바디(Body)

주로 <input />, <text />, <textarea />와 같이 태그의 내용이 DB에 실제로 전송되는 데이터를 포함하는 영역

3. RESTful

REST 아키텍처 스타일을 따르는 웹 서비스로,
HTTP와 URI 기반으로 자원에 접근할 수 있도록 제공하는 애플리케이션 개발 인터페이스

자원(Resource) : url 주소에 담겨있는 모든 정보들
표현(Representation) : url로 나타내는 자원의 표현법 (JSON, XML 등...
상태전이(Stateless) : 서버는 요청을 저장하지 않고, 각각의 요청에 담아 정보가 표현된다
통합 인터페이스(Uniform Interface) : 컴퓨터는 개발자가 지정해준 디자인으로 일관성있게 화면 데이터를 제공

[ORACLE] cmd 창에서 계정 생성 및 권한 부여하기

칸쵸. — Tue, 2 Jan 2024 21:49:38 +0900

SQLPLUS SYS/ORACLE AS SYSDBA

ALTER SESSION SET "_ORACLE_SCRIPT" = TRUE;

CREATE USER 아이디 IDENTIFIED BY 비밀번호;

// 밑으로는 전부 권한부여 (선택사항)

GRANT CREATE SESSION TO 아이디;

GRANT CREATE ANY TABLE TO 아이디;

GRANT CONNECT, RESOURCE, DBA TO 아이디;

[React] React Hook - useContext

칸쵸. — Wed, 27 Dec 2023 01:30:17 +0900

React에는 컴포넌트 간 데이터를 전달하는 대표적인 방법이 두 가지가 있는데,

그 중 하나가 바로 props

props는 데이터를 간편하게 넘기고 받을 수 있다는 장점이 있지만 어떤 상황에서는 굉장히 큰 문제가 된다

1. 컴포넌트 트리 구조가 굉장히 복잡하고 깊을 경우

2. 위의 상황에서 자식 컴포넌트로 데이터를 전달하는 경우

소규모의 리액트 앱이라든지, 혹은 데이터 전달을 원하는 자식 컴포넌트가 부모 컴포넌트 바로 밑에 존재한다면 별 문제는 되지 않을 것이다.

하지만 자식의, 자식의, 자식의, 자식의, 자식의, ... , 자식의 컴포넌트에게 데이터를 전달 할 때는 어떻게 할 것인가?

컴포넌트 전체에 공통적으로 필요한 데이터가 존재할 경우에는 어떻게 할 것인가?

이를테면 현재 로그인 된 사용자 정보, 사이트 테마, 언어 정보 등등 ...

언제든 앱 내부에서는 수많은 컴포넌트에 쓰일 전역적 데이터가 존재할 수 있기 마련이다.

이러한 전역적 데이터를 props로 일일이 단계별로 전달하게 된다면 코드의 복잡도는 물론이고,

어느 한 곳에서 변경사항이 생기는 순간 이에 적용된 컴포넌트를 죄다 쥐잡듯 뒤져 찾아내서 수정해야하는 불상사가 일어난다

그래서 등장한 것이 바로 context API 라고 할 수 있겠다

1. Context

앱 내부에서 전역적으로 사용되는 데이터들을
여러 컴포넌트들끼리 쉽게 공유할 수 있는 방법을 제공해주는 API

context를 사용하게 된다면, props로 데이터를 일일이 전달하지 않아도 해당 데이터를 지닌 상위 컴포넌트는 하위 컴포넌트가 트리 어디에 위치해있든지 상관 없이 데이터에 바로 접근 할 수 있도록 해준다.

아래와 같은 컴포넌트 트리 구조를 가진 앱이 있다고 가정하자.

이때 App이 지니고 있는 데이터를 C, E 컴포넌트에서 필요로 하는 상황이다.

props를 사용한다면 데이터 전달을 어떻게 할 것인가?

보다시피 트리의 가장 하단에 존재하는 C,E에서만 데이터가 필요함에도 불구하고

데이터 전달 과정에서 불필요하게 모든 중간 컴포넌트를 거쳐야 한다.

2. useContext

context로 공유한 데이터를 쉽게 받아올 수 있도록 도와주는 hook

하지만 context를 사용할 경우는 어떻게 될 것인가?

C와 E 컴포넌트에서 useContext hook을 사용하면 다른 컴포넌트를 거칠 필요가 없이 직접적으로 데이터를 받아올 수 있기에 아주 편리하다!

따라서 이번 글에서는 useContext를 활용한 간단한 테마변경 코드를 작성해보겠다

어떤 페이지를 만들 것인가?

header, content, footer로 구성되며

footer에 있는 mode 버튼을 통해 light / dark 모드 적용이 가능한 페이지

어떻게 만들 것인가?

1. context를 생성하는 별도의 컴포넌트 사용

2. header, content, footer에서 useContext를 사용하여 context 받아오기

1. ThemeContext.js

import {createContext} from 'react';

//기본값 null
export const ThemeContext = createContext(null);

createContext를 이용해 ThemeContext를 생성

2. App.js

import React,{useState} from 'react';
import '../../css/App.css';
import Page from './Page';
import { ThemeContext } from './ThemeContext';

export default function App() {
    
    const [isDark, setIsDark] = useState(false);
    
    return(
        //prop으로 value를 받음 > 전달하고자하는 데이터를 넣어준다
        //ThemeContext.Prodiver가 감싸는 모든 하위 component는 value로 집어넣어준 요소에 접근 가능해진다
        <ThemeContext.Provider value={{isDark, setIsDark}} >
            <Page />
        </ThemeContext.Provider>
    );
}

- useState를 사용해서 isDark 기본값 false(light모드)로 세팅

- ThemeContext를 import 하고, ThemeContext.Provider를 통해 트리 안에 포함된 컴포넌트에 value를 전달

3. Headr.js & Content.js

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

//props로 isDark 받아옴
export default function Header() {

    const {isDark} = useContext(ThemeContext);

    return(
        <header className="header"
            style={{
                backgroundColor : isDark ? 'black' : 'lightgray',
                color : isDark ? 'white' : 'black',
            }}
        >
            <h1>Welcome Page</h1>
        </header>
    )
}

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

export default function Content(){

    const {isDark} = useContext(ThemeContext);

    return(
        <div
            className="content"
            style={{
                backgroundColor : isDark ? 'black' : 'white',
                color : isDark ? 'white' : 'black',
            }}
        >
            <p>오늘도 좋은 하루~~^^</p>
            <p>꽃 한 송이 놓고 갑니다 @/-----</p>
        </div>
    )
}

- useContext를 통해 props로 isDark 받아오기

- 삼항 연산자를 통해 isDark의 상태에 따라 달라지는 style 적용

4. Footer.js

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

export default function Footer(){
    
    const {isDark, setIsDark} = useContext(ThemeContext);

    const toggleTheme = () => {
        setIsDark(!isDark);
    };
    
    return(
        <footer
            className="footer"
            style={{
                backgroundColor : isDark ? 'black' : 'lightgray',
            }}
        >
            <button className="button" onClick={toggleTheme}>
                Dark Mode
            </button>
        </footer>
    )
}

- toggleTheme 함수를 생성해서 하단 버튼 누를시 isDark의 state 변경

5. Page.js

import React from "react";
import Content from './Content';
import Footer from './Footer';
import Header from './Header';

//isDark, setIsDark를 props로 받아와서 또 다른 자식 컴포넌트에 전달
//Page 자체에서는 isDark를 사용하지 않기 때문에, 단지 그냥 중간 컴포넌트의 역할을 한다
export default function Page() {

    return(
        <div className="page">
            <Header />
            <Content />
            <Footer />
        </div>
    );
};

- header / content / footer 컴포넌트를 묶어서 한 페이지를 꾸려줌

App.js 실행 결과

light(기본) 모드

Dark 모드

css는 따로 적용한거긴한데 그거 아니어도 작동은 잘 합니다

이렇게 보니까 굳이 Page를 통해서 props를 전달할 필요가 없다는 점에서 context가 굉장히 편해보이고,

실제로도 그렇긴 하지만

당연하게도 context 사용에도 주의사항이 존재한다.

바로 컴포넌트 재사용이 어렵기 때문에 필요에 따라 적절하게 사용을 해야한다는 점..

따라서 단순히 prop drilling을 피하고싶어서 context를 사용하려한다면 컴포넌트 합성 등

다른 방안을 먼저 고안해보는 것도 방법이 될 수 있겠다

나도 자유자재로 쓰고싶은 hook... 익숙해질 날이 오겠지?

[React] React와 DB를 연결하기 위한 환경 설정 (feat.Oracle)

칸쵸. — Tue, 26 Dec 2023 14:28:31 +0900

<프로젝트 내에서 front, back 나누기>

원하는 워크스페이스 내에서 터미널 실행
mkdir 폴더명 (혹은 그냥 직접 만들기)

폴더 client, server 만들고
mkdir server
npx create-react-app client

1) client 폴더 들어가서
npm i axios

2) server 폴더 들어가서
npm init (package.json 생성) : package 세팅
npm i oracledb express (package.json 내에 express, oracledb 설치 확인 가능)
npm i cors

server.js 작성 완료 후 server에서 npm start실행해서 테스트 > Server 시작 : http://localhost:5000

백엔드 연결 확인 되면 client 실행
npm start

[Git] commit 무효화하기 (git reset)

칸쵸. — Mon, 25 Dec 2023 23:41:52 +0900

버전관리의 또 다른 효용 : 과거로 돌아가기

커밋을 취소하는 명령어 git reset (사용에 주의가 필요함)

현재의 로그를 취소해서 과거(이전 버전)로 돌아가고싶은 경우

방법 1 : reset / 방법 2 : revert

1. 특정 버전의 상태로 돌아가고싶다

git reset 커밋id --hard
> 해당 커밋 이후의 버전 삭제 & 해당 버전으로 복귀
hard : 심플한 작동을 위해 적용한 옵션(안전성 매우 떨어짐)

그 외에 soft와 mixed 옵션도 존재하는데 잘 쓸 일은 없다

git reset 커밋id --soft,

git reset 커밋id --mixed

눈으로 보기에는 log에 존재하지 않는 이후 버전이 삭제 된 것처럼 보이지만, git은 웬만하면 정보 자체를 삭제하지 않는다
(눈에 보이지 않을 뿐, 그 정보는 남아있음 == 복구 가능)

후에 원격저장소 github를 통해서 협업 가능
저장소의 버전을 인터넷을 통해 공유
공유 이후에는 git reset를 절대절대로 해서는x
내 컴퓨터 안에만 있는 버전에 대해서만 reset 작업을 진행하자

2. git revert

reset과 달리, 해당 커밋을 취소하면서 새로운 버전을 생성한다

위의 두 명령어는 추후 정말 절박한 상황에서나 필요할 것이니...
버전 생성, 버전과 버전 사이 차이점 확인이나 잘 알아두자