대외활동/멋쟁이사자처럼_프론트엔드 12기37 usestate, useNavigate usestate의 선언import React, { useState } from 'react';const [현재 state, state 를 변경하기 위한 함수] = usestate(''); usestate의 초기값을 설정하는 방법은 그 상태값의 타입에 따라 달라집니다.//string: 사용자 입력이나 텍스트를 저장할 때 주로 사용const [email, setEmail] = useState('');//number: 숫자 카운터나 점수를 저장할 때 주로 사용const [count, setCount] = useState(0);//boolean: 상태의 활성화 여부를 관리할 때 주로 사용const [isVisible, setIsVisible] = useState(false); useState에 대해 아주 잘 설.. 2024. 10. 18. 멋사 FE 여기톤. MTV방식으로 백엔드와 프론트엔드 연결하기 블로그 목차 서식 51. MTV 패턴이란?2. Django에서 파일관리 여기톤을 하면서 가장 어려웠던 점 중 하나가 백엔드와 프론트엔드를 어떻게 연결하는 지에 대해 몰랐던 것입니다. MTV방식으로 연결을 한다고 하고, 프론트에서는 templete폴더만 건드리면 된다고 하는데 영 무슨 소리인지 이해가 안 갔었습니다. 1. MTV패턴이란?장고에서는 MTV방식으로 각 폴더들을 관리합니다. 프로그램 코드를 기능별로 나눠서 저장하고 이렇게 나눠진 폴더들을 각각 모듈이라고 하는 데 이 모듈간의 영향을 최소화할 수록 관리하기 편하고 협업에서도 효율적으로 사용할 수 있습니다. 아래 그림과 같이 MTV패턴에서는 백엔드가 관리하는 view와 model 파트와 프론트엔드가 관리하는 view와 template 파트가 있습니.. 2024. 7. 19. react로 파비콘(아이콘) 넣기 & 제목(title) 바꾸기 1) favicon 1. favicon.ico 준비하기 아래의 사이트에서 무료 아이콘 파일을 다운 받을 수 있습니다.https://icon-icons.com/ko/ 무료 아이콘 SVG, PNG, ICO 또는 ICNSMingCute building - filledicon-icons.com2. favicon파일 적용하기react 기본 세팅에서는 favicon.ico 파일과 index.html파일이 public 폴더 안에 위치합니다. 새로운 이름의 아이콘 파일을 추가하고 싶다면 그 아이콘의 이름을 favicon.ico로 만들어주거나, index.html에서 링크에 적힌 이름을 바꾸어 주어야 적용됩니다.//기존//바꿨을 때 2) title 바꾸기 1. title 바꾸기public폴더에 위치한 index.htm.. 2024. 7. 14. 7주차 과제1. 나만의 유튜브 사이트 만들기(세팅만) https://webstoryboy.co.kr/1965 1. creat-react-app이미 만들어진 폴더 안에서 create-react-app . 를 터미널에 입력하면 그 폴더 이름으로 리액트가 설정된다.2. index.html 설정favicon.svg // 를 설정해주어야 react를 뿌릴 수 있다.3. src 기본 설정src에서 파일을 작업하면 public에서 보여준다. 마지막에 페이지의 console에서 에러가 없는 지 꼭 확인해야 한다. 설치해야 할 모듈들...- react를 설치합니다. `npx create-react-app 타이틀`- react-router-dom을 설치합니다. `npm install react-router-dom`- axios를 설치합니다. `npm install ax.. 2024. 6. 27. 멋사 FE 5주차. 과제 React로 todolist만들기 폴더 만들기 1. npx create-react-app 폴더명폴더를 미리 만들어놓은 후 그 위치의 폴더 안에 npx create-react-app .를 터미널에 입력하면 react로 페이지가 만들어지고, npx create-react-app 폴더명 하면 그 위치에서 폴더명의 폴더가 만들어집니다.다운로드가 완료되고 Happy hacking!이라는 문구가 나오면 잘 설치된 것입니다. 2. npm startcd 명령어를 이용하여 만든 페이지 안으로 이동하고 npm start를 치면 React App이라는 이름의 브라우저창이 뜨게 됩니다.3. 확장 프로그램 깔기npm i sassnpm i react-router-dom로 깔고 package-lock.json에서 깔렸는지 확인할 수 있습니다.4. 필요없는 것들 지우기 .. 2024. 5. 21. 멋사 FE 5주차. 과제 REACT 컴포넌트 사용 1) 다른 컴포넌트에 props 전달하기import React, {useState, useRef} from 'react';import '../assets/scss/style.scss'import plus from '../assets/img/plus.svg'import exit from '../assets/img/exit.svg'import PropTypes from "prop-types";import $ from 'jquery';const AddList = ({inputtodos,inputtodo, index,})=>{ const i =index; const listid = `list${i}` return( .. 2024. 5. 20. 이전 1 2 3 4 5 6 7 다음
