전체 글
[TIL] 22.12.04 HTTP vs HTTPS
HTTP vs HTTPS HTTP(HyperText Transfer Protocol) 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜. 서버에서 브라우저로 데이터를 전송해주는 용도로 가장 많이 사용된다. HTTPS(HyperText Transfer Protocol Secure) 1. 보안 HTTPS의 S는 Secure을 의미한다. 일반 HTTP 프로토콜의 문제는 서버에서 브라우저로 전송되는 정보가 암호화되지 않는다는 것이었다. HTTPS 프로토콜은 SSL(Secure Socket Layer)/TLS(Transport Layer Security)를 사용함으로써 이 문제를 해결했다. SSL(TLS)은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고 서버 브라..
[React] Storybook 사용해보기
프로젝트 세팅 https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org 스토리북을 기존 프로젝트에 추가하려면 아래 커맨드를 터미널에 입력해주면 된다. npx storybook init 설치가 끝나면 자동으로 기본 세팅이 되어있는 것을 확인할 수 있다 아래..
[TIL] 22.11.30 HTTP 기본
김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 기본 모든것이 HTTP HTTP: HyperText Transfer Protocol 거의 모든 형태의 데이터를 전송 가능하다. 서버 간에 데이터를 주고 받을 때도 대부분 http를 사용한다. HTTP 역사 HTTP/0.9: GET 메서드만 지원. http..
[TIL] 22.11.26 인터넷 네트워크, URI와 웹 브라우저의 요청 흐름
NHN Forward에 갔다가 인프런 부스에서 받은 쿠폰으로 http 강의를 듣기 시작했다. 학부 때 배우긴 했지만 잊어버린 내용도 있어서 강의를 들으며 다시 정리해보려 한다 :-) 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com 인터넷 네트워크 IP(Internet Protocol) 인터넷을 통해 데이터를 송..
React Infinite Carousel 만들기(TS)
저번에 과제를 진행하면서 캐러셀을 직접 구현해보았다. 생각보다 고려할 부분도 많았지만 재밌었다 :) 일단 좌, 우 버튼을 클릭해 양쪽으로 이동할 수 있고, 옆으로 넘기는 방식의 터치 이벤트로도 이동할 수 있도록 구현했다. React 무한 캐러셀 구현 Home/index.tsx import Carousel from 'components/Carousel' const CAROUSEL_IMAGES = [ 'https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg', 'https://img.freepik.com/premium-vector/abstract-pastel-color-background-with-pink-purp..
[TIL] 22.11.22 SEO 기본 가이드(4)
SEO 기본 가이드 https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko#mobile SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google Developers 검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요. developers.google.com 사이트를 모바일 친화적으로 만들기 오늘날의 세상은 모바일 중심으로 돌아가기 때문에 모바일 기능을 지원하는 사이트가 있어야 온라인 인지도를 유지할 수 있다. 2016년 말부터 구글에서는 사이트 콘텐츠의 모바일 버전을 주로 사용해..
[TIL] 22.11.18 SEO 기본 가이드(3)
검색엔진 최적화(SEO) 기본 가이드 https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko#appearance SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google Developers 검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요. developers.google.com 콘텐츠 최적화하기 독자가 무엇을 원하는지 이해하고 제공하기 사용자가 내 콘텐츠를 찾을 때 어떤 검색어를 사용할지 생각해보자. 어떤 주제에 대해 잘 아는 사용자는 해당 주제를 잘 모르는 사용자와 다른 검..
React 스톱워치 구현하기(TS)
스톱워치를 구현해야하는 과제가 있어서 직접 구현해보았다. StopWatch.tsx import { useState, useEffect } from 'react' const StopWatch = () => { const [time, setTime] = useState(0) const [isRunning, setIsRunning] = useState(false) useEffect(() => { let interval: NodeJS.Timer | undefined if (isRunning) { interval = setInterval(() => { setTime((prevTime) => prevTime + 10) }, 10) } else { clearInterval(interval) } return () =>..