불타는 키보드

예시 상황 : 점심 메뉴 투표화면 만들기 부모 컴포넌트 : vote-view 자식 컴포넌트 : 선택지 보여주는 option-selector 결과 보여주는 vote-result-viewer 부모 컴포넌트 : vote-view 백엔드로부터 받아왔다고 가정할 정보 title: "점심 골라줘", opts: [ { id: 1, value: "국밥", votes: 1, }, { id: 2, value: "자장면", votes: 2, }, { id: 3, value: "돈가스", votes: 3, }, { id: 4, value: "햄버거", votes: 4, }, ], 선택지를 렌더링할 option-selector에 위 정보를 넘겨줍시다. 결과를 렌더링할 vote-result-viewer에도 넘겨줍니다. 투표를 했..

프레임워크+라이브러리/Vue 2021. 12. 12. 22:53

(깊게 파고들면 기초라 할 수 있을지 모르겠지만 할튼 사용법으로는 기초에 해당할 수 있는 리스트 렌더링 사용법) 점심 메뉴를 고르기 위한 선택지를 만들어봅시다. 전달받은 메뉴 선택지는 아래와 같습니다. opts: ["국밥", "햄버거", "돈가스", "자장면"] 우선 데이터가 아래와 같이 들어온다고 치고, data() { return { opts: ["국밥", "햄버거", "돈가스", "자장면"], }; }, 컴포넌트 이름은 option-selector 라고 하겠습니다. name: "option-selector" 스크립트 영역은 그럼 이렇게 되겠죠. 이제 컴포넌트의 템플릿을 작성해봅시다. 우선 root 태그 하나 만들어주고,, 이 form-group 이라는 div 태그안에 opts array 정보를 담은..

프레임워크+라이브러리/Vue 2021. 12. 12. 18:32

Jest 테스트코드의 소중함을 절실하게 느끼는 요즘... 그만큼 테스트코드 짜는 일도 많아졌습니다. 테스트코드를 작성하면서 다양한 상황을 마주하는데요, 그중 처음 만났을때 가장 당혹스러운 경우는 바로 import해서 쓰고 있는 함수를 mock하는 법입니다. (그러니까... 테스트하고자 하는 함수가 다른 모듈에서 불러와 사용하고 있는 함수) 거두절미하고 바로 예시를 봅시다. 여기 외부 세계 서버와 소통하는 module.js 파일 내의 getByCallExternalApi 함수가 있습니다. 그리고 myGet.js 파일 내의 get 이라는 함수가 해당 함수를 불러와 사용하고 있는 상황입니다. // module.js const { callExternalApi } = require('./api'); const g..

언어/Javascript + Typescript 2021. 11. 20. 02:50

이 이야기는 개발자들의 소소한 조크에서 시작되었습니다. 그날, 어쩌다 평양냉면 얘기가 나왔는데 그때 한 분이 이런 말을 하셨습니다. 평양냉면 그거 null맛 아니냐? 아시는 분은 아시다시피 null은 개발자스러운 joke에 자주 사용되는 친구입니다. (null 사랑해 등등) 이때도 그냥 "킄킄 그러네요" 하면서 넘어갔는데 순간 머리속에서 이런 생각이 불현듯 떠올랐습니다. 평양냉면 그거 undefined맛 아니냐? 라는 말은 말이 안되는건가? 그래서 알아봅니다. null과 undefined, 그리고 none에 대해. 똑같이 "없는 값"을 나타내는 방식이지만 뭐가 다른걸까요? Undefined undefined는 한마디로 변수 선언만 되어 있고 값이 할당되어 있지 않은 상태입니다. 예를 들어, 보통 이런 경..

언어/Javascript + Typescript 2021. 7. 21. 00:57

목차 1. 이번 주 직면했던 문제 2. 해결 과정 3. 아쉬운 점 1. 이번주 직면했던 문제 자바스크립트가 문제였다. 저번주, 기획을 갈무리 짓고 서버리스 개념을 익히고 나서 이번 주에는 본격적으로 코드를 만지기 시작했습니다. 결론부터 말하자면 비동기 동기에게 얻어맞느라 정신없던 한 주였습니다. 원하는 대로 코드가 돌아가도록 하는 데에도 땀을 뻘뻘 흘리느라, 일단은 뭐라도 실행되도록 하는 것이 이번 주 목표였습니다. (효율성은 미래의 나에게 맡긴다.) 새벽에 거의 울기 일보직전까지 갔던 그 기분... 잊지 모태... 문제 원인 지금 구현중인 기능은 survey 기능입니다. 하나의 survey는 여러 page를 가지고, 하나의 page는 여러 question을 가지고, 하나의 question은 여러 cho..

나의 기록/그냥 글 2021. 5. 23. 18:55