본문 바로가기

분류 전체보기233

16964 DFS 스페셜 저지 https://www.acmicpc.net/problem/16964문제BOJ에서 정답이 여러가지인 경우에는 스페셜 저지를 사용한다. 스페셜 저지는 유저가 출력한 답을 검증하는 코드를 통해서 정답 유무를 결정하는 방식이다. 오늘은 스페셜 저지 코드를 하나 만들어보려고 한다.정점의 개수가 N이고, 정점에 1부터 N까지 번호가 매겨져있는 양방향 그래프가 있을 때, DFS 알고리즘은 다음과 같은 형태로 이루어져 있다. 이 문제에서 시작 정점은 1이기 때문에 가장 처음에 호출하는 함수는 dfs(1)이다. DFS 방문 순서는 dfs함수에서 // x를 방문 이라고 적힌 곳에 도착한 정점 번호를 순서대로 나열한 것이다.트리가 주어졌을 때, 올바른 DFS 방문 순서인지 구해보자.입력첫째 줄에 정점의 수 N(2 ≤ N ≤.. 2024. 12. 19.
17425 약수의 합 (node.js) https://www.acmicpc.net/problem/17425문제두 자연수 A와 B가 있을 때, A = BC를 만족하는 자연수 C를 A의 약수라고 한다. 예를 들어, 2의 약수는 1, 2가 있고, 24의 약수는 1, 2, 3, 4, 6, 8, 12, 24가 있다. 자연수 A의 약수의 합은 A의 모든 약수를 더한 값이고, f(A)로 표현한다. x보다 작거나 같은 모든 자연수 y의 f(y)값을 더한 값은 g(x)로 표현한다.자연수 N이 주어졌을 때, g(N)을 구해보자.입력첫째 줄에 테스트 케이스의 개수 T(1 ≤ T ≤ 100,000)가 주어진다. 둘째 줄부터 테스트 케이스가 한 줄에 하나씩 주어지며 자연수 N(1 ≤ N ≤ 1,000,000)이 주어진다. 출력각각의 테스트 케이스마다, 한 줄에 하나.. 2024. 12. 16.
모노레포의 공통 ui 컴포넌트에 tailwind 적용 안될 때 (turborepo, tawilwind) 이전 포스팅에서 공통된 tailwind-config을 생성하여 apps/web에 적용시키는 것을 학습하였다.똑같은 방식으로 packages/ui에 컴포넌트를 생성한 후 tailwind 들을 적용시킨 뒤 webs 에서 사용할려고 하는데 공통 컴포넌트에 작성해두었던 tailwind가 먹히지 않는 사례가 생겼다.packages/ui 에 tailwind config도 똑같이 적용시켰는데 안되는 것에 대해 여러 삽질을 해본 결과 apps/web/tailwind.config.ts의 content에 /packages/ui에 있는 요소들에게도 tailwind를 입혀줘야한다고 설정하지 않아서였다.즉, // apps/web/tailwind.config.jscontent: [ "./pages/**/*.{js,ts,js.. 2024. 12. 11.
모노레포로 공통 된 tailwind config를 생성하기(turborepo, next.js, tailwind) - 2024.12.11 기준 turborepo에서 제공하는 with tailwind 옵션을 통해 초기 셋팅을 한다면 tailwind-config가 자동으로 추가되지만 학습 목적을 가지고 기본 셋팅을 통해 추가해 봄. pnpm dlx create-turbo@latest --example with-tailwind( 옵션을 통해 추가하는 방법은 위 cli를 입력해주면 됨. 링크)목적 -  공통으로 쓰일 tailwind config 을 만들어서 각 패키지에 적용시키기turborepo의 공식 문서에서는 패키지 매니저를 pnpm을 추천하여 pnpm으로 진행1. turbo 전역 설치 pnpm install turbo --global2. 초기 셋팅pnpm dlx create-turbo@latest위 명령어를 실행하면 packages 와 apps .. 2024. 12. 11.
Next.js에서 data를 받아오는 방식에 따른 장단점 Next.js에서 서버로부터 data를 받아오는 방식으로는 크게 5가지가 있다고 생각한다.서버 컴포넌트에서의 바로 데이터 페칭api/route.ts를 활용한 Route Handlers 사용server actions를 사용SWR 사용React Query 사용각 방식의 특징과 주의점을 우선 살펴본다1. 서버 컴포넌트에서의 데이터 페칭// app/page.tsxasync function getData() { const res = await fetch('https://api.example.com/data') return res.json()}export default async function Page() { const data = await getData() return {data.title}}이 방식을.. 2024. 12. 9.
vercel에 배포한 프로젝트의 도메인을 변경해보기 (feat. 가비아) 최근 ec2에 배포했던 포트폴리오 사이트의 프리티어 기간이 끝나서 3만원이 결제됨.포폴 사이트에 매달 3만원 돈 긁히는건 가성비에 맞지 않아서 삭제 후 아마존에서 환불받음.무료 배포도 되고 ci/cd도 알아서 설정 된 vercel에 포폴을 올렸는데 도메인이 아쉬워서 변경하고자 함. 1. Vercel에 배포한 프로젝트의 도메인을 변경하기 위해선 개인 도메인이 있어야 함.- 본인은 가비아에서 이벤트가에 구매- 개인 포트폴리오를 위한 사이트라서 weyoungjin.me 2. Vercel의 해당 프로젝트 setting으로 이동한 후 Domains 카테고리 선택- 해당 입력창에 가비아에서 구매한 링크를 입력한 후 Add를 클릭하면 되는데 추가 된 [도메인]과 [www.도메인]에는  invalid라고 표시될 것이다.. 2024. 11. 12.
클로저에 대해 알아보기 with useState 클로저란 실행 컨텍스트와 렉시컬 스코프의 조합으로 함수가 선언 되었을 당시에 환경을 기억하여 상위 스코프내의 변수에 접근 할 수 있게 해주는 문법이다.아래 함수를 실행해보면 10이 출력되는 것을 통해 inner 함수가 상위 스코프인 outer의 _var를 참조하는 것을 알 수 있다.이는 클로저에 의해 접근 가능한 것.const outer = () => { let _var = 10; const inner = () => console.log(_var); inner();};outer(); // 10아래 함수를 예측해보면 어떻게 출력될까const outer = () => { let _var = 10; const setVar = (newVal) => { _var = newV.. 2024. 10. 9.
[React Hooks] useState 분석해보기 (진행 중) useState는 React 깃허브에서 @packages/react/src/ReactHooks.js에서 export 중이다.// @packages/react/src/ReactHooks.jsexport function useState( initialState: (() => S) | S,): [S, Dispatch>] { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState);}제네릭 타입 S를 담아주면 리턴하는 값은 [S타입, Dispatch>] (S타입에 대한 Dispatch하는 함수)useState의 리턴 값을 알아가기 위해 resolveDispatcher() 라는 함수를 추적function resolveDi.. 2024. 10. 9.
브라우저 엔진의 작업 처리 우선순위 (feat. 마이크로 테스크 큐, 테스크 큐, 렌더 큐) 브라우저는 렌더링 엔진과 자바스크립트 엔진의 혼합으로 작업이 처리된다.이벤트 루프에 의해 콜 스택이 비워져 있다면 큐에 담겨진 요소들을 선입선출 순서로 콜스택에서 실행시키는데,이 때 큐의 종류에 따라 콜 스택에 담겨지는 우선순위가 달라진다. 첫 번째로 Promise가 반환하는 resolove,reject가 담겨진 마이크로 태스크 큐,두 번째로 렌더링 업데이트 요소들이 담겨진 렌더 큐마지막으로 DOM 이벤트,fetch,setTimeOut,setInterval 등이 담겨진 태스크 큐 순서로 각각의 큐에 담겨진 작업들을 콜 스택에 담은 후 처리되면 그 다음 큐, 그 다음 큐로 실행된다.따라서, 아래와 같이 코드를 작성하더라도 setTimeout의 콜백함수는 0초에 값을 줬더라도 즉시 실행되지않고 1과 3이 출.. 2024. 10. 7.