Dalin's Archive

요즘 브라우저(크롬)에서 Vim을 사용하고 있는데, 마우스 없이 키보드만으로 검색을 할 수 있어서 정말 편해요~~ 그리고 vs code에서 vim 사용하는 것보다 쉽고요. :) (삭제, 편집 같은 작업은 안하니까 그런 거 같아요 ㅎㅎ ) 크롬에서 익스텐션 vimium을 설치한 후에 사용할 수 있어요~ https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb Vimium The Hacker's Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim. chrome.google.com 자주 쓰는 단축키 🔖 상하좌우..

상황 회사에서 이미지를 입력 받아서, 그 이미지를 화면에 보여주는 작업을 해야 했다. (하나의 이미지만) 전에 토이 프로젝트를 할 때, 프로필 이미지를 바꾸는 작업을 할 때 이미지 입력 받는 걸 했던 생각이 났다. 이미지 입력 받는 것은 아래와 같이 input 을 사용했다. 그런데 preview를 보여주는 건 안해봐서 감이 안왔다.. 다행히 찾아보니 예시 코드들이 있었고, mdn 사이트 - 사용자가 선택한 이미지의 섬네일 보여주기 에서도 친절하게 설명해줬다 ~ 코드와 설명 vue의 template부분(html)에 이미지를 보여줄 div 영역을 만들어 두기. // 이미지 파일을 입력받기. 입력 받으면 changeImage 함수 실행 // class를 이용해서 적절한 style을 주기 //ref previe..

공통점 ⚽️ - 윈도우에 기존 리소스(페이지)를 다른 URL로 바꿔서 보여줌. - 문법 assign(url) replace(url) url에는 이동할 페이지 URL을 적으면 됨. 차이점 🚘 replace assign 현재 페이지가 세션 기록에 저장되지 않음 현재 페이지가 세션 기록에 저장됨 사용자가 뒤로 가기 버튼을 클릭해도, 해당 페이지로 이동할 수 없음 사용자가 뒤로 가기 버튼으로 해당 페이지로 이동 가능함 히스토리 ? - 브라우저의 세션 기록을 조작할 수 있게 해줌. (세션 기록 바로 뒤로 이동, 세션 기록 바로 앞으로 이동, 세션 기록 스택에 특정 데이터, 지정 제목, url를 넣거나 교체하기 등) https://developer.mozilla.org/ko/docs/Web/API/History H..

취준생에게 도메인이 중요한가요? https://velog.io/@yukina1418/%EC%B7%A8%EC%A4%80%EC%83%9D%EC%97%90%EA%B2%8C-%EB%8F%84%EB%A9%94%EC%9D%B8%EC%9D%B4-%EC%A4%91%EC%9A%94%ED%95%9C%EA%B0%80%EC%9A%94 취준생에게 도메인이 중요한가요? 신입은 가능하면 관심있는 도메인으로 가는 편이 좋습니다 (수정함!) velog.io 많이 공감이 되는 글이었다! 몇달 전, 신입으로 취업을 했는데, 처음에 어려웠던 것은 회사에서 쓰는 용어를 이해하는 것이었다!! 회사 도메인, 서비스에서 사용하는 용어들... 그것들을 이해해야만 코딩도 제대로 할 수 있었다. 리더분들도 회사의 비즈니스 로직을 이해하는 게 중요하다..

소개 😎 - Vim 을 학습할 수 있는 게임이다. https://vim-adventures.com/ Learn VIM while playing a game - VIM Adventures VIM Adventures is an online game based on VIM's keyboard shortcuts. It's the "Zelda meets text editing" game. So come have some fun and learn some VIM! vim-adventures.com - 현재 기준으로 25달러이다. 어제 3만 5천원 정도에 구매했다..!! 한번 구매하면 쭉 사용할 수 있는 건 아니고 기한이 있당.. - 단계별로 사용할 수 있는 Vim 명령어를 얻는다. 얻으면 그게 무슨 기능인지 설명해..

