혜르미온느

한 3년 전 쯔음에 진행한 프로젝트에서 백엔드 담당자와 대화를 하다가 node js에 대하여 들은 적이 있다. 대충 머리로는 이해하나 대충 입 밖으로 설명할 수 없는 개념이 마침 강의에 나와서 정리해보고자 한다. node.js 란? 처음 node js를 접하고, 무엇인지 알아보고자 공식 홈페이지에 들어갔는데, 홈페이지에서 하는 이야기라곤 Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 라고 하는 어려운 이야기였다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 크롬 V8엔진도 알고, JS 런..

몇 년간 진행했던 프로젝트를 보면 바벨 설정이 필수불가결하게 들어가있다. 그만큼 모든 프로젝트에 꼭 필요한 요소라는 뜻인데, 사실 사용하기는 프로젝트를 진행하는 매일 사용하지만 최초에 설정 이후에는 그 존재를 잊곤 한다. 바벨은 히브리어로 '혼돈'이라는 뜻을 가지고 있는데, 성경 속에서 언급되는 바벨탑도 언어의 혼돈(?) 이야기를 담고 있다. 마찬가지로 바벨도 혼돈된 스크립트 언어(?)의 이야기를 담고 있는, 마침 강의에 언급되어 확실하게 정리해보고자 한다. Babel은 transpiler 중 하나인데, 트랜스파일러란 영어의 뜻에서 알 수 있듯이 변환해주는 것을 의미한다. 컴파일러는 프로그래밍 언어를 기계어로 변환해 주는 것을 의미한다면, 트랜스파일러는 프로그래밍 언어를 같은 언어이지만 다른 문법으로 변..

01. 시작하며 섹션에는 총 3가지의 짧은 인강이 준비되어 있는데, 본 포스팅에서는 그 중 학습 환경 구성에서 특히 번들러 관련 항목을 정리해 볼 예정이다. 원시시대(?)의 인터넷을 보면 서비스가 엄청 크지 않았기 때문에 html에서 직접 를 로드하여도 큰 무리가 없었다.(고 한다.) 하지만 요즘 인터넷 서비스를 봐도 알다시피 서비스가 커지고 다양해짐에 따라 script 코드가 방대해지며, 각 파일들의 의존성과 로드 보장 순서 등이 중요한 화두가 되었다. 이를 해결하기 위해 사용하는 것이 바로 번들러이다. 번들러는 인터넷 서비스를 구성하기 위한 모든 모듈 파일들을 하나 또는 그 이상의 파일로 엮어주어 브라우저에서 코드가 잘 돌아갈 수 있도록 도와주는 소프트웨어이다. 좀 더 상세히 말해보자면 js들을 모아..

강의 선정 이유 예전에 진행하던 프로젝트에 typeScript를 도입하고자 하였는데, typeScript의 장점을 활용하지 못 하고, 모든 타입을 any로 설정하여 프로젝트를 진행한 적이 있다. 이런식의 활용은 typeScript를 사용하는 의미가 없다고 사료되어 한 달정도 만에 거두어내었지만 typeScript를 어떻게 하면 잘 활용할지에 대한 고민이 항상 숙제로 남아있게 되었다. 하여 typeSrcipt에 대한 기초를 배워보고자 강의를 수강하고자 한다. 김민태는 누구인가 요즘 '네카라쿠배'라는 말이 유행한다. 이는 회사를 지칭하는 말인데, 이중에 '배'는 배달의 민족을 담당하고 있다. 배달의 민족은 우아한 형제들에서 진행하는 사업 중 일부인데, 김민태님은 바로 이 우아한 형제들에서 기술 이사직을 맡고..

[!이시중] 2021년 11월 13일 21:30에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/52 에서 확인할 수 있음. git rebase란 말 그대로 re base. 기초를 다시 한다는 의미로 git branch를 merge 하는 개념에서 출발한다. git merge와 branch의 개념이 잡혀있다는 조건 하에 포스팅을 작성해보도록 하겠다- 보통 git 관련하여 검색을 하면, ㅇ-ㅇ-ㅇ식의 커밋 과정을 많이 보여준다. 개인적으로는 그 부분이 참 눈에 들어오지 않는다고 생각했는데, 막상 관련한 포스팅을 하려고 보니 저런 표현이 아니고서는 깔끔하게 설명하기가 참 난감하다. 패드도 포토샵도 없는 내가 좋은 포스팅을 해보고자 손으로 직접 그리며 작성하니 나같이 평소 눈에 들어..

