가쟤의 해변일기 🐳

ㄴㅁㄷㅋㄷ 무료 강의에 있는 트위터 클론코딩 챌린지를 시작했다! 리액트를 조금 찍먹해보긴 했지만 원래 들었던 리액트 강의에서 기본적인 문법의 쓰임을 알려주지 않아서 ㄴㅁㄷㅋㄷ React Hooks 강의를 빠르게 듣고 트위터 클론코딩 강의를 들으려고 한다. 그래서 ..! #1 USESTATE 까지 듣고 블로그에 기록하면서 공부 내용을 정리해보려 한다 ! useState 컴포넌트에서 바뀌는 값을 관리하기 좋은 useState! 리액트의 기본적인 props .. 개념들을 선행 공부하고 hooks를 배워야 왜 사용하는지, 장점이 뭔지 뼈저리게 느낄 수 있다. 일부러 바닐라 JS로 포켓몬 도감 프로젝트를 만들어서 리액트가 얼마나 편한 도구인지 체감이 된다. 편하게 만든 만큼 왜 어떻게 편해졌고 어땠던 기능을 어떻..

https://huchu.link/2v74MlY TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org function last (arr: T[]):T { return arr[arr.length - 1] } function prepend(arr:T[], item:T):T[] { arr.unshift(item) return arr } function mix(arr1:T[], arr2:T[]):T[] { return arr1.conca..

Typescript가 존재하는 이유 : 타입 안정성 때문 -> 코드에 버그가 줄고 런타임 에러가 줄고 생산성도 늘어난다. ⭐ Javascript └ 매우 유연해서 에러를 잘 보여주지 않는다. 실행 시 에러 발생 → 실행 전에 에러 감지 불가 ⭐ Typescript └ 타입 안정성 → 버그 감소 ⭐ 타입스크립트 코드 테스트 https://www.typescriptlang.org/play ⭐ 타입스크립트 핸드북 https://typescript-kr.github.io/pages/basic-types.html ⭐ Typescript └ Strongly typed programming └ 컴파일 시 javascript로 변환됨 └ 에러가 발생 → 컴파일 X TypeScript가 타입을 추론하는 것(암시적 타입)..

문자 String mdn을 참고하자. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org .length 문자의 길이(숫자) 를 반환한다. .includes() 대상 문자에 주어진 문자가 포함되어 있는지(불리안) 확인힌다. 대소문자 구분, 두번째 인수는 주어진 인덱스 번호부터 찾기 .indexOf() 대상 문자에 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환한다. 일치하는 문자가 없으면 -1 을 반환한다. .padEnd() 대상 문자의 길이(length)..

React 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 리액트: 라이브러리 앵귤러 : 프레임워크 라이브러리 vs 프레임워크 차이 프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (더 큰 개념) -> 라이브러리를 포함하고 작성한 소스 코드를 호출한다. 라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것 -> 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다. 리액트가 라이브러리인 이유 : 전적으로 UI(사용자 인터페이스)를 랜더링 하는데 관여하기 때문이다. 리액트를 사용하는 이유 상대적으로 배우기 쉬운 라이브러리 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경 많은 기업들의 사용으로 검증이 된 라이브러리 (대표적 페이스북) 리액..

Prototype Array mdn을 검색해서 공식 문서를 읽어보자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다. developer.mozilla.org 프로토타입은 배열데이터(인스턴스)에서 쓸 수 있는 별도의 속성이나 메소드를 등록하는 객체이다. 내가 원하는 로직을 점표기법으로 붙여서 쓸 수 있다! const fruits = new Array('apple', 'banana', 'cherry') Array.prototype.seacrab = fun..

함수 선언문 (Declaration) function hello () { } 함수 표현식 (Expresstion) const hello = function () {} // 할당 연산자로 함수를 할당함. hello() //호출 호이스팅이라는 개념에서 차이가 발생한다. 호이스팅 (Hoisting) function hello() { console.log('hello~') } hello() // 호출하는 위치에 상관 없이 출력 됨. -> 아직 정의되지 않은 함수도 ! // 유효 범위 내에서 가장 상단으로 끌어올려 동작함. → 함수 선언문에서만 동작. 함수 표현식은 X (자주 사용) 함수 선언문에서 호출 부분을 위에 적는 이유 : 추상적인 부분을 위쪽에 적어서 전체적 코드 흐름을 빠르게 파악하기 쉽게 하고 자세한..

​ - 연산자, nullish 병합 - 선택적 체이닝 ( ?. ) - 전개 연산자 ( ... ) - 구조 분해 할당 - if, switch 조건문 - for, for of, for in 반복문 - while문, do while 반복문 연산자, nullish 병합 && : and 연산자, 거짓일 때 반환 || : or 연산자, 참일 때 반환 ?? : nullish 병합 연산자로, null/undefined를 제외한 모든 데이터를 반환한다. ​ 특히, || 연산자는 if문, 삼항 연산자를 쓰지 않고도 '조건'이 아닐 경우에 출력할 것을 지정할 수 있다. return user.address?.city || '주소 없음' // user.address?.city가 없으면 '주소 없음'을 반환 여기서 ?. 최소 최..

수업을 듣다 문득 궁금해져서 시도해봤다. 함수 안에서 실행하는 또 다른 함수 안에서 실행하는 또 다른 함수 --- 가 가능할지? function timeout(cb) { setTimeout(() => { console.log('seacrab') }, 1000) } timeout(() => { console.log('First') }) 이런 함수가 있으면 first가 먼저 console에 출력되고 1초 뒤에 seacrab이 출력된다. first를 seacrab 다음에 출력 시키고 싶으면? function timeout(cb) { setTimeout(() => { console.log('seacrab') cb() }, 1000) } timeout(() => { console.log('First') // 이 ..