반응형

전체 글 130

[Svelte 시리즈] 컴포넌트 생명주기 (Lifecycle) 와 훅(Hook)

이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.Svelte에서 컴포넌트는 화면에 랜더링되거나 사라질 때를 나타내는 컴포넌트의 상태가 있다.이 상태의 흐름을 컴포넌트 생명주기라 한다.mounted: 컴포넌트가 화면 또는 다른 컴포넌트에 랜더링된 (연결된) 상태. 이 전에는 화면 요소에 접근할 수 없음destroyed: 컴포넌트가 화면 또는 다른 컴포넌트에서 사라진 (연결이 해제된) 상태before update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 되기 전 상태after update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 된 후 상태이런 상태들은 컴포넌트가 화면(DOM)상에서 어떻게 다뤄지냐에 따라 다양하게 호출된다.예를들어 특정 컴포넌트가..

Front-End 2022.02.20

[Svelte 시리즈] 컴포넌트와 스토어

이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.컴포넌트Svelte에서는 Single File Component를 정의하고 사용할 수 있다.Name.svelte컴포넌트 사용할 때 전달받을 데이터 (props)는 export 구문을 통해 선언한다{name}App.svelte사용 측에서 import 하여 컴포넌트를 가져온다.props는 해당 컴포넌트 attribute를 통해 전달한다. (컴포넌트에서 export된 이름에 맞춤)전달하려는 prop의 이름과 데이터 변수명이 같다면 생략하여 작성할 수도 있다.{#each names as name}{/each}컴포넌트내에서 데이터를 가공할 땐 원본 데이터에 영향이 없도록 작성하는 것이 중요하다.만약 컴포넌트 내에서 데이..

Front-End 2022.02.19

[Svelte 시리즈] 데이터 바인딩, 조건문, 반복문, 이벤트 핸들링

[Svelte 시리즈] 데이터 바인딩, 조건문, 반복문, 이벤트 핸들링이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.데이터 단/양방향 바인딩Svelte는 기본적으로 단방향 데이터 바인딩이다.아래 예제에서 input에 name을 바인딩 했지만, 값을 변경한다고 name 변수의 값은 바뀌지 않는다.Hello {name}양방향 바인딩을 하려면 bind 키워드를 사용해 아래와 같이 작성해주면 된다.Hello {name}조건문마크업 영역에서 조건문을 사용할 수 있다.{#if 조건} 조건문 내용 {/if} 와 같이 조건문 영역을 잡을 수 있다.{:else}, {:else if 조건} 를 통해 else / else if 구문을 작성할 수 있다.Svelte의 대부분 구문..

Front-End 2022.02.17

Docker Compose 를 이용해 Spring Boot + MySQL 서비스 구축 (기초)

이 글은 개인적으로 공부를 목적으로 여러 블로그, 문서를 참조하며 작성하여 부정확하거나 내용이 부실할 수 있는점 양해드리며 잘못된 부분이 있다면 댓글로 알려주시면 감사하겠습니다 :) 간단한 웹 서비스를 구축한다고 가정한다.간단하면서 일반적으로, 백엔드 애플리케이션 + DB와 프론트에 Nginx를 두는 구조를 많이 사용한다.docker 환경에서는 백엔드 애플리케이션, DB, Nginx를 각각 설정하고 컨테이너화 하여 관리할 수 있다.다만 서버 장비가 증설된다면 각 컨테이너 설정을 다시 해주어야하는 번거로움이 존재한다.Docker Compose는 한 서비스를 위한 여러 컨테이너를 관리를 하나의 파일에서 할 수 있고 여러 컨테이너들을 동시에 실행시킬 수 있다. 이를 통해 위와 같이 매번 컨테이너를 설정해야하..

Spring Boot 애플리케이션 Docker 컨테이너로 배포 (기초)

명령어 간략 정리docker images # 이미지 목록 조회docker ps # 실행중인 컨테이너 목록 조회 (-a 옵션 시 종료된 컨테이너 목록도 보여줌)docker kill CONTAINER_ID # 컨테이너 종료 도커 이미지 빌드 명령어docker build --tag [repo:tag] [Dockerfile path]e.g.docker build --tag myservice:0.1 컨테이너 실행 관련 명령어docker run IMAGE_ID # 이미지ID 기반 새 컨테이너 생성하여 실행docker run repo:tag # 레파지토리&태그에 해당하는 이미지 기반 새 컨테이너 생성하여 실행docker start CONTAINER_..

Java / Servlet 비동기 기술 흐름 with Spring

1. Servlet 3.0 이전기존 알고 있었던과 같이 1 Request per 1 Thread 할당 방식이다.오래걸리는 무거운 작업은 @Async 를 활용해 비동기로 처리할 수 있었지만 이는 말 그대로 해당 스레드 내부에서 유효할 뿐 해당 작업이 끝나기 까지 그 스레드가 반환되지 못하는건 매한가지였다.톰캣의 NIO 지원은 HTTP Connection 관련 부분을 비동기로 처리하는 것 뿐 서블릿 동작과는 별개의 문제이 방식의 문제점은 짧게 끝나는 작업이 오래 걸리는 작업이 스레드를 오래 점유하여 덩달아 오래걸리게 되는 문제가 있었다.2. Servlet 3.0Servlet 3.0 부터는 이런 문제점을 어느정도 해결하여 오래 걸리는 작업을 별로 스레드에 할당하여 처리하고,해당 스레드는 빨리 반환하여 다른 요..

Java CompletableFuture 개념 및 간단한 활용 사례

Future 는 비동기 작업 수행의 결과를 담고있는 자바의 인터페이스이다.ListenableFuture 는 Spring 에서 제공하는 인터페이스로 Future에 콜백을 등록해 사용할 수 있도록 한 방식이다.자바 8 때 소개된 CompletableFuture 는 여러 비동기 작업을 결합하고 처리하는데 기존 방식에 비해 훨씬 편하게 수행할 수 있다.아래는 간단히 반환값이 없는 2개 비동기 작업을 수행하는 예시이다.CompletableFuture .runAsync(() -> log.info("runAsync")) .thenRun(() -> log.info("thenRun"));반환값이 있는 비동기 작업은 아래와 같이 할 수 있다.CompletableFuture .supplyAsync(() -> 1) // 비..

[짧은정리] Gradle Multi Module 구성 시 참고사항

멀티 모듈 구성 시 보통 common 모듈을 두고 나머지 모듈 (e.g. API 모듈, Batch 모듈, ..) 에서 common 모듈을 참조하도록 구성한다.common 모듈에 작성한 공통 로직 + 의존성을 타모듈들에서 중복없이 사용하기 위함이다.이 때 common 모듈에 dependency를 implementation으로 잡을 경우 common을 참조하는 타 모듈에선 common의 코드들만 노출되고 common의 dependency들은 노출되지 않는다. 예를 들어 common 모듈에 JPA Starter 의존성을 implementation으로 잡으면 api, batch 모듈에선 JPA 관련 코드가 노출이 안되는 것이고 JPARepository 등을 상속받아 구현된 Repository들에 findAll,..

Kotlin 프로퍼티 (Properties and Fields)

보통 객체지향 프록그래밍에서 클래스를 정의할 때 객체의 상태는 멤버변수 (필드)로 행위는 메소드로 표현합니다.그리고 보통 멤버변수가 있으면 객체의 값을 설정하고 가져오는 (setter / getter) 메소드가 동반되는 경우가 많은데요.코틀린에서는 이런 요소를 아우르는 프로퍼티라는 개념이 제공됩니다.즉 프로퍼티는 getter, setter와 같은 접근자를 포함하고있는 필드입니다.프로퍼티 정의프로퍼티를 정의하는 전체 문법은 아래와 같습니다.(var/val) [: ] [= ] [] []var / val : 프로퍼티 선언을 위한 예약어. var는 초기화 후 값 변경이 가능한 프로퍼티, val은 초기화 후 값 변경이 불가능한 프로퍼티propertyName: 프로퍼티명Propert..

Back-End/Kotlin 2021.09.07