전체 글

💡 Console API를 "console.log"만 사용하지 말자! 목표 Console API를 다양하게 활용할 수 있다. 간단한 디버깅에 활용하기 좋은 예제를 만들 수 있다. Console API 종류 console api는 사실 다양한 메서드들로 구현되어 있다. No. Method Description 1 console.trace() console.assert() 실행 스택 추적을 출력한다. 첫 번째 매개변수가 false인 경우, 메시지와 스택 추적을 출력한다. 2 console.clear() 콘솔의 내용을 지운다. 3 console.count() console.countReset() 주어진 레이블로 메서드를 호출한 횟수를 출력한다. 주어진 라벨의 횟수를 초기화한다. 4 console.debug()..

💡 ESLint를 사용하면서 경험한 오류들을 정리해보자! 목표 ESLint가 무엇인지 설명할 수 있다. ESLint를 사용하면서 발생한 문제들을 파악하고 해결할 수 있다. ESLint 트러블슈팅 공간으로 활용할 수 있다. 트러블슈팅 Parsing error... Unexpected token '?' 샘플코드를 작성 중에 ES6 클래스를 구현할, "Parsing error: Unexpected token ;"을 경험했다. 문법적으로 오류는 없었으며 브라우져 콘솔에서 실행시켜도 정상적으로 작동했다. 위와 같은 이슈에 대한 해결 방법과 오류의 원인을 살펴보자. export default class Item extends Component { $id; // "Parsing error: Unexpected tok..

💡 properties 파일은 대세가 아니라지만, 간단한 설정 파일을 관리할 때 쓰긴한다 : ) 목표 프로퍼티 파일에 저장된 한글을 읽을 수 있다. 한글이 깨져서 읽어질 때, 해답을 제안하는 공간으로 활용할 수 있다. 🔥 프로퍼티 파일(Properties) 프로퍼티 파일은 Key-Value로 이뤄지는 파일이다.최근에는 yaml(또는 yml) 이나 json으로 대부분 사용하지만, 프로퍼티 파일도 자주 사용된다. 💢 한글이 깨진다면? 간혹 한글이 포함된 프로퍼티 파일을 읽을 때, 한글이 잔인하게 깨지는 일이 자주 발생한다. 다음 텍스트처럼 이게 무엇인지 조차 알 수 없게 된다. 중계 문서 ê°œì¸ì •ë³´ 암호화 (%dê±´) 😵 원인 Properties 클래스의 정의를 살펴봐..

