개발자 도전기

요청 경로로 302 Found와 /login 경로로 304 Not Modified 요청이 함께 뜬다면스프링 시큐리티가 막고 있는 것이니 @SpringBootApplication에 exclude = SecurityAutoConfiguration.class 추가해주자@SpringBootApplication(exclude = SecurityAutoConfiguration.class)public class BackendApplication { public static void main(String[] args) { SpringApplication.run(BackendApplication.class, args); }} csrf가 막고 있어서 그렇다,, 시큐리티 자동 설정 해제하니 200 응..

Lifting State Up이란 ? React는 단방향 데이터 흐름의 원칙을 적용합니다 이에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있습니다 따라서 하위 컴포넌트가 상위 컴포넌트의 상태를 업데이트하기 위해서는 상위 컴포넌트의 상태를 변경하는 함수 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행해야 합니다 이를 Lifting State Up이라고 합니다  useEffect 무한루프댓글을 작성하면 새로고침을 하지 않아도 댓글 목록을 불러오는 기능을 추가하려고 했습니다export function CommentComponent(props) { return ( );} export function Co..

동기와 비동기 / Blocking과  Non-Blocking 동기와 비동기는 작업을 순차적으로 진행할 것인지, 아닌지를 말한다.예를 들어 카페에서 이전 손님이 음료를 주문하고, 주문한 음료를 받은 후에야 다른 손님이 음료를 주문할 수 있는 것은 동기 방식, 주문 후에 음료가 빨리 제조되는 순서대로 받을 수 있는 것을 비동기 방식이라고 한다.  Blocking과 Non-Blocking은 다른 작업과 함께 실행될 수 있는지, 아니면 작업이 끝날 때까지 block되는지를 말합니다Non-Blocking 방식에서는 FILE1, 2 작업이 동시에 실행될 수 있습니다 자바스크립트는 여러 함수는 비동기 처리가 가능합니다. 다음의 코드를 실행시켜 보면,코드가 순차적으로 실행되지 않고 처리 속도가 빠른 순서대로 실행되었습..

axios.postForm React와 Spring은 응답/요청하는 과정에서 데이터를 JSON 형식으로 전달하기 때문에 파일을 전송하려면 파일 업로드시 form 데이터 형식으로 보내야 합니다 일반 post 요청으로 보낼 경우 form 데이터 형식으로 전달하려면 다음과 같이 config에 타입을 명시해서 보내야 합니다axios.post(`/api/board/write`, { headers: { 'Content-type': 'multipart/form-data', }, title : '제목', content : '내용' files : files });  post() 메서드 대신 axios.postForm() 메서드를 사용하면  config를 따로 작성할 필요 없이  fo..

1. 페이지 번호를 넣을 배열을 생성합니다 let pageNumbers = []; for (let i = 1; i  2. 배열에 담긴 값을 버튼에 매핑합니다. 컴포넌트는 Chakra ui를 사용했습니다.onClick 이벤트에 있는 handlePage(pageNumber)로 버튼의 페이지 값을 전달합니다 {pageNumbers.map((pageNumber) => ( handlePage(pageNumber)}> {pageNumber} ))}   3. onClick 이벤트로 받아온 pageNumber를 searchParams에 추가합니다.이후, 쿼리스트링이 포함된 경로로 이..

비밀번호를 암호화해서 저장했는데도 다음과 같은 경고가 뜬다면 passwordEncoder.matches() 파라미터 위치가 바뀌지 않았는지 확인해보자. matches는 첫번째 파라미터는 평문, 두번째 파라미터는 암호화된 비밀번호를 인자로 받는다. if (db != null) { String inputPassword = member.getPassword(); // 평문 String dbPassword = db.getPassword(); // 암호화 if (passwordEncoder.matches(inputPassword, dbPassword)) { // 토큰 발급 등 로그인 로직 }} 😂

오늘은 인증과 권한 자격을 추가하여 멤버와 게시물 CRUD를 수정하였습니다. UPDATE가 신경쓸 부분이 많았는데 , 회원 정보를 수정하면 NAVBAR에 있는 회원 정보가 업데이트 되도록 service에서 회원 정보 수정 후 수정된 정보를 입력하여 토큰을 재발급하고, 리액트에서 Context로 주입하는 부분이 특히 어려웠습니다 public Map modify(Member member, Authentication authentication) { //업데이트 코드 mapper.update(member); String token = ""; // Authentication에서 Principal 가져오고 Jwt로 변환 Jwt jwt = (Jwt) authentic..

오늘은 회원 C,R,D 기능을 추가했습니다.회원 가입 화면에서 이메일과 닉네임 중복, 비밀번호가 동일한지, 필요한 입력값들이 모두 입력되었는지 등등을 확인하고 조건이 만족되지 않으면 가입 버튼이 비활성화 되도록 했습니다. 또, 회원 등록이나 삭제 버튼과 상호작용 후 결과를 토스트로 알려주고 삭제시에는 모달을 띄워 비밀번호 재확인 등의 기능도 추가해보았습니다! 2024.05.22 - [개발공부/React] - [React] useParams과 useSearchParams, 동적 경로 [React] useParams과 useSearchParams, 동적 경로useParams과 useSearchParams은 React Router와 함께 사용합니다. useParams()/user/:id 와 같은 다이나믹 UR..

useParams과 useSearchParams은 React Router와 함께 사용합니다. useParams()/user/:id 와 같은 다이나믹 URL(또는 동적 경로)을 사용할 때 사용합니다import { useParams } from 'react-router-dom';function UserProfile() { const { userId } = useParams(); // { userId: '123' } 형태로 파라미터를 추출 return User ID: {userId}; 파라미터로 전달된 userId를 받아 User ID : 123을 출력합니다 useSearchParams() 쿼리스트링 형식(?name=son&age=33)의 파라미터를 다루는 데 사용합니다import { useSearchPa..

오늘부터 프로젝트 실습을 시작했습니다~ 오늘은 리액트를 사용해 게시판 CRUD 기능을 구현했습니다확실히 JSP를 사용하는 것보다 편하다고 느껴지네요👍