개발자들은 일을 시작할 때 npm run start 등 비슷한 명령어로 Dev Server를 띄우면서 시작을 하게 됩니다. 이 과정 속에서 일어나는 일은 모듈 번들러의 역할 등을 알고 있으면 어렴풋이 알게 되지만,이번글은 조금 더 깊게 그 과정에서 일어나는 일을 자세히 알아 보려고 합니다. (이 글은 React CRA와 webpack을 기준으로 작성되었습니다.) 우선 npm 이란?npm은 Node Package Manager로 node로 실행할 수 있는 패키지들을 관리하는 도구이며, 개발자는 npm을 통해 다른 사람이 작성한 패키지를 다운로드하고, 업데이트하고, 삭제할 수 있습니다. 쉽게 생각해 보면 npm은 application을 설치 삭제 및 관리해 주는 앱스토어와 같은 역할을 하며,npm을 이용해서..

문제https://www.acmicpc.net/problem/2606문제 해석이 문제는 BFS로 쉽게 풀 수 있다.다만, 그래프의 앞 뒤가 구분되지 않기 때문에 둘다 추가하는 방식으로 풀어야한다. 풀이const filePath = process.platform === "linux" ? "dev/stdin" : "../test.txt";const input = require("fs").readFileSync(filePath).toString().trim().split("\n");function solution(input) { const qty = Number(input.shift()); const pair = Number(input.shift()); const computers = input.map(..

문제https://www.acmicpc.net/problem/2667문제 해석이 문제는 그래프 이론 카테고리에 있으며 BFS로 풀 수 있다.2중 반복문을 통해 모든 배열을 순회 하지만 그 위치에 집이 있는경우 BFS를 통해 먼저 값을 정답 배열에 추가해주고, grid 값을 0으로 바꿔주면 된다. 풀이const filePath = process.platform === "linux" ? "dev/stdin" : "../test.txt";const input = require("fs").readFileSync(filePath).toString().trim().split("\n");function solution(input) { const N = Number(input.shift()); const grid ..

문제https://www.acmicpc.net/problem/16637문제 해석이 문제는 입력 제한부터 완전탐색의 냄새가 났다. (1 관건은 재귀 조건이였는데 문제에 힌트가 있었다. 자세히 봐야하는 조건은 중첩된 괄호는 사용할 수 없다인데 이 조건으로 인해 계산시 고려해야 하는 부분은 지금 계산하고 있는 부분과 그 다음 부분까지만 고려하면 되었다. 이를 현재 위치와 남은 길이를 비교하여 새로운 재귀 조건을 추가해 주었다. 풀이const filePath = process.platform === "linux" ? "dev/stdin" : "../test.txt";const input = require("fs").readFileSync(filePath).toString().trim().split("\n");c..

문제https://www.acmicpc.net/problem/31863 문제 해석이 문제는 BFS로 해결하였다. 먼저 본진에 대해 뻗어나가며 해당 위치의 지진 횟수를 하나 증가 후 큐에 위치를 저장하였고,큐에서 하나씩 꺼내며, 해당 위치에 지진 횟수를 바탕으로 건물이 무너지게 되는지 판단하였다.그 후 건물이 무너지면 해당 위치로부터 여진을 전파하는 방식으로 해결하였다. 직관적인 x,y 좌표 설정을 위해 class도 같이 사용해 주었다. 풀이const filePath = process.platform === "linux" ? "dev/stdin" : "../test.txt";const input = require("fs") .readFileSync(filePath) .toString() .trim()..

문제https://www.acmicpc.net/problem/12904문제 해석처음엔 재귀 방식으로 가볍게 도전했다가 처참하게 깨졌다...S의 길이가 999, T의 길이가 1000이기 때문에 재귀는 시간 초과가 발생한다. 해결 방법은 최대 길이가 T이기 때문에 T에서 하나씩 제거하며 결국 S와 길이가 같아졌을 때 비교하면 해결할 수 있다. 풀이const filePath = process.platform === "linux" ? "dev/stdin" : "../test.txt";const input = require("fs").readFileSync(filePath).toString().trim().split("\n");function solution(input) {let a = input[0].trim(..

많은 서비스에서 자사 서비스 유입을 위해 '배너 광고'를 많이 사용합니다. 그중 프로모션 이벤트 형식의 자사 제품 광고를 할 때 관련 이미지나 정보를 직접 하드코딩하여 배포하는 경우가 많습니다. 이때 단순 반복 작업은 개발 리소스 낭비이기에 배포가 아닌 광고 서비스를 많이 사용하는데요. 이번 글에서는 그중 흔하게 사용되는 Google Ad Manager 적용과정을 개발자 관점에서 작성하려 합니다. 우선 Google Ad Manager와 쓰이는 용어를 간단히 설명하고, 고정된 크기의 광고를 설정하는 법, HTML & CSS를 이용해서 반응형 광고를 설정하고 React에서 적용하는 방법들을 설명하도록 하겠습니다. Google Ad Manager 란? Google Ad Manager는 광고주와 발행사가 디지털..

안녕하세요. 추운 날들이 반복되고 있는데 다들 감기 조심하세요. 🤧🤧🤧 이번글은 React에서 children을 다룰 때 유용한 React.Children에 대해서 정리해 보려고 합니다. 사실 React 공식문서에서는 Children의 사용이 코드의 취약성(Fragile Code)로 이어질 수 있어 사용을 추천하지 않습니다. 하지만 오늘도 회사에서 발견했듯이 많은 레거시 코드들이 남아있으며, 당분간 계속 볼 거 같기에 Children API를 정리하려고 합니다. 추가적으로 글의 마지막 부분에서는 React 공식 문서에서 추천하는 Children을 사용하지 않는 방법 등을 작성할 예정입니다. React Children API란? React에서 정말 자주 사용하는 children과 Children API는 ..