개발자를 희망하는 초보의 자기개발 이야기

기본 미션p. 315의 을 실행한 후 출력되는 고양이 이미지 캡처하기사이트가 https://www.placecats.com으로 변경되었음. 선택미션p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡처하기 학습 기록문서 객체 모델 문서 객체 모델(Document Object Model), 줄여서 DOM이라고 부른다.문서 객체는 HTML 요소를 의미한다.문서 객체 모델은 자바스크립트를 통해 HTML 요소를 조작할 수 있게 해주는 객체들의 집합이다.DOMContentLoadedhtml에서 querySelector()document 객체를 통해 HTML 문서 내의 태그에 접근할 수 있다.querySelector()는 해당 조건에 맞는 첫 번째 태그만 선택한다.다양한 선택자를 태그로 선택할..

한글판 제목은 '게으름이 습관이 되기 전에' 이지만 원제는 '미루는 습관을 끊는 법'이다. 누구나 한 번쯤 "나중에 해야지"라고 생각하며 일을 미뤄본 경험이 있을 것이다. 각종 업무를 맡아놓고 감당이 안되서 미루게 되는 경우나, 거대한 프로젝트를 맡아 어디서부터 시작해야 할지 모를 막막함에 미루게 되는 경우 등. 하지만 미루는 습관은 성공을 방해하고 삶의 질을 낮춘다. 스티브 스콧의 The Anti-Procrastination Habit에서는 이러한 습관을 깨는 실용적인 방법을 소개한다. 미루는 습관의 원인왜 우리는 미룰까? 이유를 알면 해결책도 찾을 수 있다. 책에서 설명하는 대표적인 이유는 다음과 같다.완벽주의: 너무 높은 기준을 세워 시작조차 하지 못한다.무기력감: 실패 경험과 피로로 동기가 부족하..

기본 미션객체, 속성, 메소드가 무엇인지 설명하기 객체객체는 속성과 메소드를 가지고 있는 데이터 타입이다. 중괄호 {}를 사용하여 만들 수 있다. 배열처럼 여러가지 자료형을 담을 수 있다.속성객체의 특징을 나타내는 값이다. 객체의 속성은 키와 값으로 이루어져 있다.속성의 키는 문자열이다.메서드객체의 속성 중 함수인 속성을 메서드라고 한다.선택미션p. 288 확인 문제 3번 풀고, 풀이 과정 설명하기 Math.sin()은 매개변수로 radian에 대한 사인 값을 반환한다.radian은 각도의 도(°)와 다르게, 원의 반지름과 원주를 기준으로 각도를 측정하는 단위 중 하나다.degree는 90으로 주어졌으니, radian은 (degree * Math.PI) / 180로 계산된다.따라서, console.l..

기본 미션 p. 202 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기 const isLeapYear = function (year) { return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);};선택미션 p. 240 확인 문제 1번 풀고, 풀이 과정 설명하기 논리연산자 &&를 통해 3가지 조건에 일치하는 값을 필터링 하도록 했다. filter 메서드는 비파괴적처리를 하기 때문에 result라는 새로운 변수에 필터링된 결과값을 할당했고,console.log에는 결과값이 할당된 result 변수를 출력했다.// 변수를 선언합니다.let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]// 처리합..

기본 미션비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기비파괴적 처리:연산 후에도 원본 데이터가 바뀌지 않는 것예) 숫자 연산비파괴적 처리는 불변성을 유지하며 안정적인 코드 작성에 유리하지만, 메모리 사용량이 증가할 수 있다.파괴적 처리:연산 후에 원본이 바뀌는 것예) 배열의 push() 메서드.파괴적 처리는 메모리를 절약할 수 있지만, 원본 데이터가 변하기 때문에 사이드 이펙트가 발생할 수 있다.선택미션p. 173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기공통적으로 함수실행 이후 원본 데이터에 변화가 있는지 확인하면 알 수 있다.비파괴적 처리> const strA = "사과, 배, 바나나, 귤";undefined> strA.split(",");["사과", " 배", " 바나나", " 귤"]>..

