일상에서 개발하기

Props- props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소다.- props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. JSX 내부에서 props 렌더링- MyComponent를 수정해 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정한다.- props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.- props를 렌더링할 때 JSX 내부에서 { } 기호로 감싸 주면 된다. * src/MyComponent.jsconst MyComponent = props => {    return div>안녕하세요, 제 이름은 {props.name}입니다.div>}; export default MyComponent;  컴포넌..

인라인 스타일링- 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.- 스타일 이름 중에서 background-color 처럼 - 문자가 포함되는 이름이 있는데, 이러한 이름은 - 를 제거하고 카멜 표기법으로 작성해야 한다. (backgroundColor) import './App.css';function App() { const name = '리액트'; const style = { backgroundColor : 'black', color : 'aqua', fontSize: '48px', // font-size -> fontSize fontWeight: 'bold', ..

- 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.- 다음과 같은 코드는 오류를 발생시킨다.import './App.css';function App() { const name = undefined; return name;}export default App;   - 어떤 값이 undefined 일수도 있다면, OR( || )연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.import './App.css';function App() { const name = undefined; return name || '값이 undefined입니다.';}export default App;  - 반면 J..

- JSX 내부의 JS 표현식에서 if문을 사용할 수는 없다.- 히지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나,  { } 안에 조건부 연산자를 사용하면 된다.- 조건부 연산자의 또 다른 이름은 삼항 연산자이다. function App() { const name = '리액트'; return ( {name === '리액트'?( 리액트입니다. ) : ( 리액트가 아닙니다. )} );}export default App; - name 변수의 값이 '리액트' 인 경우에는 '리액트입니다.' 를 화면에 출력하고, name 변수의 값이 '리액트'가 아닌 경우 '..

JSX- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.- 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.function App() { return ( Hello react );} - 이렇게 작성된 코드는 다음과 같이 변환된다.function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));} - 만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것..

- Spring Boot를 사용해 프로젝트를 구축하는 요즘 시대에 Maven, Gradle 등을 이용하지 않고, 라이브러리 파일만을 이용하여 스프링 프로젝트를 만들어 본다. - Controller, RestController 등 간단한 웹 개발에 필요한 라이브러리만 포함시켜 설정했다. - 테스트 환경은 다음과 같다.Java : jdk11Eclipse : 2020-06(4.16.0)Tomcat : 9.0.82 - 사용하는 라이브러리 파일은 다음과 같다. 다음 파일들은 https://mvnrepository.com 에서 받을 수 있다. 1. Eclipse에서 Dynamic Web Project를 생성- 프로젝트 생성 시 Dynamic Web Project를 선택하고 - 프로젝트 이름을 지정 - 생성 마지막 ..