본문 바로가기

전체 글

 (163)
WEB Node.js : 자바스크립트 언어를 이용해 컴퓨터와 소통하는 프로그램 패키지 / 라이브러리란? : 프로그램을 최소단위로 실행항 수 있는 프로그램의 묶음 이 패키지를 관리해주는게 NPM ( Node Package Manager) node-modules 안에 있는 것들이 라이브러리(패키지)들 예) express, react-dom, ...,etc 프레임워크란? : 패키지(라이브러리)들을 여러개 모은 것을 framework라고 한다. 프레임워크의 특징은 폴더트리가 존재한다는 것 Express? : Web server 쉽게 만드려고 생긴 라이브러리 React : node.js 로 만들어진 프론트엔드 프레임 워크 사실 리액트가 패키지인지 프레임워크인지에 대해서는 의견이 분분하다. 하지만 개발자들이 임의로 지키는..
[react] next google analytics 연결 일단 google analytics에서 계정을 하나 만든다. 계정이름과 속성이름 모두 test 로 통일 한다. 데이터 공유 설정 체크후 확인 속성도 변경 후 다음 비즈니스 정보까지 설정 후 확인을 누르면 이런 화면이 뜬다. (관리 > 속성 > 데이터 스트림 에서 언제든지 추가 및 확인을 할 수 있다.) 나는 url을 www.test.com으로 입력하고 측정 설정 후 스트림 만들기를 눌렀다. 그럼 세부정보를 확인할 수 있는데 여기서 태그하기에 대한 안내 부분에 새로운 온페이지 태그 추가에 들어가서 만들어진 사이트 태그를 복사 후 head 태그 섹션에 넣으면 애널리틱스에 정보가 쌓인다.
Styled-Component로 하위 엘리먼트 css 입히기 default npm install styled-components되어있고 import Styled from 'styled-components' 로 파일안에 선언이 되어있어야 함 일단 Toggle이라는 이름의 styled-component를 만들어보자 const Toggle = Styled.div`` 이제 백틱 사이에 css 넣으면 css 가 지정된 엘리먼트를 사용할 수 있음 const Toggle = Styled.div` background:transparent; border-color:transparent; ` 여기서 Toggle 컴포넌트 안에 다른 엘리먼트들이 들어가 있을 때 styled-components로 안에 들어 있는 엘리먼트들에 한번에 css 를 입힐 수 있다. styled-componen..
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 명령..

티스토리툴바