전체 글
TIL | Docker 컨테이너 쉘환경 접근 및 이미지 생성
Docker 컨테이너 쉘 환경 접근 및 이미지 생성하기 Docker 컨테이너 쉘 접속 sudo docker exec -it 'container id 혹은 names' sh exec: 컨테이너 외부에서, 실행중인 컨테이너에게 명령어를 전달할 수 있게 하는 명령어이다. it: 컨테이너를 종료하지 않고 터미널에 입력된 명령어를 전달하기 위해 사용한다.(exec과 많이 사용한다) sh: 쉘로 들어갈 수 있는 명령어 (해당 컨테이너에서 빠져나오고자 할때는 exit 혹은 Ctrl + d를 통해 종료한다.) Docker 이미지 생성하기(alpine baseimage 기준) 1. Docker file 작성 Docker 이미지를 만들기 위한 config 파일이다. 컨테이너가 어떻게 행동할 지에 대한 설정을 정의한다. 2..
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 | Dynamic import
NEXTjs Dynamic import Dynamic import란? ES2020에서 제공하는 dynamic import은, 해당 모듈을 애플리케이션의 빌드 타임에 불러오는 것이 아니라 런타임때 불러오는 것이다. 즉 처음 받아오는 모듈 (혹은 소스코드)의 용량을 줄임으로써 페이지의 초기 로딩 속도를 줄일 수 있다.(초기 페이지 로딩시 불필요한 모듈 fetch을 줄임으로써 성능 최적화를 할 수 있다.) NEXTjs에서의 적용 Basic usage 공식문서에서도 말하기를, NEXTjs 또한 dynamic import를 지원하며 SSR에도 적용이 가능하다. // import dynamic from "next/dynamic"; const DynamicComponent = dynamic(() => import("..
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..