728x90 반응형 전체 글81 [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagaksagak-client/wiki 발표자료: https://drive.google.com/file/d/1bcdIMkNRRMhKfTnFa8Q-156mqki6uf8V/view 세오GitHub: https://github.com/ksyksy815 이번 포스트에선 이제 막 마무리짓게 된 실시간 멀티유저 화상채팅 기능을 구현한 파이널 프로젝트에 대해서 소개하고자 한다. 📃 개요 사람들마다 공부 스타일은 모두 다르다. 어떤 사람들은 아주 조용한 곳에서 혼자 있을 때 엄청 집중을 잘하고, 어떤 사람들은 카페나 도서관같은.. 2021. 7. 21. [회고] 첫 프로젝트: 임금님귀(King'sEars)! 비밀을 말하고 싶어 마음이 답답한 이들을 위한 플랫폼 약 3개월 반 정도의 코드스테이츠 소프트웨어 엔지니어링 과정을 모두 수행하고, 드디어 첫 프로젝트를 완료했다. 2주 동안 진행되는 프로젝트라고 했지만, 사실 초기 인트로와 기획 등의 회의 시간이 많았기 때문에 실제 코딩을 한 기간은 5일 정도밖에 되지 않았기에 빠듯한 일정이라고 할 수 있었다. 우리팀의 팀원 분들은 개개인이 뛰어난 슈퍼플레이어라서 별 어려움 없이 수월하게 프로젝트를 진행할 수 있었다. 사실, '비밀'과 관련된 아주 짤막한 준 소셜미디어 아이디어가 있다고 했을 때 우리 팀원 분들이 받아들여주실까, 프로젝트 사이즈로 너무 작은 것은 아닌가 걱정이 되었지만 모두들 너무 흔쾌히 진행하자고 해주셔서 너무 고마웠다. 이번 포스팅에선 우리가 만든 첫 작품이 어떤 서비스인지 소개하고, 어떤 동기로 본 .. 2021. 6. 21. [React] 커스텀 훅(Custom Hook)을 사용한 간단한 회원가입 페이지 만들기 React Hook 등장 배경 리액트에서 훅(Hook)이란 함수 컴포넌트에서 리액트의 기능들을 사용하게 해주는 함수이다. 훅은 2019년 2월 16일에 나온 React 16.8부터 사용이 가능하게 되었기 때문에, 리액트가 처음 출시된 2013년 5월부터 2019년까지 약 6년 동안은 리액트의 여러 기능들을 사용하기 위해선 함수 컴포넌트가 아닌 클래스 컴포넌트만을 사용해야한다는 제약이 있었다. 클래스 컴포넌트는 코드를 작성함에 있어서 직관적이지 못하거나 코드를 길게 만드는 요소들이 상당히 많이 있었다. 예를 들어, 똑같은 기능의 코드임에도 불구하고 컴포넌트의 생명주기(lifecycle) 메소드에 맞추어 따로 작성을 해서 로직이 분리되는 경우가 발생한다던가, 아니면 메소드를 사용하기 위해 끊임없이 bind(.. 2021. 6. 5. [CSS] 움직이는 하늘 배경 만들기 (linear-gradient, background-position, keyframes animation + pointer-events ) 나무 가득한 화면을 만들어보고 싶다는 생각이 문득 들어서, 가지고 있던 어두운 나무 png파일을 이용하여 숲을 조성(?)했다. 그런데 그냥 하늘을 하자니 너무 심심한 것 같아서, gradient를 준 background에 애니메이션을 추가하면 어두운 하늘, 밝은 하늘 등을 나타낼 수 있지 않을까하는 생각에 적용해봤더니 의외로 괜찮은 것 같았다. 구현된 모습 How-To 위와 같이 배경에 애니메이션을 주는 것의 요지는 아래 두가지이다: 1. 배경을 오버 사이즈로 크게 만든다. 2. 화면에 나오는 배경 부분을 keyframes를 통해 바꿔준다. 즉, 우리 눈에 보이는 뷰 사이즈보다 크게 만든 배경의 다른 부분들을 천천히 움직이면서 집중 조명(?)해주는 방식이라고 생각하면 된다. CSS 태그 하나가 화면을 가.. 2021. 6. 4. [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. 이전 1 2 3 4 5 6 7 ··· 9 다음 728x90 반응형
