프로그래밍

Frontend 효율적으로 배포하기 (React + Nginx + Docker)

프로젝트를 진행할 때, 프론트엔드 배포는 주로 nginx를 base image로 하여 빌드된 결과물을 nginx가 서빙하는 폴더 내에 위치시켜 보여주는 식으로 진행했다. 인터넷에 React 배포 / React + Docker 배포 검색했을 때 가장 쉽고 많이 찾을 수 있어 당연하게 했던 것 같다. 그러던 중 프론트엔드 도커 파일을 작성할 일이 있었다. 당연히 위 방식으로 진행했다. 근데 특히나 오타나 약간의 UI 변경 등 잦은 수정이 필요한 프론트엔드에서 위의 방식대로 진행하면 비효율적이라는 피드백을 받았다. nginx 이미지가 변경되는 것이 아닌 굳이 오타 수정하는데 해당 이미지도 다시 받고 올린다는 게 맞는가? 에 대한 얘기였다. 빌드 파일만 달라지지 nginx 이미지 자체에 대해서는 변경이 없다는 ..

Vite Alias 설정하기

파일 구조가 복잡해질수록 다른 디렉터리의 파일을 import 하는 게 지저분해진다. (ex) ../../pages/signUp/index) 이때 path alias 설정을 해주면 보다 깔끔한 코드 작성이 가능하다! 프로젝트 환경은 Vite + Typescript 기준이다. Alias란? 경로에 별칭을 붙이는 것으로 ../../pages/signUp/index 을 @/pages/signUp/index 로 변경 가능하다. Alias 적용하기 yarn add -D path yarn add -D @types/node vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from..

[Vue.js] Watch vs Computed

watch와 computed의 차이점에 대해 알아보려고 한다. watch와 computed는 둘 다 Vue 인스턴스 내에 정의된 데이터 값에 변경이 일어나는지를 감시하고 변경될 때마다 정의된 함수가 실행된다. ✅ computed 만약 message라는 문자열을 뒤집어서 출력하고 싶다면 여러 가지 구현 방법이 있다. 1. 첫 번째로 문자열 표현식인 이중 중괄호를 이용하여 내부에서 연산을 하여 데이터 값을 보여준다. message: {{ message }} revsersedMessage: {{ message.split("").reverse().join("") }} 2. 두 번째로 함수를 이용하여 데이터 값을 보여준다. message: {{ message }} revsersedMessage: {{ messag..

[Swift] 반복문

반복문이란? 반복적으로 코드가 실행되게 만드는 구문 for-in 루프 상수는 반복문 내에서만 사용 가능 순회대상은 set, array, dictionary, character, 범위 데이터, 문자열 등의 상수, 변수 사용 가능 for 루프상수 in 순회대상 { // 실행 구문 } for i in 1...4 { print(i) } let arr = [1,2,3,4] for i in arr { print(i) } // 1 // 2 // 3 // 4 While for 문의 경우, 미리 순회 횟수가 정해져 있지만, While 문의 경우 조건식이 false 가 될 때까지 무한 수행 즉, 조건을 만족하는 동안 계속 실행이 됨 while 조건식 { // 실행 구문 } var number = 5 while number..

[Python] deque 사용하기

파이썬에서 큐(queue) 자료구조를 사용하는 방법은 list 사용하기 deque 사용하기 Queue 클래스 사용하기 등이 있다. 그중 deque에 대해 자세히 알아보려고 한다. deque deque는 collections 모듈에서 사용할 수 있다. deque는 “double-ended queue”의 약자이며, 스택과 큐를 일반화한 것으로, 양방향에서 원소를 추가하고 제거할 수 있는 자료구조이다. 양쪽 끝에서의 추가와 제거를 O(1) 성능으로 지원한다. deque는 내부적으로 linked list를 사용하고 있어 무작위로 접근할 경우 O(n) 시간 복잡도를 가진다. deque가 지원하는 메서드는 다음과 같다. append(x) 데크의 오른쪽에 x를 추가합니다. appendleft(x) 데크의 왼쪽에 x를..

[Swift] 조건문

조건문이란? 주어진 조건에 따라 코드의 흐름을 제어하는 것이다. 스위프트의 조건문에는 if-else 문, switch 문, guard 가 있다. if 문 if 조건식1 { // 조건식1을 만족했을 때 실행되는 구문 } else if 조건식2{ // 조건식2를 만족했을 때 실행되는 구문 } else { // 아무 조건식도 만족하지 못했을 때 실행되는 구문 } Switch 문 패턴 기반으로 실행된다. 하나의 패턴이 일치하면 스위치 문은 종료된다. switch 비교대상 { case 패턴1: // 패턴1 일치할 때 실행되는 구문 case 패턴2: // 패턴2 일치할 때 실행되는 구문 case 패턴3: // 패턴3 일치할 때 실행되는 구문 default: // 아무 패턴도 일치하지 않을 때 실행되는 구문 } fa..

[Swift] 함수 (Function) 란?

함수 (Function) 란? 작업의 가장 작은 단위이자 코드의 집합이다. 하나의 기능을 하나의 함수로 만드는 것이 좋다. 함수의 형태는 아래와 같다. func 함수명(파라미터이름:데이터타입) -> 반환타입 { return 반환 값 } func sum(a: Int, b: Int) -> Int { return a+b } sum(a: 5, b: 3) // 8 만약 매개변수(파라미터)가 없다면 공란으로 두면 된다. func hello() -> String { return "Hello" } hello() // "Hello" 만약 반환 값이 없다면 void 또는 공란으로 두면 된다. func hello2() -> Void { print("Hello") } hello2() // "Hello" func hello3(..

[Swift] 컬렉션 타입

컬렉션 타입이란? 데이터들의 집합 묶음, 데이터의 집합소이다. 지정된 타입들을 하나로 묶은 형태를 말한다. 즉, 하나의 컬렉션 타입은 하나의 데이터 타입만 담을 수 있다. 종류로는 배열(Array), 딕셔너리(Dictionary), 셋(Set) 이 있다. 배열 (Array) 값들을 순서대로 저장하는 컬렉션 타입이다. // 빈 배열 선언 var numbers: Array = Array() // [] numbers.append(1) // [1] numbers.append(2) // [1,2] numbers.append(3) // [1,2,3] // 배열 요소 접근 numbers[0] // 1 // 배열 중간에 값 삽입 numbers.insert(4,2) // [1,2,4,3] // 배열 요소 삭제 numbe..