대충 얼레벌레 깔아서 리액트 구축해오던 나.. 리액트 환경을 처음부터 구축할 기회가 생겼다. 이거 포스팅에 놓칠 수 없다는 생각이 들어 오늘의 글 건덕지를 하나 잡게 되었다. 1. node.js 설치 node.js 설치 페이지 LTS 버전을 설치해주면 된다. 무작정 다음(NEXT) 을 눌러 설치하여도 무관하다. 하나 신경 쓸만한 부분은 바로 이 부분인데.. automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the installation completes Chocolatey 및 추가 설치 도구를 다운로드 받게 할건지 말건..

Recoil 도입 역사의 시작 로그인 및 데이터 관련 전역 상태관리 기술로 Recoil을 채택하고 있다. Recoil 리코일(Recoil) 은 API, 의미, 동작을 최대한 리액트스럽게 유지하며 이를 개선하고자 페이스북에서 만든 상태관리 라이브러리 Recoil 핵심개념 Atom : 하나의 작은 상태. 일반적인 리액트의 상태로 컴포넌트들 구독이 가능 useRecoilState : atom 값을 읽고 update 하는 hook. React Hook의 UseState 와 같은 방식으로 사용. 클래스형 컴포넌트의 상태관리에서 State와 SetState를 합친 것과 같음. useRecoilValue : setter을 제외한 atom의 값만 제공. 클래스형 컴포넌트의 상태관리에서 state의 역할 useSetRe..

파인콘(Pynecone) 은 웹 풀스택을 위한 파이썬 프레임워크 들어가기에 앞서 Pynecone 에 대해 한줄로 설명해보았다. Pynecone 파인콘(pynecone) 은 파이썬 코드를 가져와 React. NextJS 등으로 작동하는 인터렉티브 웹앱을 쉽게 만들어주는 프레임워크를 의미한다. 간단한 웹앱을 몇 분 안에 구축할 수 있고, 배포도 쉬우면서, 기존 웹개발의 유연성과 성능을 적당히(?) 갖춘 low-code 프레임워크 Front-End : 그래프 그리기, 화면 구성 등 컴포넌트 구성 페이지네이션 기능이나 정렬 기능을 옵션을 True로 설정하는 것만으로 표현 가능한 데이터네이블을 제공. 그 외에도 화면에 반응형으로 동작하는 프론트용 컴포넌트를 제공하니 공식 문서의 라이브러리 를 참조하도록 하자 Ba..

1단계. 문제 이해 및 설계 범위 확정 기능적 요구사항 파일 추가. 가장 쉬운 방법으로는 구글 드라이브 안으로 drag-and-drop 가능하도록 파일 다운로드 여러 단말에 파일 동기화. 한 단말에서 파일 추가 시 다른 단말에도 자동으로 동기화 파일 갱신 이력 조회(revision history) 파일 공유 파일이 편집되거나 삭제되거나 새롭게 공유되었을 때 알림 표시 비기능적 요구사항 안정성: 저장소 시스템에서 안정성은 매우 중요. 데이터 손실 발생하면 안됨 빠른 동기화 속도 네트워크 대역폭: 너무 많이 사용하면 사용자 불편 초래 규모 확장성: 아주 많은 양의 트래픽도 처리 가능해야 함 높은 가용성: 일부 서버에 장애가 발생하거나, 느려지거나, 네트워크 일부가 끊겨도 시스템은 계속 사용 가능해야 함 개략..

1단계. 문제 이해 및 설계 범위 확정 아래와 같은 기능을 갖는 비디오 스트리밍 서비스 설계에 초점을 맞출 예정 빠른 비디오 업로드 원활한 비디오 재생 재생 품질 선택 기능 낮은 인프라 비용 infrastructure cost 높은 가용성과 규모 확장성, 그리고 안정성 지원 클라이언트: 모바일 앱, 웹 브라우저, 그리고 스마트 TV 개략적 규모 추정 일간 능동 사용자DAU 수는 5백만(5million) 한 사용자는 하루에 평균 5개의 비디오 시청 10%의 사용자가 하루에 1비디오 업로드 비디오 평균 크기는 300MB 비디오 저장을 위해 매일 새로 요구되는 저장 용량 : 150TB CDN 비용 클라우드 CDN을 통해 비디오를 서비스할 경우 CDN에서 나가는 데이터의 양에 따라 과금 아마존의 클라우드프론트C..

