본문 바로가기

JS

[React] react 구조분해 할당? 연습도 할 겸 react 파일 하나 만들고 시작한다 card형식의 컴포넌트 하나 만들어서 더미 데이터 하나 뚝딱 만들고 내가 했던 대로 한다면 이렇게 function App() { let [movie, setMovie] = useState(cardData) return ( { movie.map((elm, index) => { return ( {movie[index].movieTitle} {movie[index].movieRanking} ) }) } ); } cardData.js let cardData = [ { movieId: 1, movieImage: 1, movieTitle: "버즈 라이트이어", movieRanking: "Top 1" }, { movieId: 2, movieImage: 2, movi.. 더보기
[React] useEffect ?? useEffect란 어떠한 컴포넌트가 Mount(화면에 첫 렌더링, 시작)되었을 때 Update(재렌더링, 다시)되었을 때 Unmount(화면에서 끝날 때, 종료) 되었을 때 특정 작업을 처리해주고 싶으면 사용하면 된다 이 실습은 유튜트 별코딩님 영상을 예제로 활용한다 useEffect()는 콜백 함수를 받는다 첫 번째 방법 useEffect(() => { // 실행하고 싶은 코드 }); - 렌더링 될 때마다 실행 두 번째 방법(인자) useEffect(() => { // 실행하고 싶은 코드 }, [value]); - 화면에 첫 렌더링 될 때 실행 - value값이 바뀔 때 실행 실습을 통해 확인해본다 App.js에 버튼을 누르면 카운트수가 증가하는 코드를 작성했다 import './App.css'; i.. 더보기
[React] React State? State는 리액트에서 상태 값이다 유동적인 데이터를 주고받을 수 있는 상태 값을 말한다 class형 State가 있고 function형 State가 있다 function형 State인 useState()를 예제를 통해 알아본다 React CRA를 Load 한 App.js import './App.css'; import { useState } from 'react'; function App() { // useState(); const [state, setState] = useState(); return ( hello, react ); } export default App; function형에서 State는 useState()를 사용한다 1. useState() 사용하려면 먼저 import 해와야 한다 2.. 더보기
인스타그램 클론코딩 로그인 페이지 부트캠프 수강 중 진행한 인스타그램 클론 코딩을 다시 봅니다 완성 여기서는 로그인 버튼 활성화와 비활성화, 그리고 아이디 유효성 검사를 하였습니다 const idInput = document.querySelector('.inputId'); const passwordInput = document.querySelector('.inputPassword'); const disabledButton = document.querySelector('.mainBtn'); 먼저 각각 ID input, Password input button에 변수를 담아줬습니다 ID input idInput.addEventListener('input', () => { if ((idInput.value !== "") && (idInput.v.. 더보기
[JS] createElement(), appedChild(), innerHTML() createElement() JS에는 createElement()라는 게 있습니다 HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. MDN 정의이고 간단하게 알아보겠습니다 let element = document.createElement('p'); "문서에 p태그를 추가하겠다" 입니다 function test() { let p = document.createElement('p'); console.log(p); } test(); 함수에 먼저 담아 test 해보겠습니다 콘솔에 잘 들어와 있는 걸 확인할 수 있습니다 아무런 위치도 정해 주지 않고 요소를 생성만 했기 때문에 이걸 사용하려면 appedChild()가 필요합니다 ap.. 더보기
[JS] function(함수)문제 데이터 반환하기 문제) getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환 값을 더해서 리턴하는 함수입니다. getTotal이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다. 인자 이름은 원하는 대로 지어주셔도 됩니다. getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결괏값을 더해서 반환해주세요. 참고사항 getTax 함수는 가격의 tax를 구하는 함수입니다. calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다. getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다 function getTax(price) { return price * 0.1; } function .. 더보기
[JS] javascript DOM이란? DOM이란 문서 객체 모델(The Document Object Model, 이하 DOM) 프로그래밍 인터페이스이다 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다 - 자바스크립트는 새로운 HTML 요소나 속성을 추가 - 자바스크립트는 존재하는 HTML 요소나 속성을 제거 - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경 - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경 - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경 - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가 - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응 우리가 보고 있는 웹페이지는 일종의 문서(document)이다 DOM 은 프로그래밍 언어는 아니지만 DO.. 더보기
[JS] 배열(array)의 요소 조작 문제 풀어보기 배열의 요소를 가지고 문제를 풀어 봅니다 문제) divideArrayInHalf 함수를 다음과 같이 구현해주세요 divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다. divideArrayInHalf 함수는 인자로 들어온 array로부터 새롭게 구성된 배열 result을 리턴합니다. array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요. 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 입니다. 즉, 배열의 뒷 요소부터 재구성을 진행해주세요. 예를 들어, 인자로 들어.. 더보기

티스토리툴바