몽땅뚝딱 개발자

◽ 커링(Currying)이란? 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수이다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야하는데, 이 함수를 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있다. ◽ 예제 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, {Component} from "react"; class ChildComp extends Component { tryPlus(a) { // 200을 항상 고정값으로 보내주기..

마음의 평안..... 행복..😭🌈 그러나 그런 발견을 할 수 있었던 것만으로도, 그리 미덥지 않은 나의 발자취를 더듬을 수 있었다는 것만으로도, 이 책을 내는 의미가 있지 않을까 합니다. - 무라카미 하루키의 『잡문집』 사랑의 행위는 언제나 고백이다, 라고 카위는 썼다. 조용히 문을 닫는 것도 고백이었다. - 니콜 크라우스, 『위대한 집』 굳이 말 할 필요도 없겠지만, 나의 정신은 온갖 잡다한 것들로 이루어져 있습니다. 마음이란 정합적이고 계통적이면서 설명 가능한 성분으로만 만들어진 것이 아닙니다. 나는 그러한 내 정신 안에 있는 세세한, 때로는 통제되지 않는 것들을 긁어모으고, 그것들을 쏟아부어 픽션=이야기를 만들어내고 다시 보강해갑니다. - 무라카미 하루키의 『잡문집』 그 강력함은 예컨대 발자크의 강..

render() { return ; } https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev

◽ 설치하기 npm install react-bootstrap bootstrap ◽ 예제 import 'bootstrap/dist/css/bootstrap.min.css'; import { Button, Navbar, Nav, Container } from "react-bootstrap"; import './App.css'; function App() { return ( Navbar Home Features Pricing ); } export default App; 출처 React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io

보호되어 있는 글입니다.

1. 리액트는 JSX이기 때문에 'class'가 아니라 'className'을 사용한다. import './App.css'; function App() { return ( // className을 사용한다. ); } export default App; 2. 중괄호({}) 문법을 사용하여 데이터를 바인딩한다. import './App.css'; function App() { let post = '제목' return ( 블로그 // 중괄호 문법을 사용한다. { post } ); } export default App; 3. style은 style={} 문법으로 사용하며, 카멜 케이스이다. import './App.css'; function App() { let post = '제목' return ( // sty..

컴포넌트 단위로 element를 return 할 때 하나의 태그로 전체를 감싸지 않으면 에러가 발생한다. 이 때 태그로 감싸면 태그나 기타 의미없는 구분용 태그(가령 )를 추가하지 않아도 된다. ◽ 태그 사용하기 를 사용하기도 한다. import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, { Component, Fragment } from "react"; class ChildComp extends Component { render() { return ( P TAG ) } } export ..

함수형 컴포넌트는 class형 컴포넌트와 달리 아래와 같은 특징이 있다. 1. state가 없다. 2. 생명주기 함수를 사용할 수 없으며 hook을 이용한다. 3. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용한다. 4. render() 함수가 없으므로 return을 사용하여 화면을 그려준다. ◽ 함수형 컴포넌트 사용하기 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React from "react"; function ChildComp(props) { let { co..

◽ Class형 컴포넌트 Class형 컴포넌트에는 Component외 PureComponent가 있다. ◽ 차이점 두 컴포넌트 모두 props와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. 1. Component 비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다. setState() 함수로 실행된 값은 이전에 있던 state 변수값과 동일하더라도 컴포넌트에서는 새로운 state 변수가 같은 이름으로 생성됐다고 인식한다. // 1. Component를 import한다. import React, { Component } from "react"; // 2. 상속받는다. class ChildComp extends Component { // 코드 ... } 2..

◽ z-index란? HTML 요소가 겹치는 순서를 정의하는 CSS 속성으로 인덱스가 높은 요소는 인덱스가 낮은 요소 위에 배치된다. ◽ z-index의 적용 방법 z-index는 position의 속성이 relative, absolute, fixed처럼 위치가 지정된 요소에서만 작동된다. static에서는 동작하지 않으므로 주의하자! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.