디자이너 최대리와 개발1팀 달리

앞서 웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지) 글을 작성을 마치고 imagemin이라는 새로운 라이브러리를 알게 됐다. 살펴보니 괜찮아 보여서 이걸 알았다면 먼저 써봤을 텐 데라는 생각이 들었다. 그렇다면 처음부터 라이브러리가 필요할 때나 사용하기 전, 라이브러리 선택에 도움이 되는 건 없을까 싶어서 찾아봤다. 원래 라이브러리 선택은 개발 환경과 운영 상황에 따라 달라지는 거라곤 하지만, 나처럼 개발이라곤 쥐뿔도 모르는 뽀시래기들에게 그나마 선택 장애를 줄여줄 수 있지 않을까 싶어 공유한다. 세상엔 역시 있을 것 같다고 생각하면 다 있다. npm trends 라는 사이트가 나름 요구사항을 충족하고 있었다. npm에 배포된 라이브러리들의 기간별 다운로드 추이를 그래프로 쉽게 비교해 볼 수..

[TL;DR] 리액트 환경이라면 react-lazyload 라이브러리가 참 좋다. 이미지 lazy loading에 앞서 뷰포트라는 개념을 알고 있는가? 1. 뷰포트(viewport) MDN 뷰포트 문서에 따르면 아래와 같다. 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다. 뷰포트 중에서도 지금 볼 수 있는 부분을 '시각적 뷰포트'라고 부릅니다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 '레이아웃 뷰포트'의 크기는 변하지 않지만 시각적 뷰포트는 더 작아집니다. 간단히 말..

https://dalichoi.tistory.com/32 웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지) 바쁜 현대인을 위한 간단 요약(TL;DR) 무손실 이미지를 압축하고 썸네일 이미지를 만들어 index 화면 로딩 속도를 개선한다. 대략 1mb 짜리 이미지를 100~200kb로 압축하고 또 그 이미지를 다시 줄여 결 dalichoi.tistory.com 이미지편에 이어 웹 성능 개선을 이어가보자. 이번에는 자바스크립트를 정리하는 편이다. 참고로 CRA로 만든 리액트 환경이다. 1. 사용하지 않는 의존성 제거 먼저 코드 중 사용하지 않는 의존성을 싹 걷어내는 작업부터 진행했다. 사용하지 않는 의존성을 확인하기 위해 npm-check 라이버러리를 이용했다. https://www.npmjs.co..

바쁜 현대인을 위한 간단 요약(TL;DR) 무손실 이미지를 압축하고 썸네일 이미지를 만들어 index 화면 로딩 속도를 개선한다. 대략 1mb 짜리 이미지를 100~200kb로 압축하고 또 그 이미지를 다시 줄여 결론적으로 10~20kb 용량의 썸네일 이미지로 대체하는 과정을 기록했다. 참고로 DB는 구글 파이어베이스(Firebase) 8 버전을 사용하고 있다. 새해에는 뭔갈 해야 할 것만 같은 초조함에 시달리다 못해 결국 미뤄놨던 숙제를 꺼냈다. 매일 보는 뉴스와 그날의 날씨를 다시 꺼내보기 쉽도록 취미삼아 만든 사이트가 하나 있다.(하지만 꺼내보기 어려움) 아래 링크한 '오늘의 날씨와 경제'라는 아주 직관적이고 재미없있는 이름의 사이트다.(weather&economy라서 weaco) https://w..

[목차] 1. 산술연상 expr, let 2. while and until loop 3. for-loop 1. 산술연상 expr, let expr - 정수형 산술연산(+,-,*,/,%), 논리연산(|,&), 관계연상(=,!=,>,>=, /dev/null echo $? # 2 cat > newuser #!/bin/bash #Description: Create a user account. echo -n "New username: " read username while getent passwd $username &> /dev/null do echo "Sorry, that account $username is already taken. Please pick a different username." echo -n..

[목차] 1. exit 2. test 3. if-then-fi 4. case 1. exit - 실행된 프로그램이 종료된 상태를 전달 exit 0 프로그램 또는 명령이 성공으올 종료했음을 의미 1-255 프로그램 또는 명령이 실패로 종료했음을 의미 ( 1 일반 에러 2 Syntax Error 126 명령을 실행할 수 없음 127 명령 (파일) 이 존재하지 않음 128+N 종료 시그널+N (kill -9 PID 로 종료 시 128+9=137) $? 종료 값 출력 cp file1 echo $? # 1 sleep 100 echo $? # 130 : 128 + 2(KILL:SIGINT) kill -l 2. test - 비교연산자 test or [ 명령어 ] - 명령어 실행결과를 true(0) 또는 false(1)..

[목차] 1. echo 2. read 3. printf 1. echo prints text to standard output echo -n : 메시지 출력 후 newline 문자를 추가하지 않는다. -e : backslash escapes문자를 해석하여 특별한 의미를 지정한다. \t : TAB키 \n: 줄 바꿈 \a: alert(bell) - 예시 echo "Your time is up" echo "Your time is up" > time.txt echo -n "Name:" echo -e "First\tSecond" score=90 echo score # score echo $score # 90 2. read reads text from standard input read 변수명 -n : 지정한 문자수..

- 위치 매개변수 - 입력하는 argument들은 $0, $1, $2와 같은 변수에 저장되어 script에 전달 - 10번째 argument 부터는 ${10} 처럼 중괄호를 사용 name of shell script : $0 first argument : $1 second argument : $2 Number of arguments in $# List of all parameters in $@, $* - Special shell variables 로그인 shell의 PID : $$ 현재 작업 디렉토리 : $PWD 부모 프로세스 ID : $PPID # passwd 파일을 현재 위치의 pass 파일로 복사하는 명령어 # $0 $1 $2 cp /etc/passwd ./pass cat > parameter-ex..

- 리눅스 command들을 모아 놓은 ASCⅡ Text 파일 - 실행 퍼미션을 할당해야 실행 가능 vi test.sh # test.sh 만들고 저장 echo "==========================" date +%Y-%m-%d echo "==========================" df -h / # 스크립트 파일 실행권한 부여 chmod +x test.sh # 실행 ./test.sh - Bash shell script에서 특별히 의미가 정해진 기능 # comment #!/bin/bash 셔뱅.해시뱅.스크립트를 실행할 sub shell 이름 - Shell 구문은 기본 top-down 방식으로 해석해서 실행됨 - Sub shell mkdir bin cd bin echo $PATH PATH=$..

[목차] 1. Quoting Rule 2. Nesting commands 3. Alias 4. Prompt 5. Redirection 6. Pipeline 1. Quoting Rule Metacharacters - Shell에서 특별히 의미를 정해 놓은 문자들 - ￦ ? () $ ... * % {} [] 등 # 예시) 현재 위치에서 # 모든 파일 조회 echo * # a로 시작하는 모든 파일 조회 echo a* # ?는 Any Single Character. 4개의 문자수를 가진 파일 조회 echo ???? # {숫자1..숫자3}은 숫자1부터 숫자3까지를 뜻함 touch myfile{1..3} Quoting Rule : 메타문자의 의미를 제거하고 단순 문자로 변경 - Backslash(\) : \ 바로 ..