프론트 엔드 개발 기록

초기 페이지를 렌더링 할 때 브라우저의 최소 단계는 이러하다. 1. 수신된 HTML에서 DOM 빌드 2. CSS 스타일 시트(임베디드 혹은 링크)가 발생하면 CSSOM**을 작성 3. DOM을 빌드하는 동안 JS블록이 발생하면 CSSOM생성을 기다리고 DOM 생성을 중간하고 코드를 실행한다. JS실행이 DOM을 수정하고 CSSOM에 접근하여 수정할 수 있기 때문. **CSSOM : CSS Object Model. DOM과 유사한 구조. DOM처럼 생성될때 렌더링이 차단됨. -HTML과 렌더링 경로 CSS는 근본적으로 스타일 마크업 언어이기 때문에 DOM과 상호작용하는 방식을 알아야 한다. HTML이 주어지면 DOM을 생성한다. 그 과정에서 렌더링은 차단된다. -CSS 객체 모델 CSS가 주어지면 CSSO..

SEO? 검색엔진이 이해하기 쉽도록 사이트의 구조와 페이지 개발하고, 업로드한 컨텐츠들이 상위 노출 되도록 작업 하는 것 1. 사이트 구조 최적화 1-1. 사이트 URL 구조 최적화 - 사람, 클롤러가 읽기에 친숙한 구조의 url (검색 내용이 url에 포함되어 있는 경우에도 결과에 노출) - 언더바(_)가 아닌 하이픈(-)을 사용하여야 각 단어를 분리하여 인지한다. - 소문자만 사용한다. (서버설정별로 대소문자 구분을 하기도, 하지 않기도 한다.) ex)http://www.test.co.kr/page-1.html?id=3&cat_id=5 http://www.test.co.kr/search-engine-optimization 1-2. 크롤러가 한번에 홈페이지에서 서브페이지로 넘어가도록 홈페이지에서 너무 ..

유하기 버튼을 따로 넣을 예정이라서, 유튜브 우측 상단 공유하기 버튼을 제거할 수 있는지 확인 요청이 들어왔다. (자동 재생 기능 관련 내용은 가장 하단에!) 다른 옵션은 많이 삽입해 봤는데 훔~~~~! 검색해 보니 showinfo=0 옵션을 추가해 주면 된다. 그런데! 크롬에서는 적용이 되지 않는다. 하~~~~~~~~~~~~~~~~~~ 크롬을 제외한 모든 브라우저에서 되는데! 모바일 크롬에서는 또 된다. 하 찝찝하다. 어떻게든 되게 해보고 싶은 마음에 구글링 열심히 했으나 나오지 않는다. 유튜브에서 알려주는 내용을 보면 아래 AS3 플레이어에서만 지원을 한다는데.... 뭔 말인가 싶어서......열띠미 또 검색을 해봤다. 찾아보니 AS3는 Adove Action Script인데, 플래시 플레이어 기반으..

프로그램도 있긴한데 아무래도 사이트는 즐겨찾기 해놓고 사용하면 편리하니까! 작업할 때 잘 안쓰긴 하는데, 이번에 접근성 심사 진행하면서 확인 할 일이있어서 또 찾으러 헤맸다. 보통 3;1정도 권장하고 있어서 확인 후 수정했땽 평소에 좀 흐리다 싶으면 확인 한 번 해 봐야겠뜨아. 즐찾 완료! https://webaim.org/resources/contrastchecker/ 페이지에서 바로 확인 하고 싶을 때가 있는데, 그럴땐 컬러피커가 있어야 한다. 구글 확장 프로그램에 괜찮은게 있어서 쓰고 있는 확장프로그램은 요고. https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=ko

1. 기존의 히스토리 전체 삭제 rm -rf .git 2. git 다시 생성 후 연결 git init git add README.md git commit -m "first commit" git remote add origin https://(저장소 주소) git push -u origin master

​ 참고 페이지 - 다양한 구독 취소 방법이 나와있다! https://netbasal.com/when-to-unsubscribe-in-angular-d61c6b21bad3 ​ ​ 연습했던 ts파일 소스. 항상 예제 찾아보면 전체적인 소스가 있는게 이해도되고 좋더라구요. observable을 unsubscribe하기 위해 넣었던 소스는 subscription지정해주고 해당 명칭의 subscription을 unsubscribe! 클래스쪽에 ondestroy추가. import { Component, OnInit, OnDestroy } from '@angular/core'; import { Observable, Subscription } from 'rxjs'; @Component({ selector: 'app-..

모의 DB서비스 사용해서 데이터 끌어오는 컴포넌트를 만들어보려고 하는데 자꾸 http 서비스 관련 에러가 떠서 ㅠㅠ 처음에 앵귤러 설치해서 공부했을때는 잘 됐는데 앵귤러 최신버전으로 업그레이드를 한게 뭔가 문제가 되는 것 같다. 관련 에러 찾아보니 원래 http관련 서비스가 @angular/http에 있었는데 앵귤러7에서는 @angular/common/http이고 관련 서비스들의 클래스명이 달라서 에러 메세지가 뜬다. ​ 오류가 나는 파일 경로는 컴파일링에서 나타나는 오류에 해당 파일이 뜨니까 "alt+클릭"하여 해당 파일 오픈한다.(vs code작업시) 위에 영역들이 뭔가 문제인 것 같은데 자동완성 기능으로 명칭 수정하고 난리 쳐봤자 에러메세지가 해결되지 않는다 ㅠ_ㅠ 몇시간을 서칭했는지 모르겠다. 버..

앵귤러 metarial, animation 모듈 설치 명령어! 맨날 할때마다 찾아보게돼서 블로그에 올려놔야즹 헤헤 npm install --save @angular/material @angular/cdk @angular/animations [참고] https://material.angular.io/guide/getting-started