전체 글
This is probably not a problem with npm. There is likely additional logging output above.
사실 간단한 에러인데 약간 삽질하다 기록합니다 node.js 환경을 쓰시는 분들은 가끔 제목과 같은 문구를 마주하거나 사사로운 에러들을 마주치실 때가 있을 겁니다 그럴 땐 그냥 노드모듈을 제거하시거나 아니면 그냥 둔채로 npm install 을 입력해주시면 부족한 부분들을 다시 설치하게 되니 보통은 해결이 됩니다 가급적... 저처럼 라이브러리를 지웠다 깔았다 하는 행위를 반복하시다보면 반드시 꼬일거라고 생각합니다 ^^ .. 다들 심신에 문제없는 코딩데이 보내시길 바라며 이만
VScode Styled Component 자동완성 기능
React 공부를 하다보니 예제를 따라칠 때 Styled Component를 따라칠 일이 많아졌다 하지만 자동완성 기능이 지원되지 않아서 넘나 귀찮은 것.. 마침 구글링해서 얻은 정보가 있어서 익스텐션 공유차 포스팅 위와같은 좌측 바에서 맨 아래를 클릭하고 검색창에다가 vscode-styled-components Extension 를 입력해주시면 되시겠습니다 설치하면 바로 자동적용되니 이제 편안한 React 개발공부 하러 다시 총총
리액트 조건부 라우팅 방법
리액트에서 로그인 폼을 만들어 보는 예제를 진행 중에 로그인 버튼을 눌렀을 때 조건에 따라 로그인이 되고, 조건이 맞지 않으면 화면이 넘어가지 않도록 구현하기 위해 삽질을 잠깐 해보다가 무언가 단순한 걸 놓치고 있다는 생각이 들어서 공식문서를 참조했습니다. 우선 리액트에서 자주하는 삽질 중 하나이자 꼭 기억해야 할 내용으로 Form을 다룰 때 반드시 e.prevendefault를 활용해야 한다는 것입니다. 이를 설정해두지 않으면 자동으로 렌더링을 하기 때문에 조건을 걸어도 막을 수가 없습니다. 예를 들면 if (username === "admin" && password === "1234") { } else { e.preventDefault(); } 위와 같은 상황을 같이 보실 경우, username이 a..
a component is changing an uncontrolled input of type text to be controlled. 'value' prop on 'input' should not be null.
아마도 많은 사람들이 저랑 같은 상황을 언젠가 마주치지 않으실까 싶어서 공유합니다. 리액트로 form을 코딩하실 때에 제목과 같은 에러를 마주치실 일이 종종 있으실 겁니다. 그 이유를 찾지 못해 구글링과 Stackoverflow를 뒤지다가 문득 아이디어가 떠올랐습니다. 그냥 개발자 화면에 떠있는 에러 문구 자체의 의미를 좀더 깊게 생각해보자 라는 생각이었으며, 이슈 해결 후 방법 공유합니다. 위와 같은 에러가 발생하였으며 원인은 제가 value={this.props.value} 혹은 value={this.props.value || ''} 위와 같은 방법으로 문제를 해결하려 했다는 점입니다. 만약 value={this.props.value == null? "" : this.props.value} 와 같이 ..
리액트네이티브 튜토리얼 - Expo로 간단한 프로젝트 만들기
안녕하세요. 사실은 이미 프로젝트를 제가 만들었는데 스크린샷을 못찍어놔서 글로 설명해야 할 것 같네요.. 포스팅 경험이 많지 않아서 그러니 양해 바랍니다. 먼저 읽고 계시는 분들의 컴퓨터에 전부 Visul Stuio Code가 깔려있다는 전제하에 시작하겠습니다. 우리가 Expo를 사용하기 위해서는 먼저 계정이 있어야 합니다. https://expo.io/ Expo Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. expo.io 위 링크로 접속하셔서 계정을 만드시면 되겠습니다! 그리고 우리는 npm과 Node가 깔려있어야 합니다. https..
리액트네이티브(REACTNATIVE) 란 무엇인가?
우선 이 글을 읽으시는 분들은 보통 2가지 부류로 나뉠 거라 생각됩니다. 리액트가 무엇인지 알고 들어오신 분 리액트도 모르고 리액트네이티브도 모르고 들어오신 분 저도 얼마 전 까지는 잘 모르던 사람으로서, 또 비전공자로서 모두가 알기 쉽게 이해하시도록 설명하려고 합니다. 사실 유치원생도 이해하기 쉽게 설명하고 싶지만.. 그렇게는 어려울 것으로 생각됩니다.. 우선 React란 무엇일까요? React는 페이스북에서 채택하고 있는 JavaScript 라이브러리로서 (VueJs와 AngularJs는 프레임워크) 프로젝트의 규모가 클수록 상태관리 라이브러리와 함께 웹 페이지를 멋지게 구현 및 관리할 수 있게 해 줍니다. 우선은 이 정도로만 설명하도록 하겠습니다. 저 말고도 구글링으로 리액트란 무엇인가 검색하시면 ..
"Required String parameter '파라미터' is not present" 그리고 500에러에 대해서
간단한 에러기록입니다 스프링부트 튜토리얼 학습중에 발생한 에러입니다 Swagger UI를 통해서 그리고 Postman을 통해서 이것저것 해보는데 자꾸 제목과 같은 "Required String parameter 'uid' is not present" 에러가 나오길래 게다가 500에러까지 발견하니 내부로직이 잘못되어 있을 가능성이 높다는 구글링 정보를 통해서 아내가 뭔가 잘못썼구나 하고 한참을 삽질하다 보니 내부로직의 문제가 아닌 yml 파일의 jpa 설정 오류라는 것을 발견하였습니다. properties.hibernate.hbm2ddl.auto: update 여기서 update가 none으로 되어있던 것이죠 세상에는 수만가지 오류가 있는데 구글링 만으로는 한계가 있는것 같습니다 이럴 때 스스로 버그를 잡..
use the defaultvalue or value props on select instead of setting selected on option
리액트 프론트 페이지 개발자 도구에서 오류가 떴을 경우를 가져왔습니다. 뭐 결국 오류난 이유를 찾아보았더니 use the defaultvalue or value props on select instead of setting selected on option 말 그대로 제가 selected라는 옵션을 value와 함께 썼기 때문에 나왔던 빨간 줄이더군요 defaultvalue 를 설정해놓으면 selected가 필요 없는 것이니 value를 defaultvalue 로 바꾸어 준뒤 selected에 들어가있던 값을 넣어주고 selected 구문 자체를 삭제한 결과 해결되었습니다. 애초에 동작이 안되는 코드는 아니었으나 거슬리는건 지워야 하는지라... 다들 도움이 되셨기를 바랍니다