결과물 완성된 웹 사이트가 사용되는 모습이다. 제공하는 기능은 단순하다. 국내 상장사를 검색하면 그 기업과 관련된 정보를 화면에 불러온다. 전자공시시스템(DART)에서 제공하는 오픈 API를 통해 상장사의 정보를 받아온다. 사업보고서를 제출하는 국내 모든 기업 정보를 커버한다. DART의 데이터를 기반으로 검색어 자동 완성도 제공한다. 최대주주 현황과 재무현황 부문에서는 동적인 그래프를 확인할 수 있다. 추가로 표도 넣었다. 개발기간은 40일 정도고 하루 평균 2~3시간쯤 개발한 거 같다. 투입 시간 대비 큰 결과는 아니지만 개발 경험 제로에서 만든 첫 번째 프로젝트 도전 결과이기 때문에 스스로는 만족하고 있다. 솔직히 코딩하는 시간보다 모르는 거 찾고 그거 적용해보고 안 되면(열에 아홉은 안됨) 왜 안..
프로젝트를 진행하면서 매번 모르는 문제와 맞닥뜨리고 있다. 그래도 이번 건은 해결하고 성취가 유독 컸다. 우선은 거의 일주일 가까이 풀지 못했던 문제이기 때문이고(물론 다른 일 때문에 프로젝트에 손 못 덴 탓도 있었음). 또 단순히 완전한 형태의 방법을 검색으로 찾아낸 게 아니라, 알고 있는 지식을 기반으로 논리적인 추론을 했고 결론적으로 얼추 맞아떨어졌기 때문이다. 기쁜 마음에 포스팅도 했다. 지금까지는 검색창에 기업고유번호, 예를 들어 삼성전자면 00126380을 검색해야 데이터를 출력할 수 있었는데, 이젠 그냥 삼성전자라고 검색해도 출력된다. 점차 실용적인 기능이 더해지고 있다. 다음으로는 반응형 자동완성 기능을 추가할 계획이다. 검색창에 '삼성'까지만 쳐도 아래로 '삼성전자' '삼성전기' 같은 추..
일차적으로, 목표했던 데이터의 시각화는 모두 구현했다. 최대주주현황(pie), 재무상태표(treemap), 실적추이(bar). 막상 써놓고 보니 별거 없다. 그래도 맨땅에 하다 보니 꽤 고단했다.ㅎㅎ 실적 추이 차트를 구현하고 달콤한 상상을 했다. 프로젝트를 완성하고 주위 사람들에게 자랑하는 상상이다. "자, 내가 만든 사이트야. 이거 봐봐 검색도 돼. 그래프도 나오고 항목 제거할 수도 있어. 대박이지." 아직 구현 안 된 기능들이 남아있지만 할 수 있을 거라 믿는다. 언제나 문제는 시간일 뿐이다. 하루키의 말처럼, 리듬을 단절하지 않고 계속하면 그 뒤는 어떻게든 풀려 나간다. 자아도취는 여기까지하고, 오늘은 char.js의 combo bar 차트를 구현하며 '주먹구구'로도 개발은 가능하다는 걸 느꼈다...
jscharting 라이브러리를 이용한 재무상태표 시각화에 성공했다. 파라미터에 변수를 넣을 때 오류가 발생하는 문제를 해결했다. 이유는 예상했던 대로 데이터 타입이 다르기 때문이었다. Number 타입을 넣어줘야 하는 자리에 String 타입을 넣어주고 있었다. 문제가 발생했을 때 검색하기 전에 잠시라도 곰곰이 생각해보는 게 효과가 있는 거 같다. 왜 안될까. 이것도 문제 없고 저것도 문제없고. 이것과 비슷한 패턴인 위 코드에서는 됐는데. 하는 식으로 말이다. console.log를 찍어보는 것도 효과가 있었다. 여기까지는 코드가 잘 먹는데, 이 뒤부터는 안되네. 이런 식으로 하나씩 찍어보니 정답에 가까워졌다. 시각화 코드를 구현하기 시작한 뒤로는 라이브러리가 무엇인지 조금씩 깨닫고 있다. 맨땅에 해야..
재무상태표를 시각화할 때 네모 형태의 시각물을 구현하는데 애를 먹고 있다. 그냥 이런 간단한 모양을 원했다. 마우스를 올리면 해당 영역의 값이 표시되는 형태로. 쉬워 보였는데 은근 사용 빈도가 낮은 차트인지, chart.js에서 샘플을 찾을 수 없었다. 열심히 찾다보니 이와 비슷한 형태를 treemap이라고 부르고 있었다. 위 사진 같은 형태다. jscharting이라는 사이트에서 찾았다. CDN 추가하고 샘플처럼 코딩하면 잘 구현되긴 한다. 그러나 문제는 이전에 파이 차트를 구현할 때와 마찬가지로 파라미터 자리에 변수 값을 넣는 일이다. var chart = JSC.chart('chartDiv', { debug: true, type: 'treemap cushion', title_label_text: '..
화면에 차트를 만들어 냈다. 앞서 해결하지 못했던 for 문 활용은 다시 보니 생각보다 어렵지 않았다. 변수에 배열을 담아 선언하고 for문으로 인덱스가 증가할 때마다 push 메서드로 값을 추가해준 뒤 for문을 빠져나가 완성된 배열을 사용하니 문제없이 작동했다. 어쩌면 많은 코딩이 이미 내가 알고 있지만 생각해내지 못하는 것일 뿐일지도 모르겠다. 화면에 출력된 삼성전자의 올해 1분기 말 기준 주식 보유 현황이다. 동적인 파이 차트다. 이름을 클릭하면 차트에서 사라지거나 다시 나타난다. 그러나 문제가 있다. 중복되는 이름이 있다. 왜 인가 봤더니 보통주와 우선주를 모두 표시하기 때문이다. 고 이건희 회장은 보통주 4.18%와 우선주 0.08% 가지고 있다. 이렇게 쓰면 하나의 파이 차트에 중복이 발생하..
단순해 보이는 문제도 비틀면 어려워진다. 지금 그렇다. chart.js라는 차트 구현 라이브러리 사용을 시도하고 있는데 맘처럼 되지 않는다. 처음 사용해보는 라이브러리다 보니 예시를 보면서 따라 하고 있는데 예시의 경우 확정된 정보를 코딩하는 방식으로 간단하게 나와 있다. 만약 이와 비슷하게 사용한다면 그냥 같은 틀에서 데이터만 바꿔주면 될 것이다. 그러나 나의 경우 검색 결과에 따라 값을 받아오고, 그 값을 변수의 형태로 넣어줘야 한다. for문을 어떻게 사용할 것인가에 대한 문제를 해결해야 하는 거 같다. 쉽사리 풀리지 않는다. 될듯 말듯 하면서도 안되고 이써 힘이 빠지는 동시에 역량에 대한 한계도 느껴진다. for문 배웠는데 이 정도도 못써먹니..? 이번처럼 문제 해결 방법에 대한 대략적인 아이디어..
종목 고유번호를 검색시 화면에 배당에 관한 사항, 최대주주 현황이 나타나게 만들었다. 앞서 기업개요를 출력한 것과 크게 다르지 않은 방법으로 코드를 추가했을 뿐인데 사뭇 느낌이 다른 거 같기도 하다. 특히 최대주주 현황은 반복문으로 배열에 포함된 모든 주요 주주를 출력했는데 어쩐지 그럴싸하게 느껴졌다. 마치 내가 개발을 하고 있구나..!라고 아주 잠시나마 느꼈다. 나 스스로라도 칭찬해 줘야지..ㅋㅋ 이제 가장 중요하다고 볼 수 있는 재무제표 관련 데이터를 추출하면 제공할 데이터 호출은 얼추 마무리된다. 그다음에 할 건 시각화 작업이다. 데이터를 그래프와 표 등으로 표현해야 한다. 현재 짜 놓은 코드에서 가능할지 좀 걱정이다. 현재로선 임시방편으로 화면에 출력을 해보기 위해 짜 놓은 코드 같은 느낌이 들어..
개발 속도가 정말 정말 더디게 느껴진다. 별것 아닌 거 같아 보이는 부분에서도 많은 시간을 잡아먹는다. 자주 방향을 잃고 헤맨다. 해결해야 할 가장 중요한 문제는 외면하고 싶어지고 눈앞에 보이는 쉬운 일에 눈길이 간다. 그만큼 내가 개발에 대해 많은 것들이 익숙지 않다는 의미일 것이다. 겸손한 마음이 드는 한편 압도되는 느낌도 스멀스멀 온다. 수월해 보였던 일도 이렇게 어려운데 앞으로 내가 과연 해낼 수 있을까. 같은 생각들과 함께. 그래도 포기하지 않는다. 존버는 승리하기 때문에ㅎ. 속도는 더디지만 하루하루 지식은 쌓여가고 있다는 걸 느끼고 있다. 매일 저녁 막막한 기분으로 개발을 시작한다. 그러다 한 두 시간이 지나는 시점엔 조금은 알 것 같은 기분이 든다. 그리고 또 모르겠고를 반복. 졸린 눈을 비..
jQuery를 통해 DART의 오픈 API를 호출하고 데이터를 가져오는 것까지는 완료했다. 검색창에 기업의 고유번호를 입력하고 '검색' 버튼을 클릭하는 이벤트가 발생하면 검색창의 value(고유번호)에 해당하는 데이터를 가져온다. 나는 이 방식에서 form 태그를 사용하지 않고 button 태그를 자바스크립트와 연동하는 방법으로 코딩했는데, 올바른 것인지는 추후 확인이 필요할 거 같다. 해결할 문제가 있다. 검색어에 종목 이름이나 종목코드가 아닌 DART에 등록되어있는 공시대상회사의 고유번호를 입력해야 하기 때문이다. OPEN DART는 고유번호와 회사명, 종목코드, 최근 변경일자 등 정보를 담은 xml 파일을 따로 제공한다. 이 파일 역시 API로 호출해야 한다. 어찌해야 할지 몰라 찾던 중 파이썬으로..