반응형 언어공부/JS&TS&React16 [Redux] 리덕스 용어 정리, 리덕스의 규칙 리덕스에서 사용되는 키워드 액션 (Action) 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데요, 액션 객체는 다음과 같은 형식으로 이뤄져있습니다. { type: "TOGGLE_VALUE" } 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있습니다. { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } { type: "CHANGE_INPUT", text: "안녕하세요" } 액션 생성함수 (Action Creator) 액션 생성함수는, 액션을 만드는 함수입니다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어주죠. export function a.. 2022. 6. 11. [Redux] 리덕스 간단 정리 이직 후 리덕스로 거의 모든 상태관리를 하는 프로젝트에 투입이 되었다. 이전 회사에서 처음 리액트를 배울 때 당연히 리덕스 공부는 해야 했고 사용도 했었지만 리코일이나 다른 라이브러리 사용으로 넘어가면서 사용이 뜸해지면서 거의 잊혀지고 있었는데, 이번 프로젝트 코드가 엄청 방대하고 복잡하다보니 기본 개념이 안 잡힌 상태로 코드를 파악하다가 멀미가 날 지경이었다. 그래서 오랜만에 약속이 없는 주말을 맞아 리덕스를 기초부터 공부해보기로 했다. 동영상 강의는 공부가 막막할때, 기초 개념 공부할 때 항상 도움받고 있는 내사랑 이고잉님과 코딩애플님이 도움을 주셨다 :) 텍스트 문서로는 벨로퍼트님의 블로그를 참고해서 공부했다. 감사합니다 스승님들!! 리덕스란? 상태관리 라이브러리 리덕스 쓰는 이유 1. props .. 2022. 6. 11. use-query-params 로 queryString 관리하기 use-query-params 라이브러리를 사용하면 Default 값도 사용할 수 있고, 각각의 쿼리의 타입도 지정할 수 있어서 편하다. 아래와 같은 형식으로 set을 하면 queryString이 자동으로 관리된다. (자세한 내용은 맨 밑의 공식 문서 참고) const [query, setQuery] = useQueryParams({ pageNo: withDefault(NumberParam, DEFAULT_PAGE_NO), pageSize: withDefault(NumberParam, DEFAULT_PAGE_SIZE), sortColumn: withDefault(StringParam, DEFAULT_SORT_COLUMN), sortOrder: withDefault(StringParam, DEFAULT_S.. 2022. 4. 3. React API 에러 처리 아래 글은 현재 우리 회사 프로젝트의 에러처리에 관련한 고민을 하다가 찾게된 화해 기술블로그이다. 화해의 기술들이 우리 회사의 기술들과 유사한 부분이 많아서 같이 고민하는 느낌이든다! 왜 API 에러 처리에 대한 고민을 하게 되었나? 현재 제가 담당하고 있는 프로젝트 중에 하나가 오래전에 만들어진 제품을 유지보수하는 프로젝트입니다. 해당 프로젝트는 흔히 말해 레거시 개선 프로젝트였습니다. 이 프로젝트는 설계에 대한 깊은 고민보다는 필요한 기능들을 우선적으로 추가해야만 했던 시기에 만들어진 것으로 보입니다. 그래서인지 여러 부분에서 체계가 미흡한데, API 에러 처리 체계도 그중 하나였습니다. 여러 군데에서 비슷한 에러 처리 로직을 개별적으로 작성하거나 공통적으로 다루어져야 하는 로직도 반복해서 작성되어 .. 2022. 3. 28. URLSearchParams, 주소 쿼리스트링, 파라미터 변경 오늘은 URL 관련 유용한 Hooks 유틸 함수를 알아볼거에요 먼저 알아볼 함수는 2가지 인데요! PathParam을 쉽게 구하는 함수 usePathParam QueryString을 쉽게 구하는 함수 useQueryString 함수를 알아보기전에 PathParam과 QueryString에 대해서 알아보겠습니다. 1) QueryString http://host:port.com/posts?id=1 이런 URL중 ? 뒤에 id란 변수에 값을 담아 백엔드에 전달하는 방식이 QueryString 방식이에요. 해석하자면 posts에 담긴 정보중 id가 1인 posts자료를 달라는 것이죠 2) PathParam http://host:port.com/posts/1 QueryString에서 보여준 URL과 같은 내용이지.. 2022. 3. 27. nodejs 타입스크립트 환경설정, jsconfig.json 활용 Type Checking 자바스크립트는 타입 체크를 하지 않기 때문에 타입 오류가 발생함 이에 타입을 체킹하는 것이 중요하고 도구가 필요함 가장 인기가 있는 타입스크립트는 자바스크립트에 타입 정의만 얹어놓은 느낌 const someString = 'Hello' const result = Math.log(someString) 위와 같은 경우에 타입에러가 발생함. 타입스크립트 사용 타입스크립트, eslint 를 설치 후 상단에 @ts-check 를 추가하면 타입 체크가 가능 node에서 타임스크립트 도움받기 npm install --save-dev @types/node vscode가 타입스크립트 바이너리를 이용하여 타입체킹을 도와줌 const http = require('http) const server =.. 2022. 3. 9. [Javascript] ag-grid 로 그룹 테이블 만들기 다른 회사에서 일하고 있는 친구가 help를 요청했다. ag-grid로 테이블을 만들고 싶은데 어떻게 쓰는지 모르겠다고 해서 한번 바닐라 자바스크립트로 만져 보았다. 친구의 의도는 맨 위에있는 1번 row가 그룹이 되어서 밑으로 2, 3, 4 row가 나오는 걸 원하는 듯 한데 그렇게 되면 그룹이 지어지지 않아서 맨 앞에 groupNo를 추가해서 그룹을 지었다. ag-grid는 ui가 깔끔해서 좋긴 한데 커스텀 할 때마다 항상 2%씩 아쉬운 느낌이다. 나중에 쓸 일이 있을때 참고해야지 main.js // 각 컬럼 데이터(테이블 헤더 이름 등) var columnDefs = [ { // 테이블 헤더 이름 headerName: 'groupNo', // 필드 이름 field: 'groupNo', // 최소 너.. 2021. 8. 27. [JavaScript] 연산자 && (AND), || (OR) 사용법 자바스크립트를 쓰다보면 && , || 와 같은 AND, OR 연산자를 많이 보게 되는데, 어떤 경우에는 해당 변수의 유무에 대해서도 쓰고, 조건문의 참, 거짓으로도 사용한다. 이 연산자를 사용하면 어떤 경우에는 조건문을 대체 할 수 있기 때문에 유용하다. 나도 이전에는 삼항연산자 또는 if else 문으로 썼던 코드를 많이 줄일 수 있게 되었다. 이쯤에서 내가 해당 연산자를 제대로 쓰고 있는지 확인하고자 &&, || 연산자에 대해서 정리하고자 한다. 1. 함수 인자를 통한 변수 초기화 ( || 연산자) function documentTitle(theTitle) { if (!theTitle) { theTitle = "Untitled Document"; } } 위의 코드는 함수를 통해 인자를 전달 받아 th.. 2021. 8. 1. [React] Context 란? Context 활용 방법, 공식 문서 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다 언제 context를 써야 할까 context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인.. 2021. 6. 28. [React] 리액트 훅 (Hook) useState, useEffect 활용하기 리액트를 처음 공부할 때 어려웠던 부분이 Hook이었다. 사실 리액트 공부 시작한지 4주차인 꼬꼬마라 아직도 어렵다. 그래도 이제 Hook이라는게 뭔지 조금은 알것 같아서 정리하면서 더 공부해보려고 한다. 아래는 리액트 자습서의 내용이다. 동기 Hook은 우리가 5년간 React로 컴포넌트를 작성하고 유지하는 동안 부딫혔던 수 많은 문제들을 해결했습니다. React를 배우는 중이든, 매일 사용하든, 심지어 비슷한 컴포넌트 모델과 함께 다른 라이브러리를 선호하든지 간에, 사용자는 이러한 문제를 인식해 왔을 것 입니다. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다. React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않습니다. (예를 들어, 스토어에 연결하는 것) 만약 이전부터 Re.. 2021. 6. 27. 이전 1 2 다음 반응형
