우주원숭이의 개발여행

전체 글 검색 결과

해당 글 84건

저장할 때 prettier format적용

yarn add --dev prettier // .prettierrc { "singleQuote": true, "semi": false, "useTabs": false, "trailingComma": "all", "bracketSpacing": true, "arrowParens": "avoid", "endOfLine": "auto" } // .prettierignore .next node_modules .vscode package.json package-lock.json dist // .vscode/settings.json { "javascript.format.enable": false, "advancedNewFile.exclude": { "node_modules": true, "dist": true }..

개발도구/Eslint, Prettier 2022. 8. 19. 16:45

The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.4"error Found incompatible module.

yarn create next-app --typescript next를 경험해보기 위해 cna(create next app)로 설치를 하는도중 제목과 같은 에러를 조우하였다. 현재 내 맥os에 설치되어있는 node의 버전이 맞지않아서 어떤 패키지들이 설치되지 않는다는 것이었다. nvm ls 필자는 다양한 노드 버전을 사용하기 위해 nvm을 사용하고 있으며 현재 기본값은 v14였다. 최신 node버전을 설치하기 위해 검색을 해보았다. nvm ls-remote --lts v16.17.0 (Latest LTS: Gallium) 이것이 최신버전으로 나와서 설치하였다. nvm install 16.17.0 설치후 알아서 기본값으로 들어간다. 다시 cna를 실행하니 에러없이 설치가 완료되었다.

개발/Next 2022. 8. 19. 14:40

this.setState

this.setState는 async , 비동기로 작동한다. test = () => { let num = 5; console.log(num); this.setState({ num: num - 1; }); console.log(num); } 위와 같을 경우 콘솔에는 5, 4가 찍히지 않을것이다. setState는 비동기이므로 setState()를 실행하고 완료를 기다리지 않고 바로 console.log()를 수행한다. setState는 state를 변화시키고 렌더링을 하는데 콜백함수를 추가해주면 콜백함수 실행 된 후 리렌더링을 한다. test = () => { let num = 5; console.log(num); this.setState({ num: num - 1; }, () => { console.lo..

개발/React 2019. 7. 3. 16:55

타입스크립트 인터페이스 정의

Typescript의 interface로 props의 데이터 타입을 정의함. interface Props { form: {[key: string]: any}; } 이렇게 인터페이스가 정의되어있을 경우. this.props.form 은 객체인데 키는 string이고(당연한 얘기지만..) 키와 매칭되는 값은 any로 어떤 데이터 형식이던 올 수 있다는 의미.

개발/Typescript 2019. 6. 28. 17:33

Redux

state를 관리해주는 도구로 단일 스토어를 사용한다. react에서는 props를 이용해서 하위 컴포넌트로 데이터를 계속 넘겨줘야한다. 노드의 깊이가 깊어질수록 복잡도가 높아지고 비효율을 발생시킴. Redux의 데이터 교류 단방향 데이터 디자인 패턴인 Flux를 변형시켰음. 시스템이 action을 받았을 경우 dispatcher가 action들을 관리하여 단일 store의 state를 업데이트. 변동된 데이터가 있다면 view 리렌더링. view에서도 dispatcher로 action을 보낼 수 있음. dispatcher와 action을 이용하면 props를 이용해서 컴포넌트를 단계별로 거치지 않아도 데이터 관리가 가능해짐. action -> dispatch -> reducer -> store upda..

개발/React 2019. 6. 26. 17:40

Reducer

store는 커다란 JSON의 결정체로 상태는 기본적으로 store에서 집중관리한다. { session: { ... }, timeline: { ... }, notification: { ... } } 이 store 와 store에 존재하는 state는 신성한 존재이다. 감히 react component 따위는 범접할 수 없는.. 그렇기에 component가 store(state)와 닿기위해서는 action이라는 신성한 의식을 거쳐야한다. 그럼 action을 하면 store(state)와 바로 닿을 수 있느냐?! 그건 또 아니다. 신성한 store 영역을 지키는 문지기가 있는데 그것이 바로 reducer 인것. 그렇다면 component를 store(state)에 닿게하는 신성한 의식인 action은 어떻게..

개발/React 2019. 6. 25. 13:05

JSX

const element = Hello, world!;​ Javascript를 확장한 문법. JSX는 React element를 생성한다. React는 마크업파일과 로직을 분리하는 대신 둘 다 포함하는 컴포넌트 라는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX에 표현식 포함하기 const name = 'Hari'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있다. 즉, {name} 처럼 변수만 넣을 수도 있고 {2 + 2}처럼 수식을 넣을수도 있고 {user.id} 처럼 객체의 프로퍼티값을 넣을 수도 있고..

개발/React 2019. 6. 22. 18:29

Actions

dispatcher는 action을 호출해 데이터를 불러오고 store로 전달할 수 있도록 메소드를 제공. src > actions > TodoActions.js > updateText(todoId, newText) 이 메소드는 view의 이벤트 핸들러에서 호출해야 실행할 수 있고 그 결과로 사용자 요청에 응답할 수 있다. 이 action creator 메소드는 type을 추가할 수 있다. type을 이용해 action이 store에서 해석될 수 있고 적절한 응답이 가능하도록 한다.

개발/React 2019. 6. 21. 17:21