🧑‍💻 짧은호흡

리액트 프로젝트를 깃허브 액션을 통해 도커 허브에 푸쉬하는 과정까지는 이전 글에. 조직 내에 deploy용 레포지토리를 하나 파서 사용한다. 이곳에선 도커 컴포즈를 이용해 백엔드, 클라이언트, nginx 세개의 이미지를 받아와 실행한다. 먼저 깃허브 액션부터. prod-deploy.yml name: Deploy to Ec2 on: workflow_dispatch: push: branches: - main jobs: build: name: Build runs-on: ubuntu-latest steps: - name: checkout uses: actions/checkout@master - name: create remote directory uses: appleboy/ssh-action@master wit..

객체는 상태를 나타내는 property와 동작을 나타내는 method로 이루어져있다. 메소드가 자신이 속한 객체의 property를 참조하려면 const someone = { name: '9yu', getName() { return someone.name; }; }; 이렇게 할 수 도 있겠지만, 좋은 방법은 아니다. const someone = { name: '9yu', getName() { return this.name; }; }; 대신 이렇게 this를 사용해서 자신이 속한 객체를 참조할 수 있다. 1. this 바인딩 function printThis() { console.log(this); } printThis(); 지난주 클로저에서 실행컨텍스트에 대해서 한번 봤었다. 함수를 호출할때 실행컨텍스트..

깃허브 액션과 도커를 이용해 리액트 프로젝트 자동 배포 환경을 구축해보기. 도커에 관한 인강을 전역하고 얼마 안됐을때 조금 듣다 말았고, 그 이후론 CI/CD에 대한 경험이 없었기 때문에. 이 기회에 정리를 해놔야겠다는 생각이 든다. 내가 한 부분은 프론트 레포지토리 관련 뿐이지만 팀에서 구축한 전체적인 흐름을 적어보겠습니다. 전체적인 코드는 이전에 고스락 프로젝트 하면서 찬진이가 세팅한거 보고 열심히 뜯어서 배워왔음. 사용할 것들 Github Actions Docker, Docker Compose Nginx 전체적인 흐름 프론트 레포지토리의 main 브랜치에 push Github Actions에서 이벤트를 감지하면 리액트 프로젝트를 빌드하고 도커 허브로 push 새로 배포를 원할 때 Deploy 레포지..

1. 스토리북 설치 기존 프로젝트의 루트 디렉터리 내에서 실행 .storybook 디렉토리 안에 main.js와 preview.js가 생성된다. # Add Storybook: npx storybook init npm run storybook 명령어를 통해 로컬호스트 6006번 포트에서 실행할 수 있다. 2. Styled-components 적용 preview.js에서 설정을 해준다. import React from 'react'; import { ThemeProvider } from 'styled-components'; import { GlobalStyle } from '../src/lib/styles/global-style'; import { theme } from '../src/lib/styles/t..

정의 : 함수와 함수가 선언된 어휘적 환경의 조합 어떤 함수 A에서 선언한 변수 a를 참조하는 내부 함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 0. 실행 컨텍스트 정의 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 프언에서 나온 활성 레코드와 비슷한 개념..? // ------------------- (1) var a = 1; function outer() { function inner() { console.log(a); var a = 3; // --------------- (2) } inner(); // -------- (3) console.log(a); // ----------------- (4) } outer(); // --------..

1. OOP 1-1. 객체지향의 4가지 특성 a. 다형성 한 가지 역할이 상황에 따라 각기 다른 행동을 한다. 셰프가 헛기침을_한다() 부 주방장 -> 눈치를_본다() 조리장 -> 요리하는_척을_한다() b. 추상화 공통된 기능을 뽑아낸다. 현실 세계의 복잡한 현상을 간단한 형태로 모델링한다. (simplify) 최소한의 정보를 추출 c. 캡슐화 구현 내용을 내부에 숨겨서 응집도를 높이는 것 응집도 : 객체가 자신과 관련된 것을 중심적으로 행동한다. c-1. 결합도 두 객체가 서로 관련되거나 의존하는 정도 안 좋은거 (객체를 떼어내거나 변경하기 힘들다) c-2. 캡슐화를 위반한 사례 신문배달부가 고객의 지갑을 가져와서, 현금을 확인하고, 돈을 가져가는게 아니라 고객이 자신의 지갑의 현금을 확인하고, 돈을..

타입 추론 인터페이스와 제네릭을 이용한 타입 추론 // 제네릭으로 넘겨준 값을 인터페이스의 속성으로 사용할 수 있음 interface Dropdown { value: T title: string; } var shoppingItem: Dropdown = { value: // 마우스 올리면 string으로 뜬다. 인터페이스를 extends해서 사용할 때도, interface Dropdown { value: T title: string; } var items: Dropdown = { value: 10, title: 'a' } interface DetailedDropdown extends Dropdown { description: string; tag: T; } var detailItems: DetailedDr..

function logText(text: T):T { console.log(text); return text; } logText('하이'); //함수를 호출하는 시점에 인자의 타입을 지정해주는것 기존 타입 정의 방식 : 함수를 중복으로 선언해야하는 불편함이 있다. function logText(text: string) { console.log(text); return text; } function logNumber(num: number) { console.log(num); return num; } logText('a'); logNumber(10); 유니온 타입 방식 : 마우스를 올려 타입을 확인하면, string 또는 number 가 아닌 항상 string | number 자체로 보여진다. functio..