profile
음악하는 개발자
post-thumbnail

HTTPS란?

기존 HTTP는 데이터를 주고 받을 때 암호화가 되지 않아 보안에 취약했다. 이를 보안하기 위해 만들어진것이 HTTPS이다.HTTPS는 Hypertext Transfer Protocol Over Secure Socket Layer의 약자로 HTTP에 SSL이 추가가 된

2022년 8월 1일
·
0개의 댓글
·
post-thumbnail

HTTP란?

HTTP HTTP는 Hyper Text Transfer Protocol의 약자로 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜(약속)이다. TCP/IP (Transmission Control Protocol / Internet Protocol)을 이

2022년 8월 1일
·
0개의 댓글
·
post-thumbnail

MERN - logout 라우터 추가

로그아웃은 간단하다. User에 저장된 token을 지워주기만 하면된다! (cookie에 저장된 것을 지우는 것이 아니다.)유저를 찾아서 token을 지운다.

2022년 7월 31일
·
0개의 댓글
·
post-thumbnail

JS - Callback, Promise, async & await

JS는 비동기적으로 처리되는 언어이다. 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 처리한다는 뜻이다. JS가 비동기적으로 처리되는 걸 모른다면hello => 3초 후 Bye, => Hello Again 의 순서대로 출력될 것이라고 예

2022년 7월 26일
·
0개의 댓글
·
post-thumbnail

MERN - Auth 라우터 추가

인증은 유저가 누구인지 확인하는 절차를 말한다. 각 페이지에서 어떤 유저인지에 따라 권한이 달라진다.쉽게 설명하면 유저의 아이디와 비밀번호를 확인하는 절차이다. 앞서 회원가입과 로그인 기능을 구현하였고 로그인에 성공하면 토큰을 생성하고 쿠키(클라이언트)에 저장했다. 이

2022년 7월 26일
·
0개의 댓글
·
post-thumbnail

AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약자로 JS와 XMLHttpRequest 객체를 이용하여 비동기적으로 정보를 교환하는 방법, 기술이다.XMLHttpRequest 이라고는 하나 다른 데이터 객체도 사용가능해서 요즘은 대부분 JSON을

2022년 7월 25일
·
0개의 댓글
·
post-thumbnail

MERN - 로그인 라우터 추가, JWT

로그인은 크게 3단계로 나눠서 생각할 수 있다.요청된 이메일을 db에서 찾는다.요청된 이메일을 찾으면 비밀번호가 맞는지 비교한다.비밀번호가 갖다면 토큰을 생성한다.클라이언트가 서버에 접속을 하여 로그인하면 서버에서 해당 클라이언트에게 인증되었다는 의미로 토큰을 부여한다

2022년 7월 21일
·
0개의 댓글
·
post-thumbnail

MERN - 회원가입 라우터 추가, body-parser, bcrypt

클라이언트/서버 클라이언트/서버는 두 개의 컴퓨터 프로그램 사이에 이루어지는 역할 관계를 나타내는 것이다. 클라이언트는 다른 프로그램에게 서비스를 요청하는 프로그램이고, 서버는 그 요청에 대한 응답을 해주는 프로그램이다. 클라이언트/서버 개념은 단일 컴퓨터 내에서도 적

2022년 7월 21일
·
0개의 댓글
·
post-thumbnail

MERN - MongoDB 연결

관계형 데이터베이스와 대비되는 NoSQL 데이터베이스로 json 형태로 db에 데이터를 저장한다. 데이터베이스에 관한 개념을 설명하는 글이 아니기에 관계형이니 비관계형이니 하는 자세한 설명은 생략한다.몽구스는 몽고디비를 더 쉽게 사용할 수 있는 도구이다. 몽구스를 설치

2022년 7월 21일
·
0개의 댓글
·
post-thumbnail

MERN - 간단한 서버 만들기

MongoDB : NoSQL(Not Only SQL) DB SolutionExpress.js : Node.js FrameworkReact.js : JavaScript Library (Browser-side/Frontend JavaScript)Node.js : JavaS

