분류 전체보기28 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일 1잔디 1년 심은 후기 1년동안 하루 평균 4.6개 하루도 쉬지 않고 잔디를 심었다. 잔디를 연속적으로 심은 계기 개발을 잘하고 싶었다. 그때의 내가 생각한 개발 실력이 느는 방법은 절대적인 양을 투자하는 것이었다. 그래서 매일 조금씩은 코드를 쳐봤던 것 같다. 하지만 나만 아는 꾸준함은 동기부여가 덜 될 것 같았다. 그래서 혹시 내 깃헙을 보실 분들께 꾸준함과 열정을 증명하고 싶었다. 그런 이유로 1년 빼곡하면 멋지지 않을까? 하면서 심기 시작했다. 잔디 심은 후기 잔디는 중요하지 않다. 잔디와 개발실력은 정말 확실히 독립시행이다. 내 잔디 하나가 어떤 의미를 가지냐가 중요함을 요 근래 돼서야 깨닫는다. hello world 출력을 수많은 언어로 만들고 하나씩 커밋하면 백개는 될텐데 그 사람은 개발을 잘할까? 나는 아니라고 .. 2022. 10. 1. 이전 1 2 3 4 5 다음
