Jieunny의 블로그

📣 기술 면접 질문에 대한 답변을 미리 준비해보자. 📌 HTML ✔️ 브라우저의 렌더링 원리에 대해 설명해주세요. 더보기 ➰ 브라우저는 렌더링 엔진을 사용해서 요소들을 렌더링하며, 렌더링 엔진은 CRP 프로세스를 거칩니다. ➕ CRP란 무엇인가? ➰ Critical Rendering Path ➰ 문서를 화면에 표현하기 위해 거치는 일련의 과정입니다. 1️⃣ HTML, CSS를 각각 파싱 후 DOM Tree와 CSSOM Tree를 구축하고, js를 실행합니다. 2️⃣ DOM Tree와 CSSOM Tree를 결합해 렌더트리를 구축합니다. 3️⃣ 렌더트리의 각 노드가 가지는 위치와 크기를 계산합니다. (Layout 단계) 4️⃣ 계산한 위치와 크기를 기반으로 픽셀로 변환해 화면에 그립니다. (Paint 단계)..

➰ 14일차 오전 시간에는 기술 면접 질문 정리하고 오후 시간에는 페어 활동 + 실시간 세션 시간이었다. 오늘부터 또 새로운 페어분이랑 하는데 지금까지 만난 페어분들 보다 활발하신 분이라 재밌게 활동한 것 같다. 최대한 쉽게 설명해 드리고 싶었는데 잘 전달됬는지 모르겠다🥹 내일이랑 모레 있을 페어활동 때도 파이팅 해야지 기술 면접은 내가 제일 싫어하는건데... 내가 모르는 거 물어볼까봐 너무 긴장되고 평가받는 거 같아서 싫다. 프론트엔드 기술이 한두개도 아니고..😡 그래도 준비해야겠지.. 오늘 잠깐 보면서 느꼈는데 코드로 짤 수 있다고 해서 이론을 정확히 알고 있는 건 아니더라. 그리고 안다고 누군가에게 설명할 수 있는 것도 아니고. 기술 면접에 관한 질문을 많이 보면서 내용을 내걸로 만드는 게 제일 필..

📣 이벤트 객체 ✔️ 이벤트 : 클릭하거나 드래그 하는 일 📣 클릭에 따라 나오는 텍스트가 달라지는 브라우저 1️⃣ HTML 아메리카노 카페라떼 2️⃣ JS let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다. let btnAmericano = menus[0]; let btnCaffelatte = menus[1]; for(let i=0; i

➰ 13일차 페어분도 잘 하시는분이라 우리는 코드 리뷰하고, 서로 질문할거 하는 식으로 진행했다. 오늘은 열심히 구현한 계산기 CSS 바꿔서 제출했다. 나도 디자인 쪽에 소질이 있으면 좋을텐데 디자인 하는 건 언제나 너무 어려워.. 내가 하면 컬러도 어색한거 같구.. 참고 디자인 가져와서 비슷하게 구현하는 게 나은 것 같다. 남은 시간에는 전에 하던 유효성 검사 실습 마저 했다. 오늘은 너무 힘들어서 평소보다 쉬는 시간을 더 가졌는데 모니터만 보고 있으니까 눈이 뽑힐거같아..🥹

📣 유효성 검사 ➰ 특정 값은 반드시 입력해야 한다. ➰ 비밀번호는 n 자리 수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 한다. 위와 같은 기능을 '유효성 검사'라고 한다. let inputUsername = document.querySelector('.username'); // username 클래스 요소를 받아온다. let failureMessage = document.querySelector('.failure-message'); // failure-message 클래스 요소를 받아온다. 얘는 hide 클래스가 있어 숨겨져있음. inputUsername.onkeyup = function(){// username 클래스 요소에서 사용자가 키를 눌렀다 뗐을 때 if(isMoreFour !== ..

➰12일차 라이브세션 때 다른 분들 계산기 목업한 거 많이 봤는데 다들 진짜 정성들여 하셔서 나 너무 대충했나 생각했다. 그치만 깔끔한 디자인이 좋은걸.. 내일 구현해서 내는 계산기는 다른 디자인으로 해봐야지 오늘은 딱히 쓸 말이 없다🤨