본문 바로가기

js97

[백준JS] 11654. 자바스크립트 아스키 코드 출력하기 (ASCII) 안녕하세요. 박기린 입니다. 백준 11654번 아스키 코드 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/11654 문제 해석 알파벳 소문자, 대문자, 숫자 0~9 중 하나가 주어집니다. 즉, 길이가 1인 String이 주어지는데, 이것을 아스키 코드로 변환하여 출력하면 됩니다. 문제 자체는 매우 간단한데, 아스키 코드를 변환하는 방법을 모를 수 있습니다. String의 내장함수 charCodeAt()을 사용하면 됩니다. 정답 코드 const fs = require("fs"); const input = fs.readFileSync("/dev/stdin").toString().trim(); console.log(input.charCodeAt()); 정답 코드 풀이 .. 2023. 3. 14.
[백준JS] 10810. 골 넣기 안녕하세요. 박기린 입니다. 백준 10810 - 골 넣기 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/10810 문제 해석 N개의 바구니가 있습니다. 원활한 설명을 위해, N이 6이라고 가정을 합니다. 각 바구니에는 0이 담겨 있습니다. 입력으로는 [i, j, k]가 들어옵니다. i부터 j까지의 바구니에, k 숫자를 담습니다. [ i = 1, j = 3, k = 3 ] 이라고 가정을 합니다. 첫 번째부터 세 번째까지의 바구니 안에 [k = 3]을 담아줍니다. [i, j, k]가 총 M번이 주어지는데, 모두 실행을 한 뒤에 결과값을 출력하는 게 10810 - 공 넣기 문제 입니다. 정답 코드 const fs = require("fs"); const [NnM, .... 2023. 3. 11.
[React] 10. useRef(), ref에 대해 알아보기 안녕하세요. 박기린 입니다. 이번엔 리액트 훅 - useRef()에 대해 알아보겠습니다. ref ref는 DOM 요소에 직접 접근해서 작업을 하기 위해 존재합니다. ref가 필요한 이유 (ref vs state) 에 state가 연결되어 있으면, 무언가를 입력할 때마다 state가 바뀝니다. 리액트의 state는 값이 변하면, 그때마다 매번 컴포넌트들이 재렌더링됩니다. 만약 블로그에 긴 글을 쓰는 경우, 수 천자의 분량을 써내려가는 동안 매번 컴포넌트가 재렌더링된다면 굉장히 비효율적일 것입니다. ref는 state와 다르게, HTML DOM에 접근해서 DOM 안에 적힌 값을 알아갑니다. 의 값이 얼마나 변하든 상관없이, ref를 접근한 그 시점을 기준으로 안에 적힌 값만을 취합니다. 블로그에 계속 글을 .. 2023. 3. 6.
[React] 9. 리스트 데이터 출력하기 안녕하세요. 박기린 입니다. 이번엔 리스트 데이터를 목록형태로 출력하는 방법에 대해 알아보겠습니다. List 데이터 렌더링 {props.items.map((expense) => ( ))} JS에 내장된 Array.prototype.map()을 이용해서 Array로 이루어진 props를 한 번에 컴포넌트로 렌더링할 수 있습니다. map()은 Array를 return하는데, React는 jsx(컴포넌트)를 element로 하는 Array를 자동으로 나란히 렌더링한다. 원본 데이터 형태 (접은 글 펼치기) 더보기 const expenses = [ { id: "e1", title: "Car Insurance", amount: 294.67, date: new Date(2022, 2, 20), }, { id: "e.. 2023. 3. 3.
[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.

티스토리툴바