JNarin Development Story

뷰나, 리액트를 쓰시는 분이라면 스터디나 프로젝트에서 ESLint 세팅에 대해 들어본 경험이 있을 것이다. 개발을 하면서 자주 설치하게 되는 라이브러리로, 실상은 실무에서 활용하기에는 한계가 있다. 그래도 배우면서 활용하기 좋은 것들을 하나씩 정리하고 싶어 이 글을 쓰게 되었다. 1. ESLint란? ESLint란 자바스크립트 코드에서 문제가 되는 패턴을 식별하기 위한 코드 분석 도구이다. 2. 사용방법 2 - 1. 설치 및 활용방법 npm install eslint 설치는 위 명령어를 해도 되지만, 일반적으로 뷰나 리액트를 할 때 일부는 자동으로 설치가 되는 경우도 있다. 그래서 필자는 거의 쓰이는 일은 없었다. 2 - 2. No Console 개발자에게 console이란 매우 유용하게 쓰이는 코드 중..

이번에도 개발을 하면서 강의에서 추천해준 확장자를 정리하고자 이 글을 쓰게 되었다. 1편과 나눈 이유는 크게 없지만, 그래도 다른이도 유용하게 쓰기를 바라면서 이 글을 썼다. 1. Indent-Rainbow 프로젝트가 커지면 커질수록 tab은 더 안으로 들어가게 된다. 그렇다 보니 너무 멀리 있는 탭의 경우 이 탭의 끝은 어디인지 솔직히 분간이 잘 되지 않는 경우도 있다. 그럴 때 유용한 확장자라고 할 수 있다. 위 사진은 간단한 예시로 내가 현재 위치한 커서의 탭이 라고 할 때, 해당 탭의 끝과 끝을 구분해주기 위해 세로로 흰 선이 있어 확인하기가 수월하다. 그리고 js/json의 경우는 조금 다르게 보인다. 필자가 postcss부분에 마우스 커서가 올라갔을 때, 해당 오브젝트의 밑줄과 세로 라인으로 ..

우리밋이라는 노드에 대한 기본적인 개념을 공부하기 위해 강의를 듣다가 깃에서 버전 관리라는 것에 대해 알게 되었다. 그리고 이 버전은 분명 회사에서도 쓸 것 같아 정리를 하게 되었다. 하지만 아쉽게도 현재 근무 중인 회사에서는 쓰이지 않는다. 그래도 언젠간 쓰이길 생각하면서 글을 남겨본다. 태그 리스트 보기 먼저 현재 내가 태그로 만든것이 있는지 리스트를 확인할 수 있다. git tag 이 명령어를 입력시 현재 내가 보유하고 있는 태그를 로컬 태그 생성 그리고 버전을 관리를 위해 태그를 생성할 수 있다. git tag 태그이름 git tag v0.1.0-notDB 로컬에 현재 git에 버전 1.0인 notDB라는 명칭으로 저장을 한다. git log --oneline git log를 한줄로 보여준다. 해..

프로그래밍 쪽에 일을 하다 보면 기능 구현도 물론 중요하지만, 이름 짓는 것에 대한 고민도 많이 하게 된다. 네이밍이라는 것이 누가 봐도 이 네이밍은 이런 기능일 것이다 유치하는 것이 가장 좋은 네이밍이라 할 수 있다. 그래서 우리는 이 4가지의 네이밍 방법에 대해 정리를 해보려고 한다. 카멜 케이스 (Camel case) 낙타의 모양에서 따온 방법이다. 첫 단어는 소문자로 시작하고, 그 뒤 단어부터 대문자로 시작한다. 그리고 단어와 단어 사이는 붙여 사용한다. 원문 : main inner wrap 카멜 : mainInnerWrap 케밥 케이스 (Kebab case) 케밥이 꼬챙이에 꽂힌 모습에서 생긴 방법이다. 모든 단어가 소문자로 시작하고, 단어와 단어 사이에는 하이폰('-')으로 연결된다. 원문 :..

