Who I really am
레이아웃 쉬프트(Layout shift) 늦은 이미지 로딩으로 인해 레이아웃이 밀리거나 변경되는 현상 화면 상에서 위치 등을 다시 계산해야 하기 때문에 리소스가 소모되고 사용자 경험에 좋지 않은 영향을 미친다. 웹사이트 효율 측정하기 개발자도구 > light house에서 레이아웃 시프트에 대한 효율을 측정할 수 있다. 발생 원인 - 이미지의 사이즈가 정해져있지 않아서 - 콘텐츠가 동적으로 삽입되어서 - 웹폰트 때문 (브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 보이지 않는 FOIT, 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 FOUT) 해결방법 컴포넌트들의 사이즈를 미리 설정해준다(동적으로 로드되는 경우에는 최대한 예측하여).
물음표 2개 ?? 로 쓰이는 널 병합 연산자(Nullish coalescing operator)는 왼쪽이 null 또는 undefiend일 때 오른쪽 피연산자를 출력하고, 아니면 왼쪽 피연산자를 반환하는 논리 연산자이다. // 오른쪽이 null이기 때문에 콘솔창에 '널입니다'가 출력된다 const foo = null ?? '널입니다'; console.log(foo); // 오른쪽이 undefined이기 때문에 콘솔창에 '널값입니다'가 출력된다 const foo = undefined ?? '언디파인입니다'; console.log(foo); 널병합연산자는 'falsy 값을 어떻게 처리하는가'에 따라 논리연산자 OR(||)과 동작이 다르다. falsy 값이란? 거짓 같은 값(Falsy, falsey로 쓰이기도..
feat 브랜치를 만들어서 오늘 하루 작업을 한 뒤 작업 결과물을 main 브랜치에 merge 하는 형태로 작업을 해나가고 있는데, 정신을 놓고 있다가 그냥 main 브랜치에 커밋들을 여러 개 만들어버렸다. 사진에 빨간 상자로 표시한 4개 커밋이 지금은 main 브랜치에 쭉 이어져있는데, 이것들을 똑 떼어다가 feat 브랜치로 옮겨본다. git cherry-pick 다른 브랜치에 있는 커밋들을 골라 원하는 브랜치에 적용시킬 때 사용하는 명령어 1) 새로운 브랜치 만든 후 이동 git branch -b feat/blah-blah 2) 새로운 브랜치에다 원하는 커밋을 복사 // 4개를 한 번에 써줄 수 있다 git cherry-pick 13683d8 0769af1 38473e7 bc160b7 * 충돌이 발생..
사용하지 않는 css를 제거하여 웹페이지 성능을 개선할 수 있다. 1. F12로 개발자도구 켠 뒤 ESC 누르기 2. more에서 coverage 탭 선택 3. coverage 탭 안에 여러 항목들이 뜨는데, 만약 안뜨면 새로고침 누르면 많은 것들이 좌라락 뜬다. 4. 빨간 막대의 비율이 사용하고 있지 않는 리소스의 비율(44%를 사용하고 있지 않다) 5. Type이 CSS 인 파일을 클릭하면(지금 내 화면에는 없다) 소스코드가 쭉 나오는데, 빨간색으로 표시된 코드가 '불러들였으나 사용한 적이 없다'는 부분이다. 6. 퍼지CSS (https://purgecss.com) 라는 툴을 사용하여 정리할 수 있다. purge css는 스태틱한 파일을 읽어서(동적인 부분을 지원하기도 한다) 사용하지 않는 부분을 제..
* 캐시란? 데이터, 값 등을 미리 복사해두는 임시장소 또는 그러한 동작 - 메모리캐시 : RAM에 데이터를 저장해두고 읽는 방식 - 디스크캐시 : 파일에 데이터를 저장해두고 읽는 방식 👉 둘 중에 어떤 방식이 사용되는가는 파일 사이즈에 따라 브라우저 자체의 알고리즘으로 결정됨 F12로 개발자도구를 열고, main.chunk.js 나 기타 리소스 파일을 열어서 header 부분을 확인해본다. cache-control이라는 항목의 내용이 헤더에 들어있어야 캐시 관리가 되고있다는 의미이다. - no cache : 캐시 사용 전 서버 검사 후 사용결정 (사용하지 않는다는 의미가 아니다! 헷갈리지 말기~) - no-store : 캐시 사용 X - public: 모든 환경에서 캐시 사용 가능 - private :..
server쪽에서 내가 건드리지 않은 get-pip.py 같은 파일이 자동으로 생성되고, untracked file로 자꾸 남아있었다. git add . 으로 커밋할 때 섞여 들어가기도 하고 (* add . 사용은 웬만하면 지양하기!!) 자꾸 거슬려서.. 추적하지 않는 파일은 삭제하는 방법을 서치해보았다. 추적하지 않는 파일 삭제 git clean -f 추적하지 않는 파일 삭제 + 디렉토리까지 삭제 git clean -fd 지워지게 될 파일 확인하면서 삭제 git clean -fd --dry-run
장고 3.1부터 지원하는 JSONFields 기능을 sqlite와 함께 사용하려면 JSON1 sqlite extension 라는 것을 따로 설치해야 함 (윈도우에서만 발생하는 문제인듯) python 최신버전을 깔면 한번에 해결된다는 정보를 얻고 python 3.10으로 교체했지만... 실패 (파이썬 최신버전에 따른 다른 문제들이 발생함) 다시 python3.8로 회귀한 뒤(...) python 설치 경로에 있는 아래 파일을 교체해주니 성공..! 이 사이트(https://www.sqlite.org/download.html)에서 아래 표시한 파일을 다운받고 아래 경로에 있는 sqlite3.dll 파일을 다운받은 것으로 교체해주니 해결됨 참고한 답변 : https://stackoverflow.com/quest..
방통대 3-1로 편입한 지가 벌써 세 학기 지났다. 지난 달에 4-1학기를 마치고, 졸업요건인 정처기까지 치르고 이번 주말에는 한 숨 돌리는 중... (아직 실기 남았다..) 이제 곧 막학기인 4-2 수강신청일이 돌아오는데, 전공 두 과목만 더 들으면 졸업요건은 채워질 것 같다. 여태까지 뭘 들었고, 뭘 안들었었는지 가물해서... 수강신청할 때 참고하고자 정리해봄! 3학년 1학기 (전공) 인터넷과 정보사회 (난이도 하) - 컴퓨터의 이해와 비슷한 느낌.. 내용이 좀 겹치는 듯하기도..? (기억이 가물가물) 같이 묶어서 들으면 시너지가 있을 듯 - 앞으로 들을 컴퓨터과학과의 수업들 입문용, 맛보기용(?)으로 좋다 - 데이터와 정보란? 입력장치와 출력장치란? 스위치와 게이트웨이, 라우터란? 과 같은 내용들을..
