99duuk

로그인 정보를 전역적으로 관리하기 위해 Vuex store를 사용,App.vue에서 이를 초기화하고 관리 => 애플리케이션 전체에서 일관된 로그인 상태를 유지 가능 // store/modules/auth.jsimport api from '@/api' // API 호출을 위한 가상의 모듈export default { namespaced: true, state: { user: null, token: null }, mutations: { SET_USER(state, user) { state.user = user }, SET_TOKEN(state, token) { state.token = token } }, actions: { async logi..

1. @RequestParam역할: URL 쿼리 파라미터에서 값을 추출합니다.주로 사용되는 경우: GET 요청에서 URL 뒤에 붙은 쿼리 스트링(?key=value)에서 값을 받아올 때.@GetMapping("/search")public String search(@RequestParam("keyword") String keyword) { return "Search result for: " + keyword;} GET /search?keyword=spring 요청 시, keyword 값은 "spring"으로 바인딩.2. @PathVariable역할: URL 경로에 포함된 변수를 메소드 파라미터로 매핑주로 사용되는 경우: RESTful API에서 리소스 식별자(ID 등)를 경로에 포함시켜 동적으로 값을..

List users = userMapper.selectAllUsers();1. parameterType역할: SQL 쿼리에 전달할 입력 파라미터의 타입을 명시함.용도: Java 기본 타입, Java 객체, 또는 사용자 정의 객체(POJO)를 쿼리에 전달할 때 MyBatis가 해당 파라미터를 올바르게 매핑하도록 도와줌. SELECT * FROM users WHERE id = #{id} parameterType="int": 이 쿼리에 전달될 파라미터의 타입이 정수형임을 명시함.Java 메서드에서 정수형 파라미터를 전달하게 됨:int userId = 1;User user = userMapper.selectUserById(userId);  객체를 사용할 때 INSERT INTO users (name, ema..

v-if와 v-show는 Vue에서 조건부 렌더링을 위해 사용되는 디렉티브임 두 가지 모두 요소를 조건에 따라 보여주거나 숨기는 데 사용되지만, 작동 방식에 중요한 차이가 있음  사용자 프로필 환영합니다, {{ username }}님! 로그아웃 로그인이 필요합니다. 로그인  v-if:조건이 false일 때 요소를 DOM에서 완전히 제거조건이 변경될 때 요소를 생성하거나 제거하므로, 초기 렌더링 비용이 낮지만 토글 비용이 높음자주 변경되지 않는 조건에 적합v-show:조건에 관계없이 항상 요소를 렌더링하고, CSS의 display 속성을 사용하여 보이거나 숨김초기 렌더링 비용이 v-if보다 높지만, 토글 비용이 매우 낮음자주 토글되..

기본 방식과 Vue Query 사용의 차이점그냥 쓴 것과 Vue Query를 사용한 것의 주요 차이는 캐싱과 리페칭임기본 방식 (그냥 쓴 것):서버에서 데이터를 가져오면: 컴포넌트가 만들어질 때 서버에서 데이터를 직접 가져옴데이터 캐싱이 없음: 데이터가 컴포넌트에 로드될 때마다 서버에 다시 요청해야 하며, 캐싱을 위한 별도의 처리 없이 API가 매번 호출됨리페칭 없음: 데이터 변경이나 네트워크 상태 변화를 자동으로 반영하지 않습니다. 수동으로 다시 데이터를 가져오는 로직을 추가해야 함  Vue Query를 사용한 방식:자동 캐싱: 데이터를 한 번 가져오면 캐시에 저장되며, 동일한 데이터를 여러 번 요청할 필요가 없음자동 리페칭: 데이터가 변경되거나, 브라우저 포커스가 다시 맞춰지거나, 네트워..

재미로 만들던 메모 api의 화면을 vue로 만들어봤음시간이 없어서 대충 지난번에 리액트로 만들었던 프로젝트처럼라우팅은 어떻게 api 호출은 어떻게 컴포넌트는 어떻게 무슨 문법은 저렇게? 대충 스윽 훑고 간다는 느낌으로 돌아가게만 만들었고 전체 메모 리스트 api만 붙혔다.디렉터리 구조는 대충 이렇게 했고 import axios from 'axios'const API_URL = 'http://localhost:80/api/memos'export default { AddMemo(memo) { return axios.post(`${API_URL}/add`, memo) }, ModifyMemos(memo) { return axios.patch(`${API_URL}/mo..

리액트와 비슷하게 작업 디렉토리에서 npm run serve 하면 실행된다.   사진 사이즈는 뻔하게 처럼 css로 줄일 수 있고 또  v-bind를 사용해 적용할 수도 있다. 여기에 동적 스타일을 적용하면  짜잔 로 버튼을 클릭할 때 이미지 사이즈가 변경된다.

객체 지향 프로그래밍은 r-s-c 같은 수직적인 로직은 잘 분리하지만, 수평적인. 즉, 같은 단계의 로직 분리나, rsc에서 각 계층이나 여러 클래스에 걸쳐 중복되는 코드가 발생할 수 있음 이러한 oop의 해결책으로 aop가 등장함. 비즈니스 로직에서 공통 기능을 모듈화하여 코드 중복을 제거하여 핵심 비즈니스 로직에 집중할 수 있게 해줌. 예를 들어 rsc가 3단계에서 모두 동일한 로직을 수행하는 상황에서는 굳이 3단계 모두에서 중복되는 코드를 작성할 필요 없이 한 단계에만 해당 로직을 작성하면 되고, rsc가 여러 계층이나 클래스에 걸쳐 중복되는 코드 같은 경우에는 공통 기능을 모듈화하여 코드 중복을 제거해 핵심 비즈니스 로직에 집중할 수 있음. 이러한 aop는 * 메서드 실행시간이나 파라미터, 반환 ..

web.xml는 서블릿 컨테이너에 대한 전반적인 설정을 담당한다.1. DispatcherServlet 정의2. URL 패턴과 DispatcherServlet 매핑3. Spring 설정 파일 위치 지정4. ContextLoaderListener 등록 (필요한 경우) dispatcher org.springframework.web.servlet.DispatcherServlet contextConfigLocation /WEB-INF/dispatcher-servlet.xml 1 dispatcher /  dispatcher-servlet.xml은 Spring MVC의 구체적인 설정을 담당한다. 1. 컴포넌트 스캔 범위 지정2. MVC 관련 어노테이션..

ModelAndView:ModelAndView는 스프링 MVC에서 주로 사용되는 객체로, 컨트롤러에서 처리한 데이터(Model)와 그 데이터를 표시할 뷰(View)를 함께 반환예를 들어, 컨트롤러에서 데이터를 처리한 후, 그 데이터를 JSP 파일과 같은 뷰 템플릿에 넣어서 완성된 HTML 페이지를 클라이언트에게 반환클라이언트는 이 HTML 페이지를 받아서 브라우저에 표시@ResponseBody:@ResponseBody는 데이터를 뷰 템플릿을 거치지 않고 직접 클라이언트에 반환하는 역할을 함이 어노테이션을 사용하면 컨트롤러 메서드는 데이터를 JSON, XML 등의 형식으로 변환하여 HTTP 응답의 본문(body)에 직접 작성클라이언트는 이 JSON 데이터를 받아서 브라우저에서 표시하거나, JavaScrip..