[React] 상태 (State)
·
Development/React
상태란? 리액트(React)에서 state는 컴포넌트의 현재 상태를 나타내며, 사용자 상호작용이나 다른 이벤트에 의해 데이터가 변할 때 UI를 갱신하는 데 사용된다. state는 컴포넌트 내에서 캡슐화되어 있으며, React의 useState 훅을 사용해 관리된다. Counter.tsx import {useState} from 'react'; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); } const onDecrease = () => { setCount(count - 1); } return ( // 0에서 출발, 1씩 증가 / 1씩 감소 {count} ..
[React] JSX 사용하기
·
Development/React
가 아닌 로 사용하는 것을 셀프 클로징 태그라고 한다. ES Module이란 무엇인가? ES6에 도입된 모듈 시스템. import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있다. CSS 파일을 사용하여 스타일링하기 MyHeader.tsx 내보내기(export) const MyHeader = () => { // 컴포넌트 내에 return 필요 return 헤더; }; export default MyHeader; App.css .App, h2, #bold_text 추가 .App { background-color: black; } h2{ color: red; } #bold_text { color: green; } App.tsx React에서는 html 태그에서 class 속성..
패키지란? 프론트를 실행하려면 빌드를 해야하는 이유
·
Development
그동안 프레임 워크를 쓰지않고 순수 자바스크립트를 사용해봤기에 리액트나 뷰가 어렵게 느껴졌다. 이러한 빌드과정이 필요없었기 때문이다.기존에는 전통적인 웹 개발 방식을 유지했었기 때문에 복잡한 빌드 과정이 필요하지 않았다. 이러한 경우, 자바스크립트 코드는 HTML 문서에 직접 포함되거나, 태그를 통해 외부 파일로 참조되어, 브라우저가 이를 해석하여 실행하기 때문에 코드를 서버에 저장하면 바로 적용되었었다. 이전에 `PHP`, `JavaScript`, `jQuery`를 사용하여 개발할 때는, 서버 사이드 렌더링(Server-Side Rendering, SSR) 방식을 주로 사용했다. 이 방식에서는 서버에서 페이지의 전체 `HTML`을 생성하고, 그 결과를 클라이언트(브라우저)에 전송한다. `JavaScr..
[따배쿠] 기본 명령어 학습하기
·
Development/k8s
자동 완성 약어 또는 용어의 앞글자만 쓰고 탭키를 누르면 자동 완성된다. po,pod,pods 모두 동일하게 파드에 동작한다. kubectl get po # Po만 입력 후탭을 입력하면 자동완성됨. kubectl get po kubectl get pod kubectl get pods kubectl 큐브씨티엘 또는 큐브 컨트롤이라고 읽는다. 쿠버네티스 클러스터에 명령을 내리는 CLI 이다. 쿠버네티스 명령어 도움말 각각의 명령어 사용법과 추가 옵션을 설명해준다. kubectl --help kubectl [명령어] --help # 리눅스와 동일하다. 노드 작업 Node 정보보기 노드 정보를 조회할 때는 아래 명령어를 입력한다. # 정보를 조회할 땐 get # 현재 설치된 노드들이 조회됨. kubectl ge..
[따배쿠] 쿠버네티스 개요
·
Development/k8s
컨테이너란? # cat > [파일명] 으로 파일을 작성할 수 있음 cat > app.js 컨테이너를 동작시키려면, 플랫폼이 필요하다. 리눅스 시스템 위에 도커를 설치해야함. 그 다음 도커 데몬을 start시키면 도커 플랫폼이 만들어진다. 그 이후로는 컨테이너를 빌드하거나 실행할 수 있다. 허브: 컨테이너를 저장해놓는 창고 컨테이너를 빌드해서 푸시 저장된 컨테이너를 사용하는 환경 허브에는 수 많은 컨테이너가 저장되어있음. 리눅스에 도커를 설치하여 도커 플랫폼을 구축하여야함. 도커 커맨드를 실행해서, 만들어놓은 컨테이너를 다운로드 받음 다운로드 받은 컨테이너를 start create하면 컨테이너가 동작함 $ docker pull smlinux/nodeinfo:v1 $ docker create --name a..
[Github] 레퍼지토리 소유권 이전
·
Development
Setting 에 들어가면 General 하단에 Danger Zone에 Transfer ownership을 통해 소유권을 이전할 수 있다. 프로젝트가 크지 않은 것 같은데, 소유권 이전하는데 생각보다 시간이 오래걸린다 ㅠ
[Docker] 리눅스에서 도커 사용하기
·
Development/Docker
기존에 사용 중인 서버에는 python 3.7 버전이 깔려있다. 그러면 도커 안 깔고.. 사용해도 될듯한데 특정 버전을 업그레이드해야 하는데 기존에 운영 중인 다른 서비스나 환경에 영향을 미치면 안 되기 때문에 도커를 사용하려고 한다. 설치 전에 시스템 요구 사항을 확인해야 한다. https://docs.docker.com/desktop/install/linux-install/ Install Docker Desktop on Linux Install Docker on Linux with ease using our step-by-step installation guide covering system requirements, supported platforms, and where to go next. docs..
[Github] utteranc로 블로그에 댓글 쓰기
·
Development
레퍼지토리를 생성한다. (레퍼지토리명 규칙에 맞게 적절한 것으로, 나는 blog-comments를 사용하였다.) https://utteranc.es/ utterances utteranc.es 위 링크에 접속한다. repo에 새로 생성한 레포지토리를 입력한다. (jihye1211/blog-comments) 나는 맨 상위 옵션을 선택하였다. 그리고 원하는 테마를 선택한 후 코드를 copy 한다.