Intro 요즘 읽고 있는 책 '실용주의 프로그래머' 3장에는 이런 구절이 나온다. '도구가 손의 연장(Extension)이 된 것이다.' , '도구는 여러분의 재능을 증폭한다 .도구가 더 훌륭하고 여러분이 더 사용법에 능숙해질수록 여러분의 생산성은 더 높아질 것이다.' - 실용주의 프로그래머 중- 내가 사용하는 도구를 더 잘 사용하고 싶다는 생각을 하던 중 드림코딩 유튜브 채널에서 마침 'vim'사용법이 나왔다. 그전까지는 싸피에서 배워서 i (편집 모드 진입), esc(편집 모드 나가기), wq!(저장 후 나가기) 정도만 알고 사용하고 있었다. git 명령어를 입력하다가 종종 vim 모드(?)에 진입하면 사용하는 정도였다. 그런데 유튜브 영상을 봤더니 무궁무진하게 활용할 수 있었고, 평소에 좀 귀찮다..

읽기 전 두 마디 🐼 내가 '함께 자라기(김창준 저)'를 인상 깊게 읽었다고 했더니, 회사 동기 분께서 추천해주셔서 구매했다 :) 무슨 책일까 두근 두근 :) 읽은 후 두 마디 😺 기술적인 내용이 아주 많이 나오지는 않아서, 개발 공부하는 누구나 읽을 수 있을 것 같다 ! 개발자로서 가질 마음가짐, 태도, 철학에 대한 이야기가 많아서 앞으로도 개발자로 살아가는 데 도움이 될 것 같다 :) 인상 깊은 것 😍 * 작은 따옴표 안의 글은 모두 '실용주의 프로그래머 20주년 기념판(데이비드 토머스, 앤드류 헌트 지음)'을 인용했다. - '당신에게는 스스로의 행동을 직접 결정할 수 있는 힘이 있다. ... 기술에 뒤쳐지는 기분이 든다면 여가 시간을 쪼개서 재미있어 보이는 것을 공부하라.' (p3) - 책임에 관해..

상황 😯 회원가입에서 이메일 인증을 할 때, 인증번호 유효 시간을 나타내는 타이머를 구현하고 있었다. 변수에 초를 가지고 있고, 이걸 00:00 형식으로 화면에 보여줘야 했다. 처음에는 (Math.floor(초 / 60) : String(초 % 60) 으로 보여줬다. 그랬더니 거의 잘 되는데, 분이나 초가 '0'일 때 '00' 이 아니라 '0'으로 표시해서 아쉬웠다. 이런 상황에서 자바스크립트의 문자열 길이를 맞추고 싶다면!! 코드 👩‍💻 {String(Math.floor(timer / 60)).padStart(2, '0')}:String(timer % 60).padStart(2, '0')}설명 🦄 자바스크립트 padStart()를 ..

얼마 전 회원가입 기능을 개발했다. 프로젝트하면서 항상 구현했던 기능이라서 쉽게 구현할 수 있을 줄 알았는데 생각보다 오래 걸렸다. 이메일 인증을 한 후에, 비밀번호/ 비밀번호 재입력을 하고, 몇몇 동의사항에 체크한 후에 회원가입하는 기능이었다. 소소하게 고려할 것이 많았다. - api 요청하는 버튼이 클릭된 후에, 응답이 오기 전까지 disabled 처리하기. 스피너 같은 거 보여주기. - 필수 입력 값이 입력되지 않으면, 버튼 disabled 처리하기 - 이메일 인증 후에도 인증번호를 바꿀 수 있게 했는데, 그러면 서버에 바뀐 인증번호를 보내서 문제가 됐다. 이메일 인증 후에는 인증번호를 읽을 수만 있게 하기 - 이메일 인증 후에 이메일이 바뀌면, (인증 되어서 읽기만 가능했던) 인증번호 입력을 할 ..