노인과바다의 개발로그 노인과바다의 개발로그

json-server로 간단하게 api테스트를 하려고 다음과 같이 만들었는데 프론트에서는 정상적으로 계속 작동이 되는데 백엔드에서 Cannot set headers after they are sent to the client 라는 에러가 계속 났다. 검색을 해 보니 주로 res가 중복되었을때 나온다고 한다. 하지만 내 코드에서 res를 두번쓴곳이 없는걸? 또 검색을 해보니 미들웨어에서 res를하고나서 next()를 했을때에도 발생한다고 한다. res.응답메서드"는 한 번만 쓸 수 있다.. res.send 후에 next()를 하면 다음 미들웨어에서 또 res.send를 하게 되므로 res가 두개가 오게 되기 때문에 두번째 헤더를 세팅할 수 없다는 식으로 에러 메세지가 나온것이다. next를 할 거면 nex..

회원가입 창에서 패스워드 중복검사를 구현하던중 문제가 생겼다. 해결하는데 3시간도 더걸린거 같다 ㅠㅠㅜ 분명히 input에서 onChange를 이용해서 event.target.value를 받아 오는 것 까지는 콘솔창에 제대로 찍히는데, 이를 스테이트에 넣으면 제대로 업데이트가 안되는 것이었다. 콘솔로 찍어보니 password나 passwordConfirm에 어떤값을 넣더라도 첫번째로는 빈스트링이 출력이 되어서 제대로 비밀번호와 비밀번호확인이 일치하는지 검사가 안되는 것이었따...검색을 해보니 useState에 콜백을 주라고 해서 줘봤지만 여전히 무용지물.... 원인을 찾아보니 setState로 업데이트를 하더라도 그 값이 업데이트 되는 것은 동기적으로 되지 않고 비동기적으로 된다고 한다!! 무슨말인고 하..

로그인을 위해 유저 정보를 받아온 뒤 에 스테이트에 저장하려고 했다. useEffect 를 써서 userInfo res를 객체를 setState를 해줬는데도 결과는 빈배열...이 계속 찍히는 것이었다. 이걸 해결하는데 거의 반나절이 걸렸으므로 해결방법을 써본다... 실행순서와 원인: useEffect=>(axios.get response 데이터를 가지고+setState())를 실행시키지만 setState는 response가 올때까지 기다려 주지 않는다. 그냥 빈 객체로 초기화 시켜버린상태이고(setState감지를 못함? 혹은 그냥 setState를 실행했지만 변화가 없어서 그냥 턴이 넘어감?) 데이터가 다 받아진 다음에 다시 setState를 하려 하지만, useEffect가 재 실행되지는 않는다(빈 의..

노드 js에서 error를 console.dir했을때 객체형식으로 나오지가 않아서 에러메세지를 프론트의 유저가 한테 어떻게 전달해야 할지 고민이 많았다. 처음에는 그냥 catch의 인자로 email을 전달해서 그 email이 없는거라는 메세지를 컨트롤러에서 적어서 프론트단으로 보내주는 방식을 사용했었는데,,, 뭔가 이건 제대로된 에러처리가 아닌거 같아서 에러객체에 대해 공부해봤다. 그 결과,,역시나,, 에러 또한 객체였다. node js에서 console.dir이 안써지는것이었다...헐,,ㅎ

JWT Authentication 인증 로그인/ 일정 권한이 주어진 사용자임을 id pw등을 통해 인증받는것 Authorization 로그인이 유지되는 상태에서 일어나는 일 한번 인증을 받은 사용자가 이후 서비스의 여러 기능들을 사용할 때 로그인후 친구의 목록을 보거나, 내 담벼락에 글을 작성하거나, 친구게시물에 내아이디로 좋아요나 댓글달기와 같이 내 계정으로만 할 수 있는 활동을 시도할 때 페북이 내가 로그인 되어있음을 알아보고 허가를 해주는것 로그인이 생각보다 무거운 작업 이를 반복하지 않기 위해서 session이란게 나왔다. 쿠키(브라우저에 저장되는 정보) 세션: 어떤 사용자가 서버에 로그인이 지속적으로 되어있는 상태를 session이라고 함 사용자가 로그인에 성공하면 서버는 '세션표딱지'를 출력 ..

교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. API로 정보를 받아오기 위해 프론트에서 HTTP요청을 보냈을 때 미리 설정을 해주지 않으면 Cors문제로 막힘 어디서 부터 보낸 요청이 막히는가? 정답: 브라우저: SOP(Same Origin Policy)를 통해서 이를 막음 왜? 어떤 홈페이지에 접속한다는것은 그 사이트의 HTML, CSS, JS가..

npm i mysql Performing queries The most basic way to perform a query is to call the .query() method on an object (like a Connection, Pool, or PoolNamespace instance). The simplest form of .query() is .query(sqlString, callback), where a SQL string is the first argument and the second is a callback: connection.query('SELECT * FROM `books` WHERE `author` = "David"', function (error, results, field..

리엑트 렌더링에서 함수컴포넌트 = just regular function이다. 차이가 있다면 JSX를 리턴하고 있다는 것. 함수는 누군가 불러와야 사용이 된다. 함수형컴포넌트를 보면 분명히 다른곳에서 불러오는 JSX가 있을 것이다.리엑트가 여기서 JSX를 통해 함수형컴포넌트 들을 하나씩 빠짐없이 호출하고 이것을 DOM명령어로 변환하여 화면에 출력한다. 중요한점은 리엑트는 이 행동을 절대로 다시 반복하지 않는다. 즉 초기에 렌더링 되었을때만 모든 함수를 호출한다. 이로 인해 벌어지는일이 컴포넌트 내의 변수가 바뀌더라도 컴포넌트 함수는 다시 재실행 되지 않기 때문에 화면에서 그 변수값을 렌더링하고 있는 부분이 있다면 화면상에 변화가 나타나지 않는다. 화면을 변화(재렌더링) 하게끔 함수를 다시 호출하기 위해서..