develop

1. npm create vite@latest : 리액트 파일 생성 명령어2. Y : 파일 생성 여부를 물어봄. y 입력 시 생성 진행3. 원하는 프로젝트 이름 입력, 키보드로 react선택, 키보드로 JS 선택4. 해당 폴더로 이동 npm i : package.json에 기록되어 있는 dependency 설치npm run dev → react 실행. index.html을 기준으로 실행됨http://localhost:5173/ : 해당 URL 접속 시 연결 확인 가능서버 종료 : 터미널 클릭 후 Ctrl + C main.html main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-d..

Docker어플리케이션을 컨테이너라는 독립적인 환경에서 실행할 수 있도록 해주는 오픈 소스 플랫폼이다.필요한 라이브러리, 종속성 등을 포함하여, 애플리케이션이 어디서나 동일하게 실행될 수 있게 해준다.Docker를 사용하면, 개발자는 애플리케이션을 "컨테이너"로 패키징하여 어떤 환경에서든 실행 가능하게 만들 수 있다.컨테이너(Container): 앱과 그 실행에 필요한 모든 파일, 라이브러리, 종속성을 포함하는 격리된 실행 환경앱이 어디에서나 일관되게 실행될 수 있게 해줌이미지(Image): 컨테이너를 실행하기 위한 템플릿어플리케이션, 라이브러리, 환경설정 등이 포함되어 있으며, 이를 바탕으로 컨테이너가 생성된다Dockerfile: 하나의 이미지를 생성하기 위한 설정 파일이미지를 어떤 기반으로 할지, 어..

spring에서 모든 호출은 DispatcherServlet을 통과하게 되고 이후에 각 요청을 담당하는 Controller로 분배된다.이때, 각 요청에 대해서 공통적으로 처리해야 할 필요가 있을 때DispatcherServlet 이전에 단계가 필요하며 이 역할을 하는게 Filter다. Spring Security도 인증 및 인가를 위해 Filter를 사용하며, FilterChainProxy를 통해서 상세로직을 구현한다.Spring security에서 제공하는 인증방식: Form loginForm Login 기반 인증: 인증이 필요한 URL 요청 시 인증되지 않았다면 로그인 페이지를 반환하는 구조내부에서 인증을 처리할 때 가장 많이 사용되는 방식으로 usernamePasswordAuthenticationF..

JWT (JSON Web Token)JWT는 JSON 포맷 형식으로 사용자 인증 정보를 담고 있는 토큰 기반 인증 방식이다.클라이언트 측에서 인증 정보를 유지하고, 요청 시 헤더 또는 쿠키에 포함시켜 서버에 전송한다.구조Header: 토큰의 타입(JWT ...)과 서명 알고리즘(암호화 알고리즘)Payload: 사용자 정보Signature헤더와 페이로드를 결합한 값을 서명 알고리즘을 통해 암호화하여 구현생성된 Signature를 JWT에서 받은 Signature와 비교하여 토큰의 변조 여부를 확인장점무상태성(Stateless): 서버가 사용자 상태를 유지할 필요가 없어 확장성에 유리하다분산 처리에 적합: 서버에 상태 정보를 저장하지 않기 때문에 여러 서버를 사용하여도 서버 간 세션 공유가 필요없다단점보안..

1. Claude Desktop 설치https://claude.ai/download 2. 회원가입 및 로그인 3. 좌측 상단의 줄 세개를 클릭 4. 파일 > 설정 탭을 클릭 5. 개발자 버튼 클릭 후, 설정 편집 클릭(화면이 조금 다를 수 있음) 6. 폴더가 열리며 claude_desktop_config.json 파일이 클릭되어 있을텐데, 해당 파일을 실행 7. 아직까지는 아무 값이 없으므로, 아래의 링크에서 필요한 기술의 소스코드 복사 (ex : firecrawl, jetbrains ...) GitHub - modelcontextprotocol/servers: Model Context Protocol ServersModel Context Protocol Servers. Contribute ..

핵심 기능(주관심사)과 공통 기능(보조 관심사, 부가기능)을 분리하여 코드의 재사용성, 유지보수성, 가독성을 향상시키는 방법 주 관심사 : 실제 로직 (ADD 함수 등)보조 관심사 : 보안, 로그, 트랜잭션 등 중간에 'Proxy' 객체를 두어, 보조관심사를 자동으로 끼워 넣는다. AOP 동작 흐름 (Spring AOP 기준)클라이언트가 메서드 호출 (예: ADD(x, y))Proxy 객체가 대신 호출을 가로챔보조관심사 로직 실행 (예: 로그 찍기, 트랜잭션 시작 등)실제 핵심 로직(ADD()) 실행결과를 기반으로 보조관심사 마무리 작업 (예: 트랜잭션 커밋, 로그 종료 등)클라이언트에게 결과 반환 주 사용 목적로깅 (Logging)메서드 실행 시점, 매개변수, 리턴 값 등을 기록보안 (Security..

1. Filter (javax.servlet.Filter)어디서?서블릿 이전, 가장 바깥단 (DispatcherServlet 도달 전)언제?요청이 WAS(서버)에 도달하자마자 실행됨 (ServletContainer 수준)예시인코딩 설정, XSS 방지, 인증 체크 등설정 방법web.xml 또는 @WebFilter단점스프링 외부에서 동작, 스프링 빈 접근 어려움 public class MyFilter implements Filter { public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletE..

기본 함수 (function)의 this기본 함수는 호출될 때의 컨텍스트에 따라 this가 결정일반 함수는 실행 당시의 객체 컨텍스트에 따라 this가 동적으로 바뀜 화살표 함수 (=>)의 this화살표 함수는 this를 렉시컬(lexical)하게 바인딩한다 렉시컬(lexical) : 함수를 정의할 때 상위 스코프의 this를 고정하는 것const obj = { name: 'Hello', clickBtn: () => { console.log(this.name); // this는 obj가 아님! 외부 스코프의 this }};obj.clickBtn(); // undefined  이 때의 this는 obj가 아니라 obj를 감싸는 외부 스코프(전역)의 this즉, 함수가 어디에서 정의되었는지에 따라..

1. getElementById, getElementsByClassName, getElementsByTagName✅ 장점성능이 빠름 (특히 getElementById)❌ 단점getElementsByClassName과 getElementsByTagName은 HTMLCollection을 반환 → 배열 같지만 실제 배열 아님 (Array methods 사용 불가)복잡한 CSS 선택자는 사용할 수 없음 2. querySelector, querySelectorAll✅ 장점CSS 선택자 문법 지원 → #id, .class, div > span, ul li.active 등 복잡한 선택 가능더 유연하고 강력함querySelector는 단일 요소, querySelectorAll은 NodeList 반환 → 반복문 가능 (..

Front Controller MVC 구조에서 함께 사용되는 디자인 패턴 중 하나로, 애플리케이션의 진입점(entry point) 역할을 수행하는 컨트롤러.클라이언트가 보내는 모든 요청을 자신이 먼저 받게 되고, 이러한 요청들을 세부 컨트롤러에게 전달하는 역할을 수행한다.Dispatcher Servlet은 spring에서 Front Controller 패턴을 구현한 것이다 Spring MVC 처리 Flow 0. 서블릿 초기화 (WAS 기동 시)Spring Boot나 Spring Web MVC 프로젝트가 시작될 때DispatcherServlet은 Servlet으로 등록되어 있고, web.xml 또는 Spring Boot의 자동 구성을 통해 초기화됨초기화 시점에 HandlerMapping, HandlerAd..