본문 바로가기

전체 글426

[백준/nodeJS] 11375. 열혈강호 (이분매칭 문제) 안녕하세요. 박기린입니다. 백준 11375번 열혈강호 문제 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/11375 11375번: 열혈강호 강호네 회사에는 직원이 N명이 있고, 해야할 일이 M개가 있다. 직원은 1번부터 N번까지 번호가 매겨져 있고, 일은 1번부터 M번까지 번호가 매겨져 있다. 각 직원은 한 개의 일만 할 수 있고, 각각 www.acmicpc.net 문제 해석 이 문제는 이분 매칭에 대해서만 알면 쉽게 풀 수 있습니다. 이분 매칭에 대한 설명을 다른 분이 너무 쉽게 잘 적어주셔서, 링크를 적어놓겠습니다. 링크 : https://blog.naver.com/kks227/220807541506 이분 매칭(Bipartite Matching) 이번에 올릴 글은.. 2024. 3. 24.
[React] 26. 리덕스(Redux) 작동 방식 이전 글을 읽고 오시는 것을 추천드립니다. (이전 글 : 리덕스 vs 리액트 컨텍스트 : https://arnopark.tistory.com/858) Redux : 중앙 데이터 저장소 Redux[리덕스]는 앱에 있는 '중앙 데이터(state) 저장소'입니다. 정확히 한 개의 저장소로, 절대로 2개 이상을 갖지 않습니다. 이 하나의 저장소에 앱의 모든 state를 저장합니다. (cross-component state, app-wide state 모두를 저장합니다.) 하나의 저장소에만 모든 걸 저장하니 관리가 어려워 보일 수 있지만, 다행히도 저장소 전체를 항상 직접 관리할 필요가 없습니다. (이에 대해선 이번 강의와 다음 강의를 통해서 설명할 예정입니다.) 컴포넌트와 저장소 간의 연결방법 : 구독하기 중앙.. 2024. 3. 19.
[붕괴 스타레일] 스파클 광추와 유물 / 추천 파티 조합 / 스펙 공유 글 수정 날짜 : 2024.3.12 안녕하세요. 박기린 입니다. 이번에 새롭게 등장한 픽업 캐릭터 스파클을 뽑았습니다. 각종 정보와 세팅을 공유해보겠습니다. - 2.0 버전 기준의 세팅입니다. - 업데이트로 스파클 세팅에 변화가 생길 경우, 이에 맞춰서 글을 업데이트 하겠습니다. (혹시 제가 발 빠르게 대응하지 않을 경우, 댓글로 제보해주시면 감사하겠습니다.) 브로냐와 같으면서 다른 화합 픽업 캐릭터 새롭게 등장한 5성 화합 캐릭터 '스파클' 입니다. 브로냐와 비슷하면서도, 많은 다른 특징을 가지고 있습니다. 브로냐와 마찬가지로, 전투스킬을 사용해서 다른 캐릭터에게 버프를 주면, 재행동(행동 게이지 증가)과 치명타 피해 증가 버프를 제공합니다. 여기까지는 브로냐와 거의 비슷해 보입니다. 차이는 필살기와 .. 2024. 3. 12.
[React] 25. 리액트 앱의 state에 대한 또 다른 관점 : 리덕스 vs 리액트 컨텍스트 안녕하세요. 박기린 입니다. 이번에는 리액트 앱의 state를 다루는 또 다른 방법에 대해 알아보겠습니다. 리액트에 존재하는 3종류의 state 리액트의 state에는 3종류가 존재합니다. 1. Local state 데이터가 변경되면, 단일한 하나의 컴포넌트에 영향을 미치는 state Ex: 버튼을 누르면 어떤 정보가 표시되고, 한 번 더 누르면 정보가 다시 사라집니다. -> useState나 useReducer를 사용해서 컴포넌트 안에서 state를 관리합니다. 2. cross-component state 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 state Ex: 모달 컴포넌트는 다수의 컴포넌트에 영향을 줍니다. 모달 컴포넌트를 여는 버튼은 모달 외부에 존재하고, 모달 안쪽의 버튼을 눌.. 2024. 3. 12.
[백준/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.