자바스크립트99 [백준/nodeJS] 14935. FA 안녕하세요. 박기린입니다. 백준 14935번 FA 문제 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/14935 문제 해석 결론부터 말씀드리자면, 모든 수는 FA수입니다. 10만자리의 수일지라도, 'x의 첫 자리'와 'x의 자리수'를 곱한 결과는 아무리 커봐야 9 * 9 = 81 입니다. 그리고 81은 결국 F(x)에 의해 8로 전환되고, F(8)은 8 * 1 = 8이 되어, 동일한 수가 나옵니다. 즉, FA수가 됩니다. 정답 코드 & 해설 console.log("FA"); 모든 수가 FA수이기 때문에, 입력과 상관없이 FA만 출력해주면 끝입니다. 2024. 2. 29. [React] 24. 커스텀 hook으로 useHttp훅 만들어보기 이전 강의에 커스텀훅을 제작하는 방법에 대해 알아봤습니다. (이전 강의 : https://arnopark.tistory.com/855) 이번엔 커스텀 훅을 현실적으로 제작해서 사용하는 시나리오를 가정하고, 어느 프로젝트에서든 정말 유용하게 사용할 수 있는 커스텀 훅을 제작해보겠습니다. 가상 시나리오 가정하기 위 이미지와 같은 구조의 리액트 앱이 있습니다. input 창에 task 내용을 적은 후, 오른쪽의 Add Task 버튼을 누릅니다. 그러면 서버에 task가 업로드됩니다. (firebase - realtime database 사용) 서버에 올라온 tasks 목록을 받아와서, Input 창 하단에 리스트로 출력합니다. useHttp 1차 제작 서버로 Task를 보내고 받는 과정에서 http 리퀘스트가.. 2024. 2. 14. [React] 23. 커스텀 훅(Custom Hook)을 만들어 보자 안녕하세요. 박기린입니다. 리액트에는 다양한 React Hooks가 존재합니다. 대표적으로 useState, useEffect, useReducer가 있고, 여러 개의 use로 시작되는 훅들이 존재합니다. 이번에는 공식적으로 제공하는 훅 뿐만 아니라, 직접 Custom Hook을 제작하는 방법에 대해 알아보겠습니다. Custom Hook이란? Custom Hook이란, 함수는 함수인데 React Hook (ex : useState) 이나 React State를 사용해서 함수를 만드는 것을 의미합니다. 함수 안에서 useState()나 useEffect()와 같은 것을 사용해서, 여러 컴포넌트에서 재사용이 가능한 함수를 만듭니다. 예를 들어, useState()는 원래 리액트 컴포넌트 함수 내부에서만 사.. 2024. 2. 7. [React] 22. HTTP 리퀘스트 보내기 안녕하세요. 박기린 입니다. 이번엔 React앱에서 외부 서버로부터 HTTP 요청을 보내고 결과값을 받아서 출력하는 방법에 대해 알아보겠습니다. GET 요청 보내기 리액트의 근간은 JavaScript이기 때문에, fetchAPI를 통해서 서버에서 데이터를 주고받을 수 있습니다. (fetchAPI는 JS 내장 기능이 아니라, WebAPIs 임을 잊지는 말자.) fetch한 데이터를 state로 저장해서 이용할 수 있습니다. 그러면 데이터를 fetch할 때마다, state도 업데이트되면서 자동으로 컴포넌트도 업데이트 됩니다. function App() { const [movies, setMovies] = useState([]); function fetchMoviesHandler() { fetch("https.. 2024. 1. 31. [백준/nodeJS] 1016. 제곱 ㄴㄴ 수 안녕하세요. 박기린입니다. 백준 1016번 제곱ㄴㄴ수 문제 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/1016 문제 해석 '제곱ㄴㄴ수'가 무엇일까요? 위 메모처럼, n의 제곱으로 나눴을 때 나머지가 없는 수를 제곱ㅇㅇ수라고 표현하고, 그 반대를 제곱ㄴㄴ수라고 문제에서 표현합니다. 정답 코드 const fs = require("fs"); const [min, max] = fs .readFileSync("/dev/stdin") .toString() .trim() .split(" ") .map(Number); const isDivided = Array(1000001).fill(false); // max와 min 사이에 들어가는 최대 수, ㄴㄴ제곱이 아닌 수가 true... 2024. 1. 26. [React] 19. useCallback()으로 함수 재생성을 방지하기 안녕하세요. 박기린입니다. useCallback()에 대해 깊이 있게 이해하기 위해, React.memo()를 먼저 알아보는 것을 추천드립니다. (React.memo() 강의 : https://arnopark.tistory.com/840) useCallback() React.memo() 설명글에서, 몇 가지 코드를 가져오겠습니다. // App.js import React, { useState } from 'react'; import Button from './components/UI/Button/Button'; import DemoOutput from './components/Demo/DemoOutput'; import './App.css'; function App() { const [showParagr.. 2024. 1. 3. [백준/nodeJS] 2740. 행렬 곱셈 안녕하세요. 박기린입니다. 백준 2740번 행렬 곱셈 문제 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/2740 문제 해석 행렬 곱셈에 대해 사전 지식이 있다면 쉽게 폴 수 있습니다. 하지만 그렇지 못한 분도 있기에 간단하게 설명해보겠습니다. 문제에서 예시 입력으로 주어진 두 개의 행렬입니다. [3 * 2] 와 [2 * 3]으로 이루어진 행렬이고, N은 3, M은, K는 3입니다. 행렬의 크기는 N * K로 구할 수 있기 때문에, [3 * 3]임을 미리 알고 시작합니다. N과 K가 1일 때의 값을 구해보겠습니다. 이때 행렬 곱셈 방법은 이러합니다. 1. 첫 번째 행렬에서 N이 1인 행을 찾습니다. 2. 두 번째 행렬에서 K가 1인 열을 찾습니다. 3. 행일 경우 맨.. 2023. 12. 29. [React] 18. React.memo() 안녕하세요. 박기린입니다. 이번엔 React.memo()에 대해 알아보겠습니다. 사전 정의 React.memo()의 구체적인 설명을 위해, 어떠한 앱이 있다고 가정을 하겠습니다. 이 앱은 아래 4개의 파일을 가지고 있습니다. 프로그램의 구조 App.js - Demo.js - MyParagraph.js - Button.js // App.js import React, { useState } from 'react'; import Button from './components/UI/Button/Button'; import DemoOutput from './components/Demo/DemoOutput'; import './App.css'; function App() { const [showParagraph, .. 2023. 12. 26. [백준/nodeJS] 28279. 덱 2 안녕하세요. 박기린 입니다. 백준 28279번 덱 2 문제를 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/28279 28279번: 덱 2 첫째 줄에 명령의 수 N이 주어진다. (1 ≤ N ≤ 1,000,000) 둘째 줄부터 N개 줄에 명령이 하나씩 주어진다. 출력을 요구하는 명령은 하나 이상 주어진다. www.acmicpc.net 문제 해석 덱(deque)을 구현하는 것이 목표입니다. front, rear의 초기값은 -1입니다. -1은 덱 안에 아무것도 없다는 의미를 가집니다. JS의 pop, shift, push, unshift 메소드를 사용하는 방법도 있지만, 시간초과가 됩니다. 그렇기에 front와 rear의 주소를 이용하는 방식으로 코드를 짜야 합니다. 값이.. 2023. 12. 21. 이전 1 2 3 4 ··· 11 다음
