본문 바로가기

JS122

[백준JS] 15552. 빠른 A+B 안녕하세요. 박기린 입니다. 백준 15552번 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/15552 문제 해석 해당 알고리즘이 요구하는 계산은 매우 간단합니다. 첫 번째 줄의 5는 테스트 케이스의 개수를 뜻하기 때문에 무시하고, 두 번째 줄부터 나오는 두 숫자를 더해준 후 출력하면 됩니다. 다만, 한 가지 중요한 조건이 붙습니다. 이 문제는 시간제한이 빡빡합니다. 풀이 자체는 맞게 하더라도, 시간 초과로 문제를 틀릴 수 있습니다. 백준 사이트에 적힌 문제에는 시간 초과 문제를 해결할 힌트를 제공해주고 있지만, NodeJS에 대한 힌트는 없습니다. 그러면 NodeJS에서는 어떻게 해야 할까요? 정답 코드 const fs = require("fs"); const .. 2023. 2. 24.
[React] 8. <form /> 태그 다루기 안녕하세요. 박기린 입니다. 제출하기 {... 들} Add Expense 1. 컴포넌트가 존재하고, 2. 안에 컴포넌트가 있으며, 3. 의 type이 'submit'일 경우, 4. 의 onSubmit prop을 이용해서 양식을 제출합니다. onSubmit을 이용하면, 홈페이지의 지정된 버튼을 누르는 것 뿐만 아니라, submit 기능에 관하여 브라우저가 내장하고 있는 기능도 사용할 수 있습니다. 그러니 컴포넌트를 사용할 경우에는 onSubmit prop을 꼭 이용합시다. onSubmit const submitHandler = (event) => { event.preventDefault(); const expenseDate = { title: enteredTitle, amount: enteredAmount.. 2023. 2. 23.
[React] 7. 여러 개의 state를 다루기 안녕하세요. 박기린 입니다. 여러 State 생성하기 const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredAmount] = useState(""); const [enteredDate, setEnteredDate] = useState(""); const [counter, setCounter] = useState(1); 한 파일(컴포넌트) 안에 위처럼 여러 개의 state를 설정할 수 있습니다. const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; const amountChangeHandler = (event) => {.. 2023. 2. 20.
[React] 6. useState()를 파헤쳐 보기 안녕하세요. 박기린입니다. 이번에는 React 컴포넌트의 데이터 관리와 출력을 위해 사용되는 React Hooks - useState에 대해 알아보겠습니다. Import useState import { useState } from "react"; React hooks는 react 모듈에서 import 할 수 있습니다. useState 파헤쳐 보기 const ExpenseItem = (props) => { const [title, setTitle] = useState(props.title); const clickHandler = () => { setTitle('Updated!'); console.log(title) } } const [ state이름 , set + State이름 ] = useState( 초.. 2023. 2. 13.
[React] 5. 이벤트 리스너와 이벤트 핸들러 만들기 (onProps) 안녕하세요. 박기린 입니다. 이번엔 React 컴포넌트의 이벤트 핸들러 함수를 만드는 방법에 대해 알아보겠습니다. onProps // ChangeButton.js const ChangeButton = (props) => { const clickHandler = () => { console.log('clicked'); }; return Change Title; } 위의 코드 중 을 보면 onClick props가 보입니다. 이름이 on으로 시작되는 props는 React의 관행에 따라 '항상 함수를 인수로 받는 props'를 뜻합니다. 그리고 그 함수는 이벤트 핸들러로, onProps의 실행 조건이 나타나면 핸들러 함수가 작동합니다. 만약 버튼이 클릭되면, onClick에 담긴 핸들러 함수가 실행이 되는 .. 2023. 2. 7.
[React] 4. JSX란 무엇일까? 안녕하세요. 박기린 입니다. 이번엔 React 컴포넌트의 핵심 중 하나인 JSX에 대해 알아보겠습니다. 엄청 간단한 JSX // React 컴포넌트의 JSX 부분 return ( Let's get started! ) React 컴포넌트는 JSX라는 것을 사용합니다. JSX를 통해서 HTML 코드를 사용할 수 있게 된다는 것은 알고 있지만, 단순히 함수에 return() 안에다가 HTML 또는 컴포넌트를 입력만 하면 자동으로 홈페이지에 출력이 된다는 점이 아리송합니다. 과연 원리가 무엇일까요? JSX의 원리 React.createElement() create-react-app으로 만든 리액트 앱의 package.json을 가면, 위의 사진처럼 react, react-dom이라는 모듈을 확인할 수 있습니다... 2023. 2. 7.
[React] 3. props / props.children 컴포지션 안녕하세요. 박기린 입니다. 이번에는 React 컴포넌트의 핵심 중 하나인 props에 대해 알아보겠습니다. props의 역할 React 컴포넌트는 다른 컴포넌트(파일)의 데이터를 바로 가져올 수 없습니다. 그래서 HTML의 태그가 attribute를 이용해서 데이터를 주고받는 것처럼, React 컴포넌트도 props라는 것을 이용해서 데이터를 주고받습니다. props를 전달하는 방법 // App.js function App() { const expenses = [ { id: "e1", title: "Car Insurance", amoount: 294.67, date: new Date(2022, 2, 20), }, ]; return ( {/* 소문자로 시작 - html */} Let's get start.. 2023. 2. 7.
[React] 2. 컴포넌트(Component) 안녕하세요. 박기린 입니다. 이번엔 리액트의 핵심인 컴포넌트(Component)를 만들어봅시다. 컴포넌트 만들기 // App.js import ExpenseItem from './components/ExpenseItem'; function App() { return ( // JSX Let's get started! // 소문자 // 대문자 ); } export default App; 리액트의 컴포넌트는 '함수형 컴포넌트'라고 부릅니다. 즉, JavaScript의 함수를 사용하기 때문에 function 키워드나 화살표 함수를 사용해서 컴포넌트를 생성할 수 있습니다. class형 컴포넌트도 있으나, 최신 React 버전에는 대부분 함수형 컴포넌트를 사용하기에 설명을 생략하겠습니다. JSX return ( L.. 2023. 2. 6.
[React] 1. 리액트에 대한 사전 지식 안녕하세요. 박기린 입니다. 자바스크립트에 이어서, 이번에는 JavaScript의 client-side 라이브러리인 React에 대해 알아보겠습니다. 왜 자바스크립트보다 리액트인가요? 요약하자면, 반응형 웹을 쉽고 빠르게 만들 수 있기 때문입니다. 페이지의 버튼을 누르면 글자가 바뀌는 사이트가 있다고 가정을 합니다. JS는 querySelector()로 글자가 담긴 텍스트를 찾은 후에, textContent property를 수정해주고, 변화한 값이 스크린에 보여질 수 있도록 DOM을 편집해주고 등등 아주 많은 과정을 직접 적어줘야 합니다. 하지만 React는 정말 간단하게 이를 구현할 수 있습니다. Single Page Applications (SPAs) 리액트는 싱글 페이지 앱이라는 말을 자주 들으실.. 2023. 2. 3.

티스토리툴바