오물오물 개발일기

원문: A Proposal For Type Syntax in JavaScript A Proposal For Type Syntax in JavaScript Today we’re excited to announce our support and collaboration on a new Stage 0 proposal to bring optional and erasable type syntax to JavaScript. Because this new syntax wouldn’t change how surrounding code runs, it would effectively act as comments. W devblogs.microsoft.com TypeScript를 만든 MS가 타입 구문을 JavaScript..

😇 CSS Never... 개발자들의 고민은 가지각색이겠지만 대부분의 고민은 이름 짓기가 가장 고민이 크다. 변수, 함수명, 클래스명 등등.. 프론트엔드 입장에선 CSS를 작업해야 하는 경우 CSS 클래스명에 대한 고민도 크다. CSS 클래스명을 소홀히 하게되면 하나의 엘레멘트를 수정하게 되었을 때 사이드 이펙트로 다른 엘레멘트도 의도치 않게 수정하게 된다. 때문에 대안으로 나왔던 방법들이 BEM, OOCSS, SMACSS 같은 CSS 방법론들이다. 하지만 이러한 방법론들을 쓰더라도 클래스명을 짓는 데에 대한 시간적 고민은 해소되지는 않는다. 최근 작업하면서도 팀 내엔 프론트엔드는 2명밖에 없는데 작업량은 너무 많았다. 시간적 여유가 없는 입장에서 손꼽은 건 기능 개발과 별개로 CSS작업을 하는 시간이 ..

😠 불편해! 작업 시 새로운 .vue 파일을 만들 때 init snippets이 항상 불만이었습니다. Vetur에서 제공되는 기본 snippet의 경우 아래와 같은 기본 템플릿밖에 없었습니다. 하지만 저는 scss를 이용하여 scoped 옵션을 사용하였기 때문에 직접 추가해줘야 했는데 이게 너무 귀찮았습니다. 그래서 만들어 보았다! Custom Snippets ~ 🔨 (만드는 게 재밌잖아요?) 📒 Snippets 작성하기 Custom Snippets 작성은 너무나도 쉽습니다. vue.json에 들어오셨다면 이제 원하는 snippets을 작성합니다. { "snippets 이름": { "prefix": "snippets 실행 트리거", "body": [ // snippets 실행시 원하는 template 작..

👏 컴포넌트 분리하기 컴포넌트 분리하기에 앞서 Vue는 Vue의 Template문법 + HTML, React는 JSX 문법으로 UI를 작성하게 됩니다. 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다! 1. 상태 관리(state) 상태 관리를 위한 state를 선언하겠습니다. React에서는 React Hooks에서 제공하는 useRef, useState를 이용하여 state들을 관리합니다. React 인풋의 값을 참조하기 위해 useRef()를 이용하여 Input에 ref={inputRef}를 선언합니다. 또 인풋 값을 바인딩하..

👋 2021년의 끝이 다가오고 있다! 2021년은 나에게 뜻깊은 해가 되었다. 개발자로서의 길을 걷기 시작한 해인만큼 지금까지의 일들을 돌이켜 생각해보고 개발자를 시작한 지 얼마 안 된 지금 시점에서의 감정과 생각들 미래엔 어떤 모습으로 성장했을지 알기 위해 회고를 작성한다. 👏 🤔 나는 어떻게 개발자가 되었을까? 작년 초 개발자와는 다른 인생을 살아오던 나에게 인생의 전환점을 맞이하고 있는 시기가 있었다. 서울의 생활을 접고 다시 고향으로 내려가서 살아야 하나 하는 고민을 하던 찰나에 지인에게 "너 개발자 해볼래?"라는 추천을 받았었다. 당시엔 지금처럼 개발자 붐이 일어나고 있는 시기가 아니긴 했지만 단순하게 HTML, CSS를 체험해보니 너무 재밌었다. 3D 프린터에서 만졌던 코딩, 아두이노나 전기과..