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부분에 마우스 커서가 올라갔을 때, 해당 오브젝트의 밑줄과 세로 라인으로 ..

VSCode를 초보자가 이것저것 사용을 하다 보면 간단한 오류에 애먹는 경우가 있다. 필자도 이를 겪었기에 이 과정을 기록하고자 내용을 남긴다. 원인 HTML 코드 입력을 위해 Snippets를 설치하였지만 태그 입력이 잘 되지 않는다. 해결방법 장고도 설치하다 보니 HTML기본 설정값이 Django로 되어있던 것이 원인으로, 클릭하여 HTML로 변경을 하면 설치한 확장자를 쓰는데 문제없이 잘 사용할 수 있다. 이처럼 확장자 설치를 하여도 실행이 만약 되지 않는다면 하단에 현재 설정된 값이 무엇인지 확인을 하는 습관을 들여야 한다.

프로젝트를 할 때, 혹은 개발 관련 수업/강의를 듣다보면 확장자에 대한 추천들을 자주 접하게 된다. 하지만 실제로는 이게 어디에 좋은지에 대한 설명이 부족할 때가 있었다. 그래서 그 부가적인것을 필자가 오래 써보면서 느낀점과 함께 소개를 적으려 한다. 1. Live Server 개발을 해보신 분들이라면 거의 다 알고 계시는 Live Server다. 초창기 다른 에디터를 사용했을 당시에도 이런 비슷한 기능을 찾아서 꼭 설치하던 확장자다. Live Server은 정적 및 동적 페이지에 대한 코드를 실시간으로 개발 로컬 서버를 시작할 수 있는 확장자다. 일반적으로 이 Live Server 외에도 View In Browser도 있지만, 필자는 설치를 하지 않았다. 수업 강의를 진행하면서 이 확장자를 설치 추천을..

Visual Studio Code 비주얼 스튜디오 코드는 앞서 이야기한 것과 같이 마이크로소프트가 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다. 디버깅, GIT, 구문 강조 기능이 포함되어 있으며, 사용자가 원하는 기능을 검색하여 자신만의 소스 코드 편집기를 만들 수 있다는 장점이 있다. 물론, 원하는 기능을 찾아 설치는 웬만한 오픈소스 코드 편집기는 해당이 되어있다. 아마 운영체제에 따른 화면에 보이는 내용이 다를 수도 있다. 현재 필자는 Window 10 Pro 사용자라 이러한 화면이 나왔으며, 다른 운영체제를 써보지 않아서 바뀌는지는 솔직히 잘 모르니 화살표를 클릭해 본인에 운영체제에 맞게 설치하시면 된다. 여기서 설치 위치를 바꿀 수 있지만 특별히 가서 무언가 설정하는 일이 크게..