전체 글 (30) 썸네일형 리스트형 [Node.js] npm run start 와 npm start package.json의 scripts가 아래 이미지에서와 같이 있다고 할 때, start 명령어를 실행하는 방법에는 두가지가 있다. 1. npm run start 2. npm start npm run start 라고 해도 동작이 되고, npm start라고 해도 동작이 되는 것을 확인할 수 있다. 두 명령어에는 차이가 없으며 npm start는 단순히 npm run start를 짧게 쓰는 방법일 뿐이다. "scripts": { "start": "node dist/bin/www.js", "test": "jest" }, test 명령어를 실행시키는 방법도 마찬가지로 아래처럼 두 가지 방법이 있으며, 두 방법은 완전히 동일하다. 1. npm run test 2. npm test npm 모듈 설치 시 code EACCES errno -13 npm으로 모듈을 global 옵션을 줘서 설치하려고 할 때 아래 오류를 만났다. code EACCES syscall mkdir errorno -13 에러 로그 아래쪽을 보면 It is likely you do not have the permissions to access this file as the current user 를 확인할 수 있다. 말 그대로 현재 유저가 해당 작업을 하는 데에 권한이 없다는 말이므로, root 권한으로 모듈을 설치해주면 된다. 아래 이미지를 확인해보면 sudo 명령어를 이용하여 root 권한으로 설치 시 정상 설치된 것을 확인 할 수 있다. [JS] optional chaining (?.) JS에서 optional chaining 이라는 것이 있는데, 객체의 속성에 접근하거나 함수를 호출할 때 물음표와 온점을 같이 쓰는 것이다. 만약 접근하려는 객체가 null 이거나 undefined이면 오류를 내보내는 대신에 undefined를 내보내도록 한다. 위 이미지를 보면, person이라는 객체가 선언되어있다. 우선 person에 없는 속성인 names에 접근 후 다시 first 속성에 접근하려고 하면 Uncaught TypeError: Cannot read properties of undefined (reading 'first') 에러가 발생한다. >> person.names ==> undefined >> person.names.first ==> undefined.first --> 에러 발생 .. [React] Context 란? [Context의 배경] 일반적으로 리액트에서 컴포넌트 간 데이터 공유가 필요할 때는 state를 통해서 값을 자식 노드가 부모 노드로 올리고 props를 통해서 값을 부모 노드에서 자식 노드로 전달된다. 아래의 그림의 경우에는 1번 노드에서 5번 노드까지 값을 전달하기 위해서 1,2,3,4,5번 노드를 차례로 거치면서 값을 props를 통해서 전달해야한다. 그런데 만약 로그인된 사용자의 정보와 같이 여러 컴포넌트들에 전달해줘야 하는 props의 경우 이 과정이 꽤나 번거로울 것이다. (prop drilling) 이때 사용할 수 있는 것이 context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 이렇게 되면 불필요한 re-r.. [React] useState와 useReducer useState와 useReducer 모두 리액트 상태 관리 방법이다. 그렇다면 왜 굳이 useState를 두고 useReducer를 추가로 사용하는 것일까? [useReducer의 장점] - 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있다. -> 여러 컴포넌트에서 재사용이 가능하다. -> 컴포넌트와 상태 관리를 분리해서 관리가 가능하다. -> 한 번 작성하고 여러 군데서 가져다가 쓸 수 있기 때문에 useState를 여러번 쓰지 않아도 된다. -> 데이터 상태 관리 포인트가 한군데라 유지 보수가 용이하다. 그렇다면 무조건 useReducer를 쓰는게 이득일까? 아니다. 하나의 컴포넌트에서만 쓰는 값이 있다면 useState가 적절하며, 여러군데에서 쓰이는 값이라면 useReducer가 적절하다. .. [React] 불변성(Immutability) 불변성: 변하지 아니하는 성질 리액트를 얕은 비교를 수행하기 때문에 객체 속에 있는 데이터를 하나하나 다 비교하지 않는다. 다만 값의 참조값만 비교할 뿐니다. 예시를 통해 알아보자. 아래와 같이 person이라는 객체가 있다고 하자. const person = { name: 'John', age: 32, address: 'Seoul' }; person의 age를 변경하고 싶을 때 왜 아래 1번이 아닌 2번을 이용해서 굳이 state를 변경해줘야 하는 것일까? 1) person.age = 42; 2) setPerson({...person, age: 42}); 1번과 같이 진행한다면 화면 상에서 값의 변화가 일어나지 않을 것이고, 2번과 같이 진행한다면 예상대로 화면 상에서 값의 변화가 보일 것이다. 그 이.. [ETC] Firebase authentication Netlify 배포 오류 Firebase authentication을 이용해서 구글 로그인 서비스를 구현한 프로젝트를 Netlify를 통해 배포를 진행했다. 분명 로컬에서 테스트할 때 정상적으로 동작하던게 배포 후에는 아래 에러를 나타내며 구글 로그인이 되지 않았다. FirebaseError: Firebase: Error (auth/unauthorized-domain). 아래 경고 메시지를 보면 승인되지 않은 도메인으로 접근해서 해당 현상이 일어난다고 나온다. 친절하게 현재 서비스되고 있는 도메일을 firebase 승인된 도메인에 넣어주면 된다고 안내를 해준다. 가이드대로 승인된 도메인에 서비스 URL을 넣어주니 에러 없이 정상 로그인이 되는 것을 확인되었다. [ETC] Netlify 배포 시 exit code: 2 CI 옵션 npx create-react-app를 사용하여 만든 리액트 프로젝트를 Netlify를 통해서 배포할 때 아래와 같은 메시지와 함께 빌드가 실패했다. Failed during stage "building site": Build script returned non-zero exit code: 2 Build failed due to a user error: Build script returned non-zero exit code: 2 Failing build: Failed to build site 에러 메시지에서 조금 더 위에 있는 빌드 로그를 보면 아래와 같이 process.env.CI = true가 되어있어서라고 나온다. 배포 시에 환경변수 설정에서 CI를 false로 설정하고 다시 배포를 해보면 정상적.. 이전 1 2 3 4 다음
