코딩애플

리액트는 긴 html 을 한단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. 바로 Component라고 합니다. 이걸 이용하면 html을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. function App (){ return ( (생략) ) } function Modal(){ return ( 제목 날짜 상세내용 ) } 컴포넌트 만드는법 1. function 을 이용해서 함수를 하나 만들어주고 작명합니다 2. 그 함수안에 return() 안에 축약을 원하는 html을 담으면 됩니다 3. 원하는 곳에 사용하면 아까 축약한 html이 등장합니다 컴포넌트 만들때 주의할점 1. 보통 영어대문자로 작명 2.return () 안엔 html 태그들이 평행하게 여러개 XX, 대왕 태그 하나로..

글 수정버튼을 누르면, 내용이 바뀌게 만들고 싶어요. 글제목 중 '남자코트추천' => '여자코트추천'으로요 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { ??? } }> 수정버튼 ) } 그래서 이렇게 바꿨습니다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( {글제목변경(['남자코트 추천', '강남 우동맛집', '파이썬 독학'])} }> 수정버튼 ) } state 변경함수는 ()안에 넣은 걸로 기존 state를 갈아치워주니까 저렇게 집어넣으면 됩니다. 그러면 여기서 문제, 왜 ..

좋아요 버튼을 누르면 옆에 있는 수가 +1 되게 만들어볼거예요 좋아요 버튼 만들기 function App(){ let [따봉] = useState(0); return ( { 글제목[0] }👍🏻{따봉} ) } useState()쓰고 왼쪽에 let [] 으로 작명만 잘하면 됩니다 원래 let [] 안에 변수를 두개 쓰는데, 일단 1개만 할게요 onClick 사용법 우리가 원하는 건 버튼이 그대로 있는 것이 아니라 버튼을 누를때, state 가 1씩 증가하는 기능입니다 먼저 html 파일에서 onclick 사용법은 ? JSX에서는 이렇게 만듭니다. {}를 써서 넣어줬어요 {실행할코드} }> 근데 함수만드는게 귀찮으면 함수를 그 자리에 직접만들어버려도 됩니다. 함수를 재사용할게 아니라면 굳이 작명을 안해도 됩니..

예전에는 그냥 let post = '어쩌구' 이런식으로 변수에 데이터를 저장했었는데 리액트에서는 변수말고 state 를 만들어서 데이터를 저장해둘 수 있어요 import { useState } from 'react'; import './App.css' function App(){ let [a,b] = useState('남자 코트 추천'); return ( 개발 blog {a} 2월 17일 발행 ) } 0. 맷윗줄에 import {useState} from 'react' 1. useState('보관할자료') 라고 쓰면 state에 자료를 잠깐 저장할 수 있습니다 2. 이 state를 쓰고 싶으면, let[a,b] = useState('남자 코트 추천'); a 자리에 state 이름을 자유롭게 작명한 다음 ..

리액트에서는 html 대신 JSX 라는 걸 씁니다. 주의할 점은 JSX는 HTML처럼 생겼지만, HTML이 아니기 때문에 JSX만의, 지켜줘야 할 문법이 있는데요 import logo from './logo.svg'; import './App.css'; let post ='강남 우동 맛집'; function App() { return ( 블로그임 {post} ); } export default App; 여기서 JSX 특징적인 문법 3가지를 찾아보세요~ 1. html 에 class 넣을땐 className JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class 라는 키워드를 막 사용하면 안된다. class =""를 넣고 싶으면 className 이라고 써야 한다. 2. 변수를 html..

애플페이지 UI 입니다. 스크롤을 내렸을때, 이전 화면이 불투명해지고, 크기가 작아집니다. 그리고 자세히 보면, 어느정도 스크롤을 내리면 화면이 붙어있는(sticky)한 부분도 인상적입니다. 위 UI를 만들기 위해 일단 HTML을 준비합니다. 깨끗한 HTML 파일에 jQuery와 CSS 파일 하나를 첨부해준 후, 이미지 3개를 다음과 같이 배치합니다. .card-background { height: 3000px; margin-top: 800px; margin-bottom: 1600px; } .card-box img { display: block; margin: auto; max-width: 80%; } .card-box { position: sticky; top: 400px; => 200px 정도로 해도..

//로컬 스토리지 사용법 localStorage.setItem('이름','jieun'); // 자료 저장하는 법 localStorage.getItem('이름'); //자료 꺼내는법 localStorage.removeItem('이름');//자료 삭제하는법 array/object를 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장됩니다. 그래서 자료가 깨지고 그럴 수 있습니다. 그래서 약간 편법같은건데 array/object를 JSON으로 바꾸면 문자취급을 받기 때문에 안전하게 로컬스토리지에 저장할 수 있습니다. JSON은 그냥 따옴표친 array/object입니다. //localStorage.setItem('num', [1,2,3]); //배열에 깨져서 나온다 //배열을 깨지지 않고 저장할땐 var arr..

우리가 쇼핑몰에서 검색을 할때, 낮은 가격 순으로 정렬할때가 있다. → sort 또는, 3만원 이하의 상품만 보고 싶으면 3만원 이하를 필터로 걸때가 있다. → filter 혹은 글로벌 쇼핑몰에서 물건을 살때 (달러=>원화) 로 바뀌어서 가격을 등록해야 할때가 있다. →map sort var 어레이 = [7,3,5,2,40]; 어레이.sort(function(a, b){ return a - b }); console.log(어레이) sort 함수는 문자열을 기준으로 정렬한다. 따라서, 수를 기준으로 정렬하고 싶다면, 위의 코드처럼 짜야 한다 참고로, sort 함수는 원본을 변형시키는 함수다. 1. a, b는 array 안의 자료들입니다. 2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다. 3...