서론input 태그에 padding-inline-start라는 css가 적용된 사례가 있어 무엇인지 알아보다가 다국어와 관련해 유용한 속성인 것을 알게 되었다.아랍어나 히브리어 등은 한글과 달리 오른쪽에서 왼쪽으로 읽고 쓰는 RTL ( Right To Left ) 계통이다.텍스트 시작지점에 여백을 주고 싶다고 해서 단순히 padding-left로 처리하게 되면 영어나 한국어 같은 LTR( Left To Right ) 계통은 문제가 없으나 RTL 계통은 UI에 문제가 발생한다. 그럼 먼저 언어에 따라 텍스트의 방향을 바꿔줘야 하지 않을까? 라는 생각이 들었다. directioncss적으로 요소의 텍스트와 inline 방향을 설정하는 속성이다. 블록의 시작 위치가 오른쪽으로 이동하여 정렬되지만 한글과 영어 ..

실수로 폴더명이나 파일명의 대소문자를 잘못 저장해 깃허브에 올렸을 때,OS에서 기본 제공하는 이름바꾸기로는 git에 변경사항이 적용되지 않는다.만약 Components 라는 폴더를 components로 바꿔야 한다면git mv Components components또는 loading.tsx 라는 파일을 Loading.tsx로 바꿔야 한다면git mv loading.tsx Loading.tsx이렇게 기존 폴더명/파일명을 앞에 입력하고 뒤에 변경할 이름을 입력한 뒤, add - commit - push하면 변경사항이 반영된다.참고https://velog.io/@yhe228/%ED%8F%B4%EB%8D%94%EB%AA%85-%EB%B3%80%EA%B2%BD%EC%8B%9C-git%EC%97%90-%EB%B0%..

Inline-block이란?inline-block은 inline과 block 요소의 특성을 모두 가지는 속성이다. 기본적으로 inline처럼 한 줄에서 여러 개의 요소가 배치되지만, block처럼 width, height를 지정할 수 있다.사용 예시See the Pen inline-block by luckyzi (@luckyzi) on CodePen.원래 태그는 inline 요소로 width와 height를 가질 수 없으나 inline-block을 적용하면 위와 같이 width와 height를 적용할 수 있다.Inline-block의 장점Block처럼 크기 조절 가능width, height 속성을 자유롭게 지정할 수 있어 레이아웃을 쉽게 조정할 수 있다.Inline처럼 자연스럽게 정렬여러 개의 inl..

Collapsing Margins(여백 병합 현상)이란?CSS에서 margin은 요소 간의 간격을 조정하는 속성이지만, 특정 상황에서는 두 개 이상의 margin이 병합되어 하나로 처리된다. 이를 Collapsing Margins(여백 병합)이라고 한다.병합되는 조건형제 요소 간의 margin서로 인접한 블록 요소들이 각각 margin-bottom과 margin-top을 가지고 있으면, 두 값 중 더 큰 값이 적용된다..box1 { margin-bottom: 20px; }.box2 { margin-top: 30px; }실제 적용된 여백은 30px (둘 중 더 큰 값)만 반영된다.부모와 자식 요소 간의 margin부모 요소의 margin-top과 첫 번째 자식 요소의 margin-top이 병합될 수 있다...

React 프로젝트를 시작하면서 npm을 사용하여 create-react-app을 생성하고 의존성 관련 에러를 해결했다. 하지만 TypeScript를 기본적으로 포함시키기 위해 --template typescript 옵션을 추가했어야 하나 잊어버려서 별도의 설치 후 발생한 에러를 해결한 내용이다.TypeScript 추가 설치CRA로 리액트를 설치할 때 --template typescript 옵션을 넣지 않았다면 별도로 설치해주어야 한다.npm install --save typescript @types/node @types/react @types/react-dom @types/jestModule not found 에러이후 npm start를 실행했을 때 다음과 같은 모듈을 찾을 수 없다는 에러가 발생했다...