JS
[Vanilla Javascript Study] # 3. fetch API로 움짤 검색기 만들기
3주차에는 TodoList로 공부한 내용을 바탕으로, fetch API를 ajax 요청하여 움짤 검색기를 만들어보는 미션을 받았다. [필수 구현사항] SearchInput 컴포넌트: input의 내용이 변경되면 fetch API를 호출하여 데이터를 가져오는 컴포넌트 SearchResult 컴포넌트: 생성 시 파라메터로 data, target 두 개의 파라메터를 받습니다. data: 렌더링에 사용할 데이터 target : html string을 렌더링 할 element의 표현식 (ex: #search-result) function SearchResult (data, target) { .... } 이번에 진행했던 것처럼 해당 컴포넌트는 setState, render 함수를 갖고 있습니다. [추가 구현사항] ..
[Vanilla Javascript Study] # 0. 프롤로그
[개요] 사내 프론트엔드 시니어 분(이하 데이빗, 사내 닉네임)이 바닐라 자바스크립트 스터디원을 모집하셔서 냉큼 신청했다. 자바스크립트를 다루고 싶었던 마음을 좀 해소하고자, 그리고 입사하고 나니까 생각보다 프론트를 다뤄야 할 일이 많아서 도움도 받고자. 데이빗이 유료 스터디를 참고하여 전체적인 틀을 짜셨다고 했고, 서치하다보니 해당 스터디를 발견했는데 유료 스터디보다 약간 간소화된 정도로 정리하신 것 같았다. 깃허브 레포지토리를 파서 소스코드를 공유했고 총 3차 미션으로 진행되었다. [주차별 미션] 기본적인 TodoList 작성 TodoList를 모듈시스템화 하기 Fetch API로 짤방 검색 모듈시스템 만들기 [진행방식] 필수 구현사항과 추가 구현사항을 읽고 참여인원들이 코딩한다. 각자 닉네임을 따서..
[Apache Echarts] Bar race 작동 오류
과제를 진행하면서 Echarts를 사용해보게 되었다. 가로형 바 차트 중 Bar race라는 차트가 멋져보여서 사용해보고 싶었는데 몇가지 오류가 발생했고, 고쳐지지가 않았다. 내가 소스코드를 잘못 사용하는건가 싶어서 Echarts Example 사이트에서도 수정해가며 지켜봤는데.. 음... option = { xAxis: { max: '100', }, yAxis: { type: 'category', data: medDeptNmList, inverse: true, animationDuration: 300, animationDurationUpdate: 300, max: 6 // only the largest max+1 bars will be displayed }, series: [{ realtimeSort:..