본문 바로가기
반응형
VSC 자동완성 설정하기(feat.개발 효율 높이기) 리액트로 개발하다 보면 반복적으로 작성해야 하는 코드들이 있다. 이런 것들이 쌓이다 보면 은근 귀찮고 스트레스가 누적 되기도 한다. 리액트 코드 스니펫 익스텐션이 있긴 하지만 이걸로는 부족했다. 그렇게 방법을 찾다가 정말 유용한 기능을 발견하게 되었다. 바로 VSC에서 지원하는 사용자 코드 조각 구성(configure user snippets)이다. 이거..정말 좋다. 쓰면서 개발 효율이 정말 높아졌다. 사용자 코드 조각 구성(Configure User Snippets) 사용하기 1. 명령 팔레트 실행(맥기준 shift + cmd + p) 2. 사용자 코드 조각 구성 실행 어느 경우에 사용할까? 이제 본격적으로 사용 해보자. 이 기능의 좋은점은 내 마음대로 코드를 자동화 할 수 있다는 점이다. 나같은 경.. 2022. 2. 18.
5일간 야생에서 더 살아남기(feat.테오의 스프린트 3기) 아무래도 난 야생에서 구르는 걸 좋아하나 보다. 지난 야생에서 살아남기(feat.테오의 스프린트 1기)를 잘 마무리하고 야생의 맛을 봐버려서 또 한번 신청을 하게 되었다. 기획부터 서비스 제작까지 하나의 결과물을 5일만에 만든 과정을 보면서 "오..재밌겠는데? 해볼만 하겠다." "다른 개발자들의 코드가 궁금해.." "와 내가 딱 원하던 거다!" "혼자 공부하기 힘들었는데.." "오 나도 페어 프로그래밍 해보고 싶다" 등.. 이런 생각이 들면 이 글을 읽고 있는 분들도 다음 기수에 한번 도전 해보길 바란다.(🐶힘든데 🐶재밌다..) 첫째 날 - 간단한 소개와 아이디어 결정 1. 자기소개와 나의 역할(People & Roles) 간단한 자기소개와 회사 또는 스프린트 내에서의 본인의 역할을 기술했다. 좀 더 구.. 2022. 2. 17.
Google reCAPTCHA 뱃지 숨기는 방법 구글 리캡차를 적용 시, 뱃지가 표시된다. 생각보다 크기가 크고 화면을 가려서 'invisible' 옵션을 적용해도 마찬가지로 화면을 가리게 된다. 그래도 '약관인데 아예 가려도 되나?'싶어서 검색 해보니 약관 문구를 사용자에게 보이게끔만 하면 문제가 없다는 내용이었다. 약관의 내용은 다음과 같다. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply. 예를 들면 다음과 같이 사용자에게 보이기만 한다면 뱃지를 숨겨도 되고, hidden으로 쉽게 숨길 수 있다. .grecaptcha-badge { visibility: hidden; } ⚠️ 주의! display: none; 사용은 스팸 검사를 .. 2022. 2. 14.
신입 개발자의 에러 해결과 질문에 대해 뿌듯한 마음으로 기능 구현을 마치고 git push를 하는데 갑자기 되질 않았다. 다음과 같은 에러가 났다. error: RPC failed; HTTP 403 curl 22 The requested URL returned... 정말 '갑자기' 되질 않아서 당황 좀 하다가 구글링을 하기 시작했다. 그렇게 2시간을 에러 해결하는 데에 시간을 쏟았다. 깃 캐시 삭제 처음엔 'Everything up-to-date'만 보고 push가 되었는데 저장소에 반영이 되지 않는 것으로 알았다. 전에 한번 폴더명 대소문자 이슈때문에 origin 저장소를 삭제하고 upstream 저장소를 다시 fork 한 후 remote를 해서 막연하게 '깃 캐시와 관련이 있지 않을까?' 생각을 했다. 아래와 같은 명령어로 캐시 삭제를 수.. 2022. 2. 9.
3개월 차 신입 프론트엔드 개발자 회고 2021년 12월 1일. 첫 출근을 했다. 지문 인식을 통해 열리는 회사에 30분 일찍 나와 문을 열지 못해 안절부절 했던 기억, 어색한 인사, 낯선 환경, 입사 동기가 있다는 것에 대한 안도감, 소속감 등 많은 것들이 새롭게 느껴진 하루였다. 그렇게 시간이 쌓이면서 새로운 것들도 적응이 되고 곧잘 회사 생활이 익숙해지기 시작했다. 회사에선 내가 프론트엔드 1호 개발자였다.(입사 동기분은 백엔드였다) 이제 막 프론트와 백엔드를 나누면서 새로운 변화를 맞이하고 있던 중에 내가 처음으로 들어온 것이다. 나는 온라인 스승님 중 한분인 이동욱님의 말마따나 '신입땐 진흙밭에서 굴러보는 게 좋다'라는 생각을 갖고 스타트업에 입사하고 싶었다. 그래서 '1호 개발자'라는 것에 부담이 가거나 거부감이 들진 않았다.(사수.. 2022. 2. 2.
미디어 쿼리에 rem을 꼭 써야 할까? "빈츠! 반응형에 font-size 말고 미디어 쿼리(media queries)에도 rem을 사용하나요?" 분명 장점이 있는데..막상 대답하려니 말이 나오지 않았다. 그러는 사이 또 날아오는 질문 "보통 반응형에 rem, em을 사용하는 게 좋긴 하지만 미디어 쿼리는 디바이스 종류에 따라 일관된 화면을 보여주기 위한 목적이 크다고 생각되는데 뷰포트에 따른 px단위로 설정해주시는게 더 좋지 않을까요?" 맞는 말이다. 그렇다면 px로 쓰는 게 맞긴 한데..나는 왜 미디어 쿼리(media queries)에도 rem을 사용하게 됐을까? rem을 쓰면 무조건 좋은거 아니야? 🤔 이 문제에 대해서 깊게 의문을 품은 적도, 생각 해본적도 없었다. 이번 기회에 확실하게 개념을 잡아야겠단 생각을 했다. 그렇게 서로에 대.. 2022. 2. 1.
Tailwind CSS 사용법, 장점과 단점 개인적으로 tailwindcss에 대해 말하는 사람들이 늘기 시작했고 호기심이 생겼다. 그동안 미루고 미뤘던 개인 프로젝트에 적용 해보았는데 대만족을 했다. CSS를 사용하면서 느꼈던 문제들, 불편한 점들..아래와 같이 고민을 하고 있고 공감이 된다면, 많은 사람들이 tailwindcss를 통해 해결하길 바란다. 기존 CSS의 문제점 명시도(Specificity) MDN에서 설명하는 명시도란 다음과 같다. 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다. CSS 선택자(selector)를 통해 명시도를 증가 시키고 우선순위를 결정한다. 여러 스타일들이 쌓이고, 새로운 스타일을 덮어쓰.. 2022. 1. 18.
반응형

티스토리툴바