신기술을 배울 때 중요한 것은 누가 이 기술을 사용하는지 그들의 규모가 얼마나 큰지 꼭 살펴봐야한다. 관련 사이트 builtwith: https://builtwith.com npm: https://www.npmjs.com ReactJS 페이스북(현재 meta) 에서 제작하였다. 가장 큰 커뮤니티를 가지고 있다. React JS는 UI를 interactive하게 만든다. JSX는 JavaScript를 확장한 문법이다. HTMl과 유사해서 JSX로 React 요소를 만드는 게 개발자 입장에서 편하다. React Native React Native: ios나 안드로이드 어플을 React JS 코드로 만들 수 있게 해준다. babel 이란? https://babeljs.io/ babel: JSX 코드를 브라우..

'Spread', 'Optional Chaining', 그리고 'Destructuring'은 모두 자바스크립트(JavaScript)에서 사용되는 연산자 및 표현식입니다. 자바스크립트는 다양한 연산자와 구문을 제공하여 개발자가 보다 쉽고 간결하게 코드를 작성할 수 있도록 도와줍니다. 삼항 연산자(Ternary Operator): 삼항 연산자는 조건에 따라 두 개의 값을 반환할 때 사용하는 연산자입니다. 문법은 조건 ? 값1 : 값2 형태로, 조건이 참(True)이면 값1을, 그렇지 않으면 값2를 반환합니다. spread 연산자: ES6에 도입된 spread 연산자(...)는 배열이나 객체의 요소를 개별 요소로 확장할 때 사용합니다. 이를 통해 배열을 인자 목록으로 쉽게 전달하거나, 객체 리터럴을 조합할 수..

nginx.. 많이 들어보았고, 웹 서버라는걸 알고 있지만 자세히 조사해본적이 없는 것 같아서 정리하는 글 입니다. 웹 서버에는 보통 Apache 나 Nginx를 사용합니다. 그 중에서도 왜 Nginx를 더 많이 사용할까요? nginx Nginx (엔진엑스라고 발음)는 웹 서버, 리버스 프록시, 메일 프록시, 그리고 HTTP 캐시 기능을 제공하는 소프트웨어입니다. 이그로르 시쇼프(Igor Sysoev)에 의해 처음 개발되어, 2004년에 첫 공개 버전이 출시되었습니다. Nginx는 특히 높은 동시성 처리와 낮은 메모리 사용으로 유명하여, 고성능 웹 사이트를 운영하는 데 널리 사용됩니다. Nginx 는 웹 서버로 주로 사용되지만 웹 서버로만 사용될 수 있는 도구는 아닙니다. 위에서 언급했듯이 웹 서버 외에..

유튜브 따배쿠 강의를 듣고 정리한 내용입니다. 💡 쿠버네티스 Pod Container 정리와 Single / Multi Container Pod 생성 Container 정리 app.js라는 어플리케이션을 기준으로 컨테이너를 빌드한다. $ docker build -t smlinux/appjs $ docker push smlinux/appjs push라는 명령어를 통해 smlinux 계정 안에 appjs를 저장 컨테이너 하나는, 하나의 어플리케이션이다. 컨테이너는 애플리케이션을 환경에 구애 받지 않고 실행하는 기술 Pod란? 컨테이너를 표현하는 K8S 최소 단위 어플리케이션을 실행할 때 도커와 쿠버네티스의 차이: 도커: appjs 컨테이너 실행해줘 쿠버: appjs Pod 실행해줘 API를 통해서 컨테이너 ..

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에서 재설정해주면 정상적으로 동작한다.

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