본문 바로가기

분류 전체보기542

[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.
[JAVA] 특정 폴더에 있는 파일 읽기 파일 경로에 있는 폴더에 있는 전체 파일을 갖고 와서 단순하게 파일 이름을 출력하는 알고리즘입니다. String fileName = ""; /*파일 경로에 있는 파일 가져오기*/ File rw = new File(filePath); /*파일 경로에 있는 파일 리스트 fileList[] 에 넣기*/ File []fileList = rw.listfiles(); /*fileList에 있는거 for 문 돌려서 출력*/ for(File file : fileList) { if(file.isFile()) { fileName = file.getName(); System.out.println("fileName : " + fileName); } } 2021. 11. 19.
[VScode] 리액트 필수 플러그인 React 코드 템플릿 자동 완성 플러그인 @ Reactjs code snippets VS code 툴을 사용하고 React 언어를 사용한다면 필수인 플러그인 Reactjs code snippets 신규로 컴포넌트를 정의할 때마다 일일이 코드를 작성해야 하는 번거로움을 줄여준다, 😎 설치 방법 VS CODE 가장 왼쪽 사이드바에서 4번째 탭을 들어가면 플러그인등 다운받는 스토어 가있다. 그리고 Reactjs code snippets 검색 세부정보를 내려보면 보면 사용가능한 단축 트리거 들이 있다. 😎 사용법 Trigger Content rcc→ class component skeleton rrc→ class component skeleton with react-redux connect rrdc→ class component skeleton with react-redux connect an.. 2021. 11. 19.
[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.
[진천/충청 맛집] 쥐꼬리명당 - 배타고 들어가는 식당 갬성 맛집 진천 맛집 충청북도 맛집 쥐꼬리명당 - 초평저수지 지도만 봐도 엄청난 식당 주변에 아무거토.. 없다. 당연히 그냥 못간다 예약 필수!!!!!!!!!!!!!!!!!!!!!!! 슈퍼 필수!!! 개 필수!! 당연한 필수 당일 예약만 받는다능.. 아침 9시부터 열라게 전화하면 방문 가능 그리고 예약할때 메뉴도 주문 !!!!!!!!! 프로충북인 친구덕분에 방문하게된 소듕한 식당이다.. 쌀쌀한 11월 방문한 충북 태어나서 첫 방문 오창버스터미널에서 내려서 차타고 조금 이동 해야한다. 날이 너무 됴아떠... 거진 도착할때 쯤 보이는 초평 터널! 초평저수지에 있는 식당이다. 터널에 나오자마자 낚시터가 있었는데 베트남 같았다. 수상가옥 터널을 통과하면 단풍길이 나온다 세상엔 참 좋은 곳이 마구마구 숨어있다. 간판! 등장.. 2021. 11. 17.
[React] 클립보드 텍스트 복사하기 😎서론 웹에서 공유하기 또는 url 복사하기 같은 기능을 편하게 유저에게 제공할 때 두루 쓰이는 기능인 유저가 버튼 클릭시 컴퓨터에 텍스트가 복사되는 (cmd + c) 기능 클립보드에 데이터를 복사하는 방법은 exeCommand (opens new window)를 사용하거나 clipboard api (opens new window)를 사용하는 방법이 있습니다. clipboard api의 경우 exeCommand보다 최근 나온 기술로 호환하는 브라우저가 적으므로 exeCommand로 복사하는 방법을 알아보겠습니다! 😎흐름 현재 브라우저가 copy 기능을 지원하는지 확인 지원한다면 textarea를 만들어서 내부에 원하는 text를 복사 복사한 텍스트를 document.body에 appendChild exe.. 2021. 11. 17.
728x90
반응형

티스토리툴바