개발 요정🧚‍♀️ 용덕대게

“객체”는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이떄 메서드가 자신이 속한 객페의 프로퍼티를 참조 하려면 먼저 자신이 속한 객체를 가르키는 식별자를 참조할 수 있어야 한다. const circle = { radius: 5, getDiameter() { return 2 * Circle.radius } }; console.log(circle.getDiameter()) // 10 위의 설명을 듣고 코드를 보니 무슨말인지 이해 되시나여? 메서드는 기본적으로 객체의 프로퍼티를 변경합니다. 즉, 변수(상태)를 변경시키는 일을 합니다. 그런데 객체안의 ..

클로저와 렉시컬 환경 const x = 1; function outer() { const x = 10; const inner = function() {console.log(x)}; return inner; } const innerFunc = outer(); innerFunc(); 정답은? 10 outer함수는 종료되고 실행컨텍스트 스택에서 pop이 된다고 배웠는데, 값이 남아있다… 뭔가 이상하지 않나요??. 실행 컨텍스트 관점에서 본 위의 함수. 코드가 어떻게 스택에 올라가는지 보여주는 그림입니다. outer가 끝나고 inner가 새로 올라가는 것을 볼 수 있습니다. "전역 컨텍스트": { 변수객체: { arguments: null, variable: [{ outer: Function }, 'x', 'i..

실행 컨텍스트 자바스크립트 개념을 정리하다 보면 심심치 않게 실행컨텍스트라는 단어가 보입니다. 그렇기에 정리해 보것습니다. 왜 알아야 하는가? “실행 컨텍스트는 자바스크립트가 왜 그렇게 동작하는 지 여러분께 설명해줍니다.” - 제로초 블로그 “실행 컨텍스트는 자바스크립트의 동작원리를 담고있는 핵심 개념이다.” - 모던 자바 스크립트 딥다이브 배워야 겠죠?... ㅎ 근데 어렵다 실행컨텍스트를 정리 하기위해 여러 블로그와 책을 보다보면 다들 하나 같이 어렵다고 말합니다. 하지만 중요한 개념이기에 끝까지 정신줄 붙잡고 따라 오시길… 내용이 쫌많고 책에 있는 내용들을 추려서 가져오다보니 내용이 두서없이 진행 되는데 한번 끝까지 읽으시고 한번 더 읽는 것을 추천드립니다!. 시작전 간단한 용어 정리 Stack 스택..

Jest 사용 방법 Jest란 Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리입니다. 내가 작성한 코드가 제대로 동작하는지 확인할 때 사용합니다. 여러가지 상황들을 설정하고, 그 상황에 맞는 결과가 나오는지 자동으로 테스트 해줄 수 있습니다. 출시 초기에는 프론트엔드에서 주로 쓰였지만 최근에는 백엔드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. 설치 사용 하고 싶은 라이브러리의 루트에 아래 명령어를 입력합니다. $ npm init -y $ npm i -D jest babel-jest @babel/core @babel/preset-env 설정 “package.json” 안에 추가 합니다. "scripts": ..

git은 개발자라면 누구나 한번은 들어봤을 단어이다. git은 형상관리 툴중에 하나인데. 나에게 형상관리는 git이외에 다른 말이 떠어르지 않는데, 이번에 한번 정리해 보겠다!. 형상관리 정의 “소프트웨어 구성 관리(Software Configuration Management) 또는 형상 관리 는 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것으로, 형상 관리는 일반적인 단순 버전관리 기반의 소프트웨어 운용을 좀 더 포괄적인 학술 분야의 형태로 넓히는 근간을 이야기한다.” - 위키 백과 위의 말을 줄이자면 형상 관리가 변경관리보다. 변경관리가 버전관리 보다 더 포괄적인 단어이다. 변경 관리 — 소스코드 변경 사항에 대한 관리 버전 관리 — 변경사항을 ‘버전’이란 개념을 통해 관리. 형상 관리 — ..

오늘은 HTML & CSS flex 정리를 더 해보려고 합니다. flex-basis, flex-grow, flex-shrink에 대해서요. 내용은 beam camp의 강사님의 강의를 바탕으로 하고 있습니다. 더 많은 내용을 원하시면 https://www.youtube.com/@veamcamp flex-basis 초기 값을 정할 수 있는 키워드인 flex-basis부터 해보겠습니다. 하숙집에 3명이 같이 살고 있습니다. 이친구들이 살고 있는 방의 크기를 늘리고 싶다면 어떻게 해야 할까요??? width를 주는 방법과 flex-basis의 값을 주면 됩니다! 방이 넓어 졌네요. ㅎㅎ 그럼 둘(flex-basis, width)의 차이는 무엇일까요??? 차이는 축에 있습니다. flex-direction이 row..

grid? 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법입니다 부모요소를 grid-container 자식요소를 grid-item 이라고 부릅니다. 그리드 레이아웃은 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템입니다. https://gridexamples.com/ Grid Examples • Real sites using CSS Grid Layout Get inspired by real and live sites collected from bloggers, designers and developers that are using CSS Grid Layout in production. gridexamples.com 이런 card ui는 많이 접해 보셨을 ..

button 동적 가상 생성자 속성 선택자 button 사용자가 클릭할수 있는 요소입니다. form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있습니다. button /* disabled: 누르거나 클릭하는 것을 막습니다. */ button 동적 가상 선택자 :active 클릭시 활성화(누르고 있는 동안) :visited 사용자가 이미 방문한 링크일 경우 해당 상태에 만족합니다 웹브라우저의 방문기록 정보를 사용합니다. a:visited { color: skyblue; } :disabled 비활성화 된 요소를 선택합니다 :hover 마우스 커서를 요소에 올려두었을 때 button:hover { background: skyblue; } :focus focus 받은 상태를 나타냅니다 .btn:..

HTML과 CSS를 통해 홈페이지를 만들다 보면 내가 원하지 않는 곳에 패딩과 마진 혹은 높이값이 들어가 있는 경험들을 많이 하게 됩니다. 이런 경험 들을 하면 보통을 그냥 지나 가거나 별 생각 없이 초기화를 해주게 되죠. 저도 별생각 없이 지나갓던 것들인데 오늘은 당연하게 생각하지 않고 정리를 한번 해보겠습니다. 당연하게도 모든 프로퍼티에 대해 정리 할 수는 없을 겁니다. 크게 initial value가 뭔지 그리고 initial value를 맞이 했을 떄 어떻게 대처하고 또 어떤 때 대처 하지 않는지에 대한 소개를 해보겠습니다. initial value가 뭘까? initial value란 말 그대로 CSS의 초기 값입니다. 뭔지 이미지를 통해서 확인해 보겠습니다. 위의 두 이미지의 차이가 보이시나요?..

웹페이지 혹은 어플리케이션 화면을 만들때 우리는 수평적 요소들에 대한 배치를 할때 고민을 합니다. float, grid, flex중에 어떤 것을 사용할지에 대한 것을 말이죠. 우리가 많이 사용하는 요소들 예를 들어 div, p, footer등은 블럭의 개념으로 표시됩니다. 이 친구들은 블럭요소로 화면의 width를 다 차지해 버립니다. 요소들을 옆에 두지 않고 밑에(?)두죠. 이런 비 사교적인 친구들을 사교적으로 만들수 있는 flex에 대한 설명을 해보겠습니다. 이미지에서 주축과 교차축 flex-direction이 보이시나요??? 이것들은 화면에 보이는 컨테이너들 즉 요소들을 어떻게 배치하느냐에 중요한 키워드 들입니다. flex-direction 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정합니다..