[포스코x코딩온] 웹개발자 풀스택 과정 6주차 회고록 - Mysql과 연동하여 비동기 통신하기(1) - Mysql 설치 및 사용법

🤔 어떤 실습을 할 것인가?? 이번엔 처음으로 DB와 연동하여 비동기 통신을 할 것이다. 백엔드에서 가장 해보고 싶었던 실습이다. CRUD가 어떤 식으로 작동을 하며 좀 더 mvc모델을 적극적으로 배울 수 있는 실습이 될 것이다. -실습내용- 1. 사용자가 회원가입을 한다. 2. 로그인 할 때 정보가 일치하면 프로필 페이지로 이동한다. 3. 프로필 페이지에서 정보를 수정하고 싶으면 수정하고 삭제하고 싶으면 삭제한다. 4. 이 모든 것이 DB와 연동되서 실행된다. 시작하기 전.. 이젠 express, ejs 등과 같은 기본 설정을 하는 것은 설명하지 않겠다. (기본이니깐..😁) 근데 여기선 mysql과 연동하기 위해 추가로 mysql을 설치해 준다. 여기서는 mysql 설치와 사용법에 대해서만 설명 할 것..

• format_list_bulleted 포스코x코딩온
• · 2023. 8. 15.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 5주차 회고록 - MVC 구조

이전 졸업작품을 할 때 백엔드 친구가 작업하는 화면을 본 적이 있다. 그때 프론트에 비해 엄청 복잡한 폴더를 보고 놀랐던 경험이 있다. 그 폴더들이 각각 무엇을 하는지 궁금했던 나는 친구에게 물어봤지만 그 당시에는 이해하지 못했다. 🥲 (view는 너네가 만든 html이 있는 폴더고.. JS는 여기에 있고... 주소이동은 여기서하고...) 아주 간단한 실습을 한 폴더다. 아주 간단한 실습인데도 구조가 생각보다 어지럽게 되어 있다. 그때 당시 이해 못한건 당연 할지도 모른다. 그래서 나는 실습을 통해 완전 초보자의 관점에서 설명을 할 것이다. 🤔 MVC란? Model View Controller의 약자이다. 하나의 프로젝트를 구성할 때 그 구성요소를 세가지의 역할로 구분한 패턴이라고 생각하면 될 것 같다...

• format_list_bulleted 포스코x코딩온
• · 2023. 8. 11.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고록 - 파일 업로드(multer)

⚒️ 오늘 할 실습 로그인을 한 후 자신의 프로필을 바꿀 수 있는 설정이 있다. 오늘은 이 프로필을 설정하는 방법에 대해 배울 것이다. 사실 현재는 백엔드와의 통신을 하는 것으로 끝이나 이후에 db와도 연동해서 할 계획이다. 이미지 파일을 올리기 위해서는 multer라는 미들웨어가 필요하다. (대중적으로 가장 많이 쓰인다고 하셨다.) 😮 그전에! 기본에는 데이터만 보냈기 때문에 body-parser만 썼다. //body-parser app.use(express.urlencoded({ extended: true })); app.use(express.json()); 하지만 body-parser는 이미지, 동영상, 파일 등을 보낼 수 없다는 단점이 있기 때문에 이번 시간에 보낼 이미지를 보내기 위해서는 또 다..

• format_list_bulleted 포스코x코딩온
• · 2023. 8. 8.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고록 - 동적 Form 전송(Axios - 비동기 HTTP 통신)

오늘 할 실습은❓ 오늘 해볼 실습은 아직 데이터베이스가 없기 때문에 임의의 아이디와 비밀번호를 부여해서 사용자가 입력한 아이디와 비밀번호가 같으면 로그인 성공 메시지를 띄우고 틀리면 로그인 실패 메시지를 띄우는 것이다. 이전 블로그에선 동기방식의 HTTP 통신을 통해 정적으로 데이터를 주고받아봤다. 그렇기 때문에 페이지 이동이 있었지만 지금 할 것은 비동기식 방법의 HTTP 통신을 할 것이다. 페이지 이동 없이 데이터를 주고받는 실습을 해 볼 것이다. 비동기 HTTP 통신 방법에는 총 3가지가 있다. 1. Ajax 2. Axios 3. Fetch 나는 개인적으로 JQuery를 싫어하기 때문에 Ajax는 안 쓸 것이고 Fetch는 이전 졸업작품에서 질리도록 써봤기 때문에 안 쓸 것이다. 가장 사람들이 많이..

• format_list_bulleted 포스코x코딩온
• · 2023. 8. 7.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고록 - 정적 Form 전송(동기 HTTP 통신)

❗미리보시오❗ 여기서는 동기 방식으로 웹 페이지를 만드는 방법에 대해 다룰 것이다 ✅ [포스코x코딩온] 웹개발자 풀스택 과정 4주차 회고록 - Express, EJS 이번 블로그는 내가 지금까지 배운 백엔드 과정을 정리하는 시간을 가질 것이다. 1️⃣ npm 사용하기 nodejs를 사용하기 위해서는 필수적으로 npm을 사용해야한다. 백엔드를 할 때 여러 패키지가 필 jin99.tistory.com 이전 블로그에서는 데이터를 주고 받는 과정이 없었다. (백엔드에서 데이터를 주면 프론트에서 보여주는 정도..?) 하지만 이번 시간은 프론트에서 보낸 데이터를 백엔드에서 확인하고 다시 프론트로 보내주는 과정을 해 볼 것이다. Get과 Post 방식을 사용해서 데이터를 보내고 그 차이점을 알아보자! 🤔 그 전에....

• format_list_bulleted 포스코x코딩온
• · 2023. 8. 6.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4주차 회고록 - Express, EJS

이번 블로그는 내가 지금까지 배운 백엔드 과정을 정리하는 시간을 가질 것이다. 1️⃣ npm 사용하기 nodejs를 사용하기 위해서는 필수적으로 npm을 사용해야한다. 백엔드를 할 때 여러 패키지가 필요한데, 이를 기록해주고 정리해주는 관리 역할을 하기 때문이다. 이러한 정보들은 package.json에 기록된다. (주로 프로젝트에 설치된 패키지 종류를 본다.) 1. package.json에 직접 내용을 입력하고 싶을 때 npm init 2. package.json을 기본값으로 생성하고 싶을 때 npm init --yes npm init -y 3. 패키지를 설치하고 싶을 때 npm install 패키지 이름 npm i 패키지 이름 // 둘다 가능하다 설치된 패키지의 이름과 정보는 package.json의..

• format_list_bulleted 포스코x코딩온
• · 2023. 8. 3.
• textsms