리액트 훅 6.1 함수 컴포넌트와 리액트 훅 클래스형 컴포넌트는 다양한 생명주기 메서드를 이용할 수 있습니다. 하지만 코드가 간결하지 못하여, 짜임새있는 코드를 작성하기 힘듭니다. 특히, 하나의 생명주기 메서드 내부에 서로 관련이 없는 로직이 함께 작성될 수 있습니다. 그리고 서로 관련이 매우 깊은 코드 역시도 분산되어 작성될 수 있습니다. co...

생명주기 메서드는 리액트의 클래스 컴포넌트에서만 사용이 가능합니다.함수 컴포넌트에서는 useEffect()라는 리액트 훅을 이용하여 유사한 기능을 구현할 수 있습니다.생명주기 메서드는 다음 세 가지의 경우에서 자동으로 호출되는 메서드를 말합니다.컴포넌트가 마운트 될 때

임시글

리액트와 타입스크립트를 이용하여 기본적인 컴포넌트를 생성하고 상태 관리를 하는 예제를 다루어 보았습니다.type을 이용하여 타입을 지정해줍니다.useState를 이용하여 구조 분해 할당을 통해, getter와 setter를 지정해줍니다.이벤트 핸들러를 정의하고 onCl

PWA(Progressive Web App)Model View Controller (MVC)모델 : 사용되는 데이터와 데이터를 처리하는 모델, 데이터 단뷰 : 화면에 보이는 부분, UI모델과 뷰가 연결되어 있기 때문에 모델에서 값이 바뀌면 뷰에서도 바뀐다.이러한 형태를

Asynchronous JavaScript and XML자바사크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식입니다.Ajax는 브라우저에서 제공되는 API인 XMLHtt

실행 컨텍스트는 자바스크립트의 동작 원리를 담습니다.1\. 전역코드2\. 함수코드함수 내부에 존재하는 소스코드, 함수나 중첩함수, 클래스는 포함하지 않음3\. eval 코드빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드4\. 모듈 코드모듈 내부에

객체 : 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조( 객체 = 프로퍼티 + 메서드 )동작을 나타내는 메서드는 자신이 속한 객체의 상태인 프로퍼티를 참조하고 변경할 수 있어야 합니다.이때, 메서드가 자신이 속한 객체

자바스크립트 : 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율 적인 프로토타입 기반의 객체지향 프로그래밍 언어자바스크립트는 객체 기반 프로그래밍 언어이며, 자바

representational state transfer로이 필딩에 의해 처음 소개된 개념웹이 HTTP를 사용하지 못하는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍처HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처REST

참조형 내에 참조형 데이터가 있는 경우에 복사를 하게되면 해당 데이터가 바뀌면, 다른 데이터도 바뀜깊이가 1이상인 경우에 사용해야함수안에서 함수를 반환될 때, 함수 내의 특정 데이터를 바라보고 있는 상태의 코드에서 클로저가 만들어집니다.클로저의 패턴함수가 실행될 때마다

이름 X모듈당 1번만 사용가능이름 필수모듈당 여러번 사용가능키워드로 내보내는 데이터의 이름의 변경이 가능기본 내보내기는 이름이 있어도 이름이 없는 것처럼 내보냄이름에 해당하는 객체 데이터로 해당 경로의 데이터를 불러옴동적으로 함수를 중간에 가져오기import 함수를 통

리액트를 사용하는 이유반응성데이터만 바꾸면 화면이 알아서 바뀜생산성이 좋음대신 메모리는 많이 잡아먹긴 함배열의 길이를 반환배열이 지니고 있는 아이템의 갯수를 반환대상 배열을 인덱싱합니다.대괄호를 이용하는 것과 같은 역할을 하지만, 더욱 직관적으로 이용가능마이너스 숫자로

MDN 문서를 참고할 때, 메소드가 프로토타입에 붙어있는지 정적 메소드인지 확인하는 것이 필요함휴지통이 붙어있는 것은 폐기된 메소드하위호환성을 지원하는 코드대상 문자(str)에 주어진 문자(인수)가 포함되어 있는지 확인함불린 데이터로 반환찾기 시작할 위치를 두번째 인수

컴퓨터가 계산을 수행하기 위해서는 컴퓨터가 리터럴과 연산자의 의미를 이해해야합니다.또한, 컴퓨터가 해당 계산식에 대한 의미를 2진수로 파싱할 수 있어야 합니다.메모리를 직접 접근하고 제어하는 것은 운영체제에 큰 문제를 야기할 수 있습니다.또한, 코드가 같더라도 값이 저

참고 페이지 : https://developer.mozilla.org/ko/string 전역(전체 영역에서 쓸 수 있는) 객체는 문자열의 생성자입니다.문자열의 리터럴 방식은 "Hello"처럼 ""를 이용하여 생성할 수 있습니다.string.indexOf(wor

특정 요소의 크기를 키우고 싶은 경우 transform의 scale 속성을 이용하여 해당 속성의 크기를 특정 배율만큼 증가시킬 수 있습니다.아래와 같이 scale() 내부에 배율에 해당하는 숫자를 넣으면 요소의 크기가 커지게 됩니다.transform이라는 애니메이션과

이번주는 다음주 면접을 위해 준비해야할게 너무 많다...게다가 다음주까지 클론코딩 과제 제출도 해야한다...Clone coding 과제 끝마치기메인 페이지 디자인스크롤 시 header 변화 Javascript로 구현하기배너 이미지, 카테고리 이미지 전환 버튼 및 슬라이

parseInt(A/B) : A를 B로 나눈 몫array.push(item) : 자바스크립트에서 배열의 끝에 요소 및 아이템을 추가array.reverse() : 해당 배열을 거꾸로 뒤집어 리턴하게 해주는 매소드최대공약수를 통해서 기약분수를 도출하는 방법기약분수는 1

git을 이용하여 코드를 관리하고 github 저장소에 업로드하여 편리하게 관리할 수 있습니다.git bash라는 terminal을 활용하여 명령어를 입력하여 코드 파일을 관리할 수 있습니다.cd Documents : Documents라는 파일로 경로를 변경합니다.mk