🐞 이슈 특정 사이트를 크롤링한 텍스트 데이터를 화면에 뿌려주면서 맞닥드린 이슈...\n으로 줄바꿈 표시도 된 데이터라 몇개만 확인하고 아무 이상 없겠거니 했는데 웬걸 특수문자로 표를 만드는 데이터가 있었다. 예를들면 아래와 같은 경우이다.┌─────────────┐│네모박스 ││네모박스 ││네모박스 │└─────────────┘  그런데 이 데이터를 콘솔에 찍어보면 너무나 예쁘게 네모 반듯한 모양으로 찍히는 것이 아닌가...!?그때서야 폰트의 문제라는걸 깨달았다.    현재 프로젝트는 공통 폰트로 프리텐다드를 사용하고 있었고 당연히 해당 컨텐츠 영역도 프리텐다드로 되어있는데프리텐다드 폰트는 문자마다 폭이 다른 ..

실무에서 localStorage나 sessionStorage 또는 쿠키를 사용하는 경우가 종종 있는데 검색기록 저장이 그 대표적인 예시이다. 보통은 5개 정도되는 단어만 저장할 공간이 필요하기 때문에 굳이 비용을 들여 DB나 API를 만들지 않고 프론트단에서 구현하는 경우가 많다고 한다. 요구사항 첫번째, 검색어는 최대 5개까지 저장한다. 두번째, 같은 검색어가 있을 경우 갱신 후 저장한다. 세번째, 부분 삭제 및 전체 삭제가 가능하다. 이중 세번째는 삭제는 따로 포스팅하는걸로 하고 이번 포스팅에서는 첫번째와 두번째만 정리해보려고 한다. 전체코드 codepen에서 간단하게(?)바로 적용해보기 위해 바닐라 자바스크립트로 짰다. 바닐라기 때문에 본인이 사용하는 프레임워크(vue, react, svelte 등..

쉽게 시작하는 타입스크립트 장기효(캡틴판교) 일하다가 막힐때는 항상 구글 검색을 통해 해결하는데 그럴때마다 종종 마주치는 익숙한 닉네임 캡틴판교! 이번에 회사에서 새로 진행한 프로젝트가 규모가 조금 작아서 이번 기회에 타입스크립트를 공부해보겠다고 무턱대고 타입스크립트로 세팅을 해버렸다. 프로젝트는 어찌어찌 잘 마무리되긴했지만 주먹구구식으로 적용했던 기능이나 문법이 많아 언제고 한번은 관련 교재(?)를 정독해봐야지 싶었는데 그게 이렇게 금방 오게 될 줄이야! 얼굴 한번 뵌적 없지만 너무나도 익숙한 캡틴판교님의 책이라 더욱 기대가 됐다 객체의 속성에 접근하는 방법은 salary['junior'] 또는 salary.junior 모두 가능합니다. 다만 속성 이름에 숫자나 - 등 특수 기호가 들어가면 .jonio..

프로젝트 이슈관리를 노션으로 하면서 사내에서 노션 활용도가 높아졌다. 그러던중에 서비스를 개편하면서 이용약관을 조금 수정했는데 현재 우리 서비스의 이용약관의 경우 순수한 텍스트로 하드코딩이 되어있어서 오탈자라던가 어미를 살짝 변경하면서 수정사항이 생기면 그게 참 간단한데 꽤나 번거롭다. 기획 과장님께서 노션페이지를 바로 보여줄 수도 있지 않겠느냐는 의견을 주셨고 찾아보니 이용약관 같은 간단한 화면의 경우 노션 개발자계정이라던가 직접적인 노션api 호출 없이도 vue-notion 이라는 라이브러리를 통해서 간단하게 사용할 수 있었다. 실행 환경 window10 node v16.17.0 vite + vue3 typescript 참고로 vue-notion은 비공식 플러그인이긴 하지만 깃허브 스타 776개를 받..

프론트엔드 작업할때 종종 쓰는 줄바꿈. 보통은 통일된 디자인을 위해 한줄 줄바꿈을 많이 쓰지만 가끔 여러줄 줄바꿈을 쓰는 경우도 있다. 그럴때 복붙해서 사용하려고 나를 위해 정리하는 글...ㅋㅋㅋㅋㅋㅋㅋ 한 줄 줄바꿈 .text-ellipsis{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 여러 줄 줄바꿈 /* 3줄 줄바꿈 */ .text-ellipsis--3{ text-overflow:ellipsis; overflow:hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } 예시는..

얼마전에 홈페이지에서 제공하는 서비스에 공유하기 기능을 추가하게 됐는데 간단하다고 생각했던 기능에 의외로 예외가 있어 짧게 정리해보려고 한다. 단순히 주소 복사를하는 기능으로 clipboard를 사용하는데 이게 안먹히는 브라우저가 있던것이다..! 아니 근데 몰랐던것도 당연한게 인앱브라우저까지 어떻게 다 생각해ㅠ 후하.. 그게 카톡이라면 모르면 안되긴하지...ㅠ Anyway. 이에 대해서는 하단에서 설명하는 것으로 하고 일단 현재 보고있는 화면의 url을 복사하는 기능은 아래와같이 구현했다. navigator.clipboard copyCurrentUrl(){ const currentUrl = window.location.href; navigator.clipboard.writeText(currentUrl)...

글을 시작하기에 앞서 @font-face를 설정하려면 웹폰트를 사용하는 것보다 폰트 파일 자체를 프로젝트 내부에 assets으로 저장해서 사용하는 것을 권장한다고 한다. 이와 관련해서 사실 정확한 이유는 잘 모르겠다. 혹시 아시는 분 댓글좀..... 프론트 엔드로 직무 전환을 한 뒤 다양한 프로젝트에 참여해볼 수 있었는데 그중 진짜(!?) 웹 디자이너와 함께 했던 프로젝트는 대부분 폰트가 두가지로 나뉘었다. - 기본폰트 Noto Sans KR - 숫자폰트 Roboto 사실 처음에는 기본폰트를 Noto Sans로 설정해두고 숫자 타입이 들어가는 요소들만 Roboto를 설정했는데 사실 only 숫자만 들어가는 요소보다는 주로 'XX개', 'XX,000원', 'XX명' 등 한글과 섞이는 경우가 많고 그렇다고 ..

최근에 노마드코더 강의를 들으면서 비쥬얼 스튜디오코드로 작업을 하는데 니꼴라스가 커서를 놓는 페이지에 바로 옆에 주석처럼 옅은 글씨로 누가 언제 어떤 커밋을 했는지 뜨는걸 보고 나도 찾아서 설정해야 겠다 싶었다. 이거닷!!! 이런식으로 내가 편집중이면 마지막으로 언제 편집을 했는지 커밋했으면 어떤 메시지로 커밋을 했는지가 소스트리를 뒤지지 않아도 해당 페이지에 커서만 갖다 놓아도 알수있어서 협업할때 유용해보였다. 이건 누가했지??? 역추적 가능ㅋㅋㅋㅋㅋ 과거의 나일 수 있음 주의ㅋㅋㅋㅋ 과거의 나래기 무슨 짓을 한거냐 흑역사 들추기(뚀륵ㅠ) GitLens 비쥬얼스튜디오코드 vsCode에서 깃 추적을 바로바로 가능하게 해주는 확장extension 프로그램이다. GitLens Release Notes - G..

최근에 이직을했는데 이직한 회사의 개발팀 차장님께서 코딩용 폰트를 추천해주셔서 비쥬얼 스튜디오코드 vsCode의 폰트 설정을 변경했다. 사실 vscode의 기본 폰트로 코딩을 할때도 크게 불편함을 느끼지는 못하긴했다. 비쥬얼스튜디오코드야 워낙 확장 프로그램이 잘 되어있기때문에 뭐랄까... 글씨를 보면서 코딩한다기보단 깔맞춤을 보고 코딩한달까ㅋㅋㅋ 그런데 역시 선배님들이 추천해주는데는 다 그만한 이유가 있다 차장님이 추천해준 D2coding 폰트는 네이버에서 만든 폰트로 고딕체에 살짝 위아래로 길이가 길어서 영어도 영어지만 한글보기에도 편한 것 같다. D2Coding font 폰트 다운로드 D2coding 폰트 다운로드는 아래 네이버 깃허브에서 2022년 10월 현재 가장 최신버전인 1.3.2버전 zip파..

새프로젝트를 시작하면서 여러명의 프론트엔드 개발자들이 동시에 다른 페이지들을 작업하게됐는데 통일성 있고 효율적인 작업을 위해 루트 스타일root style을 정해놓고 시작하기로 했다. root style은 보통 웹사이트, 앱 프로젝트의 테마컬러를 주로 지정해놓고 사용하는 것 같은데 컬러뿐만아니라 자주 사용하는 스타일을 변수처럼 지정해놓고 사용할 수 있기때문에 잘 익혀두면 협업뿐만아니라 프론트엔드 작업하기에 전반적으로 정말 편할 것 같다. 참고로 구글도 개발자모드로 스타일을 확인해보면 아래와같이 테마컬러를 지정해서 사용하고 있다. 전체 페이지에 공통으로 적용해야하니 루트 요소에 적용을 해주는데 위의 구글 코드처럼 html에 적용해도 되고 :root 라는 의사 클래스를 사용해 적용할수도 있다. 사용법은 간단..