728x90 반응형 전체 글86 [CSS] 마우스 스크롤 시 자동으로 스냅(snap)되게 하기 (scroll-snap-type & scroll-snap-align) 간혹 웹사이트들을 구경하다보면, 마우스 스크롤 시 자연스럽게 - 마치 다음 페이지로 넘어가는 것처럼 - 다음 페이지의 맨 윗부분이 y = 0 인 부분으로 스냅(snap)되는 것을 볼 수 있다. 뭔가 대단한 기술이 들어간 것인가?!라고 생각했지만, 아주 간단한 CSS로 구현 가능하다는 것을 알게 되었다. 바로 scroll-snap-type과 scroll-snap-align이다. 동작되는 모습 마우스 스크롤을 하면, 원하는 다음 화면을 가득히 똑! 떨어지게 보여준다. // How-To 1단계: 페이지 엘리먼트들을 만든다. 영상의 예시같은 경우 리액트로 만든 것이여서, Home이라는 컴포넌트 안에 className이 home-sections인 을 여러개 반복해서 만들어주었다. 이 하나가 width와 heigh.. 2021. 6. 3. [TIL] JWT 토큰 만들기, 토큰 유효기간 설정, 토큰 인증하기 (jsonwebtoken) 클라이언트가 웹 서비스를 이용할 땐 서버와 다양한 통신을 주고 받는다. 서버가 클라이언트로부터 권한이 필요한 요청을 받았을 때, 이 요청을 요구한 유저가 그러한 권한이 있는지 등을 확인할 때 쓰일 수 있는 것이 바로 토큰(token)이다. 토큰을 사용한 인증은 세션 기반 인증보다 서버나 DB에 행해지는 번거로움이 줄어들고, 클라이언트에서 인증 정보를 보관하기 때문에 보다 간편하다는 장점이 있다. JWT(JASON Web Token)는 여러 토큰 방식들 중 가장 많이 사용된다. (홈페이지: https://jwt.io/) 홈페이지에 방문해보면 상단 메뉴에 Libraries 탭이 있는데, 여기서 각종 언어별 라이브러리를 확인할 수 있다. 이번에 인증 관련 스프린트 공부를 하며 사용한 jsonwebtoken도 .. 2021. 5. 28. [Database] (개념) 관계형 데이터베이스, NoSQL, NoSQL 종류 데이터베이스(database)란 체계적으로 정리된 데이터의 집합을 뜻한다. 컴퓨터공학에선, 데이터베이스의 종류에 따라 데이터베이스 관리 시스템을 분류한다. 이러한 데이터베이스의 종류는 크게 두가지로 나눌 수 있는데, 바로 관계형 데이터베이스(relational database)와 주로 NoSQL이라고 불리는 비관계형 데이터베이스(non-relational database)가 이에 해당된다. 1. 관계형 데이터베이스(Relational database) 1980년대 대세로 떠오른 관계형 데이터베이스는 행과 열로 이루어진 테이블 형태로 데이터를 저장한다. 테이블 형태로 저장된 상태에선, 행과 열의 조합에 따라 데이터의 식별과 데이터로의 접근이 다른 데이터와의 관계 속에서 이루어지기 때문에 관계형 데이터라고 .. 2021. 5. 25. [React] React hooks 연습: 간단한 To-Do 리스트 리액트를 배운 뒤 모두가 한번쯤은 만들어본다는 To-do list를 만들었다. 다양한 hooks를 연습하고 싶었지만 아무래도 to-do 리스트는 많은 기능이 없기 때문에 useState()만을 사용하게 되었다. 최상단 App 컴포넌트 아래에 List 컴포넌트, 그리고 그 안에 Todo 작성 Form과 To-do 리스트만 있는 아주 콤팩트한 앱이다. 요 to-do list의 간단한 기능은 아래와 같다. 최상단 컴포넌트 최상단 컴포넌트인 App에 초기값으로 initialTodos를 만들었다. 각 todo엔 key값으로 써줄 id와 todo 내용, 그리고 완료 여부를 표시하는 completed만 있다. import './App.css' import List from './List' import { useSta.. 2021. 5. 18. Redux 기본 개념 정리 Redux란? 프로젝트를 만들다 보면 아주 다양한 상태들이 필요하게 된다. 상태는 다크모드/라이트모드 라던가 언어 선택과 같이 전역(global)에 영향을 끼치는 것들도 있고, 특정 컴포넌트 안에서만 관리되는 로컬 상태들도 있다. 앱의 상태는 유저와의 인터렉션 등을 통해 계속 변하게 되는데, 이 상태를 올바르게 관리하는 것은 당연히 중요한 일이다. 그러나 이렇게 올바르게 관리하고 싶다라는 긍정적인 마음가짐과는 다르게 프로젝트의 규모가 어느 정도 갖춰질수록 상태 관리는 어려워진다. 리덕스는 이와 같은 경우에 사용하는 상태(state) 관리 라이브러리이며, 복잡한 구조 속에서 상태 관리를 훨씬 쉽게 만들어주는 역할을 한다. 상태 관리 툴의 역할 연습삼아 만들어보는 리액트 to-do list 등과 같은 작은 .. 2021. 5. 16. [React] React Router 아주 쉽게 연습하기! 요즘 코드스테이츠 immersive course에서 열심히 리액트를 배웠다. 그와 함께 배운 react-router-dom을 연습하고자 연습 페이지를 만들었다. 공식 문서를 참고하면서 연습하였으며, 아래 각 컴포넌트에 대한 설명들은 모두 공식 문서를 기반으로 작성한 것이다. (공식 문서: 링크) 시작! 아주 새로운 빈 폴더로부터 시작할 것이기 때문에 새로운 디렉토리를 만들고 create-react-app으로 리액트 프로젝트를 시작한다. npx create-react-app . react-rounter-dom도 받아준다. package json에도 추가해준다. npm install react-router-dom --save 사용할 아이들을 import 해주어야 한다. import { BrowserRoute.. 2021. 5. 16. [JS] React에서 배열인 state에 아이템을 추가하고 싶다면!? (concat()과 Spread Syntax) 코드스테이츠의 커리큘럼에서 드디어 프론트엔드의 꽃이라는 리액트에 돌입했다! 이전에 Pre course에서 만들었던 Twittler 앱을 리액트로 바꾸어 만들어보는 작업을 어제 진행했다. 2021.03.29 - [Learn to Code] - 코드스테이츠 Pre Course 회고 및 4개의 웹앱 과제 결과물 UI 요소가 굉장히 적은 단순한 앱이지만 그래도 나름 단일 책임 원칙(Single responsibility principle)을 머리속에 떠올리며 컴포넌트 단위로 코드를 짜나갔다. 그러던 중, 공식문서를 탐독했지만 찾을 수 없던 방법이 하나 있었는데, 배열인 state에 업데이트를 하려면 어떻게 해야 가장 잘 했다는 소문이 날까??!에 관한 것이었다. 그래서 열심히 구글링을 했고, 역시나 많은 선구자.. 2021. 5. 7. [TIL] node.js 미니 서버 만들기 2009년에 캘리포니아 출신 개발자 Ryan Dahl에 의해 개발된 node.js는 V8 엔진으로 빌드된 자바스크립트 런타임이다. node.js로 인해 자바스크립트는 웹 브라우저를 벗어난 환경에서도 사용이 가능하게 되었다. 이벤트 기반의 node.js는 non-blocking 특성으로 인해 속도가 빠르다는 장점이 있고, I/O 모델이라는 특성이 있다. node.js를 다운로드하면 기본적으로 함께 받아지는 모듈들이 있는데, 이중 http 모듈을 사용하여 간단한 미니 서버를 만들 수 있다. 이번에 새로운 과제로 만들어본 것은 웹앱에서 POST 요청을 받은 뒤 응답을 리턴해주는 간단한 미니 서버였다. 지금 원하는 것은 프론트엔드 개발자가 되는 것이지만, 서버 사이드도 굉장히 흥미롭다는 것을 처음 알게 되었다... 2021. 4. 30. [TIL] 코드스테이츠 chatterbox (client) 과제 (ongoing) 코드스테이츠를 시작하고 이제 두 달이 지났다. 처음 한달은 Pre-course였고, 두 번째 달 부터는 Immersive course에 참여하고 있다. Immersive Course에서의 첫 한달은 Pre에서는 다루지 않았던 더욱 다양한 내용들을 다루고 있는데, 이번에 처음으로 서버와 통신을 하는 과제를 만들게 되었다. 아직 Client 쪽에서의 요청을 연습하고 있는 중이어서, 서버는 직접 구축한 것이 아닌 AWS에 미리 구축되어 있는 코드스테이츠의 서버를 사용하였다. 이번 채팅앱에서 구현한 기능들은 아래와 같다: - 메시지 작성 및 POST 요청 - GET 요청 후 화면 렌더링 - 채팅방 입장 및 입장한 채팅방에 맞는 채팅 렌더링 - 새로운 채팅방 만들기 - 채팅창 지우기 (Clear Messages .. 2021. 4. 29. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90 반응형
