치킨의 정리정리 치킨의 정리정리

분류 전체보기

• [React] 오류 : Warning: The tag <test> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

  공부/나를 힘들게하는 오류들 2024. 2. 14. 15:19

  오류 설명이랑 똑같이 안에 있는 태그의 앞을 대문자로 적어주지 않아 발생한 오류이다. 컴포넌트는 무조건 앞 글자를 대문자로 입력해야하는데, 그렇지 않아서 발생한 오류였다. 따라서 와 같이 변경하여 해결하면된다.

  Read More
• [React] 리액트로 페이지 나누기 (React-Router-Dom)

  공부/React 2024. 2. 14. 15:12

  1. 설명 React는 SPA(Single Page Application)이다. 따라서 리액트로 페이지를 나누는 순서는 컴포넌트를 생성하여 상세페이지 내용을 작성한다. 해당 페이지에 접속 시도시 기존페이지를 지우고 그 컴포넌트를 보여준다. 이 과정을 React Router Dom을 사용하면 간단하게 작성가능하다. => React Router Dom : 화면 전환을 지원하는 모듈 html의 경우 다른페이지를 작성하여 그 페이지(html)로 이동시키지만 React Router Dom을 쓰면 router로 웹사이트의 페이지를 구분할 수 있다. ( react-router : 내부를 완전히 교체해 다른 페이지를 보여주는 것 ) 2. 설치 1. 터미널에 설치 명령어 입력 npm i react-router-dom 2..

  Read More
• [React] input data 추가하기 & 글 삭제 버튼

  공부/React 2024. 2. 6. 18:40

  출처 : 코딩애플 React 강의 과제 1. 유저가 입력한 데이터 추가, 글 삭제버튼 (응용 1. 빈 입력값 체크 / 응용 2. 좋아요 추가 / 응용3. 날짜 추가) e.target으로 받은 유저의 입력값을 in_data에 담아 useState(spread를 사용하여)로 logo 데이터에 추가시켰다. 삼항연산자를 이용해 유저 입력값(in_data)이 공백이 아닌 경우에만 실행되도록 했다. useState를 이용해 새로 만들어진 글에 좋아요 데이터를 하나 더 추가했다. 현재 날짜는 date함수를 통해 가져와서 발행일자에 입력했다. 삭제 버튼의 경우는 splice()함수를 통해 구현했다. 2. 작성한 코드 function App() { //데이터변수 let [logo,setLogo] = useState(["..

  Read More
• [React] 날짜 데이터 사용하기

  공부/React 2024. 2. 6. 17:15

  현재 날짜 데이터 가져와 활용하는 방법은 다음과 같다. 1. 함수를 선언하고 날짜 형식을 원하는대로 맞춘다. //함수선언 const today = new Date(); const date_data = `${today.getFullYear()}년 ${'0' + (today.getMonth() + 1).slice(-2)}월 ${'0' + today.getDate().slice(-2)}일`; 2. 함수 사용 import React from 'react'; //현재 날짜를 가져온다. const date_data = new Date(); //형식을 지정한다. const date_data = `${today.getFullYear()}년 ${'0' + (today.getMonth() + 1).slice(-2)}월 $..

  Read More
• [React] 버튼 클릭 이벤트로 버튼을 구분해서 값 변경하기

  공부/React 2024. 2. 4. 01:37

  1. 기능 구현 map 함수로 생성한 여러 버튼을 클릭 시 해당 버튼에 할당된 값만 증가하도록 구현한다. 2. 설명 usestate와 map함수를 이용하여 구현했다. n번째 버튼 클릭 시 현재 n에 해당하는 값을 map함수의 증가하는 i값을 이용하여 count_test 함수에 전달 n_count에 chic_count 데이터를 복사 후 n_count의 N 번째 데이터에 1을 더한다. setchic을 통해 변경된 데이터로 수정하면 해당 버튼의 데이터가 증가한다. 3. 작성 코드 import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [logo,setLogo] = useStat..

  Read More
• [React] useState 함수

  공부/React 2024. 1. 31. 18:48

  useState : React에서 state값을 추가하고 업데이트하는 데 사용되는 함수 - useState를 사용하면 함수형 컴포넌트에서도 컴포넌트의 상태를 관리가능하다. - 단, 하나의 useState는 하나의 상태 값만 관리할 수 있어 만약 컴포넌트가 여러개면 useState를 여러번 사용해야한다. - State를 이용해서 값을 변경하면 비동기로 처리된다.(비동기: 응답과 관계없이 다음 동작을 처리하는 방식) - state는 반드시! 변경 함수를 이용해서 값을 변경해줘야한다. ( 주로 복사하는 형태를 이용) 내가 이해한 상태값이란 사용자가 간에 주고 받는 데이터를 상태값이라고 하는것 같다. //기본형식 let [기본값(상태값(초기값)), 변경값] = useState(초기값); 1. 예시 : useSt..

  Read More
• [React] JSX(Javascript Syntax eXtension) 문법

  공부/React 2024. 1. 30. 16:50

  (1). 정의 JSX(Javascript Syntax eXtension) : Javascript 를 확장한 문법, 리액트 프로젝트를 개발할 때 사용한다. Javascript의 공식적인 문법은 아니다. (2). 장점 JSX는 하나의 파일에 HTML과 Javascript를 동시에 작성하기에 생산성을 높여준다. 그리고 가독성이 좋다는 점과 오류검출이 쉽다는 장점이 있다. (3). 문법 1. 자바스크립트 표현식을 사용(포함)할 수 있다. 자바스크립트 표현식을 작성하면 JSX내부에서 코드를 {}로 감싸면 사용가능하다. {} 이런형태로 변수를 넣는 문법을 데이터 바인딩이라고 한다. function App() { const greeting = 'Hello world'; return ( {greeting} ); 2. ..

  Read More
• [HTML/CSS] CSS Sass(Syntactically Awesome Stylesheets)란?

  공부/Html OR CSS 2024. 1. 20. 20:57

  1. 정의 CSS의 확장된 버전으로, 스타일 시트를 더 효율적으로 작성할 수 있게 해주는 스타일 시트 언어 2. 기본 문법 변수 (Variables) 문법을 이용하면 다음과 같은 형태로 변수를 생성해서 사용가능하다. $primary-color: #3498db; $font-size: 16px; body { background-color: $primary-color; font-size: $font-size; } 중첩 규칙(Nesting)을 사용하면 시각적으로 부모-자식관계를 확인하기 편해 가독성이 좋은 CSS를 작성가능하다. nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; margin-right: 10px; a {..

  Read More