Javascript90 [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] 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. [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. [백준/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] 16. 리액트 Hooks의 규칙을 알아보자 안녕하세요. 박기린입니다. 이번엔 React에서 state를 다루는 데에 주로 사용되는 Hooks의 규칙에 대해 알아보겠습니다. * 리액트 훅 : use로 시작하는 것들은 전부 리액트 훅이라고 보면 됩니다. -> useState, useEffect, useReducer, useContext .. 1. 리액트 안에서만 사용하기 리액트 훅은 리액트 함수 내부에서만 사용할 수 있습니다. 리액트 함수는 - 리액트 컴포넌트 함수 - custom hooks 를 의미하고, 이 안에서 사용하지 않으면, 위 사진처럼 VSCode에서 에러/경고문을 표시합니다. 2. 리액트 훅을 중첩으로 호출하지 않기 위 1번 항목과 연결되는 문제입니다. 리액트 함수 내부에서만 사용이 가능하기 때문에, 다른 함수의 내부에서 호출되지 않습니.. 2023. 12. 11. [백준/JS] 20920. 영단어 암기는 괴로워 안녕하세요. 박기린 입니다. 백준 20920번 영단어 암기는 괴로워 문제를 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/20920 20920번: 영단어 암기는 괴로워 첫째 줄에는 영어 지문에 나오는 단어의 개수 $N$과 외울 단어의 길이 기준이 되는 $M$이 공백으로 구분되어 주어진다. ($1 \leq N \leq 100\,000$, $1 \leq M \leq 10$) 둘째 줄부터 $N+1$번째 줄까지 외울 단 www.acmicpc.net 문제 해석 주어진 단어들의 출현 빈도수를 체크합니다. 만약 단어의 길이가 M보다 짧을 경우, 지워버립니다. 예제에서는 M이 4였기 때문에, 글자수가 3개인 ant는 제외됩니다. 출현 빈도수가 높은 순서대로 정렬을 합니다. 출현 빈.. 2023. 12. 2. [백준JS] 16139. 인간-컴퓨터 상호작용 안녕하세요. 박기린 입니다. 백준 16139번 인간-컴퓨터 상호작용 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/16139 문제 해석 giraffe라는 글자와 [i 0 3]이라는 질문이 주어졌다고 가정합니다. giraffe 문자열 중, 0번째부터 3번째까지의 글자 중에 i가 있는지 검사합니다. i가 하나 있으므로, 1을 출력하면 정답입니다. 하지만, 매번 일일이 for문으로 모든 질문을 검사하게 된다면, 200,000자의 문자와 200,000개의 문제를 견뎌내기 힘들 것입니다. 그래서 누적합 방식을 사용합니다. 위처럼 f에 대한 질문이 여러 개 있을 경우, 미리 f의 갯수를 세어놓은 데이터를 만들어서, f 질문 때마다 뽑아쓰면 효율적일 것입니다. DP라는 {ke.. 2023. 6. 26. [백준JS] 1037. 약수 안녕하세요. 박기린 입니다. 백준 1037번 약수 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/1037 문제 해석 본문의 예제를 인용해서 설명하겠습니다. 예제의 답인 24의 약수는 위와 같습니다. 이 중 '1'과 '답이 되는 약수'를 제외한 수들이 입력으로 주어집니다. 그리고 이 값들을 이용해서 '24'라는 답을 도출해내면 됩니다. 이 문제를 쉽고 빠르게 해결하는 방법으로, 하나의 간단한 수학 지식을 알면 됩니다. 약수의 양끝 수들을 곱해주면 정답이 나옵니다. 이런 식으로 말이죠. 문제에서 받은 입력값은 '1'과 '정답이 되는 수'가 제외된 상태로 주어집니다. 반대로 말하자면, 이 입력값들의 최대값과 최소값을 곱하면 정답이 나옵니다. 정답 코드 const fs .. 2023. 4. 25. [백준JS] 13909. 창문 닫기 안녕하세요. 박기린 입니다. 백준 13909번 창문 닫기 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/13909 문제 해석 const fs = require("fs"); const input = +fs.readFileSync("/dev/stdin").toString().trim(); const windows = Array(input + 1).fill(false); const execute = (n) => { for (let i = 1; n * i 제곱근의 정수 부분 입력값의 제곱근의 정수 부분이 답이었습니다. 원리는 무엇일까요? n번째 창문이 열려 있으려면, 그 창문을 열고 닫은 횟수가 홀수번이어야 합니다. 그럴려면 n의 약수의 갯수가 3개여야 합니다. n = .. 2023. 4. 19. 이전 1 2 3 4 ··· 10 다음
