박재형 / IT 개발 공부

Vue.js 선택한 이유접근성 & 낮은 러닝커브 ( 쉽다 그렇지만 성능이 뛰어나다 )협업에 있어서 약속된 기능들을 사용하기 때문에 코드가 명시적이다. Vue.js 구조SPA - 싱글 페이지 어플리케이션 HTML 파일 body 태그 안에서 보여지는 것들이 유저의 요청에 의해서 바꿔치기 SFC - 싱글 파일 컴포넌트 확장명은 .vue, 하나의 컴포넌트 안에서 HTML, CSS, JS 세가지가 관리됌. Vue.js  개발스타일Options API data, methods, mounted 같은 객체를 사용하여 컴포넌트 로직을 정의하는 개발 스타일 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출  data 메서드 : 해당 컴포넌트에서 사용될 state, 즉 데이터들을 관리해주는 곳..

https://wogud.tistory.com/186로그인 기능 자세하게 적어놓음 ( 비밀번호 해싱 ) 1단계: 기본 로그인 기능 및 JWT 발급1.로그인 기능 작성,  JWT 생성 유틸리티 작성 (JwtUtil.java) serviceImpl@Servicepublic class AuthServiceImpl implements AuthService { private final AuthMapper authMapper; private final PasswordEncoder passwordEncoder; @Autowired public AuthServiceImpl(AuthMapper authMapper, PasswordEncoder passwordEncoder) { this.authMapper = auth..

1. session 유저가 로그인하면 서버가 유저한테입장권 발급 -> 사이트에서 어떤 행동을 할 때마다 입장권 제출 입장권에 들어가있는 정보가 거의 없음 ( 발급번호 하나 )세션스토어에 있는 발급번호를 조회해서 문제 없으면 통과  2. token입장권에 들어가있는 정보가 많음입장권만 조회하고 문제없으면 통과 => token 방식이 서버에 부담이 덜하다     session은 회원이 많아질수록 부담이 간다. 장점 : 토큰 위변조가 불가능 서버에 토큰 저장할 필요가 없고 검증해서 안전하면 바로 데이터 꺼내쓰면 됌.   jwt는 대충 만들면 심각한 보안이슈가 생김 문제 1 : alg : none 공격  alg를 none으로 변조 후에 변조된 토큰을 사용하면 토큰 자체에 문제가 없다고 판단하고 보안이 뚫리는 경..

SecurityConfig 클래스에 있는 securityFilterChain() 메서드는 HttpSecurity를 파라미터로 받음.하지만 AnnotationConfigApplicationContext는 Spring Boot 환경의 HttpSecurity 빈을 관리하지 않음.HttpSecurity는 Spring Security의 웹 환경에서만 사용할 수 있는 객체현재 PasswordHasher는 독립 실행형 애플리케이션이므로 웹 컨텍스트가 로드되지 않아서 HttpSecurity 빈이 주입되지 않는다.  해결방법 : PasswordHasher 클래스는 독립 실행형 유틸리티라서 BCryptPasswordEncoder 를 직접 생성해서 사용하는게 가장 간단하고 깔끔하다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) - HTTP | MDN교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTPdeveloper.mozilla.org 프론트에서 http 요청을 보낼 때 따로 설정한게 없으면 CORS 오류가 뜸 브라우저에서 일어나는 문제( CORS로 요청을 막는건 브라우저 - 크롬, 사파리 등등 ) ex) 우리가 어떤 사이트에 로그인하면 다음에 다시 로그인 정보를 입력하지 않도록정보가 유지되는 경우가 있음 ( 내 브라우저에 ..

1. src - api 폴더 생성 후 index.js 설정파일 생성  2. API 요청을 목적별로 분리하여 파일로 관리합니다.예: 사용자 관련 API (src/api/users.js)  3. Composable 로 API 활용 ( Vue3 Composition API에서 권장하는 방법)src - api      - composables 폴더 생성

대부분 오타나 properties 오류 mybatis.mapper-locations:classpath:mapper/*.xml나는 경로가 잘못돼있었음

MyBatis 매퍼 인터페이스(TestMapper)가 Spring Bean으로 등록되지 않아 서비스에서 인식하지 못하는 문제 properties 설정, 어노테이션 다 잘 돼있는데 안된다면  의존성 간의 버전이 달라서 안될 수 있음

DB 정보, mybatis 의존성 추가 CommandLineRunner implements import 단축키  -  컨트롤 + 쉬프트 + O 패키지, 파일 생성 리소스 밑에 mapper.xml 생성java 밑에컨트롤러, 매퍼, 모델, 서비스 패키지 생성컨트롤러(클래스)매퍼(인터페이스)서비스(인터페이스)서비스임플(클래스)DTO(모델, 클래스)  DTO타입, 컬럼명 적고 우클릭 - 소스 -  superclass, using field, getter setter, toString() 생성    Mapper ServiceServiceImpl 만들때 implements에 service 추가 Mapper 의존성, 생성자 주입 우클릭 - 소스 - using field  Controller서비스 의존성, 생성자 주입..

v-model 사용하면 한글에서 딜레이돼서 한글자 늦게 표시가 된다   해결방안 =>  영어는 단어가 하나인데 한글은 자음 모음 3개 조합이라 입력시 딜레이가 걸리는 것처럼 보임  v-model로 입력 받으면 하나하나 입력 체크를 받음v-model이 기본적으로 자바스크립트 input 이벤트와 동일한 기능 input 이벤트 대신 change 이벤트를 사용하면, 입력이 완료된 후에만 값이 업데이트되므로 한글 입력 시 딜레이 문제를 해결할 수 있을 듯 하다. 자료를 찾아보니 v-model.lazy로 하면 change이벤트가 반영된다