기초 명령어 모음

git version 2.41.0.windows.1을 기준으로 작성 git init깃(git)을 사용하기 위한 명령어로 .git 디렉토리가 생성된다.현재 프로젝트에서 변경사항 추적(버전 관리)을 시작. git config깃(git)을 사용하기 위한 설정 값을 입력, 확인할 수 있다.개행문자(new line) 설정은 내 깃허브(github)에 올린 소스코드를 다른 사람이 사용할 때 내 운영체제와 다르면 개행 문자 때문에 오류가 발생할 수 있는 것을 방지한다. ### 현재 프로젝트에만 설정하는 경우# 이름, 이메일을 지정git config user.name git config user.email # 개행문자 설정git config core.autocrlf input # macgit config core.au..

• format_list_bulleted GIT
• · 2024. 4. 17.
• textsms

React에서 Parallax 구현하기

리액트는 컴포넌트 단위로 개발을 한다. 그래서 컴포넌트마다 useEffect 내부에 스크롤 이벤트를 바인딩해서 parallax를 구현해야 하나 싶었는데, 스크롤할 때마다 컴포넌트 개수만큼 이벤트 리스너가 동작하면 아무래도 성능에 영향을 미칠 수밖에 없다. 그래서 생각한 첫 번째 방법은 취상위 컴포넌트인 에서만 스크롤 이벤트를 바인딩하고 document.querySelector를 사용해서 DOM을 가져와 parallax를 구현하는 것이었다. 그러나, 리액트는 가상 DOM을 비교해 브라우저에 painting을 효율적으로 하기 위한 라이브러리이므로 document.querySelector를 사용한다는 것은 리액트의 본질을 고려하지 않는 방법이다.(사용하면 안 되는 게 아니라 지양해야 하는 것) 그래서 두 번째..

• format_list_bulleted REACT
• · 2024. 3. 29.
• textsms

리렌더링(Re-rendering)에 대하여

컴포넌트가 리렌더링(Re-rendering)이 되는 경우는 아래와 같습니다. 함수형 컴포넌트를 기준으로 설명합니다. 1. state 업데이트( 컴포넌트에서 사용하는 custom hook의 state 업데이트도 포함) 2. 부모 컴포넌트의 리렌더링시 props 업데이트 3. 전역 상태값(Redux store, Context Api, Mobx Store, Recoil atom 등) 업데이트 state 업데이트 해당 컴포넌트에서 생성된 setter나 dispatch가 실행되면 리액트는 해당 컴포넌트를 렌더링 큐(queue)에 등록하고 이전 state와 현재 state를 비교하여 값이 다를 때 리렌더링이 발생합니다. 조심해야 할 경우가 있다면, state가 참조 타입, 즉 객체일 경우입니다. 이전 state의 ..

• format_list_bulleted REACT
• · 2024. 3. 8.
• textsms

git config alias로 명령어 단축 실행 하는 방법

CLI로 커밋 트리 보는 방법(feat. 소스트리 필요없네!!) git에서 소스트리를 사용하는 이유는 간편한 동작과 한 눈에 알 수 있는 커밋 트리 구조 때문이라고 생각합니다. 근데 소스트리 없이 CLI로 커밋 트리를 알 수 있는 명령어와 옵션이 있습니다. git skyhyunjinlee.tistory.com 위의 이전 글을 보면 명령어가 매우 길었습니다. 매번 긴 명령어를 사용할 순 없겠죠?(타이핑 속도가 빠르다면 해도 됩니다) 저는 빠르지 않으니 git config alias를 이용해서 짧은 명령어로도 CLI로 커밋 트리를 표시해보겠습니다. # git config alias. # git tree 명령어로 커밋 트리를 확인 할 수 있음 git config --global alias.tree 'log -..

• format_list_bulleted GIT
• · 2023. 11. 1.
• textsms

CLI로 커밋 트리 보는 방법(feat. 소스트리 필요없네!!)

git에서 소스트리를 사용하는 이유는 간편한 동작과 한 눈에 알 수 있는 커밋 트리 구조 때문이라고 생각합니다. 근데 소스트리 없이 CLI로 커밋 트리를 알 수 있는 명령어와 옵션이 있습니다. git log --graph --graph 옵션은 --oneline, --all, --decorate 와 함께 사용하는 것이 좋습니다. --oneline : 각 커밋마다 한 줄로 간략하게 표시 --all : 로컬, 원격 저장소의 커밋 모두를 표시 --decorate : 커밋을 가리키는 모든 참조(예: 브랜치, 태그 등)를 표시 아래 이미지를 보면 왼쪽에 소스트리에서 보던 트리 구조가 보이는 것을 알 수 있습니다.

• format_list_bulleted GIT
• · 2023. 11. 1.
• textsms

(styled-components) - Warning: Received `false` for a non-boolean attribute

리액트로 개발을 하다가 위 이미지처럼 에러가 발생했다면 그것은 styled-components 라이브러리 때문이다. 왜냐하면, styled-compoenents로 만든 컴포넌트에 props를 전달하면 html의 attribute로써 사용되기 때문이다. 즉, 위 이미지의 에러는 html에 show라는 attribute는 boolean 값을 갖는 attribure가 아니기 때문에 생긴 것이다. (애초에 show라는 attribute도 없지만..) 해결 방법은 아래 코드 처럼 show props에 $(달러) 기호를 사용해서 boolean값을 갖는 attribute라고 선언해주면 된다. import React, { useState, useEffect } from 'react' import styled from ..

• format_list_bulleted REACT
• · 2023. 9. 27.
• textsms