728x90 반응형 Back Side/etc22 [VSCode] 단축키 변경하기 VSCode 똑똑하게 쓰는 방법: 단축키! VSCode는 Top IDE index에서 무려 2위를 달성할 정도로 많은 개발자들이 사용하는 툴입니다. 저도 벌써 1년 이상 사용하고 있는데, 단축키를 생활화 할수록 개발 속도가 빨라져 좋더라고요. 기본적으로 VSCode에서 제공하는 단축키들이 있습니다. VSCode 단축키 확인하기 왼쪽 하단에 있는 톱니바퀴를 누르시거나 단축키를 사용하셔서 Command Palette에 들어가주세요. keyboard shortcuts를 검색하시면 위 캡쳐와 같이 나옵니다. 그중 Open Keyboard Shortcuts를 눌러주세요. 그럼 상당히 많은 단축키를 볼 수 있습니다. 대체로 여러분들이 많이 사용하는 단축키는 미리 입력이 되어져 있을 겁니다. 단축키 수정하기 예를 들.. 2023. 3. 6. [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. [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. [HTML/CSS] 자동으로 조절되는 세로줄 긋기 Start! 프론트엔드 개발자는 아니지만 태그를 이용해서 가로선을 만들 수 있다는 것을 알고 있었다. 개인 프로젝트에서 화면정의서를 만들다가 연출면에서 선을 세우면 좋겠다는 생각을 했다. 물론 피그마로 디자인을 할 때까지만 해도 이 선 세우는게 그렇게 오래걸릴 줄 몰랐다. 시행착오 끝에 세로줄 긋기에 성공한 나의 과정을 시작하도록 하겠다. 혹시 하는 방법만 알고 싶은 사람은 맨 아래 '정리'에 간략하게 정리해두었으니 참고하길 바란다. 예..? 선을 세우라고요? 현재 개인 프로젝트로 만들고 있는 에는 스레드(내용)를 한 번에 볼 수 있는 List가 존재하고 디자인 요소를 넣기 위해 세로선이 필요했다. 처음엔 가로선을 그을 수 있는 태그로 만들 수 있다고 생각했는데.. 아니었다. 찾아보니 현재까지 세로선을 손쉽게 만들 .. 2022. 12. 13. [Babel] TypeScript 코드를 JavaScript로 바꾸기 위해 떠난 여정기 시작은 말이지.. TypeScript로 작성한 코드를 JavaScript로 바꾸고 싶을 때는 어떻게 해야할까? 나의 경우 TypeScript로 작성한 코드를 Parse 해야하는 작업을 해야했다. 하지만 메타성 정보가 아닌 실제 동작하는 코드가 runtime에서는 JavaScript이여야 한다는 피드백을 들었다. 그렇게 TypeScript to JavaScript가 되는 여정이 시작되었다..! 혹시 Babel 구성 조차 하지 않았다면 맨 아래 "+ Babel 구성이 되어 있지 않다면"만 참고하길 바란다. Babel을 사용하자 Jest에서 테스트코드를 돌리기 위해 Babel을 처음 써봤었다. 하지만 아직도 Babel은 나한테 낯선 존재로 코드 바꾸기를 들어갈 때 Babel을 고려하지 못했다. 감이 잡하지 않.. 2022. 11. 18. XML에 대한 모든 것 - 개념, JSON과의 비교 등 XML이란 '데이터 중심 애플리케이션 설계'를 읽던 중 아래와 같은 구절을 만났다. 문서는 보통 JSON, XML로 부호화된 단일 연속 문자열이나 JSON 또는 XML의 이진 변현으로 저장된다. MongoDB를 쓰면서 JSON 형태로 데이터가 저장된다는 것을 알고 있었다. 하지만 XML은 처음 들어보는 단어였다. 그렇다면 XML이라는 것은 무엇일까? Izzy Siamese 6 yes no Izz138bod Colin Wilcox XML 코드를 처음 본 순간 HTML 파일의 태그와 비슷하다고 생각했다. 데이터 정의하는 규칙을 제공하는 마크업 언어이기 때문에 HTML이 생각나는 것은 당연한 것이다. 매우 규칙적이고 예측이 가능한 구조를 가지고 있다는 특징을 가지고 있다. 또한 새로운 태그를 만들어 추가하여 .. 2022. 11. 7. "Edge case를 발견하는데도 도움이 될 수 있다"의 Edge case란? 원티드 프리온보딩 백엔드 챌린지에서 시스템 설계 문제에 대한 접근 법으로 최초 설계안을 제시하기 라는 부분이 있었다. 근데 여기에서 시스템의 구체적 사용 사례를 살펴보면 Edge case를 발견하는데 도움이 된다고 멘토님이 말씀하셨다. 여기에서 Edge case가 무엇인지 몰라 정리하고자 한다. Edge case에 대한 설명을 찾아보니 아래와 같은 설명을 읽었다. 알고리즘이 처리하는 데이터의 값이 알고리즘 특성에 따른 일정한 범위를 넘을 경우 발생하는 문제를 가리킨다. 바로 무슨 말인지 이해가 되지 않았다 😅 좀 더 찾아본 결과 극단적인 버그이지만 해결할 수 있는 상황이라고 이해하게 되었다. 개발자와 기획자는 사용자들이 자신의 설계한 방식대로 서비스를 이용할 것이라 생각한다. 하지만 그것은 매우 위험한 .. 2022. 10. 11. [강의] React 초보자의 완강 후기 - 노마드코더 ReactJS로 영화 웹 서비스 만들기 왜 노마드코더 'ReactJS로 영화 웹 서비스 만들기'를 들었나요? React 공부를 위해 프론트엔드 팀원분께 여쭤보니 공식문서와 이 강의를 추천해주셨습니다. 먼저 공식문서를 봤는데 저와 맞지 않아서 넘어가고 강의를 보기 시작했습니다. 진행률이 56%인데 더 들어야 하는거 아닌가요? 처음 커리큘럼을 보는데 끝도 없이 긴 강의 수에 놀랐습니다. 그만큼 공부할게 많다고 생각했는데 알고보니 2021년에 업데이트를 하셔서 나머지 44%는 업데이트 전 강의였습니다. 딱 7강까지 들으시면 되기 때문에 짧게는 하루만에 넉넉하게는 일주일 잡고 들으시면 좋을 것 같네요. 완강하신 지금 이 강의를 추천하시나요? 네, 추천 드립니다 👍 프론트엔드 개발 공부 로드맵을 만든다면 첫 시작을 이 강의로 할 것 같습니다. 저는 백.. 2022. 8. 18. 이전 1 2 3 다음 728x90 반응형
