웹 개발

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

셀렉터 CSS가 style을 적용하고자하는 HTML 요소를 특정하는 방법이다. HTML에 요소 자체나, class, id 이름으로 특정한다. 자주 사용하고 알아두면 좋을 셀럭터를 정리해보려 한다. 전체 셀렉터 -> HTML 문서 내의 모든 요소를 선택한다. 태그 셀

CSS에서 사용하는 대표적인 크기 단위는 px, em, % 등이 있다. px은 절대값이고, em, %는 상대값이다.대부분의 브라우저 폰트 사이즈 기본값은 16px, 1em, 100%이다.px은 픽셀(화소) 단위이다. 1px는 화소 1개의 크기를 의미한다. 모니터의 해상

박스 모든 html 요소는 box(사각형) 형태의 영역을 가지고 있다. 이 box는 content, padding, border, margin으로 구성된다.

background-image 요소에 배경 이미지를 지정한다. background-repeat 배경 이미지의 반복을 지정한다. 수직, 수평, 또는 수직과 수평 모두의 반복을 지정할 수 있다. background-repeat : repeat-x => x축으로 반복

position position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다. static (기본위치) static은 position 프로퍼티의 기본값으로 값을 지정하지 않았을 때와 같다.

트랜지션은 css 프로퍼티의 값이 변화할 때, 일정 시간에 걸쳐 일어나도록 한다.기본 상태인 빨간 사각형이 있다가 마우스를 올리면(hover시) 2초에 걸쳐 파란 원으로 변한다.트랜지션의 대상이 되는 css 프로퍼티명을 지정한다. 지정하지 않는 경우 모든 프로퍼티가 트

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

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

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

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

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

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

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

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

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

넷플릭스 클론을 하면서 api 요청으로 받아온 이미지 url을 inline 방법이 아닌 styled-component로 적용하려고 든 아이디어를 정리하고자 한다.css, module css의 사용은 어려워 보인다. 코드를 살펴보자.movie는 api요청을 받아올 영화

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

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

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

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

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

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

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

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

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