728x90 반응형 분류 전체보기81 [JS] Javascript (ES6+) 자바스크립트 vs. ECMAScript ECMAScript란 정보 통신 표준화 연구 기관인 Ecma International이 정의하는 표준화된 스크립트 프로그래밍 언어를 뜻한다. Ecma International은 정보 기술의 발전과 보급을 위해 표준화를 지향하는 국제기구로, 그러한 표준화의 대상엔 스크립트 프로그래밍 언어의 데이터 종류에서부터 네이티브 API 함수, 예약어, 에러 핸들링 등 문법적인 요소들이 모두 포함되어 있다. 이렇듯 Ecma International이 제공하는 규격에 맞춰진 언어들을 ECMAScript 언어라고 부르며, 자바스크립트 또한 그러한 언어들 중 하나이다. 즉, EcmaScript는 언어 명세(language specification)인 반면 자바스크립트는 그 명세를 따른.. 2021. 8. 10. [TS] 타입스크립트 설치부터 데이터 타입 명시까지 🌱 타입스크립트 노트 깃헙 노트: src - index.ts 파이널 프로젝트를 개발하면서, 유달리 에러가 여러 번 발생했던 경우가 있었다. 바로 서버에서 가져온 유저 데이터를 기반으로 To-do list를 렌더링해야할 때 자꾸 우리 애가 not a function 이라던가 cannot get 0 of undefined라던가 에러가 뜨는 것이다. 분명히 코드 상으로 보았을 때 우리 애는 not a function일리가 없고 undefined 일리가 없는데 도대체 왜 이러나 싶었는데... 두둥 문제의 원인은 서버에서 받는 데이터의 데이터 타입과 클라이언트 쪽에서 작성한 데이터의 데이터 타입이 서로 달라서, 내가 찾는 프로퍼티가 없다거나 인덱스가 없다거나 하던 일이 계속 발생했던 것이다. 파이널 프로젝트 이전.. 2021. 7. 30. 코드스테이츠 수료 완료! 추가 공부 및 파이널 프로젝트 보완 계획 어느덧 코드스테이츠의 소프트웨어 엔지니어링 과정을 모두 끝내고 수료를 해버렸다. 아직 시작한지 얼마 되지도 않은 것 같은데 벌써 5개월이 흘렀다니...!!! (이러니 내가 안늙어) 이번주 금요일 (그저께) 수료식을 마치고 앞으로에 대해 여러가지 계획을 세웠다. 주니어 개발자로써 이제 막 커리어를 시작하려다보니, 듬성듬성 더 채울 수 있을 것 같은 부분들이 스스로 느껴졌기 때문이다. 애초에 코드스테이츠의 프로그램을 시작하게 된 것도 독학으로 시작한 개발 공부의 틈새에 군데군데 존재할 수 밖에 없는 틈들을 매꾸고 그 외 +@까지 얻기 위해 시작한 것이었고, 그렇기에 나에게 있어 틈 찾기(?)와 매꾸기(?)는 너무 자연스러운 일이다. 여러가지 계획이 있는데, 그 중 가장 중요한 두가지는 CS 기초 지식 쌓기와.. 2021. 7. 25. [프로젝트] 실시간 화상채팅앱을 개발했어요! (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 다음 728x90 반응형
