나오리의 개발일지 🚴‍♂️=3

VSCode 작업 도중 다음과 같은 에러가 계속 떴다. 현재 프로젝트에서 앵귤러를 사용하고 있으며, [(ngModel)]로 데이터 바인딩을 하는 곳마다 해당 에러가 표시됐다. Property 'ɵunwrapWritableSignal' does not exist on type ... 막상 빌드도 잘되고 실행에 문제는 없었지만 온갖 빨간줄 천지라 해결법을 찾게 됐다... 해결 방법 해결은 꽤나 단순했다. VSCode 익스텐션 중 하나인 Angular Language Service 버전을 자동 업그레이드하면서 발생한 에러였고, 이를 다운그레이드 해주면 된다. (24.02.13 기준) 17.2.0 버전이 설치돼있는데, 한단계 아래인 17.1.1로 다운그레이드 했다. 해결! 참고 사이트 Property 'ɵunw..

최신 업데이트: 2024. 01. 30 현재 시각 구하기 moment() const now = moment(); console.log(now.toLocaleString()); // Tue Jan 30 2024 13:58:30 GMT+0900 특정 날짜를 Moment 객체로 만들기 moment('YYYY-MM-DD') 날짜 문자열을 파라미터로 전달한다. 이때 Moment.js에 지원되는 여러 문자열 포맷이 있는데, 여기를 참고한다. const myDate = moment('2024-01-01') console.log(myDate.toLocaleString()); // Mon Jan 01 2024 00:00:00 GMT+0900 특정 시각보다 먼저인지 뒤인지 알아내기 moment.isBefore(moment..

TDD의 T자도 모르고 개발을 하다가, 개발 코스트를 줄이기 위해 테스트의 중요성을 깨닫게 되어 이번에 새롭게 공부하게 됐습니다. 그렇게 공부하면서 만난 spy, mocking.. 이런 키워드가 구글링해봐도 명확한 개념을 찾기 어려웠는데, 이 원본 포스트에서 도움을 받아 다른 분들께도 도움이 됐으면 하는 바람으로 번역을 공유해봅니다. 😆😆😆 Testing with Mocks & Spies using createSpyObj in Angular Here I am going to explain a very simple way to write test the services injected in your Angular component. luardo.medium.com 앵귤러의 createSpyObj를 이용해 ..

NG8001: 'app-xxx' is not a known element 에러 컴포넌트를 새로 생성해 app 컴포넌트의 자식 컴포넌트로 넣는 과정에서 에러가 발생했다. // app.component.html It Works! Start editing to see some magic happen :) hello // 👈 새로운 컴포넌트 추가 Error 내용 NG8001: 'app-sample-component' is not a known element: 1. If 'app-sample-component' is an Angular component, then verify that it is included in the '@Component.imports' of this component. 2. If 'app..

1. 특정 node 버전으로 설정 nvm을 통해 사용하려는 특정 node 버전으로 설정한다. nvm으로 node버전 관리하기(mac) 🧐 프로젝트마다 요하는 node버전이 다르며, 여러 개의 프로젝트를 진행할 경우 노드 버전을 변경해줘야한다. 하지만 조금 더 편하게 노드 버전을 변경할 순 없을까? 이번시간에는 nvm에 대해 알 mong-blog.tistory.com 2. 특정 Angualr CLI 버전 설치 설치할 Angular CLI의 버전 알아내기 본인의 경우 기존 프로젝트에서 사용하는 CLI 버전으로 다운그레이드하기 위함으로, package.json의 devDependencies를 통해 알아냈다. "devDependencies": { "@angular/cli": "^xx.xx.xx", } 특정 버전..

✅ Angular CLI가 사전에 설치되어 있어야 한다. [Angular] Mac OS에서 Angular CLI 설치하기 1. Node.js & npm 설치하기 Angular를 로컬 환경에서 설치하려면 Node.js와 npm이 필요하므로 Nods.js의 LTS(Long Term Support) 버전을 설치한다. ✅ Node.js를 설치할 때 npm도 함께 설치된다. Node.js Node.js® is a JavaScr na-1999.tistory.com Angular CLI를 통해 프로젝트 생성하기 터미널을 열고, cd를 통해 앵귤러 프로젝트를 생성할 경로로 이동한다. 예를 들어 Desktop 경로에 생성하고 싶다면 다음과 같다. cd Desktop/ 아래의 커맨드로 원하는 이름의 앵귤러 프로젝트를 생성..

1. Node.js & npm 설치하기 Angular를 로컬 환경에서 설치하려면 Node.js와 npm이 필요하므로 Nods.js의 LTS(Long Term Support) 버전을 설치한다. ✅ Node.js를 설치할 때 npm도 함께 설치된다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ✅ 설치 확인하기 터미널에서 아래의 커맨드를 입력하여 각각의 버전이 잘 출력되는지 확인한다. node --version // v20.10.0 npm -v // 10.2.3 2. Angular CLI 설치하기 터미널 또는 Iterm2를 실행하고 아래의 커맨드를 입력한다. sudo npm install ..

목차 1. box-shadow 속성 2. x offset, y offset 3. blur 4. spread radius 5. color 요소에 그림자 효과를 넣을 수 있는 box-shadow 속성에 대해 알아보자. 형식: box-shadow: [x offset] [y offset] [blur] [spread radius] [color] ✅ x offset과 y offset은 필수로 기입한다. 1. x offset & y offset x축과 y축의 그림자 offset을 설정한다. .box { box-shadow: 10px 20px; } x offset의 음수는 요소를 기준으로 왼쪽 그림자가 형성된다. .box { box-shadow: -20px 20px; } y offset의 음수는 요소를 기준으로 위쪽 ..

목차 1. 불변성이란? 2. React의 state가 불변성을 가져야 하는 이유 3. 어떻게 하면 불변성을 가질 수 있을까? 4. state를 직접 변경하지 않고 setState를 써야하는 이유 1. 불변성이란? : 값, 상태를 변경할 수 없는 것 ✅ 자바스크립트의 불변성 메모리 영역의 값이 변하지 않는다 = 불변성 (1) 원시타입 let a = "data1"; a = "data2"; 위 코드에서 변수 a의 값을 변경할 때, 실제로 “data1”이 있는 기존 콜스택 값은 그대로 유지된 채, “data2”를 새로운 콜스택 영역에 할당하고 그 주소로 변수 a가 바라보게 한다. 즉 메모리 영역에서 기존의 데이터가 대체되는 것이 아니라 새로운 영역을 할당하는 것으로, 원시타입은 메모리 영역의 값이 변경되지 않아..

React Query(지금은 Tanstack Query가 공식 명칭이지만 React Query로 부르는게 익숙해졌다💦)로 조건부 query를 할 수 있는 방법을 알아본다. 우리 프로젝트에서 사용하는 react query를 이용한 API 훅 프로젝트에서 사용한 useQuery문의 예시이다. 요약하자면 axios의 get 함수를 정의한 getCheckNotification 함수로 useQuery문을 작성한 뒤, 훅으로 빼뒀다. // api/notification.ts import { useQuery } from "@tanstack/react-query"; // api 함수 const getCheckNotification = async () => { const response = await axios.get(..