DB 설계를 하다 보면 나도 모르게 다대다 관계를 생각해서 ERD를 그리는 경우가 있다.이때마다 다대다 관계는 하면 안 되지!라는 생각을 갖고 다시 중간에 entity를 추가하여 일대다, 다대일 관계로 이루어지도록 수정하는 일이 빈번했다.오늘은 왜 '다대다 관계'를 지양해야 하는지에 대해서 짚고 넘어가 보겠다.다대다 관계란?다대다 관계는 두 엔티티가 서로 여러 개의 데이터를 참조할 수 있는 관계이다. 예를 들어, 학생(Student)과 수업(Course)의 관계를 생각해 보자.한 학생은 여러 수업에 참여할 수 있습니다.한 수업에는 여러 학생이 참여할 수 있습니다.@Entitypublic class Student { @Id @GeneratedValue private Long id; @..

토큰 기반의 인증 방식토큰 기반 인증(Token-based Authentication)은 사용자 인증 후, 사용자에게 특정한 토큰을 발급하여 이후 요청 시 이 토큰을 통해 인증을 확인하는 방식대표적으로 JWT(JSON Web Token) 같은 형태의 토큰이 많이 사용된다. 사용자가 로그인에 성공하면 서버는 사용자의 권한과 정보를 포함한 JWT를 발급하여 클라이언트에 전달한다.클라이언트는 서버와 통신할 때마다 이 토큰을 포함하여 서버에 요청을 보내며, 서버는 토큰을 확인하고 요청을 처리한다.세션 기반 인증과의 차이세션 기반 인증에서는 서버에 사용자마다 세션 정보를 저장하고, 클라이언트는 세션 ID를 통해 인증을 유지한다. 클라이언트가 많아질수록 서버에 큰 부담을 줄 수 있다.토큰 기반 인증은 서버에서 인증..

HTTP 요청을 보내게 되면 GET, POST는 정말 많이 사용합니다. 오늘은 POST에 대해 알아보아요! POST 요청 기본적으로 서버에 데이터를 보낼 때 사용하는 HTTP 메서드로 일반적으로 파일 업로드, Form 형태의 제출에서 많이 사용합니다. CRUD create read update delete read는 get을 통해 가능하지만, 나머지는 post를 통해 가능합니다. 다른 메서드(PUT, DELETE, PATCH)를 사용하기도 하지만 post를 자주 사용합니다! Headers Post 요청은 데이터를 서버에 보내는 작업이기 때문에 Body에 데이터를 넣고 보내는데 그 전에 Header를 알아야합니다. Headers는 이 요청을 받기 전에 서버가 알아야할 사항들을 말합니다. ex) 어떤 con..

