오물오물 개발일기

😥 급변하는 프론트엔드 환경 웹 개발에 있어서 프론트엔드의 급변하는 환경을 대부분은 모던 Javascript(ECMA2015)이후 부터 시작되었다고 대부분은 알고있지만 정확히는 ECMA2015부터가 아닌 그 이전부터 있었습니다. 바로 Node.js, npm을 통해 이루어지는 환경에서 시작되었습니다. 웹앱의 규모가 굉장히 커져감에 따라 더욱더 급변하고 복잡해집니다. 소프트웨어 하나를 만든다는 가정을 하면 규모가 어느정도일까요? 규모가 큰 웹앱은 수백만 수천만 라인의 코드가 될 수도 있습니다. 이코드들이 또 하나의 파일로는 작업할 수 없기때문에 수십, 수백개 이상의 파일이 하나의 어플리케이션을 위한 규모입니다. 하지만 이것들이 왜 프로젝트 구성을 복잡하게하는 원인이 되었을까요? 👍 스펙의 필요성 Javasc..

😱 벌써 끝이라고? 이맘때쯤 1년 차 회고를 작성했었는데 벌써 1년이라는 시간이 더 흘렀다. 많은 작업을 했고 많은 일들이 있었고 많은 고민들이 있었으며 많은 인연들이 있었다. 아직 정리되지 않은 이 기분으로 한 해를 마무리해야 한다니.. 아쉽기도 하지만 더 나은 미래를 위해 어김없이 2022년 회고를 작성한다. 😳 열심히 했다!! @baegofda's 2022 GitHub Skyline Please rotate your device Visit in desktop for the best experience. skyline.github.com 🌔 변화의 시작 올해는 이사로 시작하였다. 하지만 이사를 진행해야 하는 주에 다리에 화상을 입어서 힘들었던 기억이 난다. (한동안 정말 지옥 같았다.) 이사와 함께 ..

국내 여러 개발팀들의 문화를 점수로 따져본다면 순위가 어떻게 될까요!? 코딩 테스트 인터뷰 자율적 개인 개발 장비 선택 자율적 팀 개발 환경 선택 소스 코드 리뷰 및 테스트 개발자 기여 로드맵/백로그 지속적 통합 및 배포 (CI/CD) 내부 소스 레포지터리 공유 API를 기반한 연동 및 소통 기술을 이해하는 팀장/매니저 개발자 레벨 혹은 경력 관리 참여형 지식 공유 플랫폼 개발자 관계(DevRel) 활동 위의 모든 사항이 해당 안된다. - (13일의 금요일..) 등의 총 13가지 질문을 가지고 설문 조사를 실시하였고 총 415명의 개발자가 참여하였습니다. 이에 따라 해당 하는 항목에 1점씩 점수를 매겨서 통계를 냈다고 하네요. 설문조사 결과 상위권으로는 12점 – 카카오, 라인플러스, 우아한형제들, 컴투..

스택오버플로우에서 2022 개발자 설문조사 통계가 나왔습니다. 전문 개발자와 개발을 배우는 사람들이 가장 많이 사용하는 Web Framework는 Node.js, React.js가 공통으로 압도적입니다. ASP.NET Core과 ASP.NET은 전문 개발자는 높으나 개발을 배우는 사람들 쪽에서는 순위가 낮아지네요.😅 언어 중 Loved & Dreaded 순위 중 1위는 Rust이며 약 87%의 개발자들이 계속 사용하고 싶다고 합니다. (최근 리눅스 커널에도 머지가 될 예정이라고 하는..) 배우고 싶은 언어에서는 Rust가 1위 그 밑으로 파이썬과 타입스크립트가 근소한 차이로 2위 3위를 하고 있습니다. IDE 의 Loved & Dreaded IDE 순위 중 1위는 NeoVim 2위는 VSCode 입니다...

😇 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 프린터에서 만졌던 코딩, 아두이노나 전기과..

👏 컴포넌트 분리하기 컴포넌트 분리하기에 앞서 Vue는 Vue의 Template문법 + HTML, React는 JSX 문법으로 UI를 작성하게 됩니다. 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다! 1. 컴포넌트 분리하기 (Button) 가장 기본적이면서도 중요한 컴포넌트를 먼저 분리해보도록 하겠습니다. 먼저 버튼(Button) 컴포넌트를 분리합니다. React // Button.jsx import React from "react"; import styled from "styled-components"; const Button..

👏 컴포넌트 사용하기 ! 먼저 import와 state선언을 알아보겠습니다. 해당 예제는 Vue : https://github.com/baegofda/blog-vue React: https://github.com/baegofda/blog-react 위의 주소에서 데모와 함께 소스코드 확인이 가능합니다 ! 1. import 먼저 전체 컨테이너가 될 Todos라는 페이지 컴포넌트를 임포트하는 방법입니다. React React 프로젝트의 App.js에 import는 아래와 같이 파일 상단에 import를 합니다. // App.js import Todos from "./pages/Todos"; function App() { return ; } export default App; Vue Vue 프로젝트의 App...