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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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