전체 글29 StyleLint WebStorm에서 저장할 때 적용하기 ✅ 이 글은 다음을 다룬다. StyleLint가 무엇이고 왜 적용하는지 프로젝트에 StyleLint를 적용하는 방법 WebStorm, InteliJ 환경에서 저장 시마다 StyleLint를 적용하는 방법 StyleLint는 무엇이고 적용하면 뭐가 좋을까? StyleLint는 스타일에 컨벤션을 강제하고 에러를 피할 수 있게 도와주는 툴이다. 스타일 관련 코드가 많아질 수록 스타일이 중구난방이 되고 사실은 동작하지 않고 있는 코드들이 생길 수 있다. WeView 팀도 스타일 코드의 컨벤션을 지키고 역할을 하지 않고 있는 코드를 개발하는 시점에 잡아내기 위해 StyleLint를 적용하였다. 그러면 이제 본격적으로 적용해보자! stylelint적용하고 plugin 적용하기 stylelint를 설치하자. npm .. 2022. 12. 21. git hooks 설정으로 팀 효율 높이기 이번 편은 commit이나 push 등의 git 명령어 동작 전에 코드 품질을 점검하고 잘못된 상황을 체크할 수 있는 git hooks를 다룬다. 또 git hooks 사용을 도와주는 husky라는 기술, 관련된 쉘 스크립트 작성법에 대해서 다뤄보려고 한다. WeView 프로젝트를 진행하며 프론트엔드 개발과 팀에게 도움이 되는 환경설정도 겸하고 있다. 현재 커밋 메시지와 코드 정렬 기준 등을 포함한 내용들이 팀 컨벤션과 일치하도록 유지되고 있다. 개발 환경에서 반복되는 일들을 자동화하고 사람이 하나씩 체크해야 하는 일들을 기술로 자동화하는 것은 팀에 도움이 된다. 설정은 한 번이지만 팀의 수가 늘어나도 설정을 바탕으로 높아진 효율은 유지된다. 또 개발환경 설정을 바탕으로 컨벤션을 자동화하고 코드 품질을 .. 2022. 12. 4. highlight.js를 이용한 실시간 코드 하이라이팅 에디터 만들기 부스트 캠프 그룹 프로젝트로 코드를 작성하고 코드 리뷰를 할 수 있는 플랫폼을 개발하고 있다. 가독성이 중요한 플랫폼인데 하이라이팅이 안 된 코드는 가독성이 좋지 않다. 따라서 코드 하이라이팅을 개발해야 했는데 실제로 모든 언어의 하이라이팅을 분기 처리해서 개발하기에는 일정이 빠듯한 관계로 highlight.js라는 라이브러리를 이용하였다. 이 글은 그 과정에서 겪었던 어려움과 해결 과정, 해결한 코드를 포함한다. 최종 화면 겪은 문제 모든 언어의 하이라이팅이 적용될 범위를 파싱 해서 스타일링하는 것은 어렵다. 현재 개발 중인 서비스는 프로그래밍 언어를 가리지 않고 많은 사용자들이 참가할 수 있게 하기 위해 다양한 종류의 프로그래밍 언어를 지원해야 한다. 필자는 다양한 언어의 의미 있는 토큰 (funct.. 2022. 11. 19. 보안과 사용성을 고려한 JWT 다루기 (React, Express) 이 글은 Web Front End에서 jwt를 다루는 것을 총정리한다. 많은 시행착오를 겪고 풀스택으로 JWT 관련 로직들을 개발한 경험과 실제 오픈 후 사용되고 있는 서비스를 운영해본 경험을 합쳐 2022-11-11의 필자가 생각하고 사용하고 있는 jwt 관리법을 다룬다. 또 이 글에서는 필자가 생각하기에 간단하게 accessToken을 refresh하는 방법을 다루고 바로 복사해서 사용 가능할만한 코드를 포함한다. 제일 먼저 생각해야할 것은 JWT의 역할 세션에 저장하는 방식이 아닌 JWT를 로그인 전략으로 활용한다면 이는 결국 서버에 저장하는 것 없이 클라이언트 사이드에 인증관련 정보를 넘겨버리겠다는 것이다. 이로 인해 서버는 세션에 데이터를 따로 저장하거나 할 필요없이 토큰을 만들어 클라이언트로 .. 2022. 11. 13. React에서 canvas를 다루면서 알아보는 Hooks 리액트에서 캔버스를 다뤄보며 React가 제공하는 hooks들의 동작을 살펴보자. 시나리오 브라우저 크기 조정을 해도 캔버스의 크기는 항상 브라우저에 꽉 차게 맞추어보자. 해당 서비스에 들어오자마자 캔버스에 포커스가 돼 클릭없이 캔버스에서 키보드 이벤트를 사용할 수 있다. useState와 useEffect를 통해 사용자가 열고 있는 브라우저의 너비와 높이를 상태로 관리하자 useState를 통해 window 객체의 innerWidth와 innerHeight를 상태로 관리한다. const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight, }); jsx, tsx의 width, height.. 2022. 10. 23. VanillaJS로 가상돔 구현해보기 (JSX 문법 적용시키기) 가상돔은 무슨 문제를 해결하는가? 가상돔은 렌더링 성능 문제를 해결한다. 가상돔이 어떻게 렌더링 성능 문제를 해결하는 지 함수형 컴포넌트들을 만들어보며 확인해보자. 이번 글에서는 가상돔이 동작하는 환경을 조금 더 간결하게 만들기 위해 JSX문법을 적용시켜 가상돔을 리턴하는 함수를 만들어 사용할 수 있게끔 해보자. JSX가 무엇이고 왜 사용하는가? JSX는 자바스크립트를 확장한 문법이다. 리액트 공식문서에 있는 활용을 살펴보면 const element = Hello, {name}; 이런 식으로 HTML 템플릿을 하나의 값으로 사용할 수 있게 해준다. 사용이유는 문법의 간결함 마크업과 로직을 포함하여 관심사를 분리하기 위함 가상돔을 이용한다면 사실상 객체인 템플릿을 html문법으로 표현할 수 있다. 문법이 .. 2022. 10. 21. 이전 1 2 3 4 5 다음
