공부/TIL

공부/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 = [] // 체크박스값에 ..

공부/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하니 잘 작동한다.

공부/TIL

[TIL] docker-compose 실행 에러 : ERROR: 2 matches found based on name: network <nameofservice>_default is ambiguous

해당 스크립트 실행 후 docker-compose -f "docker-compose.yml" up -d --build 이런 오류가 났다. ERROR: 2 matches found based on name: network _default is ambiguous Docker desktop에서 상태를 보니 Created만 되고 Run은 안되는 상태였다. 구글링해보니 기존 network를 삭제해주면 되는 문제였다. 일단 실행하던 container를 중지하고(docker-compose down) 아래 명령어로 사용하지 않는 네트워크를 삭제했다. docker network prune 그 후 다시 실행해보니 잘 됐다. 참고 https://stackoverflow.com/questions/63776518/error-2..

Ail_
'공부/TIL' 카테고리의 글 목록 (6 Page)