공부하는 개발자 핑구 🐧 공부하는 개발자 핑구 🐧

어서오세요..! 🤗 해결하시고 또 뵙는거겠죠....? (나쁜놈들,,,) react-router-dom 이 V5 -> V6 로 버전업되면서 변경된 사항입니다. # 변경사항 컴포넌트는 더 이상 존재하지 않음 로 바뀜 (근데 이건 제가 잘못 사용한건지 먹히질 않더라구요 😭) useNavigate() Hook 릴리즈..! (이건 잘 먹힙니다..!!) # 코드 구현 import React, {useState} from "react"; import { useNavigate } from "react-router"; export default function SignIn(props){ const navigate = useNavigate(); /// .... const click = (e)=>{ console.log("..

# 사용자를 식별해야해 🥺 웹은 대다수가 HTTP기반으로 동작한다. 하지만 HTTP의 방식에서는 웹서버와 클라이언트가 연결을 유지한 상태가 아니라 request와 response 의 반복일 뿐이다. 같은 사용자에 의해 요청이 이뤄지는지 확인할 방법이 필요한데, 이때 등장하는 것이 바로 '쿠키'와 '세션'이다. # 쿠키(Cookie)? 🍪 쿠키는 웹사이트를 방문할 때 사용자의 브라우저에 심겨지는 작은 파일이며, Key-Value 쌍으로 이루어진 파일이다. 쿠키에는 두가지 종류가 있는데, 그 중 persistence cookie를 우리는 흔히 '쿠키'라 부른다. 그러나 단어를 보면 짐작되듯이, 로컬에 영구저장되기 때문에 쿠키변조의 위험성이 있다. # 세션(Session)? ⏱ 세션은 session cooki..

CSRF 와 XSS 같은 방법을 사용하여, 어플리케이션에서 사용자의 정보를 탈취하는 것을 막기 위한 정책들 브라우저 단에서 적용되는 정책이다. 서버간의 통신에는 적용되지 않는다. # SOP(Same-Origin Policy) '같은 출처에서만 리소스를 공유할 수 있다' 라는 개념의 정책 # CORS(Cross-Origin Resource Sharing) Policy 다른 출처로 리소스를 요청할때 지켜야하는 SOP가 허용하는 예외 조항 # 같은 출처와 다른 출처의 판단 ex) https://www.naver.com:8080 Scheme : https:// Host : www.naver.com Port : :8080 기본적으로 Scheme, Host, Port 가 동일해야 같은 출처 (RFC 6454) 브라..

서버 개발자는 Over-Fetching 과 Under-Fetching 을 신경쓰며 API 를 디자인 해야한다. REST API 디자인 시 필요한 정보들을 잘 정리한 블로그 포스팅들을 공유한다. # 예시 (QueryString & PathVariable) /users // Fetch a list of users /users?occupation=programmer // Fetch a list of programmer user /users/123 // Fetch a user who has id 123 /users [GET] // Fetch a list of users /users [POST] // Create new user /users/123 [PUT] // Update user /users/123 [DEL..

# Over-Fetching API 호출 시, 필요보다 많은 데이터를 가져오는 것 그로인해, 서버와 네트워크의 자원이 불필요하게 추가로 사용됨 # Under-Fetching 하나의 endpoint로의 request로는 충분한 데이터를 받지 못할 때 발생 (API 호출해야 할 곳이 여러군데) 단일 API 호출에 비해 네트워크 오버헤드가 추가되어, 앱에 속도저하를 야기시킴

# Setter 사용을 지양하는 이유 의도가 무엇인지 파악이 어렵다. (생성인지, 업데이트인지) 객체의 일관성을 유지하기 어렵다. (특정 메서드가 아닌 모든영역에서 접근이 가능하다) # Lombok.config 에서 특정 Annotation 제한하기 lombok.setter.flagUsage=error // @Setter 사용시 컴파일에러 lombok.data.flagUsage=error // @Data 사용시 컴파일에러 # 예시 코드 1. DTO package com.bookmarkmanager.bookmarkmanager.dto; import com.bookmarkmanager.bookmarkmanager.db.entity.User; import lombok.AccessLevel; import lom..

* MockMvc 는 API 컨트롤러를 테스트하기 위한 도구이다. # 주의사항 MockMvc 를 주입하려면 @AutoConfigureMockMvc 어노테이션이 필요하다. # 회원가입과 로그인 API 를 테스트하기 위한 테스트 코드 @SpringBootTest @Slf4j @AutoConfigureMockMvc public class LoginApiTest { @Autowired private UserRepository userRepository; @Autowired private MockMvc mockMvc; @Autowired private ObjectMapper objectMapper; @Test @DisplayName("SignUp & Login Test") public void AccountTes..

# Axios CSRF 보호기능 내장 JSON 데이터 자동변환 응답시간 초과 커스터마이징 가능 요청 중단 가능 Promise 기반 async/await 문법 가능 import axios from 'axios' // GET : Fetch a list of data axios.get(`url`) .then(function1) .catch(ErrorHandlingFunction) .finally(function2); // POST : Create new data axios.post(`url`, {json}) .then(function1) .catch(ErrorHandlingFunction) .finally(function2); // PUT : Update data axios.put(`url`, {json}) ..