NHN Cloud 채널 [2019] 실용적인 프런트엔드 테스트 전략 영상을 참고해 정리한 내용들이 포함되어 있습니다. 프론트엔드 테스트가 어려운 이유 입출력 값을 데이터로써 코드로 감지하기 쉽지 않습니다. 프론트엔드의 입력과 출력 입력 데이터 출력 데이터 (시각적 요소) DOM 이벤트 : 마우스, 키보드, 터치 등 - 생성 : 브라우저의 이벤트 시뮬레이션 API 사용 라우팅/IO : URL 변경, 네트워크/로컬 파일, 로컬 스토리지/쿠키 - 생성 : 브라우저 API 목킹 / E2E 테스트 도구 사용 코드 관점 : HTML, CSS - 검증 : 생성된 HTML, CSS 코드의 내용을 비교 사용자 관점 : 브라우저가 렌더링한 화면 (픽셀 정보) - 검증 : 브라우저가 렌더링한 화면을 캡처해서 이미지로 비교 ..

99일간 공부하고 8일만에 취업한 이야기 그리고 211일간 개발자로 살아온 이야기 2021년은 내 삶에 큰 변화가 있던 해다. 20대 절반 이상을 함께한 공기업을 퇴사하고 개발자로 커리어를 전환했다. 당장에는 잃을 게 더 많아 보이고 혹여나 오랜 취준 생활, 연봉 반 타작, 최저 시급.. 등을 마주하게 되더라도 겁 먹지 말자고 마음을 단디 먹었다. 장기적으로 내가 원하는 모습으로 살기 위한 약간의 투자라 생각했다. 결과적으로는 항해99 부트캠프 수료일로부터 8일만에 최종 오퍼를 받았다. 개발자로 근무한 지 8개월 차에 접어들지만 아직도 매일 아침.. 과거의 나를 칭찬해주고 있다. 역시 퇴사하고 도전하길 잘 했어 !! 2021년 상반기 타임라인 - 2월 말 퇴사 처리 - 3월 1일 항해 99 시작 - 6월..

This is a personal preference. but I personally think strings should be with double quotation marks even just for avoiding this simple error: console.log('I don't like double quotation'); discuss.codecademy.com/t/when-should-you-use-single-quotes-or-double-quotes-for-strings/489264/4

flexbox 간 공백을 주는 방법으로 justify-content와 align-content의 space-속성값을 이용할 수 있다. jusity-content가 중심축을 기준으로 하는 배치 방식을 결정한다면 align-content는 반대축을 기준으로 하는 배치 방식을 결정한다. space-around, space-evenly, space-between 이 3가지 방법의 차이를 예시를 통해 비교해보고자 한다. jusify-content: space-around; (box를 둘러싼 공백 생성, 공백이 겹치는 구간과 그렇지 않은 부분의 너비가 달라짐) jusify-content: space-evenly; (동일한 공백을 생성) jusify-content: space-between; (box 간에만 공백을 ..

flex-direction : flexbox 배치 방향을 결정하는 방식 justify-content : 중심축에서 아이템을 배치하는 방식 flex-direction: row; flex-direction: row-reverse; justify-content : flex-start; justify-content : flex-end; justify-content : center;

Objects의 정의 one of the JS's data types. a collection of related data and/or functionality. Nearly all objects in JS are instances of Object. object = { key : value }; ✅Literals and properties ◾Object의 필요성 Object 미적용 시 문제점 : 변수 하나 당 값을 하나만 부여할 수 있다. 함수에 변수 개수만큼의 파라미터로 전달해야 하므로 인자가 많아지면 관리가 힘들다. ◾Object를 생성하는 방법 object literal syntax : curly brackets 사용 const obj1 = {}; object constructor syntax :..

DOM이란 무엇인가 DOM은 HTML 및 XML문서에 대한 인터페이스이다. 문서 요소들을 객체화하여 프로그램이 문서 구조, 스타일 및 내용을 조작할 수 있도록 API를 제공한다. DOM의 원리와 역할 🔹HTML 내용을 브라우저에 표시하기 위해 필요하다. (HTML 내용이 브라우저에 표시되는 과정) HTML 파일이 우리가 흔히 보는 웹 사이트로 보여지기까지 문서를 읽어들이고 어떤 내용을 페이지에 보여줄 지 결정하여 표시하는 과정을 거친다. 전문 용어로 파싱과 렌더링을 수행한다. 위 절차중 어떤 내용을 페이지에 렌더링할지 결정할 때 DOM_과 CSSOM_이라는 두 모델이 필요하다. 정확히는 뷰 포트에 렌더링할 내용을 결정할 때 DOM이 필요하고 결정된 내용으로 렌더링을 수행하면 웹 페이지에 HTML 요소가 ..

어느 순간 배움이 두렵고 지겨워질 때 이 글이 제 자신과 타인에게 도움이 되기를 바라며 작성해 봅니다. 비전공자 프로그래밍 입문자로써 누군가에게는 이미 당연한 개념들도 모두 생경하게 느껴집니다. 하지만 그것에 초조해하며 쫓고 쫓기지 않기로 했습니다. 새로운 것을 접할 때의 놀라움과 신기함, 즐거움에 집중하기로 했어요. 그러기 위해 개념이 어떤 필요에 의해 도입되었을 지를 그려야 합니다. '왜?'에 대한 공감없이 정의부터 예시, 종류 등을 순차적으로 이해하려 하면 어렵게 느껴지거든요. 혁명적인 것이든 약간의 편리함이든 세상에 없던 개념이 가져온 변화에 집중합니다. 그것에 몰입할수록 배움 자체가 더욱 즐거워질 것 입니다. 그리고 과연 내 세상에서는 어떻게 활용될 수 있을 지, 보이지 않던 것들이 보이게 되는..