본문 바로가기

전체 글

axios 비동기 post 전송 react, next모두 비동기 처리가 필수입니다. xhr, fetch로도 가능하지만 오늘은 axios에서 json데이터를 전송하는 방식을 익혀볼까 합니다. axios.post(url, formData, { headers: { "Content-Type": `application/json`} } ).then((res) => { console.log(res); }); post전송시 보내는 url, 데이터, req.header를 parameter로 넣어주면 됩니다.(get을 보낼시 데이터가 없을 경우 두번째 parameter를 null로 해주시면 됩니다.) 이때 여기서 주의해야할게 'formData' 형식입니다. 이미지, 영상들은 'event.target.files[0] '와 같이 파일을 넣고 header를 .. 더보기
fs.readFile error in compress-image, imagemagic cra(create-react-app)로 작업하던중 이미지와 영상을 압축하기 위해 compress-image, imagemagic같은 모듈들을 사용했습니다. 그런데 항상 뜨는 문구는 ``` fs.readFile is not a function ``` fs를 아예 인식못한다는 에러만 뜨니...이게....뭐하자는건지... 그러던중 깨달은 사실 '파일을 읽고 써야하는 fs는 브라우저에서 작동이 안된다!' 결론, node와 같은 벡단에서만 사용이 가능하다. 저처럼 CRA에서 사용하시려는 분이 계신다면.... 얼른 스킵하세요. 모듈들을 모두 컴파일하고 돌아가는 cra에서는 fs사용이 불가합니다!! 더보기
Uncaught TypeError: func is not a function at b (<anonymous>:11:6) at <anonymous>:1:1 const b =(a, func) => { func(a); } b(1, console.log(123)); 위 경우에서 b(a())을 실행할 경우 아래 에러가 발생합니다. ``` Uncaught TypeError: func is not a function at b (:11:6) at :1:1 ``` 이는 console.log()를 인자로 전달해야하는데, 실행을 했기때문에 발생하는 오류입니다. 수정 코드는 아래와 같습니다. const b =(a, func) => { func(a); } b(1, () => { console.log(123) }); 함수를 파라미터로 넘겨줄때, 실행하면 안된다는 점 잊지마세요~ 더보기
multi export in cra(create-react-app) export {}, export default, react에서 모듈을 export하는 방법은 많습니다. 다양하게 쓰여 처음에 저에게도 매우 어려웠는데요. 제가 느낀바로, export는 import와 상응하는구나 였습니다. export {Module} => import * a from "...path", 사용시 a.Module export default Module=> import Module from "...path" 본론으로 넘어가, 프로젝트를 더 진행하다보면 모듈의 갯수가 많아집니다. 하지만 늘어나는 모듈만큼 js파일을 늘리는건 미래 유지보수가 힘들어집니다. 그래서 한페이지 안에서 여러 모듈을 export하는 방법을 소개할까 합니다. 사실 정답은 위에 있었습니다. export {module1, mod.. 더보기
only Worker registration successful http://localhost:3000/ 종종 cra(create-react-app)을 사용하다보면 아래와 같이 빈 화면을 띄울때가 있습니다. 음.... 이건머지... 에러도 안나고 worker만 등록 잘되었다는 코솔만 뜨니 처음에는 당황스러웠습니다. npm build도 다시 해보고, fetch가 덜되었는지 worker도 확인하던 중에 찾은 해결법은! ctrl+s, 저장입니다. 위 상황은 종종 편집을 하고 저장이후 webpack이 다시 컴파일을 할때 생기는데, 저장을 한번더 해주면 짠하고 화면이 나타날 겁니다. 더보기
TypeError Cannot read property 'setState' of undefined" 단일 쓰레드 형식인 react는 data를 한곳에서 다룹니다. 클래스별 state을 정할수 있고, 다른 클래스에게 props형식으로 정보를 전달할 수도있습니다. 가장 기본적인 state는 setState을 이용해 접근할수 있는데, 결과를 찍어보면 다음과 같은 에러가 나옵니다. TypeError Cannot read property 'setState' of undefined" 이는 this.setState시 this(state).값이 undefined이기 때문인데, setState함수 실행 자체가 비동기적으로 작동해 this가 정해지지 않은 상태에서 콘솔을 찍었기 때문입니다. state = {} this.setState({ a: "1" }) console.log(this.state) //error 발생 s.. 더보기
바른 마음? - 미용실에서 인간 내면에는 다양한 도덕성이 존재한다고 합니다. 태어난 지역이나 문화에 따라 활성화되는 부분이 달라 개인마다 선을 바라보는 시각이 엇갈립니다. 저자는 책으로만 봐온 공동체와 신성함의 윤리를 느끼기 위해 인도로 넘어갔고, 3개월의 시간은 공감할수 있게 되는 시간이었다고 합니다. 공동체와 신성함의 윤리에 대한 공감은 영화 메트릭스에서 빨간약을 먹어 진짜 몸을 통제하게 되듯이 새로운 깨우침을 줬고, 보수적인 의견을 반사적으로 반대하기 보다 듣고 합리성을 찾는 인내가 생겼다 합니다. 자율성의 윤리를 강조한 배경이라면 어느 순간 성, 권력, 인간의 신체와 견련된 딜레마가 있음을 느끼게 될것이고, 공동체와 신성함의 윤리를 강조한 배경이라면 압제나 평등에 관한 도덕적 울림이 내면에서 떠오르는 날이 올것입니다. 그러.. 더보기
바른 마음? - 카페에서 슈웨더는 도덕의 주제를 3가지 군으로 나누었습니다. 자율성의 윤리, 공동체의 윤리, 신성함의 윤리. 자율성의 윤리는 각각을 하나의 객체로 보는 것을 의미하고, 공동체의 윤리는 개인은 팀, 가족, 나라의 구성원이므로 단체야말로 진정한 가치가 있음을 의미하며 신성함의 윤리는 인간이라는 그릇안에 영혼이 깃들어 있음을 의미합니다. 자율성은 서양, 공동체는 동양문화를 통해 어느정도 가늠이 갔지만 신성함의 윤리는 듣지 못한 도덕성이였고, 이를 접하기 위해 저자는 인도로 직접 찾아갑니다. 3달간 머물며 공부와 문화의 이해를 접했고, 이해를 위해 공감의 단계까지 올라갑니다. 재밌는건 신성함의 윤리의 시선으로는 자율성의 윤리가 이기적으로 보인다는 저자의 묘사였습니다. 사람들 사이에 절대적인 것은 없어, 누군가에게는 주인.. 더보기

티스토리툴바