전체 글

공부/TIL

EChart 차트 영역 별로 각각 배경 색 지정(markArea)

일단 a라는 체크박스, b라는 체크박스 총 체크박스 두개가 있을 때, 해당 체크박스가 체크될 때마다 실행되는 updateChartOptions 라는 함수를 만들었다. 해당 함수에선 ECahrt의 markArea라는 속성을 사용하여, 두 체크박스 모두 체크될 경우, 체크가 해제된 경우 등을 고려하여 값을 넣어준다. updateChartOptions (v) { // echart의 options 업데이트 this.options.series.length = 0 // 리셋 const data = JSON.parse(JSON.stringify(this.chartData)) // 차트에 들어가야 하는 데이터 data.forEach((series) => { const markAreaData = [] // 체크박스값에 ..

노션

노션 팀 회고록 템플릿 배포(KPT 방식)

https://imaginary-methane-447.notion.site/d29d01f18a0b452bb3053a7944e4b346 팀 회고 : 돌아보며 성장하는 시간| 회고, 왜 해야 할까요?imaginary-methane-447.notion.site더보기회고를 맡게 되었는데 오프라인으로 하되, 노션으로 남기고자(회사에서 노션을 쓴다) 회고록을 작성했다. 팀 회고를 제대로 찾아본 건 이번이 처음이라 이틀 걸렸는데, 나름...괜찮은 것 같다(제발)...기왕 만든 김에 복제 허용해 두었다. 내일 회고 예정인데, 회고하게 되면 어느 부분을 수정하면 좋을지 알게 되겠지! 회사에서 노션을 써서 나 또한 개인적으로도 노션을 주로 쓰게 되니까 블로그에 소홀해지게 됐는데 블로그 개편을 좀 고민해봐야겠다ㅎㅎ 한번 썼..

공부/TIL

[Vue, JS] FileReader.onload 순서대로 실행(feat. Promise)

input 태그로 파일 불러올 때, 불러온 파일을 file -> blob -> base64로 변환하여 DB로 넣어주려고 한다. 이때 data에 초기화해둔 item에 변환한 값을 넣어주려고 하는데 문제는 변환한 값이 .onload의 안에 있어 로딩이 끝난 후 실행되어 한발 늦게 실행된다는 것이다. promise.all을 사용해보라는 글을 찾아 아래처럼 짜보았다. // data에서 item 초기화 data: () => ({ item: null }) // ... methods: { fileBlob (value) { this.item = value }, test () { const file = this.$refs.fileUploader.files[0] // 파일 불러오기 const blob = new Blob(..

공부/TIL

[Vue, Bootstrap vue] b-form-select 선택된 object 그대로 가져오기

b-form-select 사용 시 v-model에 연동한 값에 value 값만 들어오는데, text 값도 필요한 상황이었다. 결론은 :options 대신 b-form-select-option을 사용하면 된다. value 값을 options으로 설정해주면 선택한 객체 값이 통째로 넘어간다.(ex. { id: 1, name: 'Mike Macdonald', age: 42 }) {{ option.text }} 원래 option 항목을 연동할 때 아래와 같이 :options를 이용하여 연동했었다. 참고 https://stackoverflow.com/questions/68088853/bootstrap-vue-selecting-the-object-from-a-list-of-objects-b-form-select

공부/TIL

[Tip] VSCode console.log 단축키 등록

여러번 치면 괜히 귀찮을 때가 있는 console.log VSC에 있는 단축키 설정에서 설정해주면 편하다. 설정한 문자 + 엔터키로 원하는 코드를 그대로 붙여넣을 수 있다. 나 같은 경우 c로 설정했다. 설정 방법 1. Visual Studio Code에서 File - Preferences - Configure User Snippets로 들어간다. 2. 검색창에서 원하는 언어를 선택한다. 3. 아래와 같은 파일이 뜨면, 코드를 붙여넣기 한다. { "console.log print": { "prefix": "c", // 사용할 단축키 "body": [ "console.log('$1', $2)" // 단축키를 치면 나올 코드 ], "description": "Log output to console" // 설..

공부/TIL

[TIL] d3.js text input box 삽입

foreignObject를 이용해 html element를 svg 안에 붙일 수 있다. 먼저 붙일 test를 지정하고 const test = d3.select('g') test에 foreignObject를 append로 붙여주면 된다. test.append('foreignObject') .attr('x', node.x) .attr('y', node.y + 21) .attr('width', node.width + 'px') .attr('height', '40px') .html(function (d) { return '' }) 참고 adding input text box on clicking the data labels d3.js

공부/TIL

[TIL] Bootstrap columns grid 커스터마이징(ex. cols="2.5")

Can I give the col-md-1.5 in bootstrap? Can I give the col-md-1.5 in bootstrap? I want to adjust the columns in Twitter Boοtstrap. I know in bootstrap there are 12 columns grid. Is there any way to manipulate the grids to have 1.5 3.5 3.5 3.5 instead of 3 3 3 3? stackoverflow.com cols를 이용한 그리드 방식은 무척 편리하지만, 커스터마이징이 필요할 때가 있다. 구글링 하다 찾은 위의 글에 따르면 2.5 혹은 6.2 식으로 주는 건 불가능하다. 대신 style을 이용해 덮어씌우면 된다...

공부/TIL

[TIL] VSCode Extension : GitLens 설치했는데 작동 안할 때

분명 GitLens를 깔았는데 아무것도 뜨지 않을 때 Git 연동이 잘 되어 있는 지 확인해 볼 필요가 있다. local에서 wsl 환경으로 폴더를 통째로 옮겼더니 GitLens가 작동을 안했다. 이때 해당 repository에서 git fetch하니 잘 작동한다.

Ail_
log