Lecture (86) 썸네일형 리스트형 NEXT 동적 라우팅 사용 npm install next react react-dom 명령이 실행 되어있는 상태에서 진행한다. 일단 파일명이 배열형식 이어야 한다. 예) [index].jsx 이 파일 안에서 useRouter를 import 해온다. import { useRouter } from 'next/router' 미리 만들어둔 컴포넌트 안에서 useRouter 함수 변수 선언 후 post를 가지고 온다. const Post = () => { const router = useRouter() const { post } = router.query return ( {post} ) } export default Post 이렇게 하면 url 뒤로 들어오는 파라미터들이 저기 post로 들어온다. 예) nginx 설치 처음 기본 디폴트로 ssh 명령문 실행한 뒤 ubuntu에서 설치한다. nginx 설치 자체는 sudo apt-get install nginx 이 한줄로 완료된다. 여기서 부터는 환경설정! 일단 pwd로 현재위치가 /home/ubuntu인지 확인한다. 맞다면 cd /etc/nginx로 nginx 파일에 접근 거기에서 vi nginx.config로 설정 파일들을 보면 sites-available sites-enabled 등의 파일이 있다 여기서 sites-available 은 설정파일을 저장하는 저장소이고 sites-enabled는 그 설정파일을 실행하는 곳이다. 예를 들자면 sites-available은 변수 : arr = [1,2,3,4,5,6,7,8,9] >> 여기서 설정파일을 만들어놓고 sites-.. 자바스크립트 postman 연결 1. npm install sequelize sequelize-cli mysql2 2. npx sequelize init (sequelize 폴더 생성) 3. config 폴더에서 config.json 수정 >> password, database 이름 등 4. models 폴더안에 comment.js 파일 생성 (db모델 만드려고) >> 파일에서 db 모델 옵션 설정 예) module.exports = (sequelize,DataTypes)=>{ const Comment = sequelize.define('Comment',{ userid:{ type:DataTypes.STRING(30), allowNull:false, }, content:{ type:DataTypes.TEXT, allowNull:fals.. Restful API 매서드 타입 Restful API를 사용하면 코드를 더욱 직관적으로 볼 수있게 된다. 1. React로 만든 comment를 db와 연결하는 거 2. front server 와 backend server >> back : 실서버 구동 >> front : 구동 X >> 그래서 local에서 작업! >> db 연결하는 것을 완료하면 그래서 매서드 타입들을 정리해 보면 1. GET : 데이터를 가져올때 (CRUD 중 R \\ query문에선 select문) 2. POST : 데이터를 입력할때 (C) insert문 3. PUT : 데이터를 수정할때 (U) update문 4. DELETE : 데이터를 삭제할때 (D) delete문 5. PATCH : 데이터를 일부수정 (U) update문 >> put은 전부 다 수정하고 pa.. EC2 웹 배포 npm 설치 오류 amazon ec2를 이용해 웹 배포를 하는 과정중에 2021.07.16 - [Lecture] - 웹 배포 웹 배포 Amazon ec2 Ec2 인스턴스 생성 Ami에서 ubuntu선택 인스턴트 유형도 ubuntu 선택 보안 그룹 구성에서 http https 유형 추가 시작하기 >> 새 키 페어 생성 // 이름 >> 키 페어 다운로드 다운로드한 키 페어 배포 develop-famous.tistory.com 마지막 git clone을 받고 npm install 을 하려는데 npm comment is not found 라는 오류가 떴다. npm -v를 해서 설치 확인을 해봤는데 똑같은 에러 메세지가 떠서 설치가 안되었다는 걸 알았다. npm 만 따로 설치하려고 sudo apt-get install npm 명령.. 웹 배포 Amazon ec2 Ec2 인스턴스 생성 Ami에서 ubuntu선택 인스턴트 유형도 ubuntu 선택 보안 그룹 구성에서 http https 유형 추가 시작하기 >> 새 키 페어 생성 // 이름 >> 키 페어 다운로드 다운로드한 키 페어 배포할 파일에 값 넣어주기 : gitignore로 깃에 올라가지 않게 해야함 인스턴스 체크 후 연결페이지 들어가서 ssh 클라이언트 들어가서 맨 마지막줄 복사 터미널에서 pem 파일 있는 폴더로 접근 후 sudo ssh명령어 복붙 순서대로 Sudo apt-get update Sudo apt-get install -y build-essential Sudo apt-get install curl Curl -sL http://deb.nodesource.com/setup_14.x.. WebPack 확장자 처리 webpack에서 파일을 불러올때 확장자가 없으면 오류가 난다. 예를들어 loginBox라는 jsx 파일이 있고 그 파일을 불러오고자 한다. import LoginBox from './loginBox' 하지만 이렇게 확장자 없이 불러오면 오류가 나서 import LoginBox from './loginBox.jsx' 이렇게 확장자 표시를 해줘야한다. 이때 확장자 표시가 없이 파일을 불러오기 위해서 webpack에서 처리를 해줄 수 있다. webpack.config.js 파일에 이 구문만 추가해주면 첫번째 처럼 확장자가 적혀있지 않더라도 오류 없이 처리가 가능하다. resolve:{ extensions:['.js','.jsx'] }, WebPack import 사용 본래 node js에서 특정 라이브러리나 파일을 불러올때 require를 사용한다. 예를 들어 const React = require('react'); const {Component} = React; 이런 식이다. 하지만 webpack을 사용할때는 이런 부분이 import 로도 처리가 가능하다. import React,{Component} from 'react' 이렇게 import로 처리한 애들은 babel에서 한번 더 처리가 되고 require는 nodejs에서 처리가 된다. 이전 1 2 3 4 5 6 7 ··· 11 다음
