멍멍이코더

Component 리액트는 사용자 정의 태그를 만드는 기술이다. 우리는 이러한 사용자 정의 태그를 'Component' 즉, 컴포넌트라고 부른다. function App() { return ( // 헤더 영역 HEADER // 내비게이션 영역 html css js // 아티클 영역 Welcome Hello, WEB ); } export default App; 이런 기본 HTML 코드가 있다. 하지만 코드가 길어지게 되면 웹 페이지가 어떻게 생겼는지 파악하기가 쉽지 않을 것이다. 이렇게 어지러진 코드는 아래와 같이 Header, Nav, Article 컴포넌트를 이용해서 분리시킬수 있다. 💡 컴포넌트는 반드시 대문자로 시작해야 한다. function Header(props) { console.log(pro..

UseEffect import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value) console.log("i run all the time..."); return ( {counter} click me ); } export default App; 버튼을 Click할 때마다 컴포너트가 Re-Rendering되어 con..

😎 이전게시글 2023.03.08 - [개발/React] - React App 만들기(1) - 프로젝트 생성 1. Button 컴포넌트 생성 src 폴더 하위에 text를 props로 가지는 Button.js 파일을 생성한다. function Button({text}) { return ( {text} ) } // App.js에서 import 하기위해 해당 코드를 추가한다. export default Button; Button 컴포넌트를 App.js에 import한다. 컴포넌트는 무조건 대문자로 시작해야 한다! import Button from "./Button"; function App() { return ( ); } export default App; 2. Props 타입 설정하기 prop-types ..

1. nodejs 설치 1) nodejs 공식사이트에서 각각의 OS에 맞는 버전을 다운로드하여 설치한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) node -v 커맨드를 통해 설치가 잘 되었는지 확인한다. > node -v v18.12.1 3) npx 명령어가 잘 동작하는지 확인한다. > npx Entering npm script environment at location: /Users/user/Desktop Type 'exit' or ^D when finished npx 란? 자바스크립트 패키지 관리 모듈인 npm(Node Packag..

Intellij에서 SpringBoot 프로젝트 생성 Intellij > File > New > New Project Gradle 관련 오류가 발생하면 Springboot와 Gradle 버전 충돌일 수 있으니 gradle > wrapper > gradle-wrapper.properties에서 Gradle 버전을 수정한다. SpringBoot 프로젝트 내부에 Svelte 생성 0. SpringBoot 내부에 frontend 디렉토리 생성 1. Svelte 프로젝트 생성 degit을 통한 github 저장소를 clone하여 사용한다. Svelte에도 공식 CLI가 있긴 했는데 지금은 더 이상 사용하지 않고, 공식 홈페이지에서도 예시로 주어진 템플릿 코드를 clone하여 사용하라고 설명하고 있다. degit이..