072DATA

컴포넌트란?  리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각 같은 것    컴포넌트 종류  함수형 컴포넌트: 함수로 정의되며, props를 받아 JSX를 반환함 클래스형 컴포넌트: 클래스로 정의되며, render() 메서드를 통해 JSX를 반환함  Props란? props는 컴포넌트에 전달되는 데이터임컴포넌트의 외부에서 입력받은 값으로 컴포넌트의 렌더링 방식에 영향을 미침 Props의 특징 읽기 전용: props는 컴포넌트 내부에서 수정할 수 없음  전달 방법: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됨   디폴트 값 설정: 기본값을 설정하려면 defaultProps를 사용함 MyComponent.defaultProps = { message: "기본 텍스ㅡ트"}..

템플릿 리터럴(Template Literal) 안녕하세요 오늘은 자바스크립트 ES6부터 제공된 템플릿 리터럴에 대해서 알아보겠습니다. 템플릿 리터럴은 자바스크립트에서 문자열을 좀 더 유연하게 다루고 싶을 때 유용하게 쓸 수 있는 문법입니다기존의 문자열 표현 방법보다 편리하고 코드도 훨씬 깔끔하게 작성할 수 있습니다.템플릿 리터럴은 백틱(``)으로 감싸서 사용합니다.      주요 기능   변수 삽입 const name = "이태규";const greeting = `안녕, ${이태규}!`;console.log(greeting); // "안녕, 이태규!"  문자열 안에 변수를 넣을 수 있습니다.${} 구문을 이용해서 변수나 표현식을 그대로 문자열에 삽입합니다.    다중 행 문자열 const multilin..

안녕   오늘은 명시적으로 this를 설정하기 위해서 사용되는 3가지 메소드에 대해서 간단히 정리해보겟슴닷     call 메서드 함수 호출 시 this를 명시적으로 지정해야 할 때 사용합니다 특징컨텍스트 전환객체 메서드를 다른 객체에서 호출하고 싶을 때 call을 사용해 this를 바꿀 수 있음. 사용법functionName.call(thisArg, arg1, arg2, ...) const person1 = { name: '이태규' };const person2 = { name: '한도현' };function greet() { console.log('상민이 닮은, ' + this.name);}greet.call(person1); // "상민이 닮은, 이태규"greet.call(person2); //..

안녕 TMDB API를 활용해서 영화 뿐만 아니라 크레딧과 OTT 정보도 가져올 수 있습니다. 해당되는 API의 URL을 Fetch로 요청해서 APIKEY를 삽입하고 데이터를 받으면 되는데 말로만 하면 이해하기 어려우니 코드를 삽입 하겠습니다.(OTT정보만 해볼게요) 데이터 요청 const apiKey = "TMDB에서 지급해준 API KEY를 담아줍니다.";//async, await문법을 활용하여 데이터를 원할히 받아서 보낼 수 있도록 합니다.//try, catch문은 덤으로 사용해주세요(코드 가독성과 에러 처리에 유용합니다.)async function fetchMovieOTT(id) { const API의 주소를 담긴 변수의 이름 = `https://api.themoviedb.org/3/movie/..

시작하기전    시작하기에 앞서 솔직히 두 복사를 알기 위해 공부해야할 사항이 많습니다.메모리에 대한 지식이나, 원시 타입과 참조 타입 그리고 객체란 무엇인지 등 이러한 여러가지 개념들에 대해서 이해하고 있지 않다면나처럼 오랜 시간을 붙들고 있어야 할 것이며 본다고 이해가 잘 되지 않을 겁니다. 그리하여 메모리 개념과 데이터 타입에 대해 공부를 한 뒤에얕은 복사와 깊은 복사에 대한 지식을 습득하길 권장합니다. 글의 순서로는 얕은 복사, 깊은 복사 그리고두 복사의 필요성에 대해서는 짧게 작성해 보겠습니다.   얕은 복사 (Shallow Copy)     얕은 복사는 객체를 복사할 때, 그 객체 안에 있는 직접적인 속성들만 복사합니다.하지만 그 속성들이 또 다른 객체를 가리키고 있으면,그 또 다른 객체는 복..

안녕오늘은 캠프에서 개인과제( 개인 프로젝트 )로영화 정보 검색 사이트를 만들어 본 과정을 작성해 보겠습니다.개발 환경Visual Studio CodeGithub사용 기술     프론트엔드JavascriptHtml/Css 외부 API TMDB API주요 기능영화 검색영화 ID값 가져오기페이지 디자인     먼저 구조는 네비게이션바와 영화 리스트 두개의 div로 나누었습니다전체적인 분위기와 색상은 왓챠를 고려해서 비슷한 색감으로 디자인 했습니다.  네비게이션 바에서 왼쪽 상단 로고와 검색창을 같은 div로 묶고로그인/회원가입 버튼도 다른 div에 묶어서  display: flex; flex-wrap: inherit; align-items: center; justify-content: ..

안녕   이번에는 이전에 추억 앨범 페이지에 동적인 요소들을 추가하기 위해 javascript를 적용할 것이고 JQuery를 사용하여 javaScript를 더욱 간편하게 사용해 보도록 하겠습니다.     JQuery는 HTML 문서의 탐색, 이벤트 처리, 애니메이션, 그리고 Ajax 통신을 단순화하기 위해 만들어진 빠르고 간결한 JavaScript 라이브러리입니다   JQuery 문법$(document).JQuery의 메소드들  제이쿼리를 사용하면 기존 자바스크립트에서는 사용되는 문법  document.getElementById를 $표시 하나로 표현 가능합니다. 해당  문법을 참고하여 페이지를 만들어 보겠습니다. 시작!!  추억 앨범 만들기 디자인편 링크https://0723-0725.tistory.co..