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

*해당 문서는 Oracle을 기본으로 하고 있습니다. 명령어 종류 명령어 설명 데이터 조작어 (DML : Data Manipulation Language) SELECT INSERT UPDATE DELETE 데이터 제어어 (DCL : Data Control Language) GRANT REVOKE 데이터 정의어 (DDL : Data Definition Language) CREATE ALTER DROP RENAME TRUNCATE 트랜젝션 제어어 (TCL : Transaction Control Language) COMMIT ROLLBACK SAVEPOINT - 테이블 생성과 데이터 조회 / 입력 / 수정 / 삭제 CREATE TABLE 테이블명 ( 칼럼명1 데이터 유형 [제약조건], 칼럼명2 데이터 유형 [..

토이프로젝트를 하나 완성했다. 앞으로 수정하고 업데이트 할 일이 많아보이는데, 조급해하지 않고 천천히 하려고 한다. 의식의 흐름대로 쓴 작업 수기는 이미 네이버 블로그에 올렸기 때문에 여기선 거기서 못 다 한 로고 애니메이션을 코드와 함께 풀어볼까 한다. 완성된 사이트 : http://typo.co.kr/ Plus Typo Combine photos and text to create an image for Instagram. typo.co.kr 이전에 리액트를 깨작거리면서 자바스크립트에 대한 갈증이 많이 생겼었다. 자바스크립트도 잘 모르는데 대뜸 리액트부터 들이박다보니 너무 많이 허둥댔던 기억이 난다. 그래서 이번에 html, css과 함께 바닐라 자바스크립트만 가지고 작업을 마무리 했다. 어차피 Nod..

[목차] 1. 설정 및 기초 2. git branch 3. git push, pull, clone 1. 설정 및 기초 이름, 메일 설정 git config --global user.name "~~~" git config --global user.email "~~~" 설정 확인 git config --list git초기화 git init 트래킹(전체파일) git add . 커밋 with message git commit -m "~~~" 위 작업을 한 번에 git commit -am "~~~" 로그 확인 git log reset --hard : 모두 원복 reset --mixed : add 하기 전으로 (작업영역의 내용 변경이 더 필요할 때) reset --soft : commit 하기 전으로 (주로 이전 ..

[TL;DR] 기본적으로 사용하는 폰트를 최소화하고, 폰트 사이즈를 줄여 'woff2' 포맷 파일로 'preload' 한다. 폰트가 적용된 글자수가 적다면 불필요한 글자를 제거한 서브셋 폰트를 사용하자. 잘 모르겠다면 구글 웹폰트를 사용하자. 쓰려는 폰트가 없거나 더 욕심나면 커스텀 하자. 디자이너와 개발자 모두 읽을 수 있도록 가벼운 수준으로 작성했으니 참고 부탁드립니다. [목차] 1. 사용 폰트 최소화 2. font-display - FOUT vs FOIT 3. 폰트 사이즈 줄이기 4. 폰트 호출 시점 앞당기기 5. 구글 웹폰트 1. 사용 폰트 최소화 기본적으로 사용하는 폰트는 최소화하는 게 좋다. 당신이 디자인을 하든 개발을 하든 모두 해당된다. 나처럼 열심히 공부하지 않은 날라리라도 모던 디자인을..

layout shift는 영상 예시를 보면 쉽게 이해할 수 있다. 영상은 이곳에서 가져왔다. 웹에 접속해서 페이지를 로드할 때 서버에서 아직 응답을 받지 못한 데이터가 있을 수 있다. 그때 ui 상으로는 더 하단에 있더라도 더 빨리 렌더링 되는 순서대로 차곡차곡 다른 데이터들이 먼저 자리를 차지하게 된다. 결국 뒤늦게 도착한 데이터는 정해진 영역에 마치 비집고 들어가는 것처럼 보이게 된다. html 구조상에 위차한 영역에 들어가는 것 뿐인데도 말이다. 이 문제는 해당 영역에 공간을 별도로 설정해 두지 않아서 발생한다. 위 영상에서도 버튼 클릭처럼 중요한 이벤트를 처리하는데, 클릭 순간 갑자기 안보이던 영역이 추가로 생기면서 버튼이 밀리는 현상이 발생한다. 사용자가 전혀 원하지 않은 다른 버튼을 클릭하게 ..

앞서 웹 성능 개선 - 이미지편(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..

경기 침체와 함께 코딩 광풍이 살짝 사그라든 느낌이 드는 이 시점에서 지난 코딩 열풍과 개발자 취업에 대한 이야기를 짧게 해볼까 한다. 우물 안 개구리 수준인 개인적인 경험을 녹인 글이라 일반화의 오류를 넘나들 수 있으니 혹여 의도치 않게 마음의 상처를 받으시는 분들이 있다면 심심한 사과를 드립니다. 전 세계가 디지털 전환이라는 큰 변화의 흐름이 진행 중이다. 불과 얼마 전까지만 해도 모르는 사람이 없을 정도로 개발자 모시기가 한창 유행이었다. 코로나가 할퀴고 간(아직도 안 간) 깊은 상처에는 아직 밴드도 붙이지 못하고 생채기들이 더 커지고 있지만, 여전히 디지털 전환이라는 대세가 꺾이지는 않는 모양새다. 대기업들도 잇따라 몸집 줄이기에 나서고 있습니다.넷플릭스는 이미 전체 직원의 3%에 해당하는 300..