코딩기록

제목이 굉장히 길어졌지만 내가 보려고 남기는 자바스크립트 1. 문자열 메소드 *indexOf, includes function hasCola(str) { if (str.indexOf("콜라") > -1) { console.log("금칙어가 있습니다."); } else { console.log("통과"); } } function hasCola(str) { if (str.includes("콜라")) { console.log("금칙어가 있습니다."); } else { console.log("통과"); } } hasCola("사이다가 짱"); //통과 hasCola("콜라가 최고"); //금칙어가 있습니다. hasCola("콜라"); //금칙어가 있습니다. - "콜라"가 있으면 0보다 크고 "콜라"가 없으면 -..

*생성자 함수 function Item(title, price) { // this = {}; this.title = title; this.price = price; this.showPrice = function() { console.log(`가격은 ${price}원 입니다.`); } //return this; } //new를 안붙이면 그냥 함수실행 const item1 = new Item('인형', 1000); const item2 = new Item('인형2', 2000); const item3 = new Item('인형3', 3000); item3.showPrice(); // => 가격은 3000원 입니다. - 생성자 함수를 사용하면 주석으로 돌린 코드와 같이 실행됨. - new를 안붙이면 그냥 함수..

import { RouterProvider, createBrowserRouter } from 'react-router-dom' import Layout from "./components/layout"; import Home from "./routes/home"; import Profile from "./routes/profile"; import Login from "./routes/Login"; import CreateAccount from './routes/CreateAccount'; import { createGlobalStyle, styled } from 'styled-components'; import reset from 'styled-reset'; import { useEffect, useSta..

❤️리액트❤️ 🌟프로젝트 생성 npx create-react-app 폴더명 🌟깃허브 - 깃허브 프로젝트 생성 **깃허브 연동 1. git init 2. git remote add origin https://github.com/아이디/프로젝트명.git 3. git remote -v (깃허브 잘 연결됐나 확인) 4. git branch (브랜치가 main인지 확인) 4-1. main이 아니면 main으로 바꿔줌 git branch -m master main 5. git push origin main ** 오류가 뜨면 git pull origin main --allow-unrelated-histories git push origin main ** 깃허브 잘 못 연결했으면 git remote remove ori..

1. 중첩, 상위선택자 참조 .container {background: yellow; h1{background:none; color: #000; &:hover{color:#fff} } p{color:tomato; font: { size: 20px; weight:bold; } span{background:burlywood;} } } - &가 상위선택자를 가리키는 일을 함. - font-size, font-weight와 같이 중복되는 속성도 묶어서 스타일 주기 가능. .container { background: yellow; } .container h1 { background: none; color: #000; } .container h1:hover { color: #fff; } .container p { ..

* useEffect() useEffect(() => { console.log("chchchch") }); - 상태 값이 변경 되서 다시 렌더링 된 다음에 호출 - 불필요한 실행을 막기 위해 두번째 매개변수로 배열을 전달 useEffect(() => { console.log("change") }, [count]); - 이 경우엔 count (의존성 배열) 가 변경될 때만 실행 useEffect(() => { console.log("change") }, []); - 렌더링이 된 후 최초에 한 번만 실행하려면 빈 배열로 실행

npm install -g json-server json-server --watch ./src/db/data.json --port 3001 ./src/db/data.json --port 3001 < - 여기는 경로설정

리액트 강의를 따라하던 중 react-router-dom에서 오류가 나는 것을 확인하고 찾아봤더니 강의는 버전 5로 제작되었고 지금은 리액트가 버전 6으로 업데이트 되면서 생긴 문제 - Switch -> Routes 로 바꿔주고 elment에 컴포넌트 파일을 넣음 - 하란대로 했지만 그래도 안되고 계속 빨갛게 이런 오류가 발생 ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-812 -! node_modules 폴더 지워준 다음에 다시 npm i 해서 설치했더니 해결

리액트 강의 듣는데 다운로드 받은 파일 실행시키려면 npm install --save --legacy-peer-deps 하고 npm start 하면 실행됨!

return ( {Error && } 이름 나이 ) function Wrapper(props) { return props.children; } export default Wrapper 리액트에서 불필요한 div를 덜 생성하기 위해서 Wrapper로 컴포넌트를 감싸줌 import React, { useState, Fragment } from 'react'; return ( ); 를 사용하면 더 간단하게 가능!