본문 바로가기

분류 전체보기402

006. [코딩애플] [part1] array, object state 변경하는 법 state의 데이터 타입에 따른 상태변경 함수 사용법state의 자료형이 숫자형이나 문자열 등은 어떻게 수정해도 상관없으나, 배열이나 객체인 경우에는 spread operator로 깊은 복사를 해주어야 한다.만약 아래처럼 수정하면 원본 배열 자체가 덮어 씌워져 버린다.function App() { const [cities, setCites] = useState(["서울", "인천", "제주"]); return ( { setCites(["성남"]); }} > 수정하기 );}수정하기 버튼을 누르면 cites라고 상태로 정의한 배열의 첫번째 값을 '서울'에서 '성남'으로 바꾸기 위해 setCites라는 상태변경 함수를 .. Programing/React 2024. 5. 21.
005. [코딩애플] [part1] 버튼에 기능개발을 해보자 & 리액트 state변경하는 법 간단한 팁터미널 Warning(노란색) 지우기.Error(빨간색)은 코드 작동 불가이기 때문에 중요하나, Warning은 변수를 선언해놓고 쓰는 곳이 없다든지, 이런 사항에 대해서 알려주는 기능이다. 도움은 될 수 있으나, 이것 때문에 터미널이 복잡하다면,코드 최상단에 아래 내용을 붙여 넣는다./* eslint-disable */좋아요 버튼 만들기버튼 레이아웃 만들기. 이모지로 만들었다.function App() { let [ title, updateTitle ] = useState( [ '가을 남자 코트 추천', '강남 우동 맛집', '오늘의 일기 예보' ] ); return ( .. Programing/React 2024. 5. 21.
004. [코딩애플] [part1] 중요한 데이터는 변수말고 state에 담습니다 App.js (jsx)에서 HTML 작성하기return 키워느 내부에서만 html 마크업 문서를 작성해야 함.주의사항으로는 한 줄에 병렬로 두 개 이상의 태그를 사용할 수 없음.function App() { return ( {/* 이 곳에서만 HTML 작성 가능 */} {/* 이와 같이 열고 닫는 태그도 병렬로 작성 불가*/} {/* 이렇게 한줄씩 작성해야 함. */} );} Programing/React 2024. 5. 21.
2024-05-17 React To Do List 만들기 배포주소https://bootcamp-0517.vercel.app기존코드와 개선된 코드기존 코드 (하나의 App.jsx에 작성)import { useState } from 'react';import './App.css';function App() { const [cards, setCards] = useState([]); const [newTitle, setNewTitle] = useState(''); const [newBody, setNewBody] = useState(''); const addCard = (e) => { e.preventDefault(); if (newTitle === '' || newBody === '') { setNewTitle(''); setNe.. Programing/TIL 2024. 5. 19.
내 로컬에 있는 폴더를 CSS에 적용시키는 방법 상황웹 폰트를 지원하지 않는 폰트를 별도로 설치하여 사용하고 싶다. 예를 들어 AppleSDGothicNeo 즉 애플고딕은 웹 폰트를 지원하지 않으나, 상업적 비상업적 무료로 라이센스를 지원하기 때문에 폰트를 별도로 사용 가능하다.방법원하는 폰트를 설치한다.프로젝트 폴더에 fonts라는 폴더를 만든 후 그곳에 폰트를 넣는다. (자유작명)설치한 폰트를 CSS에서 import한다.@font-face { font-family: 'AppleSDGothicNeoEB'; src: url('../fonts/AppleSDGothicNeoEB.ttf') format('truetype'),; font-weight: normal; font-style: normal;}아래처럼 여러 개 할 수도 있음.format은 폰트.. Programing/CSS 2024. 5. 18.

티스토리툴바