본문 바로가기

JS122

[백준/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.
[RN] 리액트 네이티브에서 .env 사용하는 방법 REACT_APP이 통하지 않는 리액트 네이티브 React JS 면, 'REACT_APP'이라는 키워드를 env 변수 앞에 넣어주면 자동으로 적용이 됐지만, React Native는 그렇지 않습니다. 왜냐하면 .env 안에 있는 데이터를 안드로이드와 ios에서 각각 잘 적용될 수 있도록 설정할 필요가 있기 때문입니다. 그래서 그냥 root 폴더에 .env만 만들고 빌드하면, 정상적으로 API Key를 불러오지 못합니다. react-native-dotenv # npm npm i react-native-dotenv # yarn yarn add react-native-dotenv 그래서 외부 모듈의 도움이 필요합니다. ios와 안드로이드의 .env설정을 자동으로 해주는 고마운 라이브러리입니다. module.e.. 2024. 1. 25.
[React] 21. useMemo()를 사용해서 object와 array의 재설정 막기 안녕하세요. 박기린입니다. React.memo()와 useCallback()에 이어서, obejct와 array의 재실행/재평가를 막아주는 useMemo()에 대해 알아보겠습니다. React.memo 설명글 : https://arnopark.tistory.com/840 useCallback 설명글 : https://arnopark.tistory.com/845 (위 두 글을 읽고, 본 글을 읽는 것을 적극 추천드립니다.) 사전 정의 React.memo()의 구체적인 설명을 위해, 어떠한 앱이 있다고 가정을 하겠습니다. 이 앱은 아래 3개의 파일을 가지고 있습니다. 프로그램의 구조 App.js - Demo.js - Button.js // App.js import React, { useState, useCal.. 2024. 1. 9.
[React] 20. useEffect와 useCallback에서 의존성 배열을 사용하는 이유 (Dependencies Array 설명) 안녕하세요. 박기린입니다. useEffect와 useCallback에는 의존성배열 (dependencies array)를 인수로 받는 영역이 있습니다. useEffect 설명글 : https://arnopark.tistory.com/770 useCallback 설명글 : https://arnopark.tistory.com/845 (위 두 글을 읽고, 본 글을 읽는 것을 적극 추천드립니다.) 지금부터 dependencies array를 사용하는 이유에 대해 좀 더 깊이 알아보겠습니다. 종속성이 필요한 경우 useCallback()을 사용한 예시를 통해 설명을 드리겠습니다. // App.js function App() { const [showParagraph, setShowParagraph] = useSta.. 2024. 1. 4.
[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.
[React] 17. 리액트가 작동하는 방식 : React, ReactDOM, VirtualDOM 안녕하세요. 박기린입니다. 이번엔 React가 실제로 웹 브라우저에 페이지를 표시하는 방법에 대해 알아보겠습니다. React vs ReactDOM 리액트(React) 자체는 웹에 대해 모릅니다. 웹페이자 상에서 어떻게 표시되는 지에 대해서 관여하지 않습니다. 리액트는 컴포넌트, State, Context, Props 같은 정보들을 관리하고, 이것들을 HTML 요소로 출력하는 역할은 ReactDOM이 담당합니다. 리액트는 컴포넌트나 State의 변경된 내용과 화면에 표시되어야 할 정보 모두를 ReactDOM으로 전달합니다. 그러면 ReactDOM은 실제로 웹브라우저에 출력될 DOM을 수정합니다. 유저가 보고 있는 웹 화면에 무언가를 표시하는 역할은 전적으로 ReactDOM의 몫입니다. 리액트 컴포넌트와 실.. 2023. 12. 20.