티스토리

개발자

검색하기

블로그 홈

개발자

gogowlgml.tistory.com/m

GoGo개발 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Srping Security + JWT] JWT 로그인/토큰 재발급 동작 flow spring security와 jwt 를 이용하여 로그인을 구현하고 토큰 재발급, redis를 활용한 로그아웃, 최신토큰 사용하기 등등 다 구현을 해보았는데요. reids활용한 구현부분은 flow를 정리해놓았는데 jwt를 이용한 로그인와 토급재발급의 동작 flow에 대한 설명이 부족한것 같아서 추가로 포스팅을 작성하려고 합니다. 이 포스팅은 jwt를 이용한 로그인과 토큰 재발급의 동작 흐름에 관한 글이기 때문에 구현방법은 이전포스팅들을 참고해주시기 바랍니다. 들어가기 앞서 OncePerRequestFilter가 아니더라도 일반적인 GenericFilterBean을 상속받아도 무관합니다. (OncePerRequestFilter가 이미 GenericFilterBean를 상속받고 있기 때문.) Filter 작.. 공감수 0 댓글수 0 2023. 9. 12.
[SpringBoot]멀티모듈에서 개발 환경별로 DB 분리하기 프로젝트 진행중 loval,dev,test 환경으로 DB를 분리해야 할 일이 생겼습니다. test 코드 수행이 끝난 뒤 모든 데이터가 지워져서 DB가 클린상태가 되어야 하는데 그렇게 되면 API 테스트시 DB의 기존 데이터들이 모두 삭제되는 문제가 발생했습니다. 때문에 TEST용 DB를 따로 분리해주기로 했습니다. aplication.yml을 분리해서 사용할 건데요, aplication.yml이란 무엇일까요? aplication.yml 이란? application.yml은 주로 스프링 부트(Spring Boot) 애플리케이션에서 사용되는 설정 파일입니다. 스프링 부트는 자바 기반의 웹 애플리케이션을 쉽게 개발할 수 있도록 도와주는 프레임워크로, 이를 통해 애플리케이션의 설정을 관리할 수 있습니다. app.. 공감수 0 댓글수 0 2023. 9. 8.
[JWT+Redis]Redis를 이용해 최신 JWT만 이용하게 하기 + accessToken 만료시 재발급 + JWT 로그아웃 - 2 이전 포스팅에 이어서 이번에는 redis를 이용해서 로그아웃을 구현해 보겠습니다. balckList를 사용한다고 하는데요 말은 blackList지만 실제로 사용할 때는 redis에 해당토큰을 set해서 blackList로 등록해주고 리소스 접근시 balckList에 해당 토큰이있다면 로그아웃 처리되었기 때문에 리소스 접근이 안되는 것입니다. flow를 살펴봅시다. 로그아웃 flow는 이렇게 진행됩니다. 핵심은 accessToken을 BalckList에 등록해주고 refreshToken을 삭제해서 해당 토큰으로 로그인할 수 없도록 로그아웃처리를 해줍니다. 그래서 해당 리소스에 요청할때 로그아웃처리된 토큰이 온다면 redis에서 blackList를 확인하여 해당 토큰이 있다면 로그아웃된 토큰이므로 리소스에 .. 공감수 0 댓글수 0 2023. 8. 1.
[JWT+Redis]Redis를 이용해 최신 JWT만 이용하게 하기 + accessToken 만료시 재발급 + JWT 로그아웃 - 1 JWT를 구현하는 중에 문제가 생겼다. JWT는 만료시킬 수 없어 재사용하거나 계속 발급해주는 방법이있는데 재사용은 보안문제가 있어 로그인 API접근시 마다 새로운 토큰을 발급해주는 방법을 사용했었다. 나는 accessToken과 refreshToekn을 모두 재발급 해주는데 accessToken만료시에도 refreshToken 검증후 accessToken을 재발급 해주는데 이때 refreshToken도 함께 재발급이 된다. 그렇다면 계속해서 발급하는 토큰들 어떻게 되는거지? 유효시간이 만료되서 사용불가능하게 되지않으면 이전에 발급한 토큰들로도 계속 로그인이 가능하다. accessToken의 경우 유효시간이 짧지만 refreshToken의 경우는 유효기간이 길어 문제가 될 수 있다. 그렇다고 refres.. 공감수 1 댓글수 1 2023. 7. 29.
[JWT]JWT를 왜 쓰는걸까?/토큰과 세션방식의 차이점 저는 이번 프로젝트를 JWT 방식을 사용해서 진행했습니다. 그렇다면 왜 JWT를 적용했는지 알아봐야겠죠. JWT는 토큰 기반 인증입니다. 토큰 자체에 사용자의 권한 정보나 서비스를 사용하기 위한 정보가 포함됩니다. JWT가 등장하기 전에는 웹에서 쿠키(cookie)와 세션(session)을 이용한 사용자 인증을 구현하는 경우가 많았는데요. JWT는 어떤 장점이 있어 많이들 사용하는 걸까요? 아마도 가장 큰 이유는 확장성에 있을 것 같은데요. JWT는 토큰 자체에 사용자의 정보가 저장되어 있어있기 때문에 서버 입장에서 토큰을 검증만 해주면 됩니다. JWT와 같은 토큰을 클라이언트에 저장하고 요청시 HTTP 헤더에 토큰을 첨부하는 것만으로도 단순하게 데이터를 요청하고 응답을 받아올 수 있게 되는 겁니다. 다.. 공감수 0 댓글수 0 2023. 7. 13.
[JWT]Spring Security + JWT 로그인 구현하기 이제 spring security의 작동원리에 대해 알아보았고 JWT를 이용해서 로그인을 구현하는 방법을 알아보겠습니다. 스프링 시큐리티는 기본적으로 세션을 기반으로 한 인증이 진행되는데, JWT(Json Web Token)는 말그대로 토큰을 이용하여 인증을 처리하게 됩니다. 세션과 토큰의 차이점과 토큰을 이용해서 로그인을 구현하게 된 이유는 추후 포스팅한 후 링크를 걸겠습니다. JWT 란? JWT는 일반적으로 클라이언트와 서버 통신 시 권한 인가(Authorization)을 위해 사용하는 토큰입니다. Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token으로 JSON 객체를 사용하여 토큰 자체에 정보를 저장하는 Web Token입니다. JWT는 토큰 자체를 정보로 사.. 공감수 0 댓글수 0 2023. 7. 2.
[Spring Security] 스프링 시큐리티 동작 원리 - 1 JWT 토큰을 이용해서 로그인을 구현하기 전 스프링 시큐리티를 먼저 적용해려보려고 합니다. 저번 포스팅에서 암호화할때 스프링 시큐리티를 다뤘지만 동작원리는 다른 블로그로 갈음했었는데요. 확실히 동작원리를 알고있지 않으면 원하는대로 필터나 인터셉터등을 커스텀하기가 어렵습니다 . 때문에 이번 포스팅에서 스프링 시큐리티 동작원리를 자세히 살펴도록 합시다 스프링 시큐리티란? 스프링 시큐리티 (Spring Security)는 스프링 기반 어플리케이션의 보안(인증과 권한, 인가)을 담당하는 스프링 하위 프레임워크입니다. 보안과 관련해서 체계적으로 많은 옵션들을 제공해주기 때문에 개발자의 입장에서는 하나하나 보안 관련 로직을 작성하지 않아도 된다는 장점이 있습니다. 저번 포스팅 에서 썻듯이 시큐리티는 인증과, 인가가.. 공감수 0 댓글수 0 2023. 7. 1.
[Spring boot] Spring 처리단계(Filter,DispatcherServlet,InterCepter,controller) Spring Security를 구현하면서 그 동작원리를 이해하기 위해서는 Spring boot에서 request요청이 들어왔을때 어떤 단계로 처리되는지를 알아야 할 필요가 있다. 구현하는데 급급해서 구현했지만 이론을 잘 모르니 필터나 커스텀이필요한 클래스들을 찾지못해 난감한 경우가 많았다. 차근차근 처리단계부터 공부를 시작해보자. 요청이 들어오면 위의 그림처럼 처리되는 흐름이다. 하지만 실제로는 Interceptor가 Controller로 요청을 위임하지는 않으므로, 아래의 그림은 처리 순서를 도식화한 것으로만 이해하고 자세한건 아래에서 살펴보자. 1. Filter 2. DispatcherServlet 3. Interceptor 4. Controller 이런 단계를 거쳐 controller를 지나게 되는.. 공감수 0 댓글수 0 2023. 6. 27.
[SpringSecurity]스프링 시큐리티란?/ PasswordEncoder 스프링 시큐리티를 사용해서 패스워드 암호화 하기 로그인을 구현하기 앞서 패스워드를 먼저 암호화해줄 필요가 있어졌다. 이번 로그인은 spring secutiry를 이용해 구현해줄 것이기 때문에 패스워드도 spring security를 이용해서 해보겠다 Spring Security가 뭐지? Spring Security는 Spring 기반의 애플리케이션의 보안(인증과 권한, 인가 등)을 담당하는 스프링 하위 프레임워크이다. Spring Security는 '인증'과 '권한'에 대한 부분을 Filter 흐름에 따라 처리하고 있다. Filter는 Dispatcher Servlet으로 가기 전에 적용되므로 가장 먼저 URL 요청을 받지만, Interceptor는 Dispatcher와 Controller사이에 위치한다는 점에서 적용 시기의 차이가 있다. Spring.. 공감수 0 댓글수 0 2023. 6. 13.
[멀티모듈 지옥 탈출기] 멀티 모듈 파헤쳐보기-2(JPA,Gradel,SpringBoot) 저번 포스트에 이어서 이번포스팅에는 멀티모듈로 프로젝트 구조를 직접 바꿔보겠습니다 저번 글에 있듯이 저의 원래 프로젝트 구조는 이렇게 되어있습니다. 루트 모듈 하나만 존재하는 상태. 이제 모듈을 나누기 전에 루트 모듈에있는 build.gradle 파일을 변경해 줍니다! plugins { id 'java' id 'org.springframework.boot' version '2.7.8' id 'io.spring.dependency-management' version '1.0.15.RELEASE' } repositories { mavenCentral() } subprojects { group = 'workFlow.WFrefactoring' version = '0.0.1-SNAPSHOT' sourceCompa.. 공감수 0 댓글수 0 2023. 5. 22.
[멀티모듈 지옥 탈출기] 멀티 모듈 파헤쳐보기-1(JPA,Gradel,SpringBoot) WF 프로젝트 진행중 아주 복잡한 미션을 하나 받았다(저 한줄이 이렇게 복잡할 줄이야?) 바로 모듈을 분리해 보라는 것 처음엔 저 한줄이 얼마나 큰 파장을 불러일으킬 줄 몰랐다ㅠㅠ 바로 검색해서 찾아보니 배민기술블로그에 대표적인 글이 있었다 https://techblog.woowahan.com/2637/ 멀티모듈 설계 이야기 with Spring, Gradle | 우아한형제들 기술블로그 {{item.name}} 멀티 모듈 설계 이야기 안녕하세요. 배달의민족 프론트 서버를 개발하고 있는 권용근입니다. 멀티 모듈의 개념을 처음알게 되었을 때부터 현재까지 겪었던 문제점들과 그것을 어떻게 techblog.woowahan.com 이글 인데 처음 이 글을 읽고나서 ????????????????????????????.. 공감수 0 댓글수 1 2023. 5. 19.
[JPA] Lombok 어노테이션(@Data,) @Data @Data = @toString + @getter + @setter + @RequiredArgsConstructor + @EqualsAndHashCode@toString - toString() 메서드를 생성한다. @ToString toString() 메소드를 생성한다. @ToString(exclude={“제외값”})으로 제외시키고 싶은 값을 설정할 수 있다. @Getter , @Setter getter() setter() 메소드를 생성한다. @EqualsAndHashCode equals(), hashCode() 메소드를 생성한다. @RequiredArgsConstructor 모든 멤버 변수를 초기화시키는 생성자를 생성한다. 초기화 되지 않은 모든 final 필드,@NonNull과 같이 제약조건.. 공감수 0 댓글수 0 2023. 5. 2.
[class] 내부 클래스, 내부 static 클래스 내부 클래스 내부 클래스는 클래스 내에 선언되는 클래스이다. 내부의 클래스가 외부 클래스와 연관관계가 깊으며, 다른 클래스에서 사용되지 않을 때 내부클래스를 사용하게된다. 이러한 특징 때문에 내부 클래스는 외부 클래스와 강하게 결합된 클래스를 만들 수 있다. 클래스가 여러 클래스와 관계를 맺지 않고 하나의 특정 클래스와만 관계를 맺는다면, 외부에 클래스를 새로 작성하는 것이 아닌 내부 클래스로 작성할 수 있다. 그렇다면 내부 클래스는 왜 사용하지? 내부 클래스의 특징 1. 클래스를 논리적으로 그룹화 클래스가 여러 클래스와 관계를 맺지 않고 하나의 특정 클래스와만 관계를 맺는다면, 외부에 클래스를 새로 작성하는 것이 아닌 내부 클래스로 작성할 수 있다. 이런 경우 내부 클래스와 외부 클래스를 함께 관리하는.. 공감수 0 댓글수 0 2023. 5. 2.
[JPA] Bean vaildation - @Eamil, @NotNull @NotEmpty @NotBlank @Email 어노테이션은 javax.validation.constraints 패키지에 포함된 어노테이션 중 하나로, 주어진 문자열이 이메일 형식에 맞는지 검증하는데 사용됩니다. 주어진 문자열이 null인 경우는 유효성 검사를 통과하며, 이메일 형식에 맞지 않는 경우 ConstraintViolationException 예외가 발생합니다. @Email 어노테이션은 아래와 같은 옵션을 지원합니다. message: 유효성 검사 실패 시 출력할 메시지를 지정합니다. groups: 어노테이션을 적용할 유효성 검사 그룹을 지정합니다. payload: 유효성 검사 실패 정보를 전달할 페이로드를 지정합니다. regexp: 이메일 형식을 검증하는 정규식 패턴을 지정합니다. 기본값은 ".+@.+" 입니다. flags: 정규.. 공감수 0 댓글수 0 2023. 3. 25.
[JPA] SOLID원칙 (request,response용 데이터 클래스를 command,DTO로 나누어서 사용한 이유) jpa를 사용할때 entity 클래스와 request 응답데이터를 받는 command클래스 응답값을 내려주는 VO클래스로 나누어서 사용하고있는데 command와 vo를 나눠서 사용하는 경우와 vo로 응답데이터를 받고 내려주는 역할까지 하는 것에 차이 Entity 클래스는 데이터베이스와 매핑되는 클래스이고, Request 응답 데이터를 받는 Command 클래스와 응답값을 내려주는 VO 클래스는 비즈니스 로직과 UI 레이어에서 사용되는 클래스 일반적으로 Entity 클래스는 데이터베이스와의 매핑을 위한 속성과 매핑 정보를 포함합니다. Command 클래스는 클라이언트에서 전달받은 요청 데이터를 매핑하고, 비즈니스 로직을 처리하여 Entity 객체를 생성하거나 수정하는 등의 역할을 수행합니다. VO 클래스는.. 공감수 0 댓글수 0 2023. 3. 25.
[JAVA] 함수형 프로그래밍/익명 클래스/람다/함수형 인터페이스 함수형 프로그래밍이란 함수형 프로그래밍은 프로그래밍의 패러다임이다. 마치 절차지향 프로그래밍, 객체지향 프로그래밍처럼. 함수형 프로그래밍은 선언적 프로그래밍이다. 이와 대조적으로 람다를 지원하기 전의 자바는 완전한 명령형 프로그래밍이었다. 명령형 프로그래밍 : 클래스에서 메서드를 정의하고, 필요할 때 그 메서드를 호출하는 명령하여 동작. 선언적 프로그래밍 : 데이터가 입력으로 주어지고, 데이터가 처리되는 과정(흐름)을 정의하는 것으로 동작. 함수형 프로그래밍의 조건 1. 순수 함수 같은 입력 시 같은 출력을 보장한다. 부수 효과(Side Effect)가 없다. 멀티쓰레드에서도 안전하다. (Side effect는 반환 값 이외에, 호출 된 함수 밖에서 관찰할 수 있는 어플리케이션의 상태 변경이다.) 2. .. 공감수 0 댓글수 0 2023. 3. 21.
[JPA] exception handling(예외 처리)/error 분류 예외 처리란? 예외처리란 프로그램 실행 흐름상 오류가 발생했을 때 그 오류를 대처하는 방법 프로그램 오류 프로그램 실행 중 어떤 원인에 의해 프로그램이 해당 상황에 대처를 하지 못할 경우 비정상적으로 종료되거나 에러 팝업창이 뜨는 경우가 있다. 이런 상황을 프로그램 오류라 한다. 발생시점에 따른 에러 분류 Compile Error: 컴파일 시점에서 발생하는 에러로 소스코드를 컴파일러가 컴파일하는 시점에서 소스의 오타나 잘못된 구문, 자료형 체크등 검사를 수행하는데 여기서 발생하는 에러를 컴파일 에러라 하며 컴파일러가 에러를 발생시키고 object 파일을 만들지 않는다. 이 시점에서 발생하는 문제들을 수정 후 컴파일을 성공적으로 마칠경우 클래스 파일(*.class) 파일이 생성된다. Runtime Erro.. 공감수 0 댓글수 0 2023. 3. 21.
♣[WF/Spring] 의존성 주입(생성자주입/필드주입/수정자주입)/JPA에서 Lombok 이용한 의존성 주입 의존성 주입을 하는 이유 의존성 주입은 필요한 객체를 직접 생성하는 것이 아닌 외부로부터 객체를 받아 사용하는 것이다 이를 통해 객체간의 결합도를 줄이고 코드의 재활용성을 높일 수 있다. @Autowired 는 Spring에게 의존성을 주입하는 지시자 역할로 쓰인다. 객체 지향 프로그래밍에서 클래스간에 의존성이 있다는 것은 클래스간에 의존관계가 있다는 것을 뜻한다. 클래스 간에 의존관계가 있다는 것은 한 클래스가 바뀔 때 다른 클래스가 영향을 받는다는것을 뜬한다. DI(의존성 주입)란 외부에서 두 객체 간의 관계를 결정해주는 디자인 패턴으로, 인터페이스를 사이에 둬서 클래스 레벨에서는 의존관계가 고정되지 않도록 하고 런타임 시에 관계를 동적으로 주입하여 유연성을 확보하고 결합도를 낮출 수 있게 해준다. .. 공감수 0 댓글수 0 2023. 2. 22.
[RESTful API]예제 실습 REST "분산 시스템"을 위한 HTTP 기반 소프트웨어 아키텍쳐 : 즉, 웹 어플리케이션, 다양한 언어, 모바일 어플리케이션, 다른 서버 (*다 HTTP 기반) 등 끼리 서로 통신할 수 있도록, 통역 역할을 해주는 API 참고) 분산시스템 : 하나의 시스템으로 보이는 독립된 컴퓨터들의 집합 -> 이를 위해 네트워크를 통한 컴퓨터 간의 통신이 필요 REST 구성 3가지 : 자원 , 행위 , 메시지 자원(resource) : 접근할 대상 메서드 : HTTP Method - GET(조회) , POST(생성) , PUT(수정), DELELTE(삭제) * 일반적으로는 GET, POST 방식을 사용하나, REST에서는 PUT, DELETE도 사용한다. 메시지 예제 "상품명이 진라면인 상품을 생성한다" 라는 호출이.. 공감수 0 댓글수 0 2023. 2. 22.
[RESTful API]개념 RESTful API(Representational State Tranfer API)란? RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스이다. REST 기반으로 서비스 API를 구현한 것이다. RESTful하다는, REST를 잘 지킨것이고, REST API는 REST형식으로 설계된 API를 말한다. 따라서, RESTful API란 REST한 방식으로 프로그램간 정보 교환 등의 상호작용을 가능하게 하는 것이 RESTful API API(Application Programing Interface)란? 어플리케이션 프로그래밍 인터페이스(API)는 다른 소프트웨어시스템과 통신하기위해 따라야하는 규칙을 정의 한 것이다. 개발자는 다른 애플리케이션이 프로그.. 공감수 0 댓글수 0 2023. 2. 22.
[JPA] Entiy 맵핑(연관관계/어노테이션) 테이블 설계 1:N 관계에서는 N 쪽이 무조건 외래키가 존재한다. 일대다, 다대일 양방향 관계에서는 연관관계의 주인을 정해야하는데, 외래키가 있는 쪽을 연관관계의 주인으로 정하는 것이 좋다. 예를들면 주문과 회원일 경우 주문쪽이 연관관계의 주인 연관관계의 주인쪽에 값을 세팅해야지만 값이 변경된다. 연관관계의 주인을 FK로 정해야하는데 그 이유는, 연관관계를 맺고 있는 두 테이블(회원과 주문)의 수정작업이 있을 때, FK(주문 테이블쪽의 회원ID)를 수정해야지만 유지보수 측면에서 우수하다. 즉, 주문 테이블의 회원번호가 변경되었으니 회원의 회원번호도 변경된다라는 것을 자연스럽게 인식할 수 있다. 회원과 주문사이의 연관관계가 맺어있을 경우 연관관계의 주인은 주문의 회원번호가 되고, 회원의 주문관련컬럼은 단순.. 공감수 0 댓글수 0 2023. 2. 19.
[JPA] Entity란?(엔티티매니저/영속성/Hibernate/spring Data) Entity 란? Entity란 DB에서 영속적으로 저장된 데이터를 자바 객체로 매핑하여 '인스턴스의 형태'로 존재하는 데이터를 말한다. 쉽게 풀어보자면 테이블에 대응하는 하나의 클래스이다. 엔티티 라는 용어는 때로는 클래스를 의미하는 경우도 있고, 클래스에 의해 생성된 인스턴스를 의미하는 경우가 있다. 엔티티 클래스와 엔티티 인스턴스 혹은 엔티티 객체라는 표현이 정확하다. 엔티티는 영속성을 가진 객체로 DB테이블에 보관할 대상이다. 즉 영속 컨텍스트에 속한 객체를 말한다.(이 개념은 아래에서 추가 설명) Entity Manager 엔티티 매니저는 엔티티 객체들을 관리하는 역할을 한다.(관리하는 역할을 수행하는 클래스) 여기서 관리란 Life Cycle이라고 할수 있다. 엔티티 매니저는 관리하는 엔티티 .. 공감수 0 댓글수 0 2023. 2. 18.
[JPA] JPA란?(ORM) ORM(Object Relational Mapping)이란? JPA 개념을 알아보기 전에 ORM 개념을 먼저 알아야 한다 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑하는 기술을 말한다. 기술적으로는 어플리케이션의 객체를 RDB테이블에 자동으로 영속화 해주는 것 [DB data ------ Mapping ------ Object] 객체를 통해 간접적으로 데이터베이스 데이터를 다룬다 비교되는 개념으로는 SQL Maper가 있다. [SQL ------ Mapping ------ Object] ● 객체 지향 프로그래밍은 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용한다. ● 객체 모델과 관계형 모델간에 불일치가 존재한다.(아래 jpa에서 추가설명) ● ORM을 통해 객체 간의 관계를 바탕으로 S.. 공감수 0 댓글수 0 2023. 2. 18.
[Vue] ♣TodoList 만들어보기(작성,수정,삭제,취소 기능) 구현 화면 3개의 컴포넌트로 구성해서 만들었는데 살펴도보록 하자 작성 컴포넌트 v-model로 받은 데이터들을(v-model="입력한값"은 data에 선언해주면 사용 가능) emit으로 표현 컴포넌트로 보낸다 표현 컴포넌트 빨간박스 부분이 수정 부분이다. 수정은 아래 컴포넌트를 보고 난뒤 다시 와서 이어보기를 바란다. 먼저 inputArea에서 @submit이벤트를 받는 submitList메소드에서 받은 날짜와 할일 데이터를 todoList에 넣어준다 삭제는 클릭시 deleteList 메소드에서 list를 삭제해주면 끝이다. 파라미터로 클릭했을 때의 해당 행 index를 넘겨주고 this.todoList.splice(index,1) 로 지운다. 해당 index을 넣어주고 1개의 배열을 지운다는 뜻 수정은.. 공감수 0 댓글수 0 2023. 2. 17.
<보완필요>♣[Vue] 컴포넌트 심화(slot/ 단일 슬록(slot) 부모 컴포넌트에서 자식 컴포넌트로 HTML 마크업을 전달할 수 있게 해준다. 자식 컴포넌트 태그 내에 지정한 컨텐츠를 전달한다. 부모 컴포넌트 클릭하기23 자식 컴포넌트인 FancyButton 을 import 해주고, 컴포넌트 태그안에 보내고자 하는 컨텐츠 입력 버튼 클래스인 fancy-btn도 자식 컴포넌트에 설정해준 클래스이다. button빼고 text만 입력후, 자식 컴포넌트에 button입력하고 안에 slot해서 text만 보낼수도있다 자식 컴포넌트 결과물 이름이 있는 slot (named slot) 슬롯에 이름을 부여하여 여러 개의 슬롯으로 작성한다. 부모 컴포넌트에서 지정한 컨텐츠가 해당 이름의 슬롯으로 전달된다. 컴포넌트 header 슬롯 main 슬롯 test 슬롯 d.. 공감수 0 댓글수 0 2023. 2. 15.
<수정필요>[Vue] promise/axios 비동기 처리 axios Vue에서 권고하는 promise(js비동기처리패턴) 기반의 HTTP 라이브러리이다. promise를 사용하면 비동기식 처리 상에서 데이터가 넘어오지 않으면 다음 코드가 실행되지 않도록, 즉 데이터가 넘어왔을 때만 다음 코드가 실행되도록 하는 콜백 처리를 해줄 수 있다. js 비동기 처리 패턴 callback promise promise + generator async & await 대표적인 Promise 인스턴스 메서드는 then()과 catch(), finally() 가 있어 요청이 성공/실패/보류됐을 때 처리해줄 수 있습니다. 비동기를 이해하기 위해선 자바스크립트의 동작원리: 엔진, 런타임, 호출 스택을 아는 것이 중요합니다. 자바스크립트는 싱글 스레드 기반이라 동시에 두가지 작업을 할 .. 공감수 0 댓글수 0 2023. 2. 15.
[동기/비동기] callback 함수 callback 함수란? : callback 함수를 이해하려면 동기적,비동기적으로 실행되는 함수를 이해해야 한다. 프로그램 또는 함수가 동기적으로 실행된다는 의미는 A함수가 호출되고, A작업이 완료될 때까지 기다렸다가, A함수가 출력값을 반환한 이후에, B함수를 실행하겠다는 것을 의미한다. A함수를 동기적으로 선언했을 경우, 프로그램은 로직의 흐름에 따라 A함수를 호출하기만 하고, B함수를 즉시 실행하게 된다. 이때, A 함수의 작업을 Main Thread가 아닌 별도의 Thread에서 처리하게 되고, 해당 작업은 완료된 이후에, Main Thread를 Call하게 된다. 호출된 비동기 A함수에서 작업을 완료한 이후에, 반대로 call을 하기 때문에 비동기 함수의 작업 완료시, 호출되는 함수를 Callb.. 공감수 0 댓글수 0 2023. 2. 14.
<수정필요>[Vue] Vue 인스턴스, this 바인딩에 관해서! vue 인스턴스란? Vue 인스턴스는 생성된 Vue 오브젝트 하나의 오브젝트 이다. Vue 를 시작하기 위해 필수적이며, 앱의 진입점이 된다.간단한 템플릿 렌더링부터 데이터 바인딩, 컴포넌트 등 많은 동작 수행 된다. 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 데이터가 변경되어 DOM을 업데이트하는 경우가 있다고 가정 하면, 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클의 훅 도 호출 된다. 예를 들어, 인스턴스가 생성된 이후 created 가 호출 된다. vue 인스턴스 라이프 사이클 참고블로그 https://velog.io/@ducks1077/Vue.js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4%EB%9E%80 Vue.js 인스턴스란? 인스턴스.. 공감수 0 댓글수 0 2023. 2. 14.
♣[Vue] 배열,리스트,emit,pros,v-for,v-model 이용한 간단한 기능 구현해보기 첫번째 최종 구현 화면 1) 사용자 이름을 입력하여 추가할 수 있다. 2) 테이블의 짝수 번째 row에는 배경 색상이 주어진다. 3) 테이블의 하단에 입력 데이터를 하나의 String 으로 표현되도록 한다. 구현 코드 빨간색 박스를 살펴보자. v-model로 "empName"이름으로 데이터를 입력받고 empName을 인스턴스화 시킨다.(data에 입력) 테이블의 행추가를 해주어야 해서 배열로 만들어 행추가해주는 방법으로 진행했다. empArray를 만들어 배열을 만들어주고, 입력받은 empName의 vue내부 인스턴스로 초기화해주었기에 this.empName을 사용하여 클릭이벤트 메소드 addEmp 안에서 empArray배열에 넣어준다.(배열도 인스턴스 초기화 탬플릿에서 사용해야 하니까) 그 다음 테이블.. 공감수 0 댓글수 0 2023. 2. 13.
[Vue] v-on/기본 이벤트/css클래스 바인딩/computed/[Vue] Computed/method/watch 의 차이는 무엇일까? v-on v-on 디렉티브를 이용하여 이벤트 핸들링, dom 이벤트를 듣고, 트리거 될 때 javascript를 실행 [종류] @click="event": 클릭했을 때 실행 @change="event": 요소가 변경될 때 실행 @dbclick="event": 더블 클릭했을 때 실행 @mouseover="event": 마우스의 포인트가 요소 위로 올라왔을 때 실행 @submit="event": form이 제출될 때 실행 @reset="event": form이 재설정될 때 실행 @select="event": select 값이 선택되었을 때 실행 @focus="event": 태그에 포커스가 있을 때 실행 @keyup="event": 키보드의 키를 놓았을 때 실행 @keydown="event": 키보드의 키를 .. 공감수 0 댓글수 0 2023. 2. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.