초보 개발자의 일기

간단한 다이어리 만들기 다이어리를 만들기 위해 DiaryEditor.js를 만들었다. const DiaryEditor = () => { return ; }; export default DiaryEditor; 그 후 App.js에 불러와준다. import "./App.css"; import DiaryEditor from "./DiaryEditor"; function App() { return ( 일기장 ); } export default App; 사용자의 입력을 처리하기 위해 state를 사용한다. import { useState } from "react"; const DiaryEditor = () => { const [author, setAuthor] = useState("추성준"); return ( 오..

prop 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식 부모 자식 const Counter = (props) => { console.log(props); 이렇게 값이 객체안에 들어가 전달이 된다. 이렇게 짧은 값 말고 긴 값들도 전달을 해주고 싶을 때는 객체에 넣어서 전달해주면 된다. 부모 function App() { const number = 5; const counterProps = { a: 1, b: 2, c: 3, d: 4, e: 5, initialValue: 5, }; return ( ); } 자식 const Counter = (props) => { console.log(props); const Counter = ({ initialValue }) => { const ..

State(상태) 계속해서 변화하는 특정 상태 상태에 따라서 각각 다른 동작을 한다.! ex) 인간의 허기 상태 변화 배고픔 -> 배부름 -> 적당함 -> 배고픔 -> 배부름..... import React, { useState } from "react"; 상태를 사용하겠다는 메서드를 import 해줘야 한다. -버튼을 눌러서 count 값 변화시키기 import React, { useState } from "react"; 를 사용 +버튼을 누르면 값이 1 증가하고 -버튼을 누르면 값이 1 감소하는 간단한 페이지를 만들었다.

JSX 문법 - 닫는 태그를 꼭 써야 한다. 모든 태그에는 닫는 태그를 꼭 넣어야 한다 ex) -최상위 태그 규칙 컴포넌트의 구성중에 가장 밖에 구성되는 태그 최상위 태그를 지워버리면 오류가 발생한다. 반드시 하나의 최상위 태그로 나머지 태그를 묶어야 작동한다 묶기 싫으면 로 대체 가능이다/ 리액트의 기능이기 때문에 import React form 'react'; 이렇게 import로 불어와야 한다. 로 최상위 태그로 묶어주면 해결이 가능하다.! -className jsx에서는 js처럼 클래스를 정할 때 class=""이 안되고 className=""으로 지정을 해야 설정해야 한다. -{} {} 안에는 값을 포함할 수 있지만 숫자만 문자열만 포함할 수 있다. 안에 삼항 연사자도 넣을 수 있다 이런 랜더링..

https://www.youtube.com/watch?v=X91jsJyZofw&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=15 만들어본 사이트 예전에 한번 유튜브를 보고 클론 코딩을 해봤는데 이번에는 한번 안 보고 쭉 만들고 이상한 부분은 영상을 보면서 수정을 해보았다. 만들 사이트 위에 있는 사이트를 구축해보고 사이즈가 작아지면 아래 사이트처럼 변해야 한다. html DreamCoding Home Gallery Weddings FAQ Bookings css body { margin: 0; font-family: "Source Sans Pro"; } a { text-decoration: none; color: white; } .navbar { display: fle..

https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 원하는 아이콘을 가져올 수 있다. 이것을 헤드 안에 붙여 넣어서 사용하면 된다. 원하는 아이콘을 가져온 뒤 붙여 넣기 하면 정상적으로 아이콘이 출력된다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 폰트 적용 사이트 원하는 폰트를 ..

React 컴포넌트 기반의 UI 라이브러리이다. 모든 html 요소들을 다 컴포넌트로 만드어서 재사용을 하기 쉽게 할 수 있게 해 준다. React를 사용하는 이유 3가지 1. 컴포넌트화 방식 여러 코드를 작성하다 보면 중복적으로 들어가는 내용이 많다. 이런 코드를 계속 반복해서 작성하는 것보다 컴포넌트에 작성을 해 컴포넌트를 불러오기만 하면 같은 내용이 들어와 진다 => 코드 작성 시간 감소, 재사용 용이 2. 선언형 프로그래밍 선언형 프로그래밍의 대표로 말하면 React가 있고 명령형 프로그래밍의 대표는 jQuery가 있다. 명령형 프로그래밍은 절차를 하나하나 다 나열해서 작성하는 반면 선언형 프로그램인 목적을 바로 말해 간단하다는 장점이 있다. 3. Virtual DOM 가상의 돔을 사용한다. 가상..

Node.js Node.js는 JavaScript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경이다. Node.js 사이트에 들어가 왼쪽을 눌러 다운로드하여 사용하면 된다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 사용해보기 이렇게 서로 다른 파일에 코드를 작성하고 calc.js에 있는 코드를 불러오기 위해 index.js에서 require를 사용했다. module.exports로 내보낸 이 모듈을 경로와 require를 사용하여 불러와서 호출할 수 있다. 이것은 node.js에서만 사용이 가..