코딩애플

React : 복잡한 html을 한 단어로 치환하는 Component 문법

어떨 때 Component를 쓸까? 반복적인 html 축약할 때 큰 페이지들 자주 변경되는 것들 Component 만들기 function App() { return ( {/* */} ); } function Modal(){ return ( ) } const Modal = () => { return ( ) } 주의점 function을 function App() {} 바깥에 만든다 function명은 첫글자를 대문자로 작성한다. function안에는 div를 병렬기입하면 안된다 중요 주의점 state 가져다 쓸 때 문제가 생긴다. -> A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없다. function 하나 안에 div 병렬기입하기 return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로..

React : array, object state 변경하는 법 (spread operator, 래핑)

array, object state 변경하는 법 새로고침을 누르면 글 제목이 바뀌는 이벤트 만들기 * 원본 데이터 보존하기 이렇게 해도 작동하지 않는다. function App() { let [title, chgTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return ( 블로그 { title[0] } 2월 17일 발행 { let copy = title; copy[0] = '전사로 레벨링던전 도는 방법'; chgTitle(copy); } }>새로고침 ); } 이렇게란 let copy = title; 부분이다. 기존 state === 신규 state 검사를 먼저 진행 후에 바꿔주는데, 들어있는 데이..

React : state (만들기, 데이터 담기, 변경하기, onClick)

state 만드는 법 리액트에서는 변수 말고 state를 만들어서 데이터를 저장해 둘 수 있다. function App() { let [postTitle, a] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return ( 블로그 { postTitle[0] } 2월 17일 발행 { postTitle[1] } 1월 25일 발행 { postTitle[2] } 12월 30일 발행 ); } 맨 윗줄에 import { useState } from 'react';를 쓰고 원하는 곳에 useState('보관할 자료')를 쓰면 state에 자료를 잠깐 저장할 수 있다. 저장한 자료를 나중에 쓰고 싶으면 let [a, b] ..

React : JSX문법 3가지 (className, 데이터바인딩, style)

JSX란? JSX는 JavaScript XML의 약어로, React에서 UI를 구성할 때 사용하는 문법이다. JSX는 HTML과 유사한 구문을 사용하며, React 요소를 생성하는 데 사용된다. JSX를 사용하면 JavaScript 코드 안에 마크업을 작성할 수 있다. // jsx const element = Hello, World!; 위와 같은 코드는 `Hello, World!`라는 텍스트를 출력하는 React 요소를 생성한다. JSX는 Babel과 같은 도구를 사용하여 일반 JavaScript 코드로 컴파일된다.이렇게 변환된 코드는 React.createElement() 함수를 호출하는 코드로 변경된다. 따라서 위의 코드는 다음과 같이 변환된다. // javascript const element = ..

[코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)

브라우저 안에 유저 몰래 데이터를 저장할 수 있다. F12 개발자 도구에서 Application(애플리케이션) > Storage(저장용량) 카테고리를 보자. 1. Local Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 재접속해도 유지된다. 2. Session Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 나가면 삭제된다. 3. IndexedDB 구조화된 대용량데이터를 저장한다. 3. Cookies 유저의 인증정보(로그인정보 등)를 저장한다. 4. Cache..

[코딩애플] ajax로 서버와 데이터 주고받기 (1)

서버에 요청하는 법 어떤 데이터인지 url을 제대로 작성한다 (틀린 url로 요청시 404error가 뜬다) 어떤 방법으로 요청할지 결정한다 (GET/POST .. PUT, DELETE 등) GET GET 요청은 서버에 있던 데이터를 읽고 싶을 때 주로 사용한다. 브라우저 주소창에 url을 적으면 그곳으로 GET 요청을 날린다. POST POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. POST 요청을 날리고 싶으면 form 태그 + method="post" + action="url"을 이용하면 된다. GET과 POST는 요청하면 브라우저가 새로고침된다. AJAX 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능이다. (ex. 댓글을 서..