개발 공부 (19) 썸네일형 리스트형 개발 버전 관리 버전의 정의 효율적으로 상품을 관리하기 위한 목적으로 소프트웨어, 하드웨어 상품의 개발 단계 또는 순서를 번호로 표시한 것으로 버전에 따라 내용과 기능에 차이가 있으므로 명확하게 표시해야한다. 버전 표기 이점 버전만으로 핫픽스된 이슈, 스팩의 구현을 볼 수 있어서 대략적인 프로젝트의 히스토리를 확인할 수 있으며, 로그 정리에 도움이 된다. *핫픽스(Hotfix)란? 제품 사용 중에 발생하는 버그의 수정이나 취약점 보완, 또는 성능 향상을 위해 긴급히 배포되는 응급 패치 프로그램. *로그(log)란? 로그파일은 운영 체제나 소프트웨어가 실행 중 발생하는 이벤트등의 메세지를 기록한 파일이다. 1.0.0의 '.'의 의미 '.'을 기준으로 3 부분으로 나눌 수 있습니다. major.minor.patch 주(主).. [React+TypeScript] ShortPolling, LongPolling, SSE, WebSocket 차이점 목표 실시간 알림 서비스를 구현하고자, 어떤 방식이 알림 서비스에 적합한지 알아보고, 실시간 통신 방식에 대해서 학습한다. ShortPolling 특징 - 클라이언트는 일정한 간격(예:1~2초) 으로 HTTP요청을 계속해서 보내는 방법 - 서버에서 업데이트가 없을 경우, 대부분의 요청은 빈응답으로 받는다. 단점 높은 HTTP 오버헤드가 발생한다. 불필요한 네트워크 호출이 발생한다. 실시간 통신 애플리케이션으로 적합하지 않다. HTTP 오버헤드란? - 네트워크를 통해 대상으로 라우팅되는 데이터와 함께 전송되어야하는 정보를 말하며, 올바른 대상에 도달하기 위해 전송중인 데이터에 추가로 보내지는 정보라 보면 된다. 장점 - 정보 전송의 신뢰성을 높일 수 있고 시스템을 안정적으로 운용할 수 있다. 단점 - 작은.. [리액트 공식 문서] Reducer와 Context로 확장하기 Reducer와 Context - Reducer를 사용하면 컴포넌트의 state 업데이트 로직을 통합할 수 있다. - Context를 사용하면 다른 컴포넌트들에 정보를 전달할 수 있다. reducer와 context를 결합하기 - state와 dispatch 함수를 props를 통해 전달하느 대신 context에 넣어서 사용할 수 있는데, 이점은 prop drilling 없이 TaskBoard 아래의 모든 컴포넌트 트리에서 tasks를 읽고 dispatch 함수를 실행 할 수 있다. Reducer와 context 결합 방법 1. context를 생성한다. 2. state과 dispatch 함수를 context에 넣는다. 3. 트리 안에서 context를 사용한다. Step1: Context 생성하기 - .. [리액트 공식 문서] context로 데이터 깊숙이 전달하기 context를 사용할 때 - 정보를 전달 할 때, 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달하는데, 중간에 여러 컴포넌트를 거쳐야할 때가 있는데, context를 이용하면 깊이 여부와 무관하게 아래 트리의 모든 컴포넌트에서 일부 정보룰 사용할 수 있다. props 전달의 문제 - 트리 깊숙이 prop을 전달해야 하거나 많은 컴포넌트에 동일한 prop이 필요한 경우 prop 전달이 장황하고 불편해질 수 있다. - 만약 최상위 컴포넌트와 멀리 떨어져있다면, state를 높이 끌어올리다보면 prop drilling이라는 상황이 발생한다. Context: props 전달의 대안 context를 생성합니다. 데이터가 필요한 컴포넌트에서 해당 context를 사용합니다. 데이터를 .. [리액트 공식 문서] state 로직을 reducer로 추출하기 reducer를 쓰는 경우 - 여러 개의 state 업데이트가 여러 이벤트 핸들러에 분산되어 있는 컴포넌트는 과부하가 걸릴 수 있는데, 이 경우에 reducer라고 하는 단일 함수를 통해 컴포넌트 외부의 모든 state 업데이트 로직을 통합할 수 있다. reducer로 state 로직 통합하기 - 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 다양한 경우를 한눈에 파악하기 어려워진다. (삭제, 추가 , 수정) - 컴포넌트가 커질수록 여기저기 흩어져 있는 state로직의 양도 늘어난다. - 복잡성을 줄이고 모든 로직을 접근하기 쉽게 한 곳에 모으려면, state 로직을 컴포넌트 외부의 reducer라고 하는 단일 함수로 옮긴다. useState에서 useReducer로 마이그레이션하는 방법 1... [리액트 공식 문서] Quick start~ Thinking in React 컴포넌트 React 컴포넌트 이름은 항상 대문자로 시작해야 하고 HTML 태그는 소문자로 시작해야 합니다. export default 키워드는 파일의 주요 컴포넌트를 지정합니다 ... 또는 빈 ... 래퍼와 같이 하나의 공유 부모로 감싸야 합니다. 과 같은 태그를 닫아야 합니다. 데이터 표시하기 중괄호를 사용하면 코드에서 일부 변수를 삽입하여 사용자에게 표시할 수 있도록 JavaScript로 “이스케이프”할 수 있습니다. return ( {user.name} ); return ( ); JSX 중괄호 안에 문자열 연결과 같이 더 복잡한 표현식을 넣을 수도 있습니다: style={{}}은 특별한 구문이 아니라 style={ } JSX 중괄호 안에 있는 일반 {} 객체입니다. 조건부 렌더링 if문을 사용할 수.. .yarn 디렉토리가 없는 경우 ## yarn을 이용한 cra 만들기 ``` javaScript yarn create react-app basic ``` 만들고 폴더에 들어가보니, .yarn 폴더가 없는 것을 발견하였다. 왜 없을까 찾아보니, yarn의 버전 문제였다. ### 원인 버전이 낮으면 제대로 폴더가 생성되지 않는데, 살펴보니 내 버전은 1로 시작했다. 1로 시작하면 낮으 버전이라고 볼 수 있다. ### 해결 방법 1. 기존 디렉토리를 삭제하고, 버전을 업데이트 해야한다. 버전을 업데이트하는 방법은 두가지가 있는데 ``` > yarn set-version latest //최신 버전 다운로드 > yarn set version stable //최신 버전으로 업데이트 ``` 두가지 중에서 한가지를 선택해서 업데이트 하면 된다. 저는.. [JS] Number()와 parseInt와 차이점 알고리즘 문제를 풀면서 형변환을 하기위해서 Number()와 parseInt()를 많이 사용하는데, 쓰는 와중에 이 둘의 차이점이 무엇인지 궁금해져서 학습을 하게 되었다. Number(str)란 문자열을 인자로 받으면 해당 문자열을 숫자로 형변환을 시켜줍니다. //1. 문자열을 숫자로 변환 let number = Number("187")//187 //2. 숫자와 문자가 섞여있는 문자열의 경우 let number = Number("580원")//NaN //3. 소수점의 숫자인 경우 let number = Number("19.345")//19.345 ## parseInt(str)란 - Number(str)와 동일하게 문자열을 인자로 받으면 해당 문자열을 숫자로 형변환을 시켜줍니다. ``` javascript.. 이전 1 2 3 다음
