컴퓨터와 대화하는 블랑퐁

전체 글

• 사용자 입력 리스닝(listening)

  FrontEnd/React 2022. 7. 7. 16:46

  index.js -> App.js -> NewExpense.js -> ExpenseForm.js 컴포넌트 구조 입니다. index.js랑 App.js 는 생략하겠습니다. -NewExpense.js import React from 'react'; import ExpenseForm from './ExpenseForm'; import './NewExpense.css'; function NewExpense() { return ( ) } export default NewExpense; -ExpenseForm.js import React from "react" import './ExpenseForm.css' function ExpenseForm() { const titleChangeHandler = (event) ..

  Read More
• State 사용하기!

  FrontEnd/React 2022. 7. 7. 16:03

  state 란? - 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체 props와 state 의 차이 props는 값을 컴포넌트에 전달하는 반면 state는 컴포넌트 안에서 관리함 -ExpensesItem.js import React, { useState } from 'react'; import './Expenseltem.css'; import ExpenseDate from './ExpenseDate'; import Card from '../UI/Card'; function ExpenseItem(props) { const [title, setTitle] = useState(props.title); const clickHandler = () => { setTitle('Updated!'); conso..

  Read More
• JSX란?

  FrontEnd/React 2022. 7. 7. 14:46

  이름을 보면 javascript 와 관련이 있어 보인다. JSX를 풀어 해석해보면 A syntax extension to Javascript = 자바스크립트의 확장문법 JSX 구성 Javascript + XML/HTML JSX 코드 const element = Hello, world!; JSX의 역할 내부적으로 XML + HTML를 자바스크립트로 변화하는 과정 // JSX를 사용한 코드 const element = ( Hello, world! ) // JSX를 사용하지 않은 코드 const element = React.createElement( 'h1', { className: 'greeting' }, 'Hello, World!' ) 위 2코드는 결과가 같다. JSX를 사용시 장점! - 가독성이 올라간다..

  Read More
• 이벤트 리스닝 및 이벤트 핸들러 수행하기

  FrontEnd/React 2022. 7. 7. 12:45

  -ExpenseItem.js import './Expenseltem.css' import ExpenseDate from './ExpenseDate'; import Card from '../UI/Card'; function ExpenseItem(props) { const clickHandler = () => { console.log('Clicked!!!!'); } return ( {props.title} ${props.amount} Change Title ); } export default ExpenseItem; 태그에 onclick 이벤트를 넣고 원하는 상수를 실행! 만약! 함수로 만들어 함수로 실행하기를 원했으면 function clickHandler() { console.log('Clicked!!!!..

  Read More
• 컴포넌트를 여러 컴포넌트로 분할하기

  FrontEnd/React 2022. 7. 6. 22:19

  컴포넌트에 또 컴포넌트를 분할해서 넣어보았다! index.js -> App.js -> ExpenseItem.js -> ExpenseDate.js 프로젝트의 React 구조는 이러하다. -index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './css/index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 먼저 index.js에 App.js를 부른다. -App.js import './css/App.css'; import ExpenseItem from '..

  Read More
• React 용어정리(축약)

  FrontEnd/React 2022. 7. 6. 21:47

  Components(컴포넌트) 사용자 인터페이스에서 재사용할 수 있는 빌딩 블럭 1.재사용 2.우려사항을 분리 - 작고 관리 가능한 단위로 유지 쉽게 말해서 React에 있는 컴포넌트는 단지 자바스크립트 함수일 뿐입니다. props(프로퍼티) 1. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름 갖는다) 2. 수정할 수 없다는 특징이 있다. ( 자식입장에선 읽기 전용인 데이터이다.) state props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리된다는 차이가 있다. JSX 자바스크립트 XML을 의미 합니다.

  Read More
• DAO, VO, Proc, 생성자, 오버라이딩, 오버로딩 용어 설명

  BackEnd/JAVA 2022. 6. 24. 17:36

  DAO - 다른 jsp 파일들이 작동할수있게하는 메소드들이 들어가있다. VO = javabean + getter, setter - 프로젝트에 필요한 모든 변수가 저장되어있음 proc (프로시저) - 특정한 동작을 수행하고 처리하는곳 생성자 1. return 타입이 없다. 2. 메소드 이름이 class 이름과 동일하다. 3. 객체가 로딩될때 가장먼저 호출된다 오버라이딩 - 함수 재정의 오버로딩 - 같은 이름의 함수라도 매개변수의 타입이나 갯수가 다르면 다른 함수로 인식

  Read More
• CSS -> SCSS 변환

  FrontEnd/CSS 2022. 5. 30. 17:22

  *SASS에서 → CSS로 변환 https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com *CSS → SASS 또는 SCSS로 변환 http://css2sass.herokuapp.com/ css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code CSS (paste your CSS code and convert!) Your Syntactically Awesome StyleSheets code css2..

  Read More