작심삼일 개발이야기

리액트로 프로젝트를 진행 중 동작에는 아무 문제가 없었지만 콘솔 창에는 Warning이 생긴 걸 발견했다. Warning: Cannot update a component(`Transaction`) while rendering a different component (`OrderingCompanySelectModal`). To locate the bas setSTate() call inside `OrderingCompanySelectModal`, follow the stack trace as described in .... 버전 16.13.0에서 추가되었다고 검색결과 알게 되었다. 다른 구성 요소에서 렌더링하는 동안 setState를 호출하면? 경고가 표시된다고 리액트 공식문서에 적혀있다. (번역기를 돌려..

이 글은 Yuri Lee 님의 글을 참고하여 작성하였습니다.Request 객체는 3개의 메소드를 가지고 있다.param query bodyparam주소에 포함된 변수를 담는다.https://choisuhyeok.tistory.com/11 이라는 주소가 있다면 11를 담는다. query주소 제일 바깥 ? 이후의 변수를 담는다.https://choisuhyeok.tistory.com/post?q=javascript 이라는 주소가 있다면 javascript를 담는다.bodyXML, JSON, Multi Form 등의 데이터를 담는다. 주소창에서 확인할 수 없다.

이 글은 mia님의 블로그를 참고하여 작성한 글입니다. React Router를 이용하면 3가지 props를 전달받는다. location 현재 경로에 대한 정보와, URL에 대한 정보를 가지고 있다. match 어떤 라우트에 매칭 되었는지에 대한 정보가 있고 prarams에 대한 정보를 가지고 있다. history push, replace로 앞 뒤 페이지를 이동과 다른 페이지로 이동할 수 있다.

터미널 켜서 tsc -w 입력하면 ts파일을 저장할 때마다 tsconfig.json에 설정해둔 값으로 ts파일을 자동으로 js파일로 변경해 저장한다.

이 글은 코딩앙마님의 유튜브를 보고 정리한 내용입니다. 문자 let car:string = 'bmw'; 숫자 let age:number = 30; boolean let isAdult:boolean = true; 배열 배열에 정해진 타입만 추가할 수 있다. let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let wekk2:Array = ['mon', 'tue', 'wed']; 튜플 (Tuple) 배열과 비슷한 형태이지만 인덱스별로 타입이 다를 때 사용하면 된다. 0번 인덱스와 1번 인덱스는 타입이 달라서 사용할 수 있는 메서드도 다르다. ex: b[0].toLowerCase() 는 가능하..

에러 Invalid DOM property `for`. Did you mean `htmlFor`? 아무생각 없이 console 보다가 Warning 발견... error까지는 아니고 위험한건가 뭐..하튼 빨간색이니 지워주도록 하자 해결 방법 이름 // for를 htmlFor로 변경하면 된다. 이름

const form = new FormData(); form.append("name", name); form.append("age", age); console.log(form); 이렇게 formData를 확인하려 console.log를 실행해도 내가 원하는 정보를 얻지 못한다.. formData는 단순한 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태라고 한다. 문자열화할 수 없는 객체이기 때문에 console.log를 사용해서 확인 할 수 없다. // FormData의 key 확인 for (let key of formData.keys()) { console.log(key); } // FormData의 value 확인 for (let value of formData.value..

객체에 접근할 때 프로퍼티가 없어도 에러 없이 접근할 수 있는 양날의 검(?) 같은 문법이다. let person = {}; console.log(person.name.firstName); //TypeError: Cannot read properties of undefined (reading 'firstName') 이렇게 객체에 존재하지 않는 프로퍼티에 접근 하려면 에러가 발생한다. 그래서 개발을 할 때 보통 &&를 사용해서 존재하지 않는 프로퍼티에 접근할 때 사용하곤 했다. let person = {}; console.log(person && person.name && person.name.firstName); //undefined 물론 이런 방법도 있지만 객체의 단계가 깊어지면 깊어질수록 코드의 길이..

시간 참 잘간다

이번 프로젝트를 진행하며 axios를 사용하여 비동기 통신을 사용하게 되었다.  GET, DELETE는 이름만 봐도 GET은 정보를 가져오고 DELETE는 삭제하라는 것 같이 느껴지는데 POST랑 PUT의 차이점은 뭔가 한 번에 확 와닿지 않아서 간단하게 정리를 해보려고 한다. 여러 글을 읽어보니 멱등성이라는 단어를 사용하길래 나도 간단히 적어본다.. 멱등성이란 여러번 반복 실행해도 결과가 같은 것을 의미한다. 예를 들어서 GET, PUT, DELETE는 같은 경로로 반복 실행해도 결과가 같지만 POST는 동일한 결과를 보장받을 수 없다. 1. GET데이터를 검색하거나 읽을 때 사용한다.같은 요청을 여러 번 반복 하더라도 항상 같은 응답을 받는다. 2. POST새로운 글을 작성할 때 사용한다.(그래서 포..