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

기본 미션객체, 속성, 메소드가 무엇인지 설명하기 객체객체는 속성과 메소드를 가지고 있는 데이터 타입이다. 중괄호 {}를 사용하여 만들 수 있다. 배열처럼 여러가지 자료형을 담을 수 있다.속성객체의 특징을 나타내는 값이다. 객체의 속성은 키와 값으로 이루어져 있다.속성의 키는 문자열이다.메서드객체의 속성 중 함수인 속성을 메서드라고 한다.선택미션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를 실행했을 때 다음과 같은 모듈을 찾을 수 없다는 에러가 발생했다...

Create React App(CRA)란?Create React App(CRA)는 리액트(React) 애플리케이션을 손쉽게 생성할 수 있도록 해주는 공식적인 CLI 도구다. 별도의 복잡한 설정 없이 단순한 명령어 입력만으로 프로젝트를 초기화할 수 있어 초보자부터 숙련자까지 널리 사용했었다.터미널에서 CRA를 이용한 프로젝트 생성 명령어는 다음과 같았다.npx create-react-app my-react-appcd my-react-appnpm start이 명령어를 실행하면 자동으로 프로젝트 구조가 생성되고, 개발 서버를 실행하여 즉시 React 애플리케이션을 실행할 수 있었다. CRA의 주요 장점CRA는 메타에서 몇 년간이나 관리하지 않았지만 다음과 같은 장점으로 인해 많은 개발자들에게 인기가 있었고, ..

기본 미션p. 139 의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기 let x = 15;if (x > 10) { if (x 10 && x 선택미션p. 152의 예제 실행하여 본인의 띠 출력한 화면 캡처하기학습 기록if 조건문상반되는 조건이 있을 때는 if - else 구조를 사용하는 것이 좋다.조건은 상호배타적인 것이 좋다.else if 구문을 활용해 조건 비교 횟수를 줄이는 것이 좋다.if문:if 조건문은 조건식의 결과가 true이면 중괄호 안의 코드를 실행하고, false이면 건너뛴다.if(3 > 2){ console.log("진실")}else 구문:if 조건문 바로 뒤에 붙여 반대되는 조건에 대해 처리할 수 있다.if(3 if else if 조..