본문 바로가기
반응형

분류 전체보기706

[VueJS] 리스트 렌더링(v-for) 에서 key를 사용하는 이유 v-for에서 key를 사용하는 이유는 뭘까? 우선 key의 역할은 반복되는 내용을 하나로 관리하기 위해 사용되는 유니크한 값이다. 그 유니크한 값이 새 노드 목록을 이전 목록과 비교하기 위한 힌트로 제공된다. 좀 더 자세히 알아보기 위해 공식문서에서의 설명을 한번 살펴보자. Vue가 v-for로 렌더링 된 요소 목록을 업데이트할 때 기본적으로 "in-place patch" 전략을 사용합니다. 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소를 제자리에 패치하고 특정 인덱스에서 렌더링 되어야 하는 항목을 반영하는지 확인합니다. 이 기본 모드는 효율적이지만 목록 렌더링 출력이 하위 구성 요소 상태 또는 임시 DOM 상태(예: 양식 입력 값)에 의존하지.. 2022. 10. 26.
[CSS] CSS vs CSS-in-CSS vs CSS-in-JS CSS CSS(Cascading Style Sheets)에 대해서는 다들 어느 정도 알거라 생각된다. CSS-in-CSS 와 CSS-in-JS에 알아보기 전에 왜 CSS를 사용하다가 CSS-in-CSS와 CSS-in-JS가 등장했는지에 대해 알아보자. CSS는 지금까지 사용하면서 명확한 단점이 존재했었다. 모듈화가 어렵다. 클래스 이름의 최소화 문제 (방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯하다.) CSS의 우선순위를 파악하기 어렵다. 뭐 그 외에도 여러 단점들이 존재하겠지만 당장 생각나는 건 이 정도이다. 그래도 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해지거나 편리해질 예정이라는 점에는 부정할 수 없다. .. 2022. 10. 26.
[CSS] CSS 방법론이란? (ft. OOCSS / BEM / SMACSS) CSS 방법론 CSS 방법론이란 CSS를 어떤 방법으로 구성하면 더 효율적으로 구성할 수 있는가에 대한 방법론이다. 즉, 쉽게 말하면 CSS에서 클래스 네임을 쉽게 정의하기 위한 일종의 규칙이라고 생각하면 될 것 같다. CSS방법론을 사용하는 이유는 뭘까? 원활한 유지보수 코드의 재사용성 클래스명으로도 무슨 내요인지 예측 가능 확장 가능 그리고 CSS 방법론에는 크게 OOCSS, BEM, SMACSS로 나뉘어 있다. OOCSS OOCSS(Object Oriented CSS)는 CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론이다. 실제로 가장 많이 쓰이는 방법론이라고 볼 수 있는데, 나 역시 현업에서 프로젝트를 진행할 때 OOCSS 방법론을 많이 사용하였다. 주요 원리는 구조와 스타일을 분리해.. 2022. 10. 26.
[GIT] 깃(Git) 참조 로그(reflog)란? (ft. 커밋 취소 복구하기) git reflog git reflog란 무엇일까? 여기서 reflog는 reference log를 의미한다. 즉, 제목에서 쓰인 것처럼 참조 로그를 말한다고 생각하면 된다. 이력이라고 해서 모든 사소한 이력을 기록하는 게 아니라, 이전에 HEAD가 가리키고 있었던 내용들을 전부 기록한다고 생각하면 된다. (명령어로 인해 가리키고 있던 HEAD의 포인터가 변경될 때마다 저장된다고 생각하면 된다.) $ git reflog 그렇다면 이 git reflog를 통해 무엇을 할 수 있을까? 일단 가장 흔하게 사용되는 것은 git reset --hard 옵션을 통해 날려버렸던 내용들을 다시 복구하는데 주로 사용된다. 말 그대로 커밋 취소를 취소한다(?) 라고 생각할 수 있을 것 같다. 그 외에 브랜치를 복구한다거나.. 2022. 10. 19.
[GIT] 깃(Git) 커밋(Commit) 취소하기 (ft. amend/reset/revert) GIT을 사용하다 보면 커밋을 덮어쓰거나(amend), 취소하거나(reset), 되돌려나(revert) 하는 상황이 발생할 수 있다. 각 명령어를 사용하는 방법에 대해 알아보고자 한다. git add 취소하기 제목이랑 좀 연관이 없을 수 있는데, 그래도 commit을 하기 위해서는 add를 먼저 해야 하기 때문에 add 취소에 대해 먼저 알아보도록 하자. 현재 아래와 같은 상황이라고 가정해보자. git은 친절하게도 취소하는 방법에 대해 어느 정도 설명을 해주고 있다. 현재 git staged 상태의 a.txt를 취소하기 위해서는 git restore --staged 을 입력하라고 안내하고 있으며, staged area에 없는 b.txt를 취소하기 위해서는 git restore 을 입력하라고 쓰여있다. 여.. 2022. 10. 19.
[GIT] 깃(Git) 별칭(Alias) 사용하기 git alias git alias라는 명령어가 따로 존재한다기보다는, 지금까지 git을 사용할 때 자주 사용했던 명령어들을 별칭으로 좀 더 쉽고 편안하게 쓸 수 있게 만들어주는 기능이라고 생각하면 된다. 명령어를 통해 간단하게 설정이 가능하다. 아래는 가장 흔하게 사용되는 별칭이며 공식문서에서도 안내하고 있는 별칭들이다. $ git config --global alias.co checkout $ git config --global alias.br branch $ git config --global alias.ci commit $ git config --global alias.st status 별칭을 이런 식으로 git config --global에 설정을 해주었다면 다음과 같이 사용하면 된다. # gi.. 2022. 10. 18.
[GIT] 깃(Git) 스태시(stash) 사용하기 - 변경된 내용 임시 저장하기 git stash git stash는 무엇일까? git stash는 파일의 변경 내용을 일시적으로 기록해두는 영역이라고 생각하면 된다. 실제로 현업에서 git을 사용하다 보면 생각보다 많이 사용하게 되는 게 git stash라고 한다. 예를 들어 아직 commit 하기 이전에 작업을 진행 중이었는데, 정말 급한 일들 현재 내가 하고 있는 업무보다 우선순위가 높은 새로운 업무를 받거나, 버그를 당장 고쳐야 한다거나 할 때 지금 하고 있는 작업을 commit 하기 애매하다면 git stash를 사용해 현재 변경했던 모든 내용들을 일시적으로 저장할 수 있다. 그리고 우선순위가 높은 작업들을 전부 처리한 뒤 git stash로 임시 저장한 내용들을 다시 불러와 작업을 이어서 할 수 있다. 스태시 저장하기 현재 .. 2022. 10. 18.
[GIT] 깃(Git) 체리픽(cherry-pick) - 필요한 commit만 가져오기 git cherry-pick git cherry-pick이 뭘까? git cherry-pick은 제목과 마찬가지로 필요한 commit만 골라서 가져오는 명령어이다. 쉽게 말해 다른 브랜치에 있는 commit들 중에서 원하는, 필요한 commit을 지금 내 브랜치에 가져와 commit을 하는 것이다. 참고로 해당 commit을 branch끼리 옮기는 게 아니라 동일한 commit을 다른 branch에 복사하는 개념이라고 생각하면 된다. (실제로 commit이 추가된다.) 그렇다면 cherry-pick은 언제 사용하는 걸까? git cherry-pick은 유용한 도구이지만 같은 commit이 중복되는 일이 발생하거나 그 외에도 여러가지 문제가 발생할 수 있기 때문에 꼭 필요한 상황에서만 사용하는 것을 권장한.. 2022. 10. 18.
[GIT] 브랜치 병합 충돌 시 해결 (ft. mergetool set vscode) 우선 이전에 작성한 글에서 브랜치 병합에는 merge와 rebase가 있다고 설명을 하였다. 보통 충돌이 나는 이유는 "같은 파일"을 대상으로 작업을 할 때 충돌이 가장 많이 난다고 생각된다. 각각 merge와 rebase에서 충돌이 날 경우 처리해 주는 방법이 다른데 이 방법에 대해 알아보자. git merge conflict 우선 서로 다른 브랜치가 같은 파일을 수정했다는 상황에서 시작해보자. 여기서 지금 master 브랜치와 record 브랜치가 동일한 b.txt라는 파일을 수정해서 commit을 진행하였다. 만약 여기서 merge를 하게 되면 어떻게 될까? 바로 b.txt 라는 파일이 병합하는 도중에 충돌이 났다고 알려준다. 그러고서는 브랜치명이 빨갛게 변한 것을 볼 수 있다. 여기서 간단하게 해.. 2022. 10. 15.
반응형
TOP

티스토리툴바