말하는 감자의 개발일기

* 리액트 라우터(React Router) : 페이지 이동 기능을 처리해 준다. 1. 설치 -npm npm install react-router-dom 2. 사용예시 *App.js import logo from './logo.svg'; import './App.css'; import Header from './component/Header'; import Main from './component/Main'; import Footer from './component/Footer'; import Product from './component/Product'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import NotFound fro..

* state란? : 컴포넌트 내에서 지속적인 변경이 일어나는 값을 관리하기 위해 사용 리액트 이벤트에 의해 변경되는 동적인 값 * 사용하기 : 'useState' 라는 Hook을 이용하여 state를 다룰 수 있다. const [ 상태 ,세터함수 ] = useStae(초기값) 현재 시간 가져오는 예제 import React, { useState } from 'react'; function Main(props) { const [timer, setTimer ] = useState("00:00:00"); const currentTimer = () => { const date = new Date(); const hours = String(date.getHours()).padStart(2,"0"); const ..

* JSX란? : JavaScript XML로 javaScript에 XML을 추가 확장한 문법. 공식적인 자바스크립트 문법은 아님. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리. 1. JSX의 문법 1.1 반드시 부모 요소 하나가 감싸는 형태여야 한다. ! ERROR CASE ! function App(){ return( Hello ); } ! 정상 코드 ! ( ) function App(){ return( Hello ); } ! 정상 코드 ! () function App(){ return( Hello ); } ! 정상 코드 ! () function App(){ return( Hello ); } 1.2 자바스크립트 표현식 : 자바스크립트 표현식을 작성하려면 JSX 내부에서 {}로..

* 레이아웃 나누기 : Header, Main, Footer로 구성 1. src에 functionTest 폴더를 생성 2. 함수형 컴포넌트 Footer.js, Header,js, Main.js 생성 Reactjs Code Snippets 설치 후 약자 치면 편하게 생성가능 2-1. Reactjs Code Snippets 설치 2-2. functionTest 폴더 안에 Header.js 생성 후 rsf * 단축키 정보 trigger content rcc 클래스 컴포넌트 생성 rrc 클래스 컴포넌트와 react-redux 리덕스 연결하여 생성 rcjc import와 export 없이 클래스 컴포넌트 생성 rwwd import 없이 클래서 컴포넌트 생성 rsc 화살표 함수형 컴포넌트 생성 rsf 함수형 컴포넌..

* 컴포넌트란? : React의 핵심 개념으로 사용자 인터페이스(UI)를 구축하는 기반 1. 함수 컴포넌트 * props = 속성을 나타내는 데이터 function Welcome(props){ return Hello , {props.name}; } 객체 인자(props)를 받은 후 React 엘리먼트에 반환하므로 React 컴포넌트이며 JavaScript 함수이기 때문에 "함수 컴포넌트"라고 호칭한다. 2. 클래스 컴포넌트 Class Welcome extends React.Component{ render(){ return Hello, {this.props.name}; } } * 컴포넌트 렌더링 import React from 'react'; import ReactDOM from 'react-dom/cli..

가끔 톰캣 start.bat 실행 시, 기존 창이 아닌 다른창이 켜졌다 꺼지고 톰캣이 실행이 안될 때가 있다. 물론 오류도 보이지 않을때 아래처럼 설정을 하면 현재 창에서 오류까지 확인 할 수 있다. 1. /톰캣경로/bin/startup.bat 에디터로 열기 2. startup.bat 수정 call "%EXECUTABLE%" startup %CMD_LINE_ARGS% 를 아래처럼 rem 처리. call "%EXECUTABLE%" run %CMD_LINE_ARGS% 추가

이클립스 Help -> eclipse marketplace에서 SVN을 다운받았음에도 불구하고 안되는 경우가있다. 그럴때 우선 SVN커넥터가 있는지 확인부터 해보자. 1. Windows -> preferences 2. SVN -> SVN Connector 탭 클릭 SVN Conncetor가 아래사진처럼 SVNKit가 있는게 아닌 그냥 빈공간으로 보인다면 SVN Connector을 수동 설치해주자. 3. Help -> install New Software 4. work with에 아래 URL 검색 -> Subversive SVN Connectors 체크 및 설치 https://osspit.org/eclipse/subversive-connectors/ 5. 설치가 완료되었다면 다시 SVN Conncetor로..

갑자기.. 진짜 갑자기 CLASS 파일이 생성이 안된다.. 분명 JAVA파일도 있는데 안된다.. 그럴때는 이렇게 하면 해결된다 ㅎㅎ 1. 이클립스에서 해당 프로젝트 우클릭 -> Build Path -> Configure Build Path클릭 2. Order and Export 탭클릭 -> Maven Dependancies 선택 3. 다시 빌드! 4. 이것도 안된다하면 프로젝트 클린!

1. Node.js 설치 (https://nodejs.org/en) 해당 페이지에 들어가 LTS로 다운로드 및 설치 * 설치 확인 node -v 2. Yarn 설치 https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 해당 페이지 접속하여 Click to expand 클릭 => 다운로드 클릭(설정은 default로 다운로드) * yarn 설치되었는지 확인 yarn -v 3. CRA (Create-React-App) 설치 - 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 ( 리액트 프로젝트에 필요한 패키..

* React란? : UI 구축을 위한 자바스크립트 라이브러리. FaceBook에서 제공해주는 라이브러리로서 주로 SPA(Single Page Application)을 만들 때 사용. React는 재사용 가능한 UI구성 요소를 만들 수 있다. 컴포넌트를 레고처럼 조립하듯 하기에 UI 유지보수에 유리. 전체 페이지 렌더링하지 않고 필요 부분만 렌더링. *SAP : html파일 하나로 다른 페이지를 보여주고 싶을땐 html부분만 변경하여 보여준다. 부드럽게 동작하는 것처럼 보이며 트래픽 총량 줄여 속도 향상 * React 사용이유 1. Virtual Dom의 사용 2. 컴포넌트 단위 개발 3. JSX(JavaScript + xml)의 지원 4. 서버사이드 랜더링(SSR), 클라이언트 사이드 랜더링(CSR) ..