본문 바로가기

분류 전체보기84

[Git] Github commit message 템플릿 화하기 목차   왜 템플릿를 하는가?git commit message 를 작성하다보니 비슷하게 반복하는 내용을 적어줘야하는 불편함이 생겼다. 그래서 git commit message를 템플릿화 하는 방법이있지 않을까 해서 알아본 내용을 공유하려고 한다.  적용방법 템플릿화 할 txt파일 생성템플릿을 적용하고싶은 프로젝트 root에 commit-template.txt라는 파일을 생성해준다.commit-template.txt# 타입: feat, fix, docs, style, refactor, test, chore 중 하나# 스코프: 변경된 코드의 범위를 지정# 제목: 50자 이내로 간결하게 변경 사항을 요약feat(auth): add OAuth2 login# 본문: 변경 사항에 대한 자세한 설명# 여러 줄로 작성.. 2024. 6. 22.
[TS] index.d.ts 알아보기 목차   index.d.ts는 무엇인가?'index.d.ts'는 TypeScript 에서 타입 정의 파일(Type Definition File)로, 주로  JavaScript 라이브러리나 모듈의 타입 정보를 정의하는데 사용된다. 이 파일은 TypeScript 코드가 해당 라이브러리나 모듈과 상호작용할 때 타입 안전성을 유지하도록 도와준다.'index.d.ts'파일의 주요 목적은 타입정보를 제공하여 코드 작성 중에 자동 완성 기능과 컴파일 타임 오류 검사를 가능하게 하는 것이다. 주요 내용 타입 선언index.d.ts 파일은 변수, 함수, 클래스, 인터페이스 등의 타입을 선언한다.// Example: jQuery type definitionsdeclare var $: (selector: string) =>.. 2024. 6. 16.
[SCSS] @use "sass:map", @use "sass:list" 목차   @use "sass:map", @use "sass:list" @use는 무엇인가?@use는 Sass에서 다른 Sass 파일이나 Sass 내장 모듈을 불러올 때 사용하는 구문이다."sass:map", "sass:list"위 두개는 각각 Sass의 내장 모듈인 'map'과 'list'를 불러온다.해당 모듈들은 Sass에서 맵과 리스트를 다룰 수 있는 다양한 유용한 함수들을 제공한다.@use "sass:map"이 구문은 Sass의 'map' 모듈을 불러온다. 'map' 모듈은 키와 값의 쌍으로 이루어진 맵 데이터를 처리하는 함수를 제공한다. 'map-remove($map, $keys...)' : 맵에서 특정 키를 제거한다.'map-keys($map)' : 맵의 모든 키를 반환한다.'map-values.. 2024. 6. 14.
[pnpm] pnpm 알아보기 목차   PNPM이란?PNPM(Package Now, Performant Managing)은 Node.js 생태계에서 패키지를 관리하기 위한 패키지 매니저이다.PNPM은 NPM(Node Package Manager) 및 Yarn과 같은 다른 패키지 매니저들과 비슷한 기능을 제공하지만, 몇 가지 중요한 차이점과 장점이 있다.  주요 특징 및 장점성능 향상PNPM은 패키지를 설치할 때 하드 링크와 심볼릭 링크를 활용하여 디스크 공간을 절약하고 설치 속도를 크게 향상시킨다. 이는 중복된 패키지의 다운로드를 방지하고, 패키지 설치 시간을 줄여준다.저장 공간 절약패키지들이 전역적으로 저장되기 때문에, 동일한 패키지가 여러 프로젝트에서 공유될 수 있다. 이는 디스크 공간을 크게 절약해준다.고유의 Node 모듈 구조.. 2024. 6. 13.
[SASS,SCSS] SASS,SCSS 알아보기 목차 CSS의 라이브러리인 SASS, SCSSSASS와 SCSS는 CSS를 더 효율적으로 작성할 수 있게 도와주는 CSS 전처리기이다. 두 가지 모두 Sass(Syntactically Awesome Stylesheets)라는 이름 아래 개발되었으며, CSS의 단점을 보완하고 스타일시트 작성의 효율성을 높여준다.  SASS와 SCSS의 차이SASS (Sass의 옛날 문법): Indentation Syntax라고도 하며, 들여쓰기를 통해 코드의 구조를 나타낸다. 중괄호 `{}`와 세미콜론 `;`를 사용하지 않는다.SCSS (Sass의 새로운 문법): Sassy CSS의 약자로, CSS와 거의 동일한 문법을 사용한다. 중괄호와 세미콜론을 사용하며, 기존 CSS 파일에 쉽게 적용할 수 있다. 주요 기능변수(Va.. 2024. 6. 13.
[Next,React] PropsWithChildren, PropWithoutRef 목차   PropWithoutRef주요 개념 및 사용 예시 1. 기본 개념'PropsWithoutRef'는 제네릭 타입으로, 주어진 'props' 타입에서 'ref'속성을 제거한다. 이는 주로 고차 컴포넌트(HOC) 또는 전달 컴포넌트 (forwarding components)에서 사용된다.  2. 사용 예시a. 기본 사용 예시import React, { PropsWithoutRef, forwardRef, Ref } from 'react';interface MyComponentProps { name: string; age: number;}const MyComponent = forwardRef>( (props, ref) => { return ( Name: {props.n.. 2024. 6. 11.
[MAC] 맥북 초기화때 필요한 세팅 목차   해당 글을 쓰는 이유맥북을 처음 받게되었을때 세팅을 나중에 다시 보기위해 만드려고 글을 작성하려고한다.  brew 설치https://brew.sh/ko/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.shbrew 설치후 아래 두개의 명령어를 실행시켜 환경변수 등록을 시켜줘야한다. 버전 확인brew -v 를 통해 버전이 확인되는지 보고 된다면 된거다.  NVM 설치https://suinchoi.tistory.com/115 NVM(Node Version Manage) 설치 및 사용해보기 (Mac)nvm(Node Version Manager) - node 버전이 지속적으로 업데이트 되기 때문에 프로젝트 버전에 따라 프로젝트가 정상적으로 .. 2024. 6. 10.
[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.

티스토리툴바