728x90 반응형 분류 전체보기166 [VSCode] 단축키 변경하기 VSCode 똑똑하게 쓰는 방법: 단축키! VSCode는 Top IDE index에서 무려 2위를 달성할 정도로 많은 개발자들이 사용하는 툴입니다. 저도 벌써 1년 이상 사용하고 있는데, 단축키를 생활화 할수록 개발 속도가 빨라져 좋더라고요. 기본적으로 VSCode에서 제공하는 단축키들이 있습니다. VSCode 단축키 확인하기 왼쪽 하단에 있는 톱니바퀴를 누르시거나 단축키를 사용하셔서 Command Palette에 들어가주세요. keyboard shortcuts를 검색하시면 위 캡쳐와 같이 나옵니다. 그중 Open Keyboard Shortcuts를 눌러주세요. 그럼 상당히 많은 단축키를 볼 수 있습니다. 대체로 여러분들이 많이 사용하는 단축키는 미리 입력이 되어져 있을 겁니다. 단축키 수정하기 예를 들.. 2023. 3. 6. 인코딩 된 문자열 생성하기 btoa()는 NodeJS에서 사용 ❌ const encodedData = btoa('Hello, world'); // 문자열 인코딩 const decodedData = atob(encodedData); // 문자열 디코딩 문자열을 인코딩할 일이 있어 이거저거 알아보다가 JavaScript에서 제공해주는 btoa() 함수가 있다는 것을 알게 되었다. 바로 사용해주겠어 하고 NodeJS 로직에 작성해보니 아래와 같이 btoa이 이상하다. 마우스를 올려보니 The signature '(data: string): string' of 'btoa' is deprecated. 라는 메시지가 뜬다. 찾아보니 Node에선 더이상 btoa()와 atob()를 사용하지 않는다고 한다. 그러면 어떻게 해야할까? Buffer.. 2023. 2. 14. 백엔드에서 페이지네이션 하는 방법 2가지 MongoDB or JavaScript 페이지네이션 페이지네이션은 데이터를 컨트롤 방식이 아닌 버튼 형식으로 보여주는 방식을 말한다. 방대한 데이터를 다룬다면 끝없이 내려가는 컨트롤 방식보다는 버튼 형식이 더 낫다고 생각한다. 백엔드 개발자이기 때문에 프론트가 아닌 백엔드에서 데이터 전달 시에 어떻게 페이지네이션 할 수 있는지 알아보도록 하자. 1. MongoDB 메소드 사용하기 가장 간단하면서, 자주 사용하는 방식이 아닐까 생각한다. const page = Number(req.query.page || 1); // 현재페이지 const perPage = Number(req.query.perPage || 10); // 페이지 당 게시글 수 const total = await Post.countDocument({}); // MongoDB 함수 사.. 2023. 2. 10. [MongoDB] 오늘 작성한 글만 나오게 하기 $regex 쓰면 되지 않을까? '오늘 작성한 글만 나오게' 라는 조건을 생각하자마자 MongoDB의 $regex 쿼리가 생각났다. $regex는 MongoDB에서 정규식을 쓰게 해주는 쿼리이고, 정규식은 문자열에 포함된 문자 조합을 찾기 위해 사용되는 패턴이다. const todayDate = new Date(); const getFullYear = todayDate.getFullYear(); const getMonth = todayDate.getMonth(); const getDay = todayDate.getDay(); const findDate = getFullYear + "-" + getMonth + "-" + getDay; const allBusinessData = await Bussiness.. 2023. 2. 8. [React] onClick에 매개변수 넣기 뭐야 누르지도 않았는데 이벤트가 발동하네? 간단하게 onClick하면 '클릭했어!' console.log를 실행하는 함수가 있다. 하지만 위와 같이 (리)로딩되자마자 이벤트가 실행되었다! 이유가 무엇일까? 🤔 매개변수를 잘 전달하자 일반 함수에 매개변수를 넘겨주는 방식인 괄호 안에 매개변수를 넣을 경우 즉각 실행되기 때문에 그랬던 것이다. 그렇다면 어떻게 해야할까? onClick={() => {spanButtonClick(list.data._id);}} 우리는 익명함수로 감싸줘야 한다. 이렇게 할 경우 의도한 대로 버튼을 눌러야지만 이벤트가 실행된다. 2023. 2. 7. [VSCode] Gitmoji Extension 클릭해도 안나오는 오류 방안 Gitmoji는 git을 통해 협업하는데 편리성을 제공해주는 Extension입니다. git commit 맨 앞에 약속된 type의 이모지를 넣어 팀원들에게 commit message를 파악하기 쉽게 만들어주죠. 계속 바뀌는 commit 규칙이지만 Gitmoji는 좋아서 계속 사용하고 있었습니다. VSCode에서 Extension 설치해 쓴다면 commit 바에서 맨 위에 있는 웃고 있는 이모지를 클릭하면 이모지와 이모지들의 설명이 차르륵 나옵니다. 하지만 언제부터인가 클릭이 되지 않아 불편했습니다. 알고보니 1.2.0 버전은 클릭해도 나오지 않는 오류가 있다고 하네요. 버전을 낮춰주면 해결되는 문제이기 때문에 Uninstall을 눌러주시고 Install Another Version을 눌러 v1.2.0 .. 2023. 1. 12. [React] 웹 컴포넌트 스타일링 관리 styled components로 시작하기 고민의 시작 React를 사용할수록 css 코드를 어떻게 하면 똑똑하게 관리할 수 있을지 고민하게 됐다. 기존에 사용하는 방식은 흡사 무지성인 것 같은 Import 방식이다. // App.js import "styles.css"; const App = () => { return( ... ); } Import 방식은 순수 JS로만 프론트를 짤 때 사용하던 방식이다. css 파일을 하나 만들어주고 그 파일을 가져와서 입혀준다. 이 방법으로 아직까지는 단점을 찾지 못했다. 하지만 React로 프론트를 짤 때 좀 더 똑똑한 혹은 편리한 css 관리가 있지 않을까? 프론트엔드 팀원과 고민 공유 프론트엔드 팀원분과 서로 개발 이야기를 하다가 저절로 고민을 공유하게 되었다. 실제 실무에서는 어떻게 관리하는지 궁금하기.. 2023. 1. 6. [CSS] 내가 다시 볼려고 작성한 CSS 모음집 테두리 동그랗게 만들기 border-radius: 10px; 공백처리 속성 태그 줄바꿈 가능하게 만들기 white-space: pre-wrap; 컨테이너 요소 오른쪽 배열 float: right; Link 밑줄 없애기 style={{ 'text-decoration': 'none' }} css 파일에서는 불가능 Link 태그에 직접 입력해야 가능 \n까지 나오게 하기 white-space: pre-wrap; css에 위 코드를 넣어줘야 \n까지 잘 나온다. 2023. 1. 6. 백엔드 개발자라면 아묻따 필독서 - 데이터 중심 애플리케이션 설계 주니어 개발자가 추천하는 개발 도서는?! 현재 10개월된 백엔드 개발자, 벨루가입니다 🐬 1년도 안된 햇병아리지만 언제나 성장하고 싶은 주니어 개발자이기 때문에 최근에는 이거저거 개발 도서를 읽고 있습니다. 그러다가 최근에 백엔드 개발자라면 꼭 읽어보면 좋을 책을 찾아 추천해드리기 위해 왔습니다. 바로 바로 라는 책입니다👍 이미 '신입 백엔드 개발자 9개월 후기'에서 읽고 있다고 말씀드렸는데 어느순간 다 읽어버렸더라고요. 500페이지가 넘는 책이기 때문에 빠르게 읽지는 못했지만 매일 1시간씩 꾸준하게 읽었더니 완독을 할 수 있었습니다. 개발자라면 누구나 한 해 목표로 개발서적 한 권 완독하기를 원하잖아요? 12월이지만 좋은 개발서적을 결국 완독했다는 것이 기분 좋았습니다. 그래서 이 책으로 말 할 것 같.. 2022. 12. 26. 이전 1 ··· 4 5 6 7 8 9 10 ··· 19 다음 728x90 반응형
