본문 바로가기
반응형

분류 전체보기50

styled-components 알차게 사용하기 이번에 정리할 내용은 styled-components가 가진 기능들을 보다 알차게 사용하는 법에 대한 것이다. styled-components는 각각의 컴포넌트들을 생성하고 그 컴포넌트들의 css를 바로 작성할 수 있게 해주는 라이브러리이다. 기존의 css나 태그의 style 속성을 사용할 때는 변수를 사용할 수 없었지만, styled-components를 사용하면 컴포넌트이기 때문에 props로 값을 받아 변수처럼 사용할 수 있다. import styled from 'styled-components'; const ImageBox = () => { return( ); }; const Image = styled.div` width: 10px; height: 10px; background: url(${pro.. 2021. 4. 22.
MongoDB 연결하기 MongoDB를 Node.js에 연결하는 방법은 여러가지가 있지만 그 중에서도 mongoose를 이용하여 연결하는 방법을 정리하고자 한다. mongoose는 크게 4가지 단계로 이루어진다. 1. 데이터 베이스 연결 const mongoose = require('mongoose'); const url = 'mongodb://localhost:27017/Moviest'; mongoose.connect(url); const db = mongoose.connection; db.on('error', (err)=>{ //error handling }); db.once('open', ()=>{ //db handling }); 2. 스키마 정의 - 스키마: 도큐먼트의 타입과 형태를 정의 - 타입: String, Num.. 2021. 4. 21.
Express란 무엇일까? 🎇 Express Express는 HTTP 요청, 응답을 쉽게 하도록 도와주는 웹 프레임워크이다. 1. 서버 생성, 시작 var express = require('express'); var app = express(); app.listen(3000); 2. 라우팅 요청을 요청 처리 미들웨어로 분배해준다. 1) HTTP method 별로 라우팅 app.get('/', (req, res)=>{ // get request handling }); app.post('/', (req, res)=>{ // post request handling }); 2) url 경로 별로 라우팅 app.get('/user', (req, res)=>{ // /user url에 대한 handling }); app.get('/items.. 2021. 4. 20.
JSON과 XML에 대해 알아보자 💻 웹 기반 서비스 서버 - 웹 브라우저 - 모바일 웹 브라우저 클라이언트는 서버에 html, css, js, 이미지 등을 요청하여 얻은 데이터를 바탕으로 웹 페이지를 구성함. 📱 모바일 서버 - 네이티브 앱 웹 처럼 html이 아닌 자체적인 코드를 가지고 화면을 구성함. html, css, js 등이 필요 없다. xml, json 등의 포멧의 데이터를 필요로 한다. 화면 이동을 클라이언트(앱)에서 담당해서 라우팅이 필요하지 않다. 📃 JSON 1. 특징 - 'property: value' 형식 - 문서 크기가 작아서 네트워크를 이용하여 주고 받기에 편리하다 - property의 이름은 중복될 수 없음 { 'greeting': 'hello', title: 'name', price: [4,5,6] } 2... 2021. 4. 19.
Node.js 이해하기 Node.js는 쉽게 말해 웹브라우저 바깥의 환경에서도 javascript가 동작할 수 있게 하는 프레임워크이다. ✨ 특징 - 브라우저 밖에서 js 코드를 실행할 수 있도록 해준다. - 크롬 브라우저에서 사용하는 것과 같은 V8 엔진을 사용한다. - 이벤트 기반의 비동기 I/O 프레임워크이다. - commonJS 를 구현한 모듈 시스템이다. - 싱글 스레드를 기반으로 동작한다. 👍 장점 - 비동기 I/O 프레임워크이다. 서버의 경우에는 I/O를 빈번하게 사용한다. (ex: DB로 부터 데이터 읽어오기, 수정하기...) 그래서 비동기 I/O 라는 것이 큰 장점이 된다. - 그리고 클라이언트에서 사용하는 언어인 js로 작성 가능하다. - 간단한 구조로 구성된 프레임워크이다. - 다양한 라이브러리(모듈)가 존.. 2021. 4. 19.
크롬 익스텐션 개발기(3) : storage 우리 프로그램은 유저의 로그인 여부를 파악하는 것이 중요하였다. 그래서 브라우저의 local storage와, chrome extension storage를 사용하였다. local storage를 사용하게 되면 개인 pc의 브라우저에 저장되기 때문에, 컴퓨터를 껐다 켜도 값이 유지되어 있었다. 저장된 값을 확인하는 방법은 윈도우의 경우 F12를 누르거나, 그 외의 경우 마우스 우클릭을 한 뒤, →검사→Application→Storage의 localstorage 항목을 확인하면 된다. 또한 여기서 특정 항목을 선택하여 그것의 key나 value 값을 변경할 수 있다. 사용을 위한 코드는 다음과 같다. // local storage에 특정 key와 그에 대한 value 저장하기 localstorage.set.. 2021. 2. 12.
반응형

티스토리툴바