Code States
Front-end boost camp
Today
I
Learned
🍰 진짜 한달이 지났네..! 5월 9일 20일차 수업 시작
🍰 기술면접?
기술 면접은 뭔 노무 기술 면접.. 기술이 있어야..; 라고 생각했던 어제ㅋㅋㅋ.. 오전 9시 커리어 세션 1시간을 듣고 기술 면접 준비를 하라는데 뭘 하라는 건지 심히 고민했다.
정답은? 지난 섹션1을 지나오며 배운 지식들을 나의 언어로 답변할 수 있도록 준비하라는 뜻이었다.
오.. 의미 있다.
코트 측에서 10개가 넘는 질문을 던져주었고 스스로 고민하며 개념을 나만의 언어로 정리하면서 기초를 다져야겠다.
❓ 스코프에 대해 설명해주세요.
변수가 접근할 수 있는 유효범위로, 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는지에 따라 이 범위를 스코프라고 부릅니다.
가장 바깥에 위치한 스코프를 전역 스코프(global scope)라고 부르고 나머지는 전부 지역 스코프(local scope)라고 부르는데
특이한 점은, 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용이 가능하지만 안쪽에서 선언한 변수는 바깥쪽에서는 사용이 불가합니다.
그 이유는 지역 변수는 전역 변수보다 더 높은 우선 순위를 가지기 때문입니다.
이름이 같을 경우 가장 안쪽의 스코프를 참조합니다.
ex) 삼돌이와 삼순이는 부부 사이인데, 삼돌이는 가정을 1순위로 생각하는 사랑꾼이다. 외부에서는 회사에도 소속이 되어 있고, 조기 축구 모임도 회원이며, 오랜 친구들의 모임에도 속해 있지만 그 어떤 외부 약속이 있을 지라도 가정 내부에서 놀기만을 좋아합니다.
--> 회사 소속, 조기 축구 모임, 친구들 모임 : 바깥쪽 스코프 / 가정 : 안쪽 스코프!
스코프 내에서 변수를 선언할 때는 키워드에 따라 차이가 있는데, var 키워드는 함수 스코프로 값 재할당과 재선언이 모두 가능합니다. var는 블록 스코프를 무시하고 재선언 시에도 에러를 내지 않아 브라우저 내장 기능을 사용하지 못하게 만들 수 있어 문제의 여지가 있습니다.
let 키워드는 값 재할당은 가능하나 재선언은 불가능하며, const는 재할당과 재선언 모두 불가합니다.
❓ 클로저에 대해 설명해주세요.
함수와 함수가 선언된 어휘적 환경의 조합으로 이 환경은 클로저가 생성된 시점의 유효범위 내에 있는 모든 지역 변수로 구성됩니다.
함수가 생성될 당시 외부 변수를 기억해 생성 이후에도 계속해서 접근이 가능하며 클로저의 함수는 어디에서 호출되느냐와 무관하게 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해지기 때문에 매우 중요합니다.
❓ 일반적으로 CSS를 불러오기 위해 'link'요소를 'head'요소의 자식 요소로 하고 JavaScript를 불러오기위해 'script'요소를 'body'요소가 끝나기 직전에 위치시키는 이유는?
HTML 요소를 브라우저가 전부 파싱한 후에, javascript파일을 읽어야 DOM이 확인이 가능하다.
파싱되기 전에 불러오면 javascript가 해당 HTML요소를 읽지 못해 레퍼런스 에러가 발생합니다.
❓ 'li'요소는 왜 'ul'요소의 자식 요소여야만 하나요?
li 요소는 목록 아이템을 보여주기 위한 요소이기 때문에 목록을 담은 ul, ol 등의 자식 요소여야 합니다.
ul : unordered list, ol : ordered list
li만 사용하게 되면... 에러는 없으나 검색엔진이 목록으로 정확하게 파악하기 어렵다.
❓ id 속성과 class 속성에 차이에 대해 설명해주세요.
id는 고유해야 합니다. 자바스크립트 속성 선택 및 스타일 적용에 사용이됩니다. class는 여러 동일한 요소에 적용할 수 있어 스타일을 적용할 때 주로 사용합니다. 하지만 둘은 개발자의 니즈에 따라 적절하게 사용할 수 있습니다.
❓ CSS box model에 대해 설명해주세요.
HTMl이 화면에 어떻게 렌더링 되는지 결정한다. content/ padding/ border/ margin으로 이루어져 있다.
content-box와 border-box의 차이 : content-box는 content 영역만 정의해 테두리 등은 크기에 포함되지 않고 border-box는 padding, border를 포함한 박스 크기를 결정합니다.
❓ 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 css를 어떻게 작성해야 하나요? (centering)
로그인 폼 컴포넌트의 부모 박스를 flexbox로 지정하여 justify content 속성을 활용해 센터링 하겠습니다. 이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면 가운데 정렬이 되지 않기 때문에, HTML 요소 배치에 주의해야 합니다.
grid 방법 추가하기
❓ 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 css를 어떻게 작성해야 하나요?
아래 레이아웃은 글쓴이 정보가 모인 컴포넌트와 소셜 공유 로고가 모인 컴포넌트를 각각 왼쪽과 오른쪽으로 붙이는 레이아웃입니다. 중간에 큰 공간이 필요한데, 이런 레이아웃 구현을 위해서는 flexbox가 필요합니다.
div.author-container가 flex-container가 되어야 하고 (display:flex) flex-item 간에 최대 간격을 주기 위해서 justify-content: space-between이 필요합니다. 각 item에 flex-grow 속성을 0으로 주면 불필요하게 요소가 늘어나지 않고, 빈 칸이 글쓴이 요소와 공유 요소 컨텐츠가 차지하는 만큼만 빼고 모든 공간을 차지하게 되어서 원하는 그림이 나옵니다.
❓ 배열 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명해주세요.
배열과 객체는 참조 자료형입니다. 참조 자료형의 경우, 변수의 값 자체가 아닌 주소를 할당합니다. 따라서 const 키워드로 선언 및 할당을 하더라도, 해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가할 수 있습니다.
변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있기 때문에 보다 깔끔하고 안정적인 코드를 작성할 수 있습니다.
❓ 원시 자료형과 참조 자료형에 대해 설명해주세요.
원시 자료형은 변수에 할당할 때 값 자체가 할당이 되고, 참조 자료형은 변수에 할당할 때 주소가 할당됩니다.
원시 자료형은 숫자, 문자열, 불린 등 주로 하나의 값을 의미하는 타입
참조 자료형은 배열 객체와 같은 여러 개읟 데이터를 가지는 타입
참조 자료형의 특징 때문에 함수의 매개변수로 전달될 때 조심해야 합니다. 함수 내에서 참조 자료형을 변경하는 경우 해당 변화가 함수 내에서만 있는게 아니고 해당 참조 자료형을 참조하는 모든 코드에 영향을 미치기 때문!
❓ 얕은 복사와 깊은 복사에 대해 설명해주세요.
얕은 복사(shallow copy) : 객체를 복사할 때 객체의 속성 중 값이 참조 자료형인 경우 해당 주소만 카피하는 것
깊은 복사 : 값을 모두 복사
대부분의 경우 얕은 복사로도 충분하기 때문에 spread syntax나 Object.assign과 같은 보통의 복사 방법은 얕은 복사가 적용되어 있습니다.
❓ innerHTML 메서드와 textContent메서드의 차이에 대해 설명해주세요.
innerHTML은 HTML 태그를 인식하여 DOM 조작하는 것 처럼 화면에 HTML 요소를 적용하여 넣어주는 반면, textContent는 HTML 태그를 일반 텍스트 노드로 인식하여 HTML 요소로 적용하여 넣어주지 못합니다.
일반 텍스트를 넣을 때는 textContent를 쓰는 것만으로 충분하고, 만약 HTML 요소를 추가하고 싶더라도 가능하면 innerHTML은 사용하지 않는게 좋습니다. 이제 많은 메이저 브라우저에서 막히긴 했지만, script 요소를 직접 삽입해서 javascript를 실행시키거나, 다른 방식으로 javascirpt를 실행시킬 수 있어 보안 우려가 있기 때문입니다.
❓ event.preventDefault 메서드는 언제 왜 사용하는지 설명해주세요.
해당 이벤트에 기본적으로 설정된 기본 액션을 동작하지 않게 만드는 메서드.
대표적으로 form오소의 submit이벤트가 있습니다. submit 이벤트는 해당 폼의 정보를 서버로 요청을 보내려는 기본 동작을 가지고 있어 submit 이벤트가 일어나고 나면 화면이 의도치 않게 전환되거나 새로고침 되는 경우가 있습니다.
현대 웹 개발에 들어서서는 이런 서버 요청은 javascript에서 처리하기 때문에 이런 이벤트의 기본 동작은 막아주는 것이 필요합니다!
❓ 호이스팅에 대해 설명해주세요.
hoisting의 사전적 정의는 '끌어 올리기'로, javascript에서 호이스팅이란 함수 내의 변수 및 함수 선언을 각 유효범위의 최상단으로 끌어 올려주는 javascript의 독특한 특징이다.
const : 절때 바뀌면 안되는 값
ex)
var는 호이스팅 시에는 변수의 선언과 초기화(undefined으로) 같이 시켜버립니다.
console.log(a)
var a = 1
console.log(a)의 경우, undefined와 1이 차례로 출력됨. 위 console의 경우 a는 선언이 되어 호이스팅 되었지만 값은 할당되지 않았기 때문에 멋대로 undefined로 초기화해서 출력함, 하단 console은 값이 할당까지 되었기 때무네. 전역변수로 다다다다 올려서 사용할 수 있게함(function만 제외)
--> 버그 발생의 여지가 너무 많아 사용 권장 x
let : 재선언 불가, 지역번수 내부로 접근 불가!
❓ 브라우저 렌더링 원리에 대해 설명해주세요.
특정 웹사이트에 접근하려면? 1) 브라우저 실행 -> 2) 접속하고 싶은 사이트의 url을 주소창에 입력 -> 3) 브라우저는 입력된 url의 서버에게 사이트 정보를 받아와 이를 화면에 표현한다 -> 4) 표현된 정보를 사용자가 활용한다.의 과정을 거칩니다.
- 추가 필요
❓ ==와 ===의 차이점은?
== : 느슨한 Equal Operator, 값만 같으면 true를 반환
=== : 엄격한 Equal Operator, 값과 타입 모두 같으면 true 반환
🍰 섹션1 회고 블로깅
회고 블로깅 자체를 학생들에게 시킨다. 덕분에 자타의적으로 기록을 남길 수 있어서 좋당
45기 노션 내부에서 각자의 회고 내용을 둘러보며 댓글로 응원을 하기도 하는데 나름 재미가 있다.
나도 페어로 만났던 분들, 스터디에서 친해진 분들의 회고를 둘러보고 답을 남겼다.
이와 별개로 내가 내용을 추가하여 남긴 회고는 다음 링크에서 확인 가능! -> https://bit.ly/3LE1gpq
🍰 그룹회고 & 20일차 수업을 마치며...
어제에 이어 그룹 회고 두번째 시간이 진행되었다. 어제는 솔로 프로젝트를 발표한 느낌이었다면, 오늘은 각자 이야기를 나누고 의견을 공유하는 시간이었음.
정말 별거아니게 의식의 흐름대로 메모했지만, 각자 한마디씩 공유한 내용을 토대로 간단하게 작성해본 회의록(?)이다.ㅋㅋ 마지막은 카톡아이디를 공유하여 혹시 필요한 정보를 공유할? 수 있는 네트워크 장을 마련했다. 뭐 카톡이 아니어도 디스코드로 가능은 하니 사실상 문제는 없다!
내가 오늘 그룹회고에서 느낀 점은... 다들 비슷한 생각을 하고 있구나 라는 것을 느꼈고..
그 중에서도 일반 초보자보다 실력이 높으셨던 동기 분의 말이 기억에 남는다. 남들보다 경험은 조금 더 있을지언정, 기초를 쌓기 위해 참여한 부캠에서 가끔은 안주하려고 할 때도 있어 이를 경계하고 남들보다 열심히, 주말에도 열심히 하려고 노력한다는 것,,!
나는 초보자라 힘들다 따라가기 어렵다. 저 사람은 나보다 잘한다! 좋겠다! 라고만 생각했지 전혀 생각해보지 못했던 관점이라 새로운 깨달음을 얻었다.
나보다 월등히 실력있는 분들도 그리 생각하려 열심히 하시는데, 나도 오늘 할일을 끝냈다는 것에만 안주하지 말고, 그 안에서도 한 걸음 더 노력하는 학생이 되어야겠다. 적어도 이 부캠 안에서는 말이당!
내일도 화이텡!
