Mac OS를 기준으로 하고 있습니다.VSCode먼저, VSCode가 설치되어있어야한다. 설치되지 않았을 경우, 공식 홈페이지에서 환경에 맞는 버전을 다운로드한다. Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.comNode.jsnode는 버전 관리 용이를 ..

터미널에서 code 명령어로 vsc를 실행하려면, vsc에서 설정해주어야한다. vsc에서 cmd+shift+P를 눌러 명령 팔레트를 실행한 후 code를 검색한다. 검색 결과 중 `셸 명령: PATH에 'code' 명령 설치`를 선택한다. 설치가 완료되면, 터미널에서 code를 입력하여 해당 디렉토리에서 vsc를 실행할 수 있다. cd [실행할 프로젝트 경로] code 만약 아래 화면처럼 에러가 발생했을 경우, 메세지 내용처럼 '/usr/local/bin/code/'를 삭제해주면 된다. sudo rm -rf /usr/local/bin/code 그리고 다시 vsc에서 재설정해주면 정상적으로 동작한다.

기초를 다시 하기 위해서 정리하는 글 입니다. 바닐라 자바스크립트란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 의미한다. 웹 사이트를 만들기 위해서는, HTML과 CSS를 알아야한다. HTML CSS 자바스크립트는 인터렉티브한 웹사이트를 만들어 준다. - HTML과 CSS는 어떻게 작용하고 보완하는지만 알면 된다. **인터렉티브한 웹: 사용자가 웹사이트(또는 웹 애플리케이션)와 상호작용할 수 있는 것을 의미 자바스크립트는 10일 만에 개발된 프로그래밍 언어이다. 자바스크립트는넷스케이프를 위해 개발된 언어이다. 예전에는 HTML과 CSS만 있었다. - 넷스케이프: 브라우저, 브라우저가 더 인터렉티브하길 원해서 만들어진게 자바스크립트 언어. 자바스크립트가 프론트에서 쓸 수 있는 유일한 ..

React란? React는 공식 홈페이지에서 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리라고 소개되어있다. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 메타(Meta)에서 개발한 오픈 소스 자바스크립트 라이브러리이며, 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트 하기 때문에, 리렌더링이 잦은 동적인 웹에서 엄청나게 빠른 퍼포먼스를 낼 수 있다. 그리고 기본적으로 모듈형 개발이기 때문에 생산성도 높다. 또한 React Hooks라는 강력한 메소드들을 지원하고 있다. 장점 프레임워크가 아닌, 라이브러리이다. 리렌더링..

상태란? 리액트(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} ..

가 아닌 로 사용하는 것을 셀프 클로징 태그라고 한다. 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 속성..

그동안 프레임 워크를 쓰지않고 순수 자바스크립트를 사용해봤기에 리액트나 뷰가 어렵게 느껴졌다. 이러한 빌드과정이 필요없었기 때문이다.기존에는 전통적인 웹 개발 방식을 유지했었기 때문에 복잡한 빌드 과정이 필요하지 않았다. 이러한 경우, 자바스크립트 코드는 HTML 문서에 직접 포함되거나, 태그를 통해 외부 파일로 참조되어, 브라우저가 이를 해석하여 실행하기 때문에 코드를 서버에 저장하면 바로 적용되었었다. 이전에 `PHP`, `JavaScript`, `jQuery`를 사용하여 개발할 때는, 서버 사이드 렌더링(Server-Side Rendering, SSR) 방식을 주로 사용했다. 이 방식에서는 서버에서 페이지의 전체 `HTML`을 생성하고, 그 결과를 클라이언트(브라우저)에 전송한다. `JavaScr..

자동 완성 약어 또는 용어의 앞글자만 쓰고 탭키를 누르면 자동 완성된다. 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..