고딩 ai scientist

개발 환경 설정을 위한 설치와 setup을 진행해보도록하겠습니다. 우선 개발 환경에 필요한 여러가지 패키지들이 있는데요. 이것들은 node의 패키지 매니저인 npm을 통해서 설치할 것입니다. npm 외에도 여러가지 패키지 매니저들이 있는데요. Yarn 또는 Pnpm이 있긴합니다. 성능적인 문제로 다른 패키저 매니저들을 선택하실 수는 있으나 NPM만 사용하시더라도 아무 문제 없이 모든 문제에 대응하실 수 있습니다. NPM 사용 방법: 우선 이 패키지가 즉 다시 말하자면 저희가 작업하고 있는 이 프로젝트가 NPM이 관리하고있는 패키지라는 것을 알려줘야하는데요. 그것을 알려주기 위해서는 package.json이라는 파일이 필요합니다. 그것을 만들려면 터미널에 npm init라고 입력을 해주시면 됩니다. 그런데..

자바스크립트는 이름에서도 알 수 있듯 스크립트 언어입니다. 한줄 한줄 실행되는 언어이죠. 원래 브라우저 환경에서만 작동하는 단순한 언어였습니다. 자바스크립트 없이는 웹은 정적인 문서와 다를 것이 없었습니다. 문서와 그 연결이 마치 그물망과 같아서 old wide web이라는 이름이 붙게 됩니다. 이 때 웹의 기능은 문서에서 문서 사이로 움직이고 form을 제출하는 것이 전부였습니다. 이런 웹에 나타난 자바스크립트의 첫 역활은 문서에 어떤 영역을 동적으로 바꾸는 것이였습니다. 그러다 2008년에 구글에서 새로운 브라우저 크롬과 함께 크럼에 들어간 V8이라는 자바스크립트 엔진을 공개합니다. 매우 빨랐습니다. 구글은 크롬이 공개된 날에 V8을 오픈 소스로 공개했습니다. V8은 환경에 상관없이 작동하는 자바스크..

요번에는 서버에서 응답받은 데이터를 처리해줄 것입니다. users 데이터랑 프런트엔드에서 보내는 데이터가 같을 경우에 위 사진처럼 success를 반환하였을 때, 루트 페이지로 이동하게 만들어줄 것입니다. response에서 success가 true일 경우 링크를 이동시켜줘야겠죠. location을 이용해서 처리해주면 됩니다. 결과: 데이터가 일치할 경우: 데이터가 다를 경우: 추가적으로 then 말고 코드에서 fetch()에 해당하는 로직을 수행하다가 에러가 발생할 경우에 에러를 처리하는 방법은 .then() 뒤에 catch()를 넣으시면 됩니다.

로그인이 가능할려면 프런트에서 전달하는 아이디와 패스워드 값을 서버에서 인증하는 과정이 필요하잖아요. 인증을할려면 그 해당 데이터를 서버가 가지고 있어야겠죠. 그래서 상단에 해당 데이터를 만들어주겠습니다. 위 해당 데이터랑 프런트엔드에서 전달하는 데이터랑 인증하는 과정을 만들어보도록하겠습니다. users의 id 안에 includes라는 메서드를 사용해서 id가 있고 이 id 인덱스와 같은 위치에 있는 psword를 검사해줘야합니다. 프런트엔드에서 전달하는 id가 users의 id에 있으면 users에 indexOf를 사용해서 id의 인덱스를 가져오도록하겠습니다. 그리고 안에 if문을 하나 더 넣어서 users의 패스워드가 프런트엔드에서 전달하는 패스워드가 같을 경우 프런트엔드한테 success: true..

역사 Restful API의 탄생 로이 필딩은 웹 소프트웨어를 개발하시고 그런 경험을 토대로 HTTP에 상당한 기여를하신 분입니다. 로이 필딩은 웹 구조를 서술한 비공식 문서들이 존재하나, 실제 웹 구현이 너무 빨라서 시대에 뒤떨어진 경우가 많다라고 말했습니다. 그리고 그 당시에는 이미 캐시와 프록시 등이 웹에는 존재했지만 이에 대해 인식하는 표준은 없다시피했다라고했습니다. 그래서 Rest를 개발하게 되었다고합니다. Rest가 처음 개발된 것은 1994년 10월부터 1995년 8월 사이로 개발되었습니다. 그리고 개발된 이유는 HTTP 1.0, 1.1의 개념을 소통하기 위해서였습니다. 구현 방법 Restful API Rest는 자원의 표현을 가지고 상태를 전달하다입니다. 자원은 URI에 명시하고 표현은 헤..

