Learn new Get simpler Do more

App 컴포넌트 구성 만들기 src 폴더 안의 기본적으로 만들어진 App.js파일 다음과 같이 수정합니다. import './App.css'; function App() { return ( My Awesome Blog Welcome to my blog! ); } export default App; src 폴더 안의 logo.svg파일은 더이상 사용하지 않으므로 지워줍니다. src 폴던 안의 App.css파일은 다음과 같이 작성합니다. 이번 프로젝트에서 사용할 CSS 디자인 입니다. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; } button { padding: 16px; font-family: '..

React 프로젝트 폴더 구성 node_modules 현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더입니다. public index.html과 같은 정적 파일이 포함되는 곳으로 컴파일이 필요 없는 파일들이 위치하는 폴더입니다. mainfest.json 모바일 환경에서 사용되어지는 파일도 함께 들어있습니다. src React 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행됩니다. .gitignore Git에 포함하고 싶지 않은 파일의 이름 혹은 폴더등을 입력하는 파일입니다. package.json 프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록이 포함되어 있습니다. 라이브러리가 설치된 n..

React 프로젝트 생성 생성기(Generator)를 사용하지 않고 React 앱을 만들수 있지만 다소 긴 프로세스가 될수있으며 React 앱을 처음부터 설정하는 가장 빠른 방법은 일반적으로 생성기를 사용하는것입니다. 현재 새로운 React 앱을 만드는 가장 인기 있고 일반적인 방법은 Facebook에서 제공하는 소스 React 앱 생성기인 Create React app을 사용하는것입니다. React 앱 생성을 위해 VS Code를 실행합니다. 그리고 터미널을 열고(Top menu -> Terminal -> new Terminal) 프로젝트를 만들 위치로 이동을 합니다. React 앱 생성 명령어는 다음과 같습니다. npx create-react-app my-blog React 앱 생성이 완료되면 생성한..

Node.js 와 NPM 설치 Node.js는 코드를 실행하고 프로그래밍을 더 쉽게 만드는 데 사용할 몇가지 라이브러리를 설치하는 데 중요한 도구가 될것입니다. Node.js가 아직 설치되어 있지 않은 경우 https://nodejs.org 웹 사이트에서 설치 파일을 다운받을수 있습니다. 현재 버전은 20.11.1 LTS(Long Term Support) 이고 다운로드 한후 실행을 하면 설치프로그램이 나머지를 설치 안내를 할것입니다. 설치 완료후 CMD나 power shell 또는 VS Code terminal에서 다음과 같이 버전을 확인합니다.

시민권/영주권자가 아니더라도 세법상 거주자(resident aliens)이면 해외금융계좌 신고를 해야 합니다. 해외금융계좌 연중 최고가액 합계가 $10,000 이상이면 FBAR 신고 해야합니다. 대상이 되면 한국에 있는 증권/펀드/은행/연금 계좌는 물론 종신보험과 같은 보험까지 모든 금융 account를 보고해야 합니다. 해외금융계좌신고 보고는 E-filing 시스템을 사용하고 있으며, PDF파일로 작성해서 보고하거나 온라인으로 직접 작성해서 보고할수 있습니다. 신고는 다음의 URL에서 하실수 있습니다. https://bsaefiling.fincen.treas.gov/NoRegFBARFiler.html 신고대상 금융계좌별 연중 최고 잔액의 합이 $10,000을 초과한 미국 시민권, 영주권 또는 미국 세법..

Build a shopping cart that displays the total price when adding items. Implement the Add to Cart logic, add an item to the cart when the button is clicked. Implement the + and - buttons to add or remove items from the cart. Implement the total sum at the bottom of the page. ShoppingCart.js import { useState } from 'react' const items = [{ name: 'apple', price: 0.79 }, { name: 'banana', price: 0...

Focus an input upon a component mounting. useRef: Within React, we normally interact with the virtual DOM. Sometimes we need to interact with the actual DOM, however, and to do so you can use refs. Uppm page load, focus the input. FocusInput.js import { useEffect, useRef } from 'react' export default function FocusInput() { const focusedInput = useRef(null) useEffect(() => { focusedInput.current..

Build a simple calculator. useReducer: Sometimes state becomes complicated in React, and there are multiple mutations you will need to implement on your data. useReducer helps simplify this by moving state management outside of the component. Implement the logic so that two numbers can be selected. Implement the logic to add these two selected numbers together. Same for subtraction Implement a c..

Build a pixel art drawing app. React Context: Allows you to share data between components more easily. Instead of having to pass a prop down multiple levels, you can use Context. When a color is clicked, that color becomes the drawing color, Then, when one of the grid squares is clicked, it should be colored in with the drawing color. Use React Context to share the state between your components...

Create a color-picking app so the user can select the page's background color. Upon clicking a color, change the whole page's background to that color. Make sure to use the Color subcomponent. ColorPicker.js import { useState } from 'react' import Color from './Color' const colors = [{ hex: '#91A6FF', name: 'Cornflower Blue' }, { hex: '#FF88DC', name: 'Persian Pink' }, { hex: '#80FF72', name: 'S..