맨 땅에 프론트엔드 개발자 되기

HTTP 프로토콜 HTTP(Hypertext Transfer Protocol)는 인터넷을 이용해서 데이터를 주고받는 통신 규약이다. 데이터를 주고받기 때문에 request-response Protocol 이기도 하다. HTTP는 모든 웹 개발자라면 당연히 알고 있어야할 필수 상식이지만, 많은 프론트엔드 개발자들이 놓치기 쉬운 부분이기도 하다. 클라이언트는 URL을 통해 서버에 데이터 요청을 하고 서버는 그 응답으로 데이터를 클라이언트에게 보내준다. 그 데이터를 받아 예쁘게 보여주는 역할을 하는 것이 바로 웹 브라우저다. HTTP는 1989년부터 개발이 시작되었고, 1994년에 HTTPS라는 보안이 더해진 버전이 출시가 되었다. 그리고 정식버전으로 출시가 된 것은 1997년이다. 따지고 보면 인터넷 통신의..

소프트웨어 라이센스란? 소프트웨어에는 여러 가지가 해당될 수 있는데, 그 중에서도 개발자가 사용하는 소프트웨어는 라이브러리, 프레임워크 같은 것들이 있다. 모든 라이브러리와 프레임워크는 그것들의 소유권을 가진 저작권자가 있고, 라이선스의 종류에 따라 사용 가능 범위가 다르다. ISC License ISC 라이선스는 Internet Systems Consortium(ISC)에 허용된 free Software license 로, ISC에서 개발한 OpenBSD베이스로 개발된 소프트웨어 릴리즈를 위해서 사용되는 라이선스이다. ISC License ISC 라이선스는 Internet Systems Consortium(ISC)에 허용된 free Software license 로, ISC에서 개발한 OpenBSD베이..

세션 스토리지, 로컬 스토리지, 쿠키 등 웹 브라우저 저장소를 이용하여 다양한 정보를 저장하고 그에 따른 UI를 구현할 수 있다. 세션 스토리지는 해당 세션이 종료될 경우에는 기록이 사라지므로, 다음 세션에서도 팝업이 보이지 않도록 기억하게 만들고 싶어서 로컬 스토리지를 이용해서 구현했다. 로컬 스토리지를 이용하여 하루 동안 보이지 않기 구현하기 today = new Date(); console.log(today.getDate()); // 1491553506653 와 같은 13자리 수를 반환 getTime() 메소드를 적용할 경우 해당 메소드가 실행된 바로 그 시간을 13자리로 표현한 수가 반환된다. 나열된 시간은 millisecond 즉 1/1000 초를 나타낸다. 이를 이용하여 숫자를 비교해서 boo..

1. 일반 PC로 접속할 경우에는 앱 다운로드 링크를 띄우지 않고, 모바일로 접속할 경우에만 앱 다운로드 링크를 띄운다던가 2. 일반 PC는 마우스 기반이고 모바일은 터치 기반이기 때문에 접속 기기에 따라 이벤트를 다르게 작동시킨다던가 다양한 경우에 접속한 기기의 종류를 확인해야할 경우가 생긴다. JavaScript 접속한 기기가 모바일인지 아닌지 확인하는 방법 const isMobile = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); }; 이 코드 한 줄이면 접속한 기기가 모바일일 경우 true, 아닐 경우 false를 반환하는 함수를 구현할 수 있다.

체크박스 전체 선택 / 해제 기능에서 구현해야할 기능 목록 1. 최상단 체크 박스 클릭 시 전체 선택 / 해제 토글 기능 2. 전체 선택 시에 하나라도 체크가 해제되면 최상단 체크 박스 선택 해제 3. 모든 체크박스가 선택될 경우 최상단 체크 박스 선택 활성화 import { useState } from 'react'; import styled from 'styled-components'; export default function Sample() { const data = [ {id: 0, title: '선택 1'}, {id: 1, title: '선택 2'}, {id: 2, title: '선택 3'}, {id: 3, title: '선택 4'} ]; // 체크된 아이템을 담을 배열 const [check..

HTTP 프로토콜의 stateless 특성과 쿠키 HTTP를 이용한 통신 프로토콜은 stateless의 특성을 가지고 있기 때문에, 페이지에서 링크를 타고 다른 페이지로 이동할 때 상태가 유지되지 않는다. 여기서 상태라는 것은 정보의 유지를 말하는데 예를 들어, 로그인을 했을 때 정보가 유지되거나 쇼핑몰 사이트에서 장바구니에 물건을 담은 정보가 유지되는 것을 말한다. stateless 특성은 빠르게 원하는 정보만 요청해서 받아올 수 있도록 고안된 것이기 때문에 이를 보완하기 위해 쿠키와 같은 기술이 도입되었다. 웹 브라우저 쿠키에 대해 알아보자 쿠키의 탄생 배경 HTTP는 상태를 계속 유지하지 않는 스테이트리스(Stateless)프로토콜이다. 서버와 클라이언트 간에 리퀘스트와 리스폰스를 교환하는 동안에 ..