서비스 개발을 하며 느낀 점 서비스 개발 시 필요한 것 서버 / Web 사이트 / Andriod 앱 / iOS 앱 네이티브 앱 개발의 어려움 프레임워크의 복잡성으로 진입 장벽이 높음 해가 다르게 변하는 정책을 따라가기 어려움 어려 사용 방법이 난무하여 뭐가 제대로 된 건지 알기가 어려움 네이티브 앱을 개발할 경우 해야할 일 - 너무 많음... 크로스 플랫폼 개발 프레임워크 Native : Maui(5종 지원), React Native, Flutter(Android, iOS, Web, Windows, MacOS, Linux 6종 지원), Kotlin Multiplatform Mobile(Andriod, iOS) Flutter 장점 Dart 언어만으로 개발 : 배워야 할 것 적음 (레이아웃, 로직 모두 Da..

올해는 flutter 찍먹을 해본다. 사실 나는 React도 제대로 못하는 뚝딱이인 듯 한데 아무튼 해보겠다. ... 문제 상황 Flutter SDK 다운로드에서 파란색 버튼을 클릭해서 SDK 를 설치해야하는데 ... 나는 아무것도 안했는데 failed 판정을 받았다. 저장공간도 충분하고 운영체제도 충족하고 도구 부분에서도 딱히 문제가 되어보이는 부분은 없어보인다. 해결 방법 인터넷에 서치하니 간단하게 해결이 된다. 문제 사이트 는 한글이다.. 한글로 된 사이트에서는 이런 경우가 꽤 일어나는 듯 해보인다. 플러터 사이트(영어) 영문으로 된 사이트로 접속을 하면 똑같은 환경인데 아무런 문제 없이 처리가 된다.

검색어 자동완성 (autocomplete, typehead, search-as-you-type, incremental search)에 관한 이야기. 1단계. 문제 이해 및 설계 범위 확정 요구사항 빠른 응답속도 : 사용자가 검색어를 입력함에 따라 자동완성 검색어도 충분히 빨리 표시되어야 함 페이스북 공식 문서 기준 시스템 응답속도는 100밀리초 이내여야 한다 연관성 정렬 : 시스템의 계산 결과는 인기도(popularity) 등의 순위 모델(ranking model)에 의해 정렬되어 있어야 한다. 규모 확장성 : 많은 트래픽을 감당할 수 있도록 확장 가능해야 한다. 고가용성 : 시스템의 일부에 장애가 발생하거나, 느려지거나, 예상치 못한 네트워크 문제가 생겨도 시스템은 지속 가능해야 함 개략적 규모 추정 ..

UseEffect Hook useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 으로 클래스형 컴포넌트의 마운트 단계인 componentDidMount + 업데이트 단계인 componentDidUpdate + 언마운트 단계인 componentWillUnmount 의 기능을 담당하는 훅이다. componentDidMount+componentDidUpdate에 해당하는 코드들은 useEffect에 전달되는 함수 내에 작성하면 되며, componentWillUnmount에 해당하는 코드들은 함수 형태로 return하게끔 작성하면 된다. 글쓴이가 작성한 UseEffect에 관한 글(1) 여기에 더 간단한 설명이 조금 추가되어 있긴 하다. 아무튼 이렇게 어떤 특정 ..

왜? 날짜 데이터를 이용할 때 어떤 변수에 Date 를 선언해둔 뒤 getFullYear, getMonth, getDate 등을 이용하여 잘라서 간단하게 가져오고는 한다. 하지만 이렇게 사용하면 Month는 1~12의 형태로 출력이 되고, Date의 경우에는 1~31의 값을 출력해주게 된다. 보통 조회 조건을 설정할 때에는 yyyy-MM-dd 형태를 사용하게 되는데 말이다.. 기존 문제가 되는 사항은 아닌데 이런 로그가 자꾸 발생하게 된다. The specified value "2023-1-3" does not confirm to the required format, "yyyy-MM-dd" 대충 노란색인 것을 보자하니 알아서 변환해서 적용하고 있는 건가 싶기는 하지만 눈에 거슬리므로 해결해보도록 하자. ..

이런 형태의 막대그래프를 만들어보도록 할 것이다. 1. 개요 리액트에서 사용가능한 차트 라이브러리는 꽤나 많은데 나는 딱 기본 형태의 막대 그래프 가 필요하여 제일 보기에 코드가 쉬워보이는 Recharts 라는 라이브러리를 채택하였다. 혹시나 복잡한 형태의 차트가 필요하다면.. Nivo.rocks, React Vis, Apexcharts, Victory, Chartjs, Highcharts 등 다양한 라이브러리들을 구경해보는 것도 좋을 것 같다. 나는 참고로 리액트 그래프/차트 라이브러리 모음 이라는 글을 참고하여 라이브러리를 골랐다. 똑같은 차트 기능을 하는 라이브러리라 하더라도, 각각 다른 특징이 있으니 이런 것도 고려하면 좋을 듯 하다. 2. 사용법 1. 라이브러리 설치 $ npm install r..

1단계. 문제 이해 및 설계 범위 확정 페이스북 메신저, 위챗(WeChat), 왓츠앱(WhatsApp) 처럼 1:1 채팅에 집중하는 앱, 슬랙(Slack) 같은 그룹 채팅에 중점을 둔 업무용 앱, 게임 채팅에 쓰이는 디스코드(Discord) 같이 대규모 그룹의 소통과 응답지연(latency)이 낮은 음성 채팅에 집중하는 앱 요구사항 1. 응답지연이 낮은 1:1 채팅 기능 2. 최대 100명까지 참여할 수 있는 그룹 채팅 기능 3. 사용자의 접속 상태 표시 기능 4. 다양한 단말 지원. 하나의 계정으로 여러 단말에 동시 접속 지원 5. 푸시 알림 6. 5,000만 DAU(Daily Active User: 일별 능동 사용자 수) 처리 2단계. 개략적 설계안 제시 및 동의 구하기 이 채팅 서비스는 아래 기능 ..