728x90

전체 글 288

props 와 state

props와 state는 컴포넌트에서 사용하거나 변화에 따른 리랜더링 기준이 되는 데이터를 담고 있다는 점에서 비슷하다. 하지만 props는 부모 컴포넌트가 설정해서 자식 컴포넌트로 넘겨주는 값으로 자식 컴포넌트에서는 readOnly 인 반면 state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 마음대로 변경할 수 있다. 현재 리액트에서는 클래스형 컴포넌트보다 함수형 컴포넌트 작성이 권장되고 함수형 컴포넌트에서는 useState Hooks 를 통해 state 를 사용한다.

Frontend/ReactJS 2021.09.30

Deployment 적용시 ORA-01882: timezone region not found

그동안 잘 적용되던 kubectl apply -f ... 로 잘 적용되던 Deployment 가 갑자기 아래 오류를 내뿜으로 커넥션을 생성하지 못했다. ORA-01882: timezone region not found 타임존 오류인거 같아 Deployment 에서 참조하는 ConfigMap 에 아래와 같이 타임존을 추가하니 문제가 해결되었다. apiVersion: v1 kind: ConfigMap metadata: name: ... data: SPRING_PROFILES_ACTIVE: "sandbox" SYS_LOG_MIN_LEVEL: "info" TZ: Asia/Seoul

Typescript 간단정리

1. Typescript는 코드 작성시 변수, 함수, 클래스 등에 타입을 지정할 수 있고 전용 컴파일러가 일반 javascript 문법으로 컴파일하는 과정에서 타입을 체크한다. 만약 지정된 타입 외의 값을 대입하려 한다면 컴파일러가 경고메시지를 출력하는데 이로 인해 타입안정성이 보장되고 자연스레 생산성도 향상된다. 2. 변수 선언시 타입을 지정할 수 있다. let var_number: number; let var_string: string; let var_boolean: boolean; let var_enum: 1 | 2 | 3 = 1; //타입 외에 값을 제한할 수도 있다. let var_union: number | string; // 여러개의 타입을 지정할 수도 있다. 이를 union 타입이라고 부른..

Frontend/TypeScript 2021.09.24

[Next.js] _app, _document, _error

Next.js 의 pages 디렉토리는 파일기반으로 라우팅 기능이 수행되게 하는 핵심적인 역할을 한다. 이 안에서도 특별한 역할을 하는 파일들이 있는데 _app.jsx, _document.jsx, _error.jsx 파일들이다.(타입스크립트를 사용한다면 확장자는 .tsx 가 될 것이다) 이 파일들이 필수로 필요한 것은 아니지만 그 특징을 활용하면 보다 효율적으로 개발할 수 있다. _app.jsx 파일의 경우 페이지의 body 부분이 만들어지기 전에 호출되기 때문에 pages 하위의 특정 페이지가 호출될 때 공통으로 적용할 header, footer 등을 추가할 수 있게 된다. 이에 레이아웃 정의시 활용될 수 있다. _document.jsx 파일의 경우 _app.jsx 에 의해 만들어진 body를 토대로 ..

Frontend/NextJS 2021.09.24

Next.js 프로젝트 디렉토리 구조

CNA(create next-app)으로 Next.js 프로젝트를 생성할 경우 기본적으로 생성되는 디렉토리들은 아래와 같다. public: 정적자원의 root 디렉토리이다. styles: 정적자원 중 css 파일을 별도로 보관하는 디렉토리로 보인다. 아마도 global css를 보관할 거 같다. pages: 넥스트의 파일구조 라우팅 기능을 담당하는 디렉토리로 간단하게 apache 의 documentRoot와 비슷하게 생각하면 된다. public 디렉토리에 test.png 파일을 보관할 경우 html에서 /test.png 로 접근할 수 있다. 주의할 점은 랜더링이 완료된 html에서만 접근이 가능하다는 것이다. 랜더링 전 파일 내에서 improt 로 참조할 경우에는 해당되지 않는다. 기본적으로 상대경로 접..

Frontend/NextJS 2021.09.24

Next.js 개발환경 셋팅

Next.js를 시작하기에 앞서 개발환경을 셋팅해본다. 기준 환경은 맥북, vscode 이다. 1. Node 설치 https://nodejs.org/ko/ 에서 다운로드해서 설치하자. 그럼 기본적으로 Node.js와 npm이 설치된다. 설치가 완료되었으면 아래 명령어로 버전을 확인하며 정상 설치 확인 node -v npm -v node 는 구글 크롬의 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 일반적으로 자바스크립트 엔진은 브라우저에 내장되어 있고 이에 자바스크립트를 사용하기 위해서는 기본적으로 브라우저가 필요하다. Node.js 를 설치하게 되면 해당 로컬환경에서도 자바스크립트를 사용할 수 있게 된다. npm 은 웹에 업로드된 재사용 가능한 코드들을 모듈로 만들어놓은 노드 패키지들을 사..

Frontend/NextJS 2021.09.23

ingress https 설정

일단 클러스터가 연결되어 kubectl 로 조작이 가능한 상황이어야 한다. 다운로드 받은 인증서로 secret 생성 일반적으로 tls 인증서 관련 압축파일을 다운로드 받아서 압축을 풀면 key 파일과 cert 파일이 있을 것이다. 그 경로로 이동해서 아래와 같은 명령어로 secret 을 생성한다. kubectl create secret tls ${secret_name} --key={tls_key_file_name} --cert=${tls_cert_file_name} -n ${namespace} Ingress 에 https 적용 metadata: annotations: nginx.ingress.kubernetes.io/force-ssl-redirect: "true" #http 로 접근하더라도 자동으로 ht..

728x90