전체 글
주식 적립식 투자앱 만들기 - 11
오늘 끝내고 싶었는데 못했다. 서버문제 때문에 삽질을 오지게함.. 크롤링할 주식 목록이 총 7400개인데 벌쳐에 5달러짜리 서버로 크롤링 돌려놓으면 서버가 뻗는다. 이게 처음에는 안그런데 서서히 올라가서 결국엔 CPU 사용률 100퍼센트를 찍어버린다. 찾아보니깐 파이썬 메모리 가비지컬렉터 문제인거 같은데 del로 변수 삭제도 해보고, 가비지콜렉터 라이브러리 갖다 써보기도 했는데 잘 안되었다. 내가 파이썬에 대해 잘 몰라서 그런듯,, 변수를 참조하는게 있으면 del 키워드로도 메모리 삭제가 안된다는데 이런쪽 문제인것 같긴하다. 아무튼 머리도 아프고 빨리 완성시키고 싶기도 하고 해서 그냥 나눠서 돌려버렸다. 그래서 서버에 초기 데이터를 다 받긴 했다. import os import sys import tim..
주식 적립식 투자앱 만들기 - 10
result 화면 ui를 거의 다 짰다. 그래프 라이브러리에 애니메이션이 없어서 뚝뚝끊어지는 느낌때문에 망했다 싶었는데 스피드 빠르게 설정해놓고 보니 생각보다 나쁘진 않은것 같다. 원래는 flourish.studio/examples/ 여기에서 bar chart race같은 느낌을 원했는데 좀 아쉽다. 직접만들 엄두는 안나고.. 암튼 그래도 이정도면 ui 만족한다. 제법 이쁘다. 서버에선 문제가 생겼다. 주식데이터 크롤링하는데 내 로컬 맥북으로 해도 4~5시간정도 걸리는 좀 긴 작업이다. 이게 5달러짜리 벌쳐에서 돌리니깐 서서히 CPU가 사용률이 오르더니 서버가 뻗는다. 이 크롤링은 시간이 오래걸리는거지 딱히 무거운 작업은 아니었다. 크롤링 하면서 받은 데이터가 프로세스가 종료될때까지 메모리에 남아있는건가..
useRef 사용용도
useRef는 주로 DOM 엘리먼트를 직접 조작하고 싶을 때 사용한다. 그것 외의 사용처는 없는 줄 알았는데 useInterval 게시글 보다가 알게됨. (velog.io/@jakeseo_me/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%8A%A4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C-setInterval-%EC%82%AC%EC%9A%A9-%EC%8B%9C%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90) 훅스에서 ref는 변환가능한 current 프로퍼티를 가지는 순수한 오브젝트를 반환한다. 리액트의 컴포넌트는 리렌더링시에 모든 변수를 삭제하고 다시 생성해서 할당..
주식 적립식 투자앱 만들기 - 9
블로그 닉값을 못해도 너무 못했다. 앱을 만들다 보니깐 그렇게 기능이 재밌는거 같지가 않아서 텐션이 떨어지기도 하고 취업준비가 급하기도 해서 후순위로 미루게 되었다. 근데 또 만들고싶은 앱이 생겨서 이 앱부터 급하게 마무리하려고 한다. 암튼 오늘 목표는 앱 완성하는거였는데 이것밖에 못했다. 비동기에 완전 헤맸고 시간날렸음. 지금 생각하면 도대체 뭐땜에 그렇게 시간을 날려먹은건지 모르겠다. 아무튼 기능은 시간 흐르게 하고, 주가 가져와서 계좌총액, 수익률 구하고 차트에 데이터 주는것까지만 했다. 차트에 변경할때 애니메이션 적용이 안되서 너무 딱딱한게 아쉽다. 이제 ui만 개선하고 최대한 빨리 출시해야지
리액트 Docs - 고급 안내서
ko.reactjs.org/docs/accessibility.html 접근성 – React A JavaScript library for building user interfaces ko.reactjs.org 접근성 - www.wuhcag.com/wcag-checklist/WCGA 체크리스트를 통해 접근성을 갖춘 웹사이트를 만드는데 필요한 지침 확인 코드 분할 - 대부분의 리액트 앱은 Webpack으로 여러 파일을 하나로 병합한 번들 된 파일을 웹 페이지에 포함하여 한번에 전체 앱을 로드한다. - 번들링은 훌륭하지만 앱이 커지면 하나의 번들파일도 커진다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방안은 나누는 것이다. - 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 웹팩에서 지원..
리액트 Docs - 주요개념
ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 문서 다시 찬찬히 보면서 공부하기 주요개념 JSX - JS를 확장한 문법으로 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용함. JS의 모든 기능이 포함되어 있음. - JSX는 React 엘리먼트를 생성한다. - 리액트에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI로직과 연결된다는 사실을 받아들인다. - 리액트는 별도의 파일에 마크업과 로직을 넣어 인위적으로 분리하..
리액트 커스텀 훅
리액트 함수형 컴포넌트로 사용자 정의 훅을 만들 수 있다. 보통 리액트에서 input값을 받을 때 state를 만들고 input이 onChange메서드가 실행될 때 state를 수정할 handle함수도 정의해야하는데 커스텀훅을 활용해서 이 handle함수와 상태값을 묶어준다면 코드가 깔끔해진다. 예시 1) 일반적인 Input에 value와 handle 함수를 엮음 //UseInput.js import { useState } from "react" const useInput = () => { const [value, setValue] = useState("") const handleInput = (e) => setValue(e.target.value) return [value, handleInput] } ..
[번역] 좋은 코딩을 위한 13 가지 간단한 규칙
mingrammer.com/translation-13-simple-rules-for-good-coding/ [번역] 좋은 코딩을 위한 13 가지 간단한 규칙 13 Simple Rules for Good Coding (from my 15 years of experience)를 번역한 글입니다. 나는 15년 이상의 경력을 가진 프로그래머이며 많은 여러 언어, 패러다임, 프레임워크를 사 mingrammer.com
리액트 memo로 리렌더링 관리하기
리액트 컴포넌트의 리렌더링 조건으로는 크게 두가지가 있다. 1) props or state 변경 2) 부모 컴포넌트가 리렌더링 1번의 컴포넌트에서 렌더링해야 할 데이터 값이 변경되었다면 당연히 리렌더링 되어야 하는게 맞지만, 2번의 경우 해당 컴포넌트에선 같은 결과를 렌더링할 때도 리렌더링 해야하는 경우가 생긴다. 클래스 컴포넌트에서는 이를 shouldComponentUpdate()로 설정할 수 있다. 현재 props 또는 state값과 다음에 렌더링해야할 props, state 값을 직접 비교해서 리렌더링 여부를 결정하는 메소드이다. 함수형 컴포넌트에는 React.memo를 사용해서 이를 관리할 수 있다. React.memo(Component, compFunc); 다음과 같이 사용한다. compFunc..
실용적인 프론트엔드 전략 3
출처 meetup.toast.com/posts/180 실용적인 프론트엔드 테스트 전략 (3) : TOAST Meetup 스토리북을 사용해서 시각적 요소에 대한 테스트를 자동화하는 방법에 대해 알아보았다. 기억을 되살리기 위해 우리가 작성하고 있는 할 일 관리 애플리케이션의 실행 단계를 다시 정리해보자. meetup.toast.com 2부에서 스토리북으로 뷰에 해당하는 테스트를 진행했다. 이제 애플리케이션 상태를 관리(조작) 하는 단계를 Cypress를 사용하여 테스트해본다. 통합 테스트(Jest) vs E2E 테스트 (Cypress) 1. Jest는 실제 브라우저가 아닌 JSDom을 이용한 가상의 브라우저 환경에서 실행되기 때문에 제약이 있다. 예를들어, 브라우저의 렌더링 엔진을 사용할 수 없기 때문에 ..