728x90 반응형 인강\개인공부22 VS Code에서 한국어 언어팩 설정하는 방법 커맨드 팔레트를 통해 언어 설정 가능하다. Ctrl + Shift + P로 커맨드 팔레트 실행 후 language로 검색하면 Configure Display Langage가 나온다. ko(한국어)를 선택하면된다. ko가 없다면 Install Additional Languages.. ko 다운로드 2024. 1. 4. [VS code] 글자 크기 조절 ctrl + , VScode 에서 컨트롤 + 쉼표 키를 누르면 setting창이 켜진다. 검색창에 font size 입력 숫자 단위로 글자크기 조절 가능 # 마우스 스크롤로 크기 조절 zoom 검색 체크박스 체크후 ctrl + s 컨트롤 누른 상태에서 마우스 스크롤로 글자 크기 조절 가능하다. 2022. 8. 23. VS code - PMD 설치 방법 (programming mistake detector) VS code에서 PMD를 설치 하는 방법 입니다. 먼저 vscode 마켓에서 PMD 검색 Apex PMD 다운 https://marketplace.visualstudio.com/items?itemName=chuckjonas.apex-pmd https://github.com/foreleven/vscode-java-pmd APEX PMD 링크 세팅에 들어갑니다. Extensions -> Apex PMD configuration Jre Path를 넣어줬지만 계속 오류가 떠서 하나하나 지워주고 시도 하고 Jre 패쓰를 넣지 않고 성공했습니다. 아래로 살짝 내리면 나오는 Pmd Bin Path (*필수) PMD 사이트 에서 다운후 경로를 넣어줍니다. https://pmd.github.io/ 그리고 Ruleset.. 2022. 1. 6. [vscode] 코드 Live Server 사용하기, 실시간 미리보기 vscode에 실시간 미리 보기 확장 프로그램 - Live Server -리액트 공부하다 알게된 편리한 기능 -프론트엔드 개발자, 웹퍼블리셔는 익숙한 기능인듯 보임 vscode에 extensions: marketplace를 선택해 Live Server를 검색한다. 그리고 install install 버튼이 uninstall로 변경되면 HTML 파일이나 JS 파일로 돌아온다. HTML 파일에서 Live server 시작하는 방법은 간단하다. 단축키나 마우스 클릭 버튼 😘 단축키 window : alt + L → alt + O mac : command + L → command + O 😘 마우스 마우스 오른쪽 클릭 후 Open with Live Server 를 클릭해 그럼 Live server에서 127.0... 2021. 11. 23. [React] 리액트 기본 규칙, JSX 기본 규칙 😎 JSX 규칙 : javascript + XML JSX 는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법 얼핏보면 HTML 같지만, 실제로는 자바스크립트 😎 규칙 1. 태그는 반드시 닫아줘야 한다. 2. 최상단에서는 반드시 div 로 감싸주어야 한다. ( Fragment 사용 , 상황에따라 ) 3. JSX 안에서 자바스크립트 값을 사용하고 싶을때는 {}를 사용한다. 변수값 출력예시 참고 -> { name } 4. 조건부 렌더링을 하고싶으면 &&연산자나 삼항연산자를 사용한다. 5. 인라인 스타일링은 항상 객체형식으로 작성한다. 6. 별도의 스타일파일을 만들었으면 class 대신 className 을 사용한다. 7. 주석은 {/* */}을 사용해 작성한다. 2021. 11. 23. [React] 컴포넌트란? 함수형/클래스형 😎 컴포넌트 컴포넌트는 UI 를 구성하는 조각(piece)에 해당되며, 독립적으로 분리되어 재사용을 됨을 목적으로 사용됩니다. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리합니다. (예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트) 리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다. 또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 이러한 컴포넌트들이 유기적으로 잘 연결되고 동작되어야 훨씬 효율적인 앱이 될 수 있다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 어떠한 값을 컴포넌트에 전달해 줘야 할때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없다. state는 컴포넌.. 2021. 11. 23. [React] 컴포넌트 구조 - JSX영역/함수영역/Fragment 사용법 React를 구성하는 중요 파일 react로 프로젝트 구축을 할때 중요한 3개의 파일에 대해 알려드리겠습니다. 리액트는 컴포넌트 구조*로 이루어져있습니다. 컴포넌트 타입에는 함수형과 클래스형이 있습니다. 오늘 설명드릴 내용은 '함수형'을 통한 예제입니다. 😎 컴포넌트란? UI를 독립적이고 재사용 가능하도록 나눈 조각, 기능을 단위별로 캡슐화 한 단위를 말합니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document... 2021. 11. 22. [React] 프로젝트 생성 : CRA(Create-React-App) 😎 CRA(Create-React-App) : 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 https://create-react-app.dev/docs/getting-started React 시작할때 node js 설치가 필수! vs code에서 터미널을 열어준다. vscode - 터미널 - 새터미널 ctrl + ~ : 터미널 열기 1. nodejs 다운 2. npx create-react-app 프로젝트명 3. cd 프로젝트명 4. npm start =>3000번 포트로 react 서버 온 😎 CRA 명령어 Create React App을 사용해 스캐폴딩 된 프로젝트는 다음의 4가지 명령어를 제공합니다. start → React 프로젝트 개발 서버를 시작합니다. build →.. 2021. 11. 18. [React] 기초 - 바벨/웹팩 이란? CDN을 넣어서 React 구조 만들기 실제 프로젝트를 진행할때, cdn을 넣지않고 react create 해서 사용한다. 😎 create-react-app 이란? react를 활용해 개발을 하기 위한 필수 모듈인 react, react-dom, react-scripts 외부 모듈 webpack, babel 기본 구조를 알기위해 CDN을 넣어 구조 생성 React CDN => https://ko.reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper 바벨 CDN => https://babeljs.io/docs/en/babel-standalone CDN 을 헤더 안에 붙여넣어주면 된다. - 예제 화면에 보이는 영역 -> el이라는 태그를 dom에 끼워넣는다 라고 생각하면 된다. 😎 바벨 최신 ES6버전을 .. 2021. 11. 18. 이전 1 2 3 다음 728x90 반응형
