Typescript Handbook / Developer’s Record 를 참고했습니다. var vs let vs const 이곳을 참고하면 된다. destructure array object 기본값을 지정할 수도 있다. 배열처럼 인자값에서 destructuring이 가능하다. spread array object Class의 메소드는 손실될 수 있으니 주의해야한다 Typescript Handbook / Developer’s Record 를 참고했습니다. var vs let vs const 이곳을 참고하면 된다. destructure array object 기본값을 지정할 […]
Archives: 프론트엔드
Typescript Handbook / Developer’s Record 를 참고했습니다. String, Number, Boolean Array for…in for…of Tuple Enum enum은 특수한 숫자 문제에 대한 해결책을 제공한다. 특정 숫자와 사람이 읽기 쉬운 이름을 연결할때 유용하다. Red를 3으로 하면 Green, Blue는 자동으로 4, 5가 된다. 하나하나 값을 설정할 수 도 있다. 반대로 Red, Green, Blue를 얻을수도 있다. 열거형을 상수로 만드는것도 가능하다. […]
Diff Partial DeepPartial DeepPartial은 단순히 Partial을 제귀적으로 사용해서 모든 요소를 optional로 만든것일 뿐이다. Typescript에 기본 내장되어 있지는 않고, Redux의 index.d.ts파일에 있어서 적어봤다. Required Pick Exclude Diff와 같은 기능을 한다. 하지만 Exclude는 Typescript 2.8버전부터 Built-in으로 지원된다. Omit Typescript에서 기본적으로 제공하는 기능은 아니지만 Pick과 Exclude를 활용해서 만들 수 있다. 어떤 타입의 특정 속성을 떨궈내는데 사용한다. Interface의 속성을 […]
배경설명 react react-router graphql jwt 관리자 사이트에 들어갈때, 로그인을 해야만 들어갈 수 있게 한다. localStorage에 로그인 정보가 없으면, login페이지로 넘어가도록 한다. 문제상황 처음에 myAdmin.com/ 요기가 Admin page, myAdmin.com/login 요기가 login page다. /로 들어왔을때 로그인 정보가 없으면 /login으로 redirect 시켰다. 그런데 다음과 같은 에러가 나왔다. Uncaught Error: Maximum update depth exceeded. This can happen when a […]
문제상황 리액트 프로젝트 설정 따악 끝내고, webpack dev server돌렸는데, 콘솔창에 에러가 나왔다. Unchecked runtime.lastError: The message port closed before a response was received 조사 https://5coding.tistory.com/24 크롬 확장프로그램에 문제가 있다고 한다. 해결책 정리 의심되는 확장프로그램 2개를 지웠더니 해결됐다.
문제상황 Custom React Router Component를 만드는 중이었다. 문제가 되는 부분은 <Component {…props}></Component> 이다. 에러메세지는 다음과 같다. JSX element type ‘Component’ does not have any construct or call signatures.ts(2604) 조사 근본적인 문제는,,, Component가 undefined일수도 있다는거였다. 그래서 Component가 undefined인지 체크하는 과정이 없었기 때문에, React.ComponentType임에도 불구하고 <Component .. 이렇게 쓸 수 없었다. 해결책 정리
원문 : https://redux-toolkit.js.org/tutorials/intermediate-tutorial 주의 : 제가 이해하기 쉬운 방식으로 번역 및 첨언했습니다. 이전글 : https://develoger.kr:80/redux-toolkit-basic-tutorial/ 이번 글에서는 original Redux Todo App을 Redux-Toolkit을 사용한 Todo App으로 바꿔보면서 Redux-Toolkit의 사용법을 익혀볼것이다. Reviewing the Redux Todos Example original Redux Todo App을 보면 아래것들을 발견할 수 있다. todos reducer function 은 state의 불변성을 유지하기 위해서 “직접” object를 deep copy하고있다. […]
원문 : https://redux-toolkit.js.org/tutorials/basic-tutorial 주의 : 제가 이해하기 쉬운 방식으로 번역 및 첨언했습니다. Introduction: Writing a Counter Application Redux “Counter-Vanilla” Example 대~충 Counter를 만들어보았다. A More Typical Counter Example 쫌 더 실제프로젝트에서 쓸 수 있게끔 만들었다. action생성자 함수도 있고, action.type도 상수로 두었다. 하지만, INCREMENT라는 상수를 만드는것도, 생성자 함수를 만드는것도 모두 귀찮은 일이다. 매번 switch안에 case를 써주는 […]
문제상황 webpack.config.js tsconfig.json 위와 같은 환경에서 webpack으로 build를 하려고 하니 다음과 같은 에러메세지가 나왔다. 갑자기 react/cjs 파일의 object-assign에 뭐가 문제라도…? 해결방안 찾기 구글링을 해서 한번에 해결했다. 웹팩이 내 코드뿐만이 아니라 내가 사용한 라이브러리도 하나로 묶어주기 때문에 ts, tsx파일 뿐만이 아니라 js파일도 resolve항목에 추가시켜줘야했다. 위 코드를 webpack.config.js파일에 입력해주면된다.
NPM 이것저것 설치하기 (스크롤을 많이 내리다 보면, 한번에 설치하도록 코드를 작성해 놓았습니다. 일일이 복붙 할 필요 없습니다.) Webpack webpack / webpack-cli webpack을 쓰려면 당연히 필요하니까, webpack과 webpack-cli모듈을 설치해준다. webpack-dev-server local 환경에서 편하게 테스트해보려면 필요하다. typescript typescript -> javascript 변환해주는 typescript모듈이 필요하다. node-sass CSS대신 SCSS를 사용할거니까 SCSS -> CSS 변환해주는 node-sass모듈이 필요하다. css-loader webpack이 css파일을 읽을때 […]