??Loading 처리?? 클라이언트에서 서버에 요청을 보내고, 그 요청을 응답받기 까지는 시간이 소요된다. 데이터 크기, 네트워크 환경에 따라 오래 걸린다. 사용자가 느끼기엔 소요되는 시간 만큼 빈 화면이 노출되면 굉장한 불편함을 얻게 된다.(이탈자 발생 !!) 그래서 loading 처리가 필요하다. 전 게시물에서 진행했던 것에서 이어서 보여주자면, import {React, useEffect, useState} from 'react'; import NewsItem from '../NewsItem'; const NewsList = () => { const [news, setNews] = useState([]) const [isLoading, setLoading] = useState(false) useE..

Client vs Server - web application React App (Client) ----(HTTP 통신)---- server ---------- Database(저장소) 클라이언트에서 데이터 베이스의 데이터를 가져오고 수정하고 넣기 위해서는 직접 접근하면 안되고, 가운데 서버를 거쳐서 통신해야한다. 클라이언트와 서버가 통신하는 프로토콜을 HTTP라고 한다. HTTP? -> HyperText Transfer Protocol 웹에서 정보를 주고 받을 수 있는 프로토콜으로, HTML 문서와 같은 리소스를 주고 받는데 사용합니다. http 요청과 응답을 보면 아래와 같은 것들이 있다. - version of the protocol (http3.0까지 있지만 우리는 1.1, 2.0을 자주 사용한다..

Context API react에서 제공하는 전역 상태를 관리할 수 있는 도구이다. 공식문서 :https://react.dev/learn/passing-data-deeply-with-context - 컴포넌트가 트리 구조로 중첩되어 깊고 넓게 뻗어나가면서, 각기 다른 컴포넌트에 영향을 주어야 할 일들이 발생한다. ​ 이를 통해 context API를 통해서 전역 state 관리가 가능하도록 할 수 있다. 아래 코드는 src/context/AuthContext.js이다. 아래는 초기 값이고 추후 추가 가능하다. App.js에서 AuthContext 의 isLoggedIn 값을 설정해주고, ​ 다른 컴포넌트(Navigation.js)에서 context에 있는 isLoggedIn 값을 사용하도록 useCont..

사이드 이펙트?! 리액트의 역할로는 1. UI 렌더링 2. 사용자 Input에 반응 ( Form input ) 3. 리렌더링 (state, props 변화에 따라) ​ -> 기본적인 리액트의 사이클을 벗어나는 동작이 발생한다면?! 예시 : 검색창 자동완성 기능(feat.naver, google...) ㄱ 입력 시 input 에서 onChange 이벤트 리스터, 이벤트 핸들러 동작 -> HTTP Request, Response 서버 통신 (이때도 리렌더링 발생) 리렌더링 ​ 여기서 사이드 이펙트를 보면 키워드 값이 바뀔 때 -> 리렌더링 서버에서 키워드로 자동완성 된 데이터를 받아왔을 때 -> 리렌더링 ​ ​useEffect 공식문서 : https://react.dev/reference/react/useE..

항상 나아가는 개발자 pink_salt 핑솔입니다!오늘은 node version 관리에 대해서 알아보겠습니다!인턴 생활 중에 개인 프로젝트도 진행하려고 하고 처음에 node에 익숙하지 않아 npm install 부터 삐걱거렸던 저에게 도움이 되었던 nvm에 대해서 이야기해볼게요~ nvm은 Node.js의 버전을 관리하는 도구로 여러 프로젝트를 동시에 진행해야하는데 버전 호환이 안 맞을 경우에 사용하실 수 있는 도구 입니다.일단, node.js을 설치하기 위해서는 https://nodejs.org/ko/ 에서 다운받으시면 됩니다.하지만 여러 프로젝트에서는 다른 node 버전으로 사용해서 라이브러리 호환 문제가 발생합니다.이 때 nvm을 통해서 node 버전을 자유롭게 변경할 수 있습니다. nvm을 설치해봅..

안녕하세요! 항상 나아가는 개발자 pink_salt 핑솔입니다! 오늘은 웹 쿠키와 세션 개념 및 활용 예시에 대해 알아보겠습니다. 쿠키(cookie)? HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 언제 사용하나요? 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다. 상태가 없는 HTTP 프로토콜에서 상태 정보를 기억할 수 있어 이를 통해 사용자의 로그인 상태를 유지할 수 있다. 쿠키는 웹 사이트에 접속하면 생성되는 정보를 담은 임시 파일입니다. 쿠키의 데이터 형태는 Key , Value로 구성되어 있고 St..

안녕하세요! 항상 나아가는 개발자 pink_salt 핑솔입니다! 코드프레소 Java 웹 개발 체험단 활동을 하고 있습니다. 이제는 Spring Boot와 MyBatis의 연동에 대해서 공부해보겠습니다. 'Spring Boot 웹 개발 초급'강의를 듣고 공부한 내용을 정리하여 포스팅을 진행하였습니다. Spring Boot에서 MyBatis 설정 1. Maven 의존성 설정 -> MyBatis 및 H2 Database 2. 스프링 애플리케이션 설정 -> application.properties 설정 Maven Java프로젝트에서 사용되는 빌드 자동화 도구 소스코드를 실행 가능한 SW 산출물로 만드는 과정인 빌드를 해주는 도구입니다. Maven의 2가지 주요기능으로는 1. 프로젝트 구성 및 빌드 관리 2. 라..