왜 이름이 Tailwind일까 싶었다. "Tailwind"란 용어는 비행기가 날개 끝에서 생성되는 역기류인 "tailwind"와 관련이 있습니다. 마찬가지로 Tailwind CSS는 개발자가 스타일을 쉽게 작성하고 효율적으로 디자인할 수 있도록 도와줍니다. 라고한다. zustand 라는 라이브러리를 접하게 되었다. 참고로 Zustand는 독일어로 상태를 뜻한다. 나는 이상하게 별개 다 궁금하다. 그리고 barebone이라는 단어가 최소한이라는 뜻인데 여기 캐릭이 곰이라 bearbones라고 써있다. 말그대로 최소한의 설정으로 상태 관리를 해준다는 의미이다. 마침 기업에서 쓴 기술 블로그 글이 있어 읽어 보았다. 읽어보니 Zustand가 아닌 Jotai를 다루고 있었다. https://blog.hwahae..

webpack.config.js를 만들어서 require는 node.js에서 외부 파일을 불어오는 방법 path는 node.js에서 경로 활용할 수 있도록 만들어줌 path 모듈을 불러와줘 경로를 최적화해주는 normalize라는 메소드가 있음 join은 string 형식의 인자들을 현재 운영체제에 맞춰 경로를 설정해줌 resoleve는 경로 지정과 최적화를 동시에 해줌 index.js에 우리가 쓴 js를 모아둔다. __dirname, dist 현재 폴더에 dist 폴더를 만들어줘 파일 name은 bundle.js야 여기에 다 모아둠 entry 이름을 받아서 [name]에 넣어줄 수 있다. html도 번들링 해줄 수 있다. 이런 세부 설정이 가능 일단 여기까지 https://www.youtube.com/..

const input = require("fs") .readFileSync("/dev/stdin") .toString() .replaceAll("\r", "") .split("\n"); const n = input[0].split(" ").map(Number)[0]; const k = input[0].split(" ").map(Number)[1]; const arr = [...input].slice(1).map(Number); let start = 1; let end = arr.sort()[arr.length - 1]; let result = 0; while (start parseInt(line / mid)) .reduce((a, b) => a + b, 0); if (total < k) { end = m..

디팬던시에 해당 라이브러리가 있는지 확인하자.

"use client"; import { useRouter } from "next/navigation"; export default function Create() { const router = useRouter(); return ( { e.preventDefault(); const title = (e.target as HTMLFormElement).elements.title.value; const body = (e.target as HTMLFormElement).elements.body.value; const options = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title, b..

넥스트js의 핵심 키워드는 프리 렌더링 서버에서 미리 리액트 컴포넌트를 HTML로 바꾸어 클라이언트로 보내준다. 이 것을 받은 클라이언트는 react.js가 되고 리액트 환경에서 작동한다. 비로소 리액트와 연결되면 동적인 페이지 이용이 가능하다. 이 프로세스가 Hydration 이다. 1. 링크를 걸때는 리액트와 똑같이 Link를 쓰지만 to 가 아니라 href를 쓴다. useRouter 빌트인 훅을 사용하면 라우팅 정보가 나온다. 2. module css 시스템을 쓴다. 리액트에서는 {`${style.~~~}`}로 쓰는데 여기도 똑같다. 근데 모듈화는 좀 불편하다. 3. styled jsx 방식이 있다. 모듈처럼 클래스명이 충돌하지 않는다. 4. 전역으로 스타일 설정할 때는 jsx global을 통해서..