공부

공부/TIL

[모두의 네트워크] 네트워크 첫걸음, 네트워크의 기본 규칙

이번주부터 모두의 네트워크(미즈구치 카츠야) 책을 통해 네트워크 기초부터 공부해보려고 한다. 그동안 대충 어림짐작으로 알고있던 지식들과 알음알음 기억하던 정보들을 다시 되새기면서 제대로 남겨봐야겠다. Chapter 1. 네트워크 첫걸음 목표 - 네트워크가 무엇인지 이해한다. - 패킷을 이해한다. - 랜(LAN)과 왠(WAN)에 대해 이해한다. 01. 네트워크의 구조 1. (컴퓨터) 네트워크 - 컴퓨터가 두 대 이상 연결되어 있는 상태 - 컴퓨터 간에 필요한 데이터(정보)를 서로 주고받을 수 있음 ex. 데이터(파일) 전송, 웹 사이트 열람, 메일 송·수신 등 2. 인터넷 - 전 세계의 큰 네트워크부터 작은 네트워크까지를 연결하는 거대한 네트워크 - 인터넷으로 해외 웹 사이트도 볼 수 있는 이유가 바로 전..

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

공부/Just do it

노션 팀 회고록 템플릿 배포(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을 이용해 덮어씌우면 된다...

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