Etc
TIL | 간단한 가로 스크롤바 구현하기
간단한 가로 스크롤바 만들기 참고 자료 소스코드 import React, { useCallback, useEffect, useState } from "react"; import styled from "styled-components"; const Parralax = () => { const [progress, setProgress] = useState(0); const handleEvent = useCallback((): void => { const { scrollTop } = document.documentElement; // y축으로 스크롤한 거리 const { scrollHeight } = document.body; // body 태그(전체 컨텐츠)의 height const { outerHeight..
TIL | Meta tag
meta tag meta tag란? 메타데이터: 속성정보 라고도 불리며 데이터에 관한 구조화된 데이터, 다른 데이터를 설명해주는 데이터라고 한다. 즉 데이터를 표현하기 위한 목적과 데이터를 빨리 찾기 위한 목적으로 사용된다. 문서에 대한 정보인, 메타 데이터를 정의할때 사용하는 태그이다. 브라우저나 검색 엔진, 타 웹서비스에서 해당 웹과 관련된 정보를 제공할 때 사용된다. (브라우저나 검색 로봇에게 해당 페이지의 정보를 알려주게 된다.) meta tag property 종류 charset property 페이지의 문자 인코딩 방식을 선언한다. utf-8이 일반적으로 가장 많이 사용되는 인코딩 방식이다. name, conent property name과 content 특성을 함께 사용하면 문서의 메타데이터..
TIL | Proxy Server
프록시 서버 프록시 서버란?? 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 뜻한다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 프록시(Proxy), 그 중계 기능을 하는 것을 프록시 서버(Proxy server) 라고 부른다. 프록시 서버 종류 Forward Proxy 일반적인 프록시는 Forward Proxy를 뜻한다. 클라이언트가 리소스를 서버에게 요청할 때 직접 요청하지 않고 프록시 서버를 통해 요청하는 방식을 뜻한다. 프록시 서버가 클라이언트와 인터넷 망 사이에 위치한다. 서버의 입장에서는 클라이언트가 누구인지 확인할 수 없다. Reverse Proxy Forward Proxy 와 반대 방향으로 ..
TIL | Eslint custom
Eslint 세팅하기 Eslint란? 공식문서에서 말하길, JS 코드의 문제점을 찾아주고(Find) 이를 고쳐주는(Fix) 툴이다. Install and Usage # install npm install eslint --save -dev # or yarn add eslint --dev # Usage npx eslint --init # or yarn run eslint --init Eslint init yarn run eslint --init 을 통해, 위와 같은 eslintrc.json 파일을 생성할 수 있다. (eslintrc 파일의 확장자는 js, yml, json 중 자유롭게 선택할 수 있으며 커맨드를 통해서가 아닌, 파일을 직접 생성 후 세팅을 하기도 한다.) Eslint detail env co..
TIL | nodejs 설치 정리
Ubuntu Node.js 및 npm 설치 프로젝트를 진행하면서, 작업을 위해 해당 인스턴스에서 매번 node.js를 설치해야 했었다. 때문에 매번 자료들을 찾아보고 설치하는 것이 아닌, 나를 위해서 기록용으로 node의 LTS버전 설치 과정을 정리해봤다. (전에 NVM으로 설치를 해봤는데, 더 헷갈리는 느낌이 들어서 내가 원하는 버전만을 설치하는 방법을 더 선호한다. ) package update & upgrade sudo apt-get update sudo apt-get upgrade update 설치된 패키지들의 최신 버전 체크 upgrade: update로 확인된 최신 버전들의 패키지 업그레이드 apt(Advanced Packaging Tool) 와 apt-get의 차이점이 갑자기 궁금해서 찾아본..
TIL | Docker 맛보기
Docker란? host OS에 컨테이너를 설치하여, 가상 머신처럼 독립된 실행환경을 제공 독립된 실행 환경은 또다른 OS를 설치하여 환경을 구성하는 것이 아닌, App을 실행하는데 필요한 소스, 파일, 라이브러리 존재 Docker 설치 Install docker Engin on Ubuntu를 참고하여 설치하도록 하자. docker 구버전이 있다면 삭제하기 sudo apt-get remove docker docker-engine docker.io containerd runc host에 docker 설치 전, docker repository set-up하기 sudo apt-get update # sudo apt-get install \ apt-transport-https \ ca-certificates \..