본문 바로가기

분류 전체보기

 (108)
ReactJs에서 addEventListener 사용하기 INDEX Stack #ReactJs, #useEffect, #addEventListener Preview 보통 리액트에서는 토글 기능이나 Toast, window 와 같은 status가 'ON', 'OFF' 인 컴포넌트를 구현할 때 useState를 사용합니다. 만약 아래와 같은 상황에서 어떻게 구현해야 할까요? 위 이미지에서 왼쪽에 있는 버튼은 공지사항 내용이 있으면 빨간 동그라미가 있고 없으면 표시하지 않도록 구현을 하려 합니다. 노티 이미지를 클릭했을 때 위 이미지처럼 공지사항 내용이 보여져야(show) 하고 해당 공지사항 영역 외의 영역을 터치하거나 노티 이미지 영역을 다시 클릭하면 공지사항 영역이 다시 hide 되어야 합니다. Methodology 처음엔 단순하게 생각했습니다. "useStat..
[Python] FinanceDataReader 데이터 Mysql DB에 적재하기 주가 데이터를 가져오기에 가장 좋은 라이브러리는 Financedatareader 같습니다. (+종목 코드 리스트만 가져오기 위해 Pykrx도 사용했습니다.) https://github.com/financedata-org/FinanceDataReader GitHub - financedata-org/FinanceDataReader: Financial data reader Financial data reader. Contribute to financedata-org/FinanceDataReader development by creating an account on GitHub. github.com https://github.com/sharebook-kr/pykrx GitHub - sharebook-kr/pyk..
프로그래머스 과제 테스트-좋아하는 언어 검색기 INDEX Stack #VanillaJS 문제와 풀이(모범답안..)는 링크로 걸어두겠습니다. https://school.programmers.co.kr/skill_check_assignments/298 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr https://prgms.tistory.com/139 '2022 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 과제 테스트 해설 프론트엔드 개발자의 이직/구직을 위한 데브매칭! 지난 2022년 3월 12일 토요일 오후 2시부터 5시까지 3시간 동안 '2022 Dev-Matching: 웹 프론트엔드 개..
OpenWeatherMap api by fetch and axios INDEX Preview https://openweathermap.org/api openweathermap.org 간단하게 날씨 정보를 OpenWeatherMap api를 호출해서 불러오려고 합니다. api를 호출하는 방법엔 fetch, axios, ajax 등이 있습니다. api key는 위 사이트에 접속해서 회원가입 후에 my api key 메뉴에 들어가면 있습니다. (하지만 몇 분 내지 몇십 분을 기다려야 해당 key를 사용할 수 도 있습니다) Fetch! 우선 class component 방식은 아래와 같습니다. api 정보 중 wind (바람)의 speed 값만 표현하려고 합니다. const weatherAPI = "317e6f3e4ae59c61e364c9c3d15a02b3"; const cit..
[Ubuntu] Npm install 에러 Mac에서 React + django 프로젝트를 개발하고 깃허브에 커밋 후 서버 컴(Ubuntu) 에서 Pull 을 받은 다음에 pip install -r requirements 와 npm install 을 사용해 설치된 라이브러리를 설치하려 보니 npm install에서 에러가 잔뜩 발생했다... 찾아보니 node 18버전대는 ubuntu에서 잘 안돌아가는 에러가 있다고 해서 node를 16버전으로 내리니 성공! sudo apt-get update #apt update sudo apt-get upgrade #apt upgrade .. 약간 이런 작업을 할 때 꼭 한번 해주게 되는.. sudo apt-get remove nodejs npm curl -o- https://raw.githubuserconte..
NodeJS Chat Service Preview 기존 NodeJS 기반 구성되어있던 채팅 서버가 장애 이슈와 개선점이 많아 프로젝트 리팩토링 및 버그 개선을 담당하게 됐다. 자주 발생하는 장애현상 은 이러했다. 고객의 네트워크 불안정으로 소켓 연결이 끊어진 다음 재접속 하는 과정에서 고객 네트워크를 다시 방에 연결하지 못하는 현상. 서버 측 소켓 연결 close 이벤트를 늦게 감지하는 현상 대부분이 네트워크 불안정을 해결하지 못해서 발생한 이슈였다. 개선해야 할 점 은 다음과 같다. 1대1채팅만을 지원했지만 상담사(1)대 고객(N) 채팅을 지원할 것. 카카오톡처럼 고객과의 과거 대화내역과 통계 내역을 볼 수 있어야 할 것. 각 상담사 별로 제공되는 기능이 존재할 것. (ex: 기본 메시지 설정). Javascript 에서 Typescri..
Delaying of Function INDEX Stack #VanillaJS Preview JS로 개발하다 보면 비동기 처리에 항상 신경을 쓸 수밖에 없습니다. *https://sieon-dev.tistory.com/56 이전 포스팅에서 한 번 다뤘었는데 좀 부족한 듯해 추가로 다뤄보려 합니다. (나중에 보면 이 글도 많이 부족해보이겠죠..ㅎ) Methodology 만약 얼마나 걸릴지 알수없는 함수 longTimeFunc(Function) 가 있고 그 함수를 호출해야 하는 함수는 오래 걸리는 메서드의 프로세스가 끝난 뒤에 결과 값을 출력해야 하는 경우라면 어떻게 해야 할까요? const RandomTimeSec = parseInt(Math.random() * 10); const longTimeFunc = () => { setTimeout(..
PM2를 사용해 PUSH서버 구축하기 INDEX Stack Nodejs,PM2,Javascript,CentOs Javascript Preview PUSH 서버는 사용자에게 보낼 메시지 정보를 받아 Google Firebase Cloud Messaging 로 전송하는 중간 브릿지 역할을 합니다. CentOs 위에서 Nodejs로 구현되어 있으며 무중단 배포 및 운영을 위해 PM2를 사용했습니다. What is PM2 ? PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, i..

티스토리툴바