💡 React 프로젝트 구조는 저마다 다른데, 나는 정답을 알고 싶다!! 그런데, 정답은 없다?!?! 목표 리액트 프로젝트는 정해진 파일 구조가 없는 이유를 설명할 수 있다. 대중적인 리액트 파일 구조를 도식할 수 있다. 파일 구조별로 각각의 관심사(역할)을 설명할 수 있다. CRA를 통해 리액트 프로젝트를 구성하거나, 직접 프로젝트를 구성할 때, 프로젝트의 파일 구조를 어떻게 잡을지 미리 정의하는 것은 모든 프로젝트에서 중요한 부분이다. 하지만, 리액트의 경우 '이것이 정답이다'라고 말하는 파일 구조를 찾기란 어렵다. React 프로젝트의 파일 구조는 정답이 없는걸까? 왜? 가장 큰 이유는 React가 무엇인지 되짚어볼 필요가 있다. React 공식 페이지의 정의를 인용하자면, `React란, 사용자 ..

💡 Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 직면했다면, 이제는 당황하지 말자! 목표 'LF', 'CRLF'가 무엇인지 설명할 수 있다. ESLint 적용 후, Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 빠르게 해결할 수 있다. VSCODE에서 ESLint를 적용하고, Windows PC와 Mac PC를 동시에 사용하게 된다면, Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 자주 직면하게 된다. 여기서, 'LF'는 무엇이고, 'CRLF'는 대체 무엇을 의미할까? `LF`와 `CRLF` 둘 다 줄바꿈(개행)을 의미한다. 그러다면, 왜 서로 다른걸까? LF..

💡 로그를 찍을 때, 제목 한 줄에 들어있는 의미를 파악해보자! 목표 `private final Logger LOGGER = LoggerFactory.getLogger(this.getClass());`의 의미를 설명할 수 있다. 의미가 분명한 로깅 코드를 작성할 수 있다. 자바 프로그래밍을 작성한다면, 로그를 찍는 것은 필수적이다. private static final Logger LOGGER = LoggerFactory.getLogger(this.class); 순수 자바에서는 위와 같이 사용을 했었고, 스프링에서도 아무생각 없이 코드를 복붙했었다. 기능상의 문제는 없지만, 스프링의 DI를 이해한다면, 불필요한 자원 낭비를 피할 수 있다. 스프링에서는 다음과 같이 LOGGER를 생성하는 것을 권장한다. ..

💡 styled-components를 적용하는 김에 정리도 한 방에 해보자. 목표 styled-components가 무엇인지 설명할 수 있다. styled-components를 적용해보고 간단한 예제를 작성할 수 있다. styled-components를 적용할 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다. styled-components를 활용한 유용하고 다양한 예제를 기록해두는 공간으로 활용한다. styled-components styled-component는 스타일 값으로 함수를 전달할 수 있기 때문에, 기존 HTML/CSS 처럼 새로운 클래스를 추가하는 것이 아니라 prop 값을 기반으로 스타일을 적용할 수 있다. 이는 코드량을 크게 줄일 수 있으이며, styled-component 처음 도..

💡 스타일린트(stylelint)를 적용하는 김에 정리도 한 번에 해보자! 목표 Stylelint가 무엇인지 설명할 수 있다. Stylelint를 적용해보고 설정값에 대해 설명할 수 있다. Stylelint를 적용할 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다. 보통 코딩 컨벤션으로써 ESLint를 대부분 사용하고 있을 것이다. 스타일을 적용할 때, 항상 그 날의 마음가는 대로 작성하는 것을 최대한 피하고자 Stylelint를 도입해봤다. Stylelint stylelint는 스타일 작성에 코딩 컨벤션을 적용하도록 도와주는 강력한 도구라고 언급한다. 스타일 작성 시 오류를 방지하고 대중적인 네이밍룰을 따르도록 강제한다. stylelint 스타터 가이드 `npm`을 사용한다는 가정하에 설치 방법을 ..

💡 내가 아닌 동료를 위해 의미있는 커밋 메시지를 작성해보자! 목표 협업을 위해 커밋 메시지를 카테고리 별로 자세히 기록할 수 있다. 동료를 위해 이해하기 쉽고 명확하게 작성할 수 있다. 커밋 컨벤션에 따라 작성할 수 있다. 토이 프로젝트를 진행하든, 회사에서 업무를 진행하든 프로젝트에 대한 히스토리를 확인하게 된다. SVN 또는 Git에 Commit 된 메시지를 확인하게 되는데, 대부분 '이게 대체 뭘 했다는거지?' 싶을 때가 많다. 커밋 메세지를 기록하는 것은 내가 아니라 동료를 위해 쉽고 명확하게 작성할 필요가 있다. The rules — not “rules”, but better to follow: 제목과 본문을 개행으로 분리하기 제목은 간략 명확하게 작성하기 (영문 기준 50자 이내) 제목의 첫..

💡 알고 있으면 코드의 양이 획기적으로 줄어드는 Syntactic Sugar. 적극 활용해보자! 목표 Syntactic Sugar가 무엇을 의미하는지 설명할 수 있다. 자바스크립트에서 대표적인 Syntactic Sugar에는 무엇이 있는지 설명할 수 있다. 유용한 예제를 기록하는 공간으로 활용할 수 있다. 프로그래밍을 하다보면, 익숙하지 않은 용어가 등장하게 된다. 'Syntactic Sugar'도 그 중에 하나이다. Syntactic Sugar란, 직역하면 문법적인 설탕이라는 뜻으로 달달한 문법이라고 생각하면 된다. Candy Grammer라고도 부르기도 하며, 코드를 더 간략하고 쉽게 만들어주는 문법을 의미한다. 자바스크립트에서는 어떤 문법들이 syntactic sugar 일까? 자바스크립트의 Syn..

💡 리액트 프로젝트에서 import시, 더 이상 ../../../ 를 쓰지 않도록 src를 기준으로 경로 설정을 해보자! 목표 import를 상대경로뿐만 아니라 절대경로로 설정할 수 있다. Craco를 통해 원하는 관심사의 경로 매핑과 커스터마이징 할 수 있다. 다들 상대경로 `../../../` 지옥에서 벗어나기 위해 왔을 것이라고 확신한다 : ) import문 작성 시 상대경로는 물론 절대경로도 인식 가능하게 하고, 개발의 편의를 위해 필요에 따라 관심사별로 미리 경로를 지정하여 커스터마이징하게 매핑할 수 있는 방법을 정리해본다. 특정 관심사란, components, containers, services, views 등이 있을 수 있다. 각각의 역할은 본인이 정한 것으로 하자. 절대경로 설정이 필요한..

💡 CRA 후 항상 구글링해서 설정하는 부분을 정리해보자. 나만의 리액트 스타터 템플릿이 되것지 : ) 목표 CRA(Create React App)을 적극 활용할 수 있다. 필요에 따라 ESLint, Prettier, Babel 등을 추가 연동 설정 할 수 있다. 신규 리액트 프로젝트를 만들 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다. 페이스북에서 개발한 CRA(create react app)을 통해 리액트 프로젝트를 쉽고 빠르게 생성할 수 있다. CRA 관련 내용은 맨 하단에서 설명하기로 하고, 리액트 스타터 가이드를 작성해보자. 📣 CRA 리액트 스타터 가이드 npx create-react-app # typescript를 사용하실 분들은(권장) $ npx create-react-app 서비스..