Loading...
2023. 2. 6. 21:20

gitlab 프로젝트 CI/CD환경 구축하기 최종장 -프로젝트 배포 자동화하기-

1. jenkins 컨테이너 실행 옵션 이전에 jenkins docker in docker로 실행한 옵션으로 하면.. 컨테이너 삭제하면 모든 옵션이 초기화됨 docker run \ -d \ -p 8080:8080 \ -v /var/run/docker.sock:/var/run/docker.sock \ --name jenkins \ -u root \ mbodji/jenkins-withdocker:v1.0 현재 아래와 같이 켜진 상태에서 한번 컨테이너 지워보자 끄고 다시 켜보면... 모든 옵션 초기화되어있음.. 근데 이전에 실행해봤던 jenkins는 컨테이너 삭제해도 다시 키면 옵션이 유지되어 있더라구 왜 그런지... 알아봤더니 [CI/CD] 젠킨스와 도커로 프로젝트 자동배포하기(3) - Jenkins (cr..

2023. 1. 15. 00:50

리액트 기본 배우기 -합성과 상속-

1. 합성(composition) 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 여기서 A라는 컴포넌트와 B라는 컴포넌트가 반복적으로 나타남 이 페이지 자체도 하나의 리액트 컴포넌트 그래서 이 페이지는 컴포넌트 A와 컴포넌트 B를 합쳐서 페이지 컴포넌트를 만든 것이기 때문에 합성 컴포넌트를 사용했다고 볼 수 있다. 리액트로 개발을 하다보면 이처럼 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 일이 많다 합성이라고 무작정 그냥 컴포넌트들을 붙이는 것이 아니고 어떻게 조합할 것인가에 대한 고민이 필요하며 이에 따라 합성의 사용기법이 나뉜다 2. containment 하위 컴포넌트를 포함하는 형태의 합성 방법 사이드바나 다이얼로그같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없..

2023. 1. 14. 23:16

리액트 기본 배우기 -state를 공유하는 방법-

1. shared state 말 그대로 공유된 state 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용한다 shared state는 어떤 컴포넌트의 state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우 가장 위에 있는 컴포넌트는 부모 컴포넌트이고, 아래 화살표로 연결된 2개의 컴포넌트는 자식 컴포넌트 부모 컴포넌트는 value라는 값을 가지고 있다. 왼쪽 아래에 있는 컴포넌트 A는 값에 2를 곱해서 표시하고, 오른쪽 아래의 B는 값에 3을 곱해서 표시한다. 이런 경우에 자식 컴포넌트들이 각각 값을 갖고 있을 필요는 없다. 그냥 부모 컴포넌트의 state의 값에 각각 2와 3을 곱해서 표시하면 그만이다 위 그림도 마찬가지로 3개의 컴포넌트가 있다 ..

2023. 1. 14. 21:56

리액트 기본 배우기 -폼에 대해-

1. 폼이란 무엇인가 우리말로 양식 보통은 회원가입을 하거나, 로그인을 할 때 위와 같이 텍스트를 입력하는 양식을 많이 볼 수 있다 텍스트 입력 뿐만 아니라 체크박스, select 등 사용자가 무언가 선택을 하는 것 모두 폼이라 생각하면 된다 폼은 사용자로부터 입력을 받기 위해 사용하는 것 2. 리액트와 HTML의 폼 리액트와 HTML에서 폼은 조금 차이가 있다 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리 HTML 폼은 엘리먼트 내부에 각각의 state가 존재함 이름: 제출 위 코드는 기본적인 HTML 폼 사용자의 이름을 입력받고 제출하는 간단한 코드 리액트에서도 잘 동작하나, 자바스크립트 코드를 통해 사용자가 입력한 값에 접근하기에는 불편한 구조 리액트가 자바스크립트 기반이라 자바스크립트..

2023. 1. 14. 02:13

리액트 기본 배우기 -리스트 & 키 -

1. 리스트와 키 컴퓨터 프로그래밍에서 "같은 아이템을 순서대로 모아놓은 것이 리스트" 리스트를 위해 사용하는 자료구조가 바로 배열(array) 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 const numbers = [1,2,3,4,5]; key는 열쇠라는 뜻 열쇠는 모두 다 모양이 다른 고유한 형태 이와 같은 맥락으로 컴퓨터 프로그래밍에서는 key는 각 객체나 아이템을 구분할 수 있는 고유한 값 리액트에서는 이런 배열과 키를 사용해서 반복되는 다수의 엘리먼트를 쉽게 렌더링 할 수 있다. 2. 여러 개의 컴포넌트 렌더링 아래 그림에서 A,B 컴포넌트가 반복적으로 나오고 있다. 당연하지만 같은 컴포넌트를 화면에 반복적으로 나타내야 할 경우에, 코드 상에 하나씩 직접 넣는 것은 같은 코드..

2023. 1. 12. 22:08

리액트 기본 배우기 -조건부 렌더링에 대해-

1. 조건부 렌더링 조건에 따른 렌더링 어떠한 조건에 따라 렌더링이 달라지는 것 조건문의 결과 true아니면 false인데 이 결과에 따라 렌더링을 다르게 하는 것 function UserGreeting(props) { return 다시 오셨군요! } function GuestGreeting(props) { return 회원가입을 해주세요. } 위 코드에서는 UserGreeting과 GuestGreeting 두개의 함수 컴포넌트가 있다 UserGreeting은 이미 회원인 사용자에게 보여줄 메시지를 출력하는 컴포넌트이고 GuestGreeting은 아직 가입하지 않은 게스트 사용자에게 보여줄 메시지를 출력하는 컴포넌트이다. 회원인지 아닌지에 따라 2개의 컴포넌트를 선택적으로 보여줘야할 것이다. functi..