2022년 7월 21일
·
0개의 댓글
·
post-thumbnail

REST, HTTP 메서드

HTTP 메서드에 대해 알기 위해 먼저 정의되는 것이 REST.REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다. (약속)즉 REST란HTTP URI를 통해 자원을 명시

2022년 7월 14일
·
0개의 댓글
·
post-thumbnail

React - 캐러셀(carousel) 만들기

회전목마라는 뜻으로 이미지 슬라이드이다. 페이지를 제작하면서 직접 만들어보고 관련 내용을 정리하려고 한다.이런 비슷한 형태를 구현했다. 밑에 label의 색이 바뀌는 부분은 아직 구현을 못했다. 수동이 아닌 자동으로 구현했다.주석 처리된 부분은 수동 슬라이드 코드이다.

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

React - 스타일드 컴포넌트(Styled Components)

자바스크립트 파일 안에서 스타일을 작성할 수 있게 해주는 CSS-in-JS 라이브러리이다. 컴포넌트 단위로 스타일을 작성할 수 있어서 관리가 훨씬 편해진다.스타일드 컴포넌트는 추가 라이브러리임으로 아래 명령어를 통해 설치하고 import 해줘야 한다.div태그 스타일링

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

아토믹(Atomic) 디자인 개발 패턴

가장 작은 컴포넌트 단위를 원자(atoms)로 설정하고, 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 패턴이다. 상위 컴포넌트는 순서대로 분자(molecules), 유기체(organisms), 템플릿(templetes) 가며 최종적으로 페이지를 관리한

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

Vue.js - Vue.js란?

앞서 리액트의 기본적인 내용을 정리하고 바로 Vue.js에 대해 정리하는 이유는 두개의 기본적인 내용을 살펴보고 차이점을 보면서 이해를 더 높이기 위함에 있다.리액트와 Vue.js에 대한 이해가 높아짐에 따라 더 깊은 내용을 꾸준히 공부하고 정리할 생각이다.Vue.j

2022년 7월 12일
·
0개의 댓글
·
post-thumbnail

React - React Hook

리액트 훅이란 리액트 16.8버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서 더 직관적인 함수를 이용할 수 있게 하는 기능이다.각각 클래스형 컴포넌트와 함수형 컴포넌트를 이용한 상태값을 제어하

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

React - Life Cycle (생명 주기)

컴포넌트 생명주기 리액트는 컴포넌트 기반의 라이브러리이고 각각의 컴포넌트는 라이프 사이클, 생명주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클의 분류 컴포넌트는 크게 3가지의 생명주

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

React - 컴포넌트란?

컴포넌트는 리액트에서 앱을 이루는 최소한의 단위이다. 리액트로 만든 앱은 여러개의 컴포넌트로 구성을 이룬다.네이버 페이지의 뉴스스탠드 부분이다. 뉴스, 신문사 하나하나 같은 모양과 형태로 이루어져있다. 컴포넌트를 하나 만들어 안에 내용을 바꿔 여러개를 화면에 띄워둔 것

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

React - React란?

리액트는 자바스크립트 라이브러리로써 싱글 페이지 어플리케이션 ui를 생성하는 라이브러리이다. 리액트는 자바스크립트에 HTML을 포함하는 JSX라는 문법과 단방향 데이터 바인딩, 가상돔이라는 개념을 사용한다.가상 돔을 이해하기 위해선 돔의 개념부터 정확히 알아야한다.돔(

2022년 7월 10일
·
0개의 댓글
·
post-thumbnail

프로그래머스[Level 3] N으로 표현

아래와 같이 5와 사칙연산만으로 12를 표현할 수 있습니다.12 = 5 + 5 + (5 / 5) + (5 / 5)12 = 55 / 5 + 5 / 512 = (55 + 5) / 55를 사용한 횟수는 각각 6,5,4 입니다. 그리고 이중 가장 작은 경우는 4입니다.이처럼

2022년 7월 8일
·
0개의 댓글
·