Today Hailie Learned

깃헙에 새로운 레파지토리를 만들고 푸시를 하려고 하는데 아래와 같이 오류창이 떴습니다. remote origin already exists 해결 방법 원격 저장소와의 연결이 되어 있다고 하니 기존의 연결을 끊고 새로 올리고 싶은 곳에 소스코드를 올리면 됩니다. 1. git remote remove origin 명령어를 입력해서 기존에 연결되어 있는 원격 저장소와의 연결을 끊어줍니다. git remote remove origin 2. git remote add origin [새롭게 연결할 깃 레파지토리 주소] 명령어를 입력합니다. git remote add origin git@github.com:HelloHailie/storybook-practice.git 3. git remote -v 명령어를 입력해서 ..

문제가 일어난 간단한 배경 설명 클라이언트가 새로 입력한 이미지 데이터를 base64로 변환해서 서버로 보낸다. 그리고 서버에서 데이터를 받아와서 클라이언트 서버에서 뿌려주기를 원한다. 내가 직면한 문제 서버로부터 이미지 데이터(base64로 변환된 데이터)를 무사히 가져왔지만, 이미지가 아닌 문자열로 가지고 오는 것이 문제! 미션! 서버에서 가져온 데이터를 문자가 아닌 이미지로 바꿔라!! 삽질한 경로 서버에서 데이터는 무사히 가져왔지만, 어라? 그게 이미지가 아닌 서버네? 그럼 애초에 클라이언트가 데이터를 쏠 때를 고치면 되는게 아닐까????? 라고 생각해서 유저의 데이터 인풋하는 컴포넌트를 수정해보고, 구글링해서 괜찮아보이는 블로그의 코드도 다 따라해보았다. 하지만 결과는 fail!! 3시간이 넘도..

에러 원인 map을 쓰는 구문에서 오류가 발생했습니다. 문법 오류이기 때문에 다음에 작성할 때도 같은 에러가 발생하지 않도록 해야합니다. 에러 해결 1. return 을 쓰지 않을때 👉 map(() => ()) {menuArr.map((menu, index) => ( selectMenuHandler(index)} > {menu.name} ); )} 2. return 을 쓴다면 👉 map(() => { return() }) {menuArr.map((menu, index) => { return ( selectMenuHandler(index)} > {menu.name} ); })}

Each child in a list should have a unique "key" prop. 오류의 원인 ➥ 간단히 배열의 길이를 체크하고 이미 렌더링된 아이템의 수만 확인한다. 리액트에게는 각각의 아이템들이 모두 비슷해 보인다. 그래서 새로운 아이템이 어느 위치에 추가되어야 하는지 모르기 때문에 오류가 나타났다. "key" prop이 없다면 리액트는 새로운 아이템을 div 목록에 있는 마지막 아이템으로 렌더링하고 모든 아이템을 업데이트해서 컨텐츠를 교체한다. 이 방법은 별로 좋지 않은데, 그 이유는 리액트에게 이 모든 아이템들이 비슷해 보이고 배열만 전보다 더 길어진 것을 보았기 때문에 벌어진 일이다. 그래서 추가로 div를 넣어 렌더링해서 끝부분에 추가한 것이다. 그런 다음 모든 아이템들을 지나면..

Cannot set headers after they are sent to the client 에러 원인 Express js. 파일이 하나의 요청(request)에 대해 하나 이상의 응답(response)를 보낼때 생기는 오류 입니다. 에러 해결하기 핵심은 실수로 두 번 호출되는 콜백이나 몸이 전송된 후에 발생하는 오류를 찾아보는 것입니다. 제 코드에서는 오류를 잡는 코드가 2번 반복되어 있어서 오류가 나타나는 것으로 확인하고, 하나를 삭제했습니다. 그랬더니 오류해결! 참고 https://bobbyhadz.com/blog/javascript-error-cannot-set-headers-after-they-are-sent-to-client https://avengersrhydon1121.tistory.co..

SyntaxError: Unexpected token " in JSON at position 0 at JSON.parse 에러의 원인 => json 형태가 아닌 데이터를 json으로 파싱하려고하니까 뜨는 에러 에러 해결방법 express.json()을 하면 배열 또는 객체의 형태만 받아들인다. 그런데 배열이나 객체가 아닌 다른 형태의 body를 가지고 오고 싶다면 (req.body) strict를 false 처리해야한다. 👇Express 공식문서 참고 👇express.json()에서 strict를 false 처리하는 방법 const jsonParser = express.json({strict : false}); 번외 SyntaxError: Unexpected token A in JSON at positi..

미션! 클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답을 받아 화면에 보여 주기! 스터디 시간에 정답 코드를 봤기 때문에 자신 있게 도전했지만 풀리지 않았다.. 정말 코드에는 문제가 없었다. 그래서 여기저기 코드를 다시 보고, 끝내는 깃 클론을 다시 해와서 새로운 파일에서 코드를 작성했는데도 실행이 안됐다. 10시가 넘어서 같이 풀었던 페어에게 연락이 왔다. 그때까지만 해도 스터디에서 정답인 코드를 봤기 때문에 금방 해결할 수 있을 것 같다고 했는데 안됐다. 두시간이 넘도록 들여다봤는데도 도저히 해결책을 못찾겠어서 너무 답답했지만, 이대로 잘 수는 없었다!!! 그래서 정말 지푸라기라도 붙잡는 심정으로 디스코드에 ..

next.js라는 서버사이드 렌더링 프레인 워크로 만들어진 파일을 Create React App를 사용했을때와 같이 'npm start' 명령어로 브라우저를 여는데 위 화면과 같은 오류를 만났습니다. Port 3000 is alreay in use. Create React App를 사용했다면 자동으로 다른 포트로 연결을 해주었지만, next.js는 저 문구만 나오고 더 이상의 진전이 없었는데요! 그래서 구글링 고고!! 맥북 터미널 창을 열고, 아래와 같은 명령어를 입력했습니다. STEP 1. sudo lsof -i :포트번호 ➥ 저의 경우는 3000 포트를 찾고 싶어서 sudo lsof -i :3000을 입력했습니다. ⭐️⭐️⭐️여기서 sudo를 안쓰면 완전히 kill 한게 아니기 때문에 꼭 sudo를 ..

🙃오류 메세지 ~ contains an input of type text with both value and defaultValue props. 👇 오류난 코드 const [username, setUsername] = useState('parkhacker'); 😄오류 해결 방법 ➥ 와 는 defaultChecked를 지원하고 와 는 defaultValue를 지원한다고 한다. 그래서 위의 defaultValue 값을 주석처리 해서 오류를 해결했다. (state의 초기값으로 원하는 값을 설정해줘서 문제 없다고 판단했다. ) 👇 오류 해결한 코드 const [username, setUsername] = useState('parkhacker'); 참고한 사이트 https://ko.reactjs.org/docs/..

👇 오류난 코드 {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */} {newTweet.map((tweet) => { return ; })} 주어진 트윗 목록인 dummyTweets에는 고유한 id값이 있어서 key값에 tweet.id를 설정했지만, 속성이 모든 개체에서 고유하지 않다고 오류가 났다. id라는 고유한 값이 있어서 문제가 없을거라고 생각했지만, 왜인지 모르게 오류가 났다. 😄오류해결 방법 map() 화살표 함수에 두 번째 매개변수인 index 를 사용하는 것이다. 👇 해결한 코드 {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */} {newTweet.map..