LeetCode 개발을 하고 있는 어떤 친구가 매일 톡방에 올리길래 '릿코드가 뭐지?'라는 의문이 생겼다. 다른 코딩사이트가 많지만 각각의 장단점이 있기에 이번에는 릿코드로 결정하게 되었다. LeetCode란? 여러가지 코딩 언어로 천여가지가 넘는 알고리즘 문제를 풀어볼 수 있는 알고리즘 풀이 사이트라고 할 수 있다. 다른 사이트도 코드 풀이는 꽤 많지만, 설명이 생각보단 친절하진 않다. 릿코드는 무료와 유료 시스템 두 가지가 있지만, 필자는 아직 무료만 쓰는 입장에서 작성하려 한다. 먼저, Leetcode 전용 저장소를 Github에 하나 만들어 준다. 필자는 무난하게 leetcode로 하였습니다. 생각보다 이렇게 하신 분들도 꽤 있더라고요. 그리고 크롬 확장자 릿허브를 설치한다. 릿허브 링크는 좌측 ..

Git Remote 1. 갱신 remote에 대한 작업을 하기 전에는 먼저 업데이트로 갱신을 해주어야 한다. git remote update 2. 리스트 확인 업데이트가 완료가 되면 현재 서버에 올라간 브랜치 목록을 확인할 수 있다. git branch -r 현재 원격으로 올라간 브랜치 리스트를 확인할 수 있다. 실제로 필자는 아래 깃허브처럼 main, dev, study브랜치를 가지고 있고 로컬에서도 원격의 브랜치 리스트를 동일하게 가져오는 것을 확인할 수 있다. 3. 원격 저장소 branch 가져오기 이제 내가 원하는 원격 저장소에서의 원하는 브랜치를 가져올 수 있다. git checkout -t origin/study git checkout -t 원격브랜치명 위에서 확인한 원격브랜치명을 그대로 가져..

공부를 하다가 문득 커밋 메시지의 오타를 발견하였다. 이미 원격에 올린 상태였고, 이를 수정하는 방법에 대해 알아보았고 그에 대한 내용을 적으려고 한다. 커밋 메시지를 수정하는 방법은 크게 두 가지로 나뉠 수 있다. 하나는 로컬에만 있을 때와 이미 로컬에서 원격으로 올린 경우 두 가지로 나뉠 수 있다. 먼저 우리는 로컬에만 커밋이 있고 수정을 할 때의 방법을 알아보려 한다. 1. 로컬의 커밋 수정하기 1. 1) 가장 최근의 커밋을 수정하기 git commit --amend 위와 같이 amend를 이용하면 가장 마지막에 commit 한 내용을 수정할 수 있다. 1. 2) 중간의 커밋을 수정하기 git log 먼저 내가 수정할 커밋의 순번을 찾는다. git rebase -i HEAD~2 필자는 커밋의 두번째..

생각보다 깃허브에서 활용할 방법은 많았다. 무작위로 해결을 할 때마다 정리를 하게 되었지만, 어느정도 내용이 모여서 문서로 찾아보기 쉽게 글을 쓰게 되었다. 제목을 클릭하면 해당 내용을 새창에서 볼 수 있습니다. 1. Github 꾸미기 깃허브 자기소개페이지 만들기 우연히 다른 개발자를 찾아보니까 자기만의 소개 페이지가 있는 것을 발견하였다. 이제 개발자로 살아가기 위해서는 깃허브 또한 보기 좋게 관리를 해야 한다고 생각하기 때문에 이번에 한번 jnarin-development-story.tistory.com 2. 무료링크 만들기 1) Github에서 무료 링크 만들기 깃허브 웹호스팅으로 쉽게 링크를 만들자 이전에는 닷홈 호스팅을 사용할 때는 FTP를 이용하여 수정할 때마다 업로드를 해야 하는 번거로움이..