🤍익스프레스로 SNS 서비스 만들기 앞서 배운 내용들을 바탕으로 로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉 등의 기능이 있는 실제 웹 서비스 제작해보기. 프로젝트 구조 갖추기 1. nodebird 폴더 만든 후 package.json 생성 2. 템플릿 파일 넣을 views 폴더, 라우터 넣을 routes 폴더, 정적 파일 넣을 public 폴더 생성. 3. 프론트단 html 작성 {% extends 'layout.html' %} {% block content %} 이메일 닉네임 비밀번호 회원가입 {% endblock %} {% block script %} {% endblock %} {% extends 'layout.html' %} {% block content %} {% if user..
🤍NoSQL vs SQL MySQL은 SQL을 사용하는 대표적인 데이터베이스, SQL을 사용하지 않는 NoSQL의 대표 주자는 몽고디비이다. SQL(MySQL) NoSQL(몽고디비) -규칙에 맞는 데이터 입력 -테이블 간 JOIN 지원 -안정성, 일관성 -용어(테이블, 로우, 컬럼) -자유로운 데이터 입력 -컬렉션 간 JOIN 미지원 -확장성, 가용성 -용어(컬렉션, 다큐먼트, 필드) 🤍몽고디비 설치 홈페이지 접속 - 다운로드 체크박스 해제 설치 완료 실행 누구나 몽고디비에 접속할 수 있는 상태이므로 관리자 계정 추가 🤍컴퍼스 설치하기 몽고디비는 관리 도구로 컴퍼스를 제공한다. 윈도우는 자동으로 설치가 되므로 따로 설치 안 해도 된다. 홈페이지 접속 - 다운로드 🤍커넥션 생성하기 Authenticatio..
🤍시퀄라이즈란? MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리 MySQL 이외에 MariaDB, PostgreSQL, SQLite 등등 같이 사용 가능 자바스크립트 구문을 알아서 SQL로 바꿔주기 때문에 편리함. 🤍시퀄라이즈 실습 1. 프로젝트 생성 2. sequelize, sequelize-cli, mysql2 패키지 설치 npm install express morgan nunjucks sequelize sequelize-cli mysql2 npm i -D nodemon 3. 시퀄라이즈를 통해 익스프레스 앱과 MySQL 연결 app.js configure.json 4. 테이블 생성 & 모델 정의 댓글 테이블 회원 테이블 모델 정의 npm start 명령어로 실행하면 테이블이 생성되는 것을 확..
🔍미들웨어란 미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간(미들 middle)에 위치하여 미들웨어라 부른다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고 나쁜 요청을 걸러내기도 한다. app.use(미들웨어) 모든 요청에서 미들웨어 실행 app.use('/abc', 미들웨어) abc로 시작하는 요청에서 미들웨어 실행 app.post('/abc',미들웨어) abc로 시작하는 POST 요청에서 미들웨어 실행 🔍morgan, cookie-parser, express-session, dotenv 설치 dotenv를 제외한 다른 패키지는 미들웨어임. dotenv는 process.env를 관리하기 위해 설치. app.use(morgan('dev')); 인수로는 dev 이외에도 combined, ..
📝뷰(Vue.js) 미니 프로젝트 Todo List App 만들기 1. 프로젝트 생성 vue create todo 2. 기본 디렉토리에 있는 HelloWorld 컴포넌트 지우고, index.html에 부트스트랩 CDN 추가 3. App.vue 코드 작성 Todo App
🤍beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계. 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않고 화면 요소(ex.dom)에도 접근할 수 없음. 🤍created data 속성과 methods 속성이 정의되었으므로 두 속성값에 접근하는 로직 구현 가능함. 하지만 아직 화면 요소에 인스턴스 부착 전이므로 template 속성에 정의된 dom 요소에 접근하는 코드 구현은 불가능. 🤍beforeMount render() 함수 호출되기 직전의 단계. created 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전 호출되므로 화면에 붙이기 전 실행해야 할 코드를 구현하면 됨. 🤍..
🔍슬롯(Slot)이란? 슬롯은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구이다. (=기존 컴포넌트 재사용성을 높여줌) 컴포넌트에 콘텐츠 혹은 다른 컴포넌트를 또다른 방식으로 주입시킬 수 있는 방법 🔍슬롯 기본 예제 Slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 함. 부모 컴포넌트인 About.vue에 아래 코드를 작성 한다. 그럼 자식 코드의 slot 태그 위치에 해당 코드가 추가되어 로드된다. 만약 slot을 두 개 만들고 각기 다른 자리에 html 코드를 넣고 싶다면 slot에 이름을 붙여주면 된다. 그럼 header 이름을 가진 slot 태그에 해당 코드가 추가되며 만약 default로 지정할 경우 이름이 정해지지 않은 곳에 추가됨. 만약..
🔍부모로부터 props를 받는 자식 컴포넌트 작성 자주 사용하는 스타일을 별도 자식 컴포넌트 InputField.vue로 분류하였다. 🤍부모 컴포넌트 Home.vue InputField를 불러오고 자신의 data인 name을 name 속성으로 (:name) 바인딩하여 props로 내려줌. 🤍자식 컴포넌트 InputField.vue props로 name을 받아와서 input의 value 속성으로 바인딩. => 부모 컴포넌트로부터 props로 받아온 name 값은 input의 value 값으로 지정되지만, 사용자가 input box에 입력한 값은 props.name 값으로 지정되지 않음. 이를 해결하기 위해서 @input 속성을 사용할 수 있다. 🤍@input @input을 이용하며 input 태그에 입력되..