[!이시중] 2021년 11월 20일 11:25에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/60 에서 확인할 수 있음. 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다. 짜릿해. 나를 반성하는 마음으로 또 나와같이 할 때마다 검색을 해보시는 분들을 위하여 정리해보도록 한다. 심지어 이 글은 내가 예전에 만들었던 코드들을 기반으로 작성한다. 과거의 나는 오늘의 내가 다시 헤맬줄은 몰랐겠찌 ㅎ.ㅎ... (사실 진짜 별거 없어서 쓰기 부끄럽..) * 오픈 api를 사용하려면 회원가입을 통하여 각자에게 맞는 발급키를 받아야 한..

[!이시중] 2021년 11월 20일 12:00에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/61 에서 확인할 수 있음. https://hyermione.tistory.com/9 axios를 통한 오픈 API 연결하기 [!이시중] 2021년 11월 20일 11:25에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/60 에서 확인할 수 있음. 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나.. hyermione.tistory.com 상단 포스팅에서 axios를 연결하며, api key는 개인 발급을 받는 것이니 환경 변수를 통하여 관리하라고 언급했었다. 그러면서 관련 포스팅을 연결했는데, 해당 포스팅은..

[!이시중] 2021년 6월 21일 20:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/34 에서 확인할 수 있음. 보통 vue cli를 이용하여 vue를 설치하면 package.json에 라는 설정이 있기 마련이다. 근데 어찌된 일인지 이번에 설치한 버전은 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 이렇게 적혀있는것이 아닌가. (여담으로 맥 진짜 못 쓸 것 같다 ㅠㅠㅠㅠ 캡쳐를 하고 싶은데.... 30분 째 저거 하나 겨우 캡쳐했다...) 아마 웹팩으로 설치된 것 같다. 아무튼 저렇게 설치되어 여태 하던 방식으로 환경변수 파일이 안 먹는것이다 ㅠㅠㅠ 결론은 co..

센트리가 무엇인지 궁금하신 분은 이전 포스팅 먼저 읽고 오시면 훨씬 도움이 됩니다 ^.^ https://hyermione.tistory.com/5 프론트엔드에서 에러 처리하기 - SENTRY [!이시중] 2021년 10월 23일 23:24에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/39 에서 확인할 수 있음. 이직 면접에서 나 스스로가 만족하지 못 한 대답을 하여 아직까지 기억하고 있는 질문 hyermione.tistory.com 이 전에 센트리에 대하여 포스팅을 하였다. 백문이 불여일견. 백번 보는 것보다 한 번 시도를 할 때 더 많이 남는다는 말에 십분 공감하며, 테스트용 리엑트 프로젝트를 하나 생성하였다. 하단에 나오는 모든 정보는 https://sentry.io/..

[!이시중] 2021년 10월 23일 23:24에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/39 에서 확인할 수 있음. 이직 면접에서 나 스스로가 만족하지 못 한 대답을 하여 아직까지 기억하고 있는 질문이 있다. 고객의 에러를 어떻게 수집하는가 당시 소속되어있던 회사는 고객의 소리를 듣지도 못 할 정도로 빡빡하고 빠른 기능의 스케줄을 가지고 있었고, 대다수의 사용자가 내부 직원들이었던 관계로 고객의 소리를 놓치고 있었다. 하여 내가 대답에서 할 수 있었던 말은 ‘‘사용자가 직접 문의를 넣어줍니다.’’ 정도였고, 사용자가 문의를 안 하면 어떻게 처리하는가에 대한 재 질문이 들어왔을 때, ‘‘문의사항이 들어오지 않았으며, QA와 개발자 테스트에서 발견되지 않은 이슈는 안타깝..