분류 전체보기235 [React] 리액트 컴포넌트(Component)와 Props 속성 컴포넌트(Component)컴포넌트(component)란 프로그래밍에서 재활용 가능한 독립적인 모듈을 의미합니다. 리액트나 뷰(Vue.js)와 같은 프론트엔트에서 컴포넌트는 앱의 화면을 구성하는 가장 기본적인 단위입니다. 컴포넌트는 독립적이고 덜 의존적이기 때문에 한번 호출해서 사용하는 걸로 끝나는 것이 아니라 여러번에 걸쳐 재사용될 수 있습니다.리액트 컴포넌트는 아래 코드와 같이 JSX 코드로 작성한 리액트 요소(element)를 반환하는 함수식으로 작성됩니다. 컴포넌트를 정의할때 함수명은 보통 맨 앞자마다 대문자로 표기하는 파스칼케이스(PascalCase)로 작성합니다.리액트 함수형 컴포넌트는 반드시 리액트 Element를 return해야 합니다.const BoxComponent = () => { .. 2024. 8. 17. [React] 리액트 JSX(TSX) 문법 ❓리액트(React)리액트는 프론트엔드 개발을 위한 Javascript의 오픈소스 라이브러리이다. HTML, Javascript만으로도 충분히 웹을 만들 수 있는데 왜 리액트를 사용하는걸까?JavaScript에서는 DOM 을 변형시키기 위하여브라우저의 DOM Selector API를 사용해서 특정 DOM 을 선택한 뒤,특정 이벤트가 발생하면 변화를 주도록 설정해야했다. 이를 이용하여 프로젝트를 진행했을 때 규모가 커질 수록 Dom Selector를 많이 쓰게 되고,그러한 코드가 쌓여갈 수록 매우 지저분하다는 생각이 들었다.사실 하나씩 불러오는 것도 매우 귀찮았다. 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 한다면관리하기도 힘들고, 규모가 커질 수록 성능 저하의 원인이 될 수도 있는 문제가.. 2024. 8. 17. [Linux] 리눅스 터미널(Terminal) 단축키 및 명령어 정리 📌 리눅스 단축키 ✅ 터미널 실행 관련 단축키터미널 실행 : Ctrl + Alt + T새로운 탭으로 터미널 실행 : Ctrl + Shift + T새로운 창으로 터미널 실행 : Ctrl + Shift + N탭으로 실해된 터미널 종료 : Ctrl + Shift + W현재 터미널 종료 : Ctrl + Shift + Q터미널 내에서 문자열 검색 : Ctrl + Shift + F ✅ 터미널 내에서의 단축키자동완성 : Tab복사하기 : Shift + Ctrl + C붙여넣기 : Shift + Ctrl + V화면 Clear : Ctrl + L콘솔 이동 : Alt + 좌/우 방향키실행 중인 프로그램 중지 : Ctrl + C실행 중인 프로그램 일시 정지 : Ctrl + Z일시 정지된 프로그램 다시 실행 : % ✅ 이외 .. 2024. 8. 14. [React] React Vite TypeScript 개발환경 세팅하기 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/214 [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기"📁components" 폴더 (index.html, main.tsx)"📜vite.config.ts" 파일"📜tsconfig.json" 파일"📜pa.. 2024. 8. 14. [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기 비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록 확장되었습니다. 📌 Vite의 장점장점설명빠른 시작 속도기존 번들러에 비해 개발 서버 시작 속도가 매우 빠릅니다.개발 생산성HMR(핫 모듈 교체)를 통해 변경된 파일을 다시 로드하여 애플리케이션을 즉시 업데이트합니다.모던 개발 경험최신 JavaScript 기능과 ES 모듈을 기본적으로 지원합니다.작은 번들 크기Rollup을 통해 최적화된 생산 빌드를 생성하여 작은 번들 크기를 유지합니다. 📌 Vite 지원하는 템플릿JavaScriptTypeScriptvanillavanilla-tsvue.. 2024. 8. 14. [Python] 파이썬 0x80070643 에러 현상 해결 방법 🎯 Goal파이썬을 삭제하는 동안 발생한 오류 코드 0x80070643 해결한다.⚠️ 문제 현상0X80070643 오류는 보통 Windows 운영 체제에서 발생하는 오류 코드입니다. 기존에 설치된 파이썬 버전이 충돌하는 경우입니다. 💊 해결 방법1) '파이썬 공식 홈페이지' ▶ '해당 버전' 검색 ▶ 'Release 버전' 다운로드ex) 검색 : 3.11.3 → Release – Python 3.11.3 → Files : Windows installer (64-bit)https://www.python.org/downloads/ Download PythonThe official home of the Python Programming Languagewww.python.org 2) 'Repair'.. 2024. 8. 12. [GitHub] 깃허브 Windows 환경 NET Framework 관련 에러 현상 해결 방법 🎯 Goal.NET Framework 최신 버전을 설치 팝업창 안 뜨게 한다.⚠️ 문제 현상사내망(폐쇄망)에서 git을 통해 작업시 위와 같은 에러메세지가 반복적으로 발생했다..NET Framework 최신 버전을 설치하면 되나 사내망(폐쇄망)환경이라 그럴 수 없는 상황이다. 💊 해결 방법1) 'C:\Users\$USER 디렉토리' ▶ '.gitconfig' 파일 2) 'credential.helper' 항목 삭제📝 조치 결과Git Bash Here ▶ git pull 할 때.Net Framework 팝업창 발생했던 오류가 해결된 모습을 확인할 수 있다. 2024. 8. 12. [Node.js] Nodejs 모듈(CommonJS / ES Modules) 모듈(Module) 이란?분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대게 클래스 하나 혹은 특정한 목적을 가진 여러개의 함수를 포함하는 라이브러리로 구성되어 있다.모듈 시스템CommonJS - NodeJS 환경을 위해 만들어진 모듈 시스템ES Module - ES6(ES2015)에 도입된 자바스크립트 모듈 시스템특징CommonJSES6 모듈확장자.js .cjs.js(package.json에 "type":"module" 추가) .mjs로딩 방식동적 로딩 (런타임)정적 로딩 (컴파일 타임)문법require, module.exportsimport, export모듈 범위파일 단위파일 단위트리 셰이킹지원하지 않음지원 (최적화 가능)사용 환경주로 서버 (Node.js)브라우저, 서버 (트랜스.. 2024. 8. 9. [Node.js] Package.json 명령어 npm start, npm run build 스크립트 차이점 package.json 파일 실행 스크립트start, build, test, eject 4가지 명령이 있습니디. 일반적으로 start는 개발 모드 build는 배포용 빌드라고 알고 있습니다. npm startnpm run buildnpm testnpm run eject"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject"}, npm start개발 모드로 프로그램을 실행하는 명령어 입니다. HMR(hot-module-replacement)가 동작해 수정과 동시에 화면이 변경됩니다. 개발 모드에서 코드에 에러거 .. 2024. 8. 9. 이전 1 2 3 4 5 6 7 ··· 27 다음 728x90 반응형