index.js 먼저 기존에 있던 get으로 동작하는 로그인 api 말고 post로 동작하는 로그인 api를 만들어줍니다. home.ctrl.js 가독성있게 output이라는 객체를 만들어서 home과 login 함수를 넣어줍니다. 그리고 맨 위에 올라와있는 코드에서 post에 해당하는 api process 함수를 만들어줍니다. 바디 파싱을 안하고 실행을 했을 경우에는 아래처럼 결과가 undefined로 뜹니다. POST로 받은 해당 모듈을 파싱을 해줘야하니 body-parser라는 모듈을 이용해주겠습니다. body-parser를 가져왔지만 파싱을 못해주는 상황입니다. 왜냐하면 저는 아직 body-parser를 사용할 때 아직 별다른 미들웨어를 등록 안해줬기 때문입니다. 이제 등록해주겠습니다. 두줄짜리 ..

fetch라는 것을 이용해서 브라우저에 입력한 아이디와 비밀번호 값을 서버에게 전달해보는 네트워크 통신을 해볼 것입니다. 저희가 전달할 값은 req에 해당하는 값이죠. 일단 어떤 경로로 전달할지를 정해줘야합니다. 서버랑 프런트랑 해당 데이터를 어떤 경로에서 주고 받을지를 정해줘야합니다. 그런 경로는 서버 개발자가 설계하게 되고요. 프런트 개발자가 해당 경로를 요청하기전에 그 해당 경로에 API라는게 만들어져있어야합니다. 근데 저희는 라우트에 index.js를 보면 해당 API가 만들어져있는데요. 그런데 아직 아이디와 비밀번호를 받을 API는 만들어지지 않은 상태입니다. 그 API는 다음에 만들건데 그전에 데이터를 전달하는 과정을 설명드리겠습니다. 일단 fetch()라는 것을 통해서 어떠한 경로로 데이터를..

프런트 딴에서는 아이디와 비밀번호를 입력을 받고요. 입력 받은 값을 로그인 버튼이 눌릴 때, 해당 값들이 서버로 전달이 됩니다. 서버는 그러한 데이터를 받아서 로직을 처리하게 됩 니다. 우리가 값을 HTML에을 통해서 입력을하게 되면, 이 데이터들을 자바스크립트에서 제어할 수 있어야합니다. HTML에 존재하는 값을 단순히 자바스크립트에서 제어할 수 없습니다. 그런데 그를 가능하게 하는 것이 DOM(Document Object Model)입니다. 한국말로 문서 객체 모델로, 이것은 일정한 인터페이스인데요. 이 인터페이스를 사용해서 자바스크립트에서 HTML에 존재하는 데이터들을 가져와서 제어할 수 있게 됩니다. login.js에서 id Text에 해당하는 부분을 자바스크립트에서 id라는 변수로 담아줄거에요...

개발에서는 최적화라는 것은 끝이 없습니다. 요번에는 app.listen()을 모듈화 시킴으로써 최적화를 해줄 것입니다. 일단 bin이라는 폴더를 만들고 거기에 www.js라는 파일을 만들어줍니다. app.js에서 app.listen 부분을 복사하고 잘라줍니다. 그러고 나서 www.js에 붙여줍니다. bin/www.js const app = require("../app");

지난번에는 라우팅을 별도로 분리 해줬는데요. 이번에는 이 라우팅 안에서 컨트롤러에 해당하는 부분을 분리를 해주겠습니다. 보통 서비스 개발을 할 때에는 MVC 패턴을 주로 많이 이용하는데요. 그거 말고도 사실 MVP, MTV 되게 다양한 설계 패턴들이 있습니다. 그중에서 저희는 MVC를 이용해주겠습니다. routes\home\home.ctrl.js views\home\index.js 그리고 hello랑 login을 index.js에서 사용할 수 있도록 모듈을 바같으로 빼줄 것입니다. 그리고 오브젝트는 key: value형태로 되어있는데 위 코드를 보면 key만 설정해놓은걸로 보이잖아요. 저렇게 value를 지정 안했을 경우에는 value에 알아서 자체적으로 key와 같은 값이 들어가게 됩니다. 결과: 결과..