분류 전체보기97 [node.js, 백준]16197 - 두 동전 목차 문제링크https://www.acmicpc.net/problem/16197문제N×M 크기의 보드와 4개의 버튼으로 이루어진 게임이 있다. 보드는 1×1크기의 정사각형 칸으로 나누어져 있고, 각각의 칸은 비어있거나, 벽이다. 두 개의 빈 칸에는 동전이 하나씩 놓여져 있고, 두 동전의 위치는 다르다.버튼은 "왼쪽", "오른쪽", "위", "아래"와 같이 4가지가 있다. 버튼을 누르면 두 동전이 버튼에 쓰여 있는 방향으로 동시에 이동하게 된다.동전이 이동하려는 칸이 벽이면, 동전은 이동하지 않는다.동전이 이동하려는 방향에 칸이 없으면 동전은 보드 바깥으로 떨어진다.그 외의 경우에는 이동하려는 방향으로 한 칸 이동한다.이동하려는 칸에 동전이 있는 경우에도 한 칸 이동한다.두 동전 중 하나만 보드에서 떨어뜨.. 2024. 6. 7. [Next.js, socket.io] Next.js에서 socket.io 공식 사용하기 목차 Next.js에서 socket.io를 어떻게 활용할까?Next.js를 개발하던 도중 소켓 통신을 어떻게 할 수 있을까에 대한 생각을 했었다. 역시 웹개발이기 때문에 socket.io에서 공식으로 Next.js와 연결하는방법이 적혀있었다.https://socket.io/how-to/use-with-nextjs How to use with Next.js | Socket.IOThis guide shows how to use Socket.IO within a Next.js application.socket.io그래서 해당 링크를 기반으로 socket.io통신을 하려고한다. 세팅방법 Server.js파일 생성공식문서에 따르면 그냥 프로젝트 루트에 server.js파일을 만들어주면 된다고 한다.그래서 프.. 2024. 6. 7. [Next.js, styled-components] Next.js에 styled-components 설정하기 목차 Next.js에 styled-components를 적용해보자https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components Styling: CSS-in-JS | Next.jsUse CSS-in-JS libraries with Next.jsnextjs.orgNext.js 공식문서에 Styled Components를 적용하는 방법이 다루어져있다 세팅방법next.config.js 변경module.exports = { compiler: { styledComponents: true, },}next.config.js를 위처럼 compiler의 styledcomponents를 추가해준다. registry... 2024. 6. 7. [Next.js, React] TodoList 만들어보기 목차 폴더구조 Next.js를 사용하였으며 /todolist 경로 이동시 사용할 page.tsx와 containers/TodoList를 사용하였다. 파일 내용 /src/app/todolist/page.tsximport TodoList from '@/containers/TodoList/TodoList';export default function Page() { return ;} /todolist 경로에서 보여줄 컨테이너 /src/containers/TodoList/TodoList.styles.tsimport styled from 'styled-components';const StyledTodoList = styled.div` display: flex; flex-direction: column.. 2024. 6. 4. [node.js, 라이브러리]UUID와 'uuid' 라이브러리 알아보기 목차 UUID란 무엇인가?UUID(Universally Unique Identifier)는 전 세계적으로 고유한 식별자를 생성하기 위해 사용되는 표준이다. 이는 시스템 간에 고유한 ID를 보장해야 하는 다양한 상황에서 유용하다. UUID는 주로 데이터베이스의 기본 키, 트랜잭션 ID, 디바이스 식별자 등 다양한 용도로 사용 된다.UUID는 128비트 길이의 숫자로, 32개의 16진수 문자로 표현된다. 예를 들어, `123e4567-e89b-12d3-a456-426614174000`과 같은 형태를 가진다. UUID의 버전UUID에는 여러 버전이 있으며, 각 버전은 특정한 생성 방식을 따른다. 주요 버전은 다음과 같다.UUIDv1 : 시간과 노드(일반적으로 MAC 주소)를 기반으로 생성된다.UUIDv3 .. 2024. 6. 3. [Next.js, TS,Zustand] 페이지 이동전 로딩효과 추가하기 목차 Next.js 14이상 app라우터에서 페이지 로딩효과 추가하기Next.js 에서 app라우터로 개발을 하는 도중 라우터 이동전 로딩효과를 주는게 필요하였습니다. 사용 버전react : ^18zustand : ^4.5.2next : 14.1.0 진행과정 loadingStore.ts 추가/src/store/loadingStore.ts파일을 만들어줍니다.import { create } from 'zustand';interface LoadingState { isLoading: boolean;}interface LoadingActions { setLoading: (loading: boolean) => void;}const useLoadingStore = create((set) => ({ isLoadi.. 2024. 5. 30. [Next.js,TS] 특정폴더에만 Eslint 적용하기 목차 왜 특정 폴더에만 Eslint를 적용하나요?기존 만들어진 프로젝트에서 airbnb세팅 이랑 여러 커스텀 eslintrc를 넣었을때 바꿔야 할 부분이 너무 많아서 도중 build가 안되는 현상이 일어났다.그당시 .eslintrc.json전체 규칙을 적용한 모습{ "extends": [ "next/core-web-vitals", "airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" ], "plugins": ["@typescript-eslint", "prettier"], "parser": "@typescript-eslint/parser", "parse.. 2024. 5. 30. [Next.js, TypeScript] airbnb 및 커스텀 TS 세팅 목차 Next.js + TS 환경에서 airbnb형식 적용하기 설치방법npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript --legacy-peer-deps .eslintrc.js.. 2024. 5. 29. [python, BeautifulSoup] 파이썬의 BeautifulSoup 알아보기 목차 BeautifulSoup는 무슨 라이브러리인가?BeautifulSoup는 Python 프로그래밍 언어로 작성된 HTML 및 XML 파일을 구문 분석하기 위한 라이브러리이다.주로 웹 스크래핑에 사용되며, 복잡한 HTML 구조에서 데이터를 추출하는 데 매우 유용하다.BeautifulSoup는 다양한 Parser를 지원하여 유연하고 강력한 HTML 및 XML 처리 기능을 제공한다. 설치BeautifulSoup는 pip를 통해 설치할 수 있다.pip install beautifulsoup4pip install lxmlpip install html5lib 주요 기능 ParserBeautifulSoup는 여러 종류의 파서를 지원한다. 각 파서마다 장단점이 있으며, 상황에 맞는 파서를 선택할 수 있다.h.. 2024. 5. 29. [puppeteer,node.js] 웹 자동화 라이브러리 Puppeteer 목차 개요Puppeteer는 구글이 만든 Node.js 라이브러리로, Headless Chrome 또는 Chrominum 브라우저를 제어할 수 있는 기능을 제공한다. 이 라이브러리는 브라우저를 프로그래밍적으로 제어하고, 다양한 브라우저 작업을 자동화하는데 사용된다. 주요 기능 웹 스크래핑(Web Scraping)Puppeteer는 웹 페이지의 내용을 가져오거나 특정 데이터 요소를 추출하는 데 사용된다.JavaScript가 렌더링한 콘텐츠를 포함하여 브라우저에서 볼 수 있는 모든 것을 캡처할 수 있다.자동화된 테스트(Automated Testing)프론트엔드 테스트 자동화 도구로, 브라우저 환경에서 애플리케이션을 테스트 할 수 있다.다양한 사용자 상호작용을 시뮬레이션하여 애플리케이션의 동작을 검증할 .. 2024. 5. 29. 이전 1 2 3 4 5 6 7 ··· 10 다음
