제로베이스 프론트엔드스쿨 2개월동안 좋았던 점 우선 제로베이스를 2개월동안 완주한 내 자신에게 칭찬을 하며 이 글을 시작해보려고 한다. 처음 시작할 때에는 완주가 가능할거라 생각했었는데 1개월 완주 후 2개월 차에 어렵고 힘들었던 순간들이 있었다. 하지만 포기하지않고 완주하려고 노력하였고, 그 결과 2개월차 완주를 할 수 있었다. 2개월동안 해본 제로베이스 프론트엔드스쿨은 진짜 프론트엔드에게 맞춤인 프로그램들로 구성이 되어있다고 생각이 들었다. 프론트엔드에게 꼭 필요한 역량들을 채워주는 커리큘럼들로 이루어져 있어서 강의를 들을 수록 알차다는 생각을 하게 되었다. 매일매일 해야하는 todo list는 공부의 동기부여가 되어주고, 데일리 스크럼은 성실하게 공부를 할 수 있게 도와주어서 좋았다. 1개월차에 수..

noopener, noopener 하이퍼링크 해당 앵커 태그에 target="_blank"을 자주 쓸 때가 있다. 하지만 이는 성능과 보안면에서 취약점이 발생한다. 새롭게 열린 페이지는 보조 브라우징 컨텍스트이기 때문에 , 자기 자신을 생성한 원본 브라우징 컨텍스트를 오프너 브라우징 컨텍스트라는 이름으로 참조하고 있기 때문에 원본 페이지와 동일한 프로세스에서 실행될 수 있다. - 보안상 취약하다. 링크된 페이지의 javascript에서 window.opener API를 통해 부모 윈도우를 참조하거나 window.opener.location의 값을 변경하여 부모 윈도우의 URL을 변경할 수 있다. 이렇게 부모 윈도우를 피싱 페이지로 변경하여 사용자의 개인 정보가 유출될 수 있기 때문에 보안상의 문제가 발생..

flex와 grid의 차이 flex는 컨텐츠이고, grid는 컨테이너다. 즉, flex는 1차원 레이아웃 시스템(수직, 수평 중 택 1)이고 grid는 2차원 레이아웃 시스템(수직, 수평 둘 다 가능)으로 분류된다. flex는 항목을 한 방향으로 레이아웃을 할 수 있고, grid는 항목을 두 방향으로 레이아웃 할 수 있다. 복잡한 레이아웃 설계가 필요할 때 grid를 사용하면 좋다. flex Flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에서 효율적으로 요소를 배치, 정렬, 분산 할 수 있는 방법을 제공하는 css3..

1. 인사 자바스크립트 런타임 : 자바스크립트 엔진을 포함하는 실행 환경 자바스크립트 엔진 : 자바스크립트 코드를 실행하는 프로그램 2. 디버깅 console.log(); chrome 개발자 도구 debugger; 3. DOM 다루기 Window 객체 Document 객체 특정 요소 찾기 getElementById getElementsByTagName 인접 노드 접근 children parentElement 노드 생성 createElement Node.style Node.innerHTML 4. 브라우저 객체 Navigator location location.href History 5. 이벤트 Click. Mouseover, keydown, focus… 이벤트 핸들러 addEventListener 6. 에..

1. 인사 console.log(x,y,z) 2. 기본연산자, 값 산술 연산자 : + , - , * , / , % , ** 복합할당 연산자 : += , -= , *= , /= , %= , **= 할당 연산자 : = 3. 연산자 비교 연산자 : == , === , = 증감 연산자 : ++ , -- , ++X, X++ 논리 연산자 : ||(OR) , &&(AND) 부정 연산자 : ! 4. 변수와 상수 let : 변수 생성 키워드 const : 상수 생성 키워드 var : 레거시 키워드 5. 자료형 동적 타입 언어 숫자형 : Infinity, -infinity, NaN BigInt형 : 2^53-1 보다 크거나 -(2^53-1) 보다 작은 정수 표현, 숫자 끝에 N을 붙혀서 사용 문자형 : “”, ..

여러 파일로 하나의 어플레케이션을 분리할 때, 각각의 파일들을 모듈이라고 부름 1) 모듈 내보내기 export const func = () => {}; export const a = 1; 2) 모듈 가져오기 Import fileObj from ʻ./file.jsʼ; fileObj .func(); Import { func, a } from ʻ./file.jsʼ; func(); 3) 모듈 시스템 내보내지 않은 변수는 외부로 노출되지 않아 자원 보호가 가능함 CommonJS const func = require(ʻ./file.jsʼ) ES Modules Import func from ʻ./file.jsʼ; export const bark = () => { console.log('Bow-wow'); }; imp..