반응형 Front/React35 [React] Something is already running on port 3000 해결 방법 📌 Something is already running on port 3000npm start 를 했는데 "Something is already running on port 3000" 이 떴다.3000번 포트를 이미 쓰고 있다는 뜻인데, ▪️이전에 켰던 React 앱이 백그라운드에서 아직 꺼지지 않았을 때▪️다른 개발 서버(Express, Vite, Webpack 등) 또는 Docker, Next.js 가 쓰고 있을 때 보통 위와 같은 상황에 이런 에러가 발생한다. 1. 프로세스 죽이기 (점유 중인 포트 강제 종료) ▪️macOs / Linux / WSLlsof -i :3000위와 같은 명령어를 입력했을 때,COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE N.. 2025. 7. 1. [React] npm error code ENOENT 해결 방법 📌 npm error code ENOENT 해결 방법아무생각 없이 npm start를 했는데 에러가 떴다. 나의 경우에는 경로의 문제였는데 이 에러는 몇개의 원인이 있다. 1. package.json이 없을 때: npm start는 package.json에서 scripts.start를 실행하려고 한다.그래서 package.json 자체가 없으면 ENOENT가 뜨게 된다. ✔️ 해결방법1) 해당 디렉토리에 package.json이 있는지 확인! ( ls 또는 dir 명령어 )2) 없다면 package.json을 직접 만들어 줘야 한다.npm initnpm init -y 2. start 스크립트가 없을 때: package.json은 있는데, script 안에 "start"가 없으면 에러가 뜬다."scrip.. 2025. 7. 1. [React] onClick을 활용하여 버튼을 누르면 값이 변경되는 코드 작성하기 ✔ onClick - NumberState.js import React from "react"; class NumberState extends React.Component { constructor(props) { super(props); this.state = { number: 0 } // 이 코드를 적어줘야 에러가 안 뜨고 값이 올라감 this.onClickPlus = this.onClickPlus.bind(this) this.onClickMinus = this.onClickMinus.bind(this) } // 클릭했을 때 값이 증가하는 버튼 onClickPlus() { this.setState({number: this.state.number + 1}) } // 클릭했을 때 값이 감소하는 버튼 onC.. 2024. 2. 20. [React] 리액트로 구구단 게임 만들기 📌 리액트로 구구단 만들기 ✔ this.state : 화면에서 클릭 시 바뀌거나 마우스를 올렸을 때 바뀌는 것들 위와 같이 입력 버튼을 클릭하기 전과 후에 바뀌는 요소들을 this.state 에 넣어주면 된다. 1. first 2. second 3. value 4. result constructor(props) { super(props); // this.state 에 바뀌는 요소들에 대해 적으면 된다. // 화면에서 클릭 시 바뀌거나 마우스를 올렸을 때 바뀌는 것들 (boolean 요소들과 같은) this.state = { first: Math.ceil(Math.random() * 9), // 첫번 째 숫자 : 임의의 아무 숫자나 만들기 second: Math.ceil(Math.random() * 9),.. 2023. 8. 21. [React] 미니 블로그 만들기 ✔ 미니 블로그에 필요한 기능 / 각 기능에 필요한 Component • 글 목록 보기 기능 (리스트 형태) - PostList, PostListItem • 글 보기 기능 - Post • 댓글 보기 기능 - CommentList, CommentListItem • 글 작성 기능 - PostWrite • 댓글 작성 기능 - CommentWrite ✔ 프로젝트 생성 npx create-react-app mini-blog cd mini-blog npm start ✔ 필요한 실습 패키지 설치 react-router-dom v6 / styled-components v5 npm install --save react-router-dom styled-components package.json 에 들어가서 확인할 수 있다.. 2023. 4. 26. [React] styled-components import React from "react"; import styled from "styled-components"; const Button = styled.button` color: ${props => props.dark ? "white" : "dark"}; background : ${props => props.dark ? "black" : "white"}; border: 1px solid black; `; function Sample(props) { return ( Normal Dark ) } export default Sample; 이렇게 나온다. color: ${props => props.dark ? "white" : "dark"}; background : ${props => props.dark.. 2023. 4. 25. [React] Font 와 관련된 속성 ✔ Font-family • serif - 각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴 • sans-serif - 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴 - 컴퓨터 모니터에서는 Serif 보다 가독성이 좋음 • monospace - 모든 글자가 같은 가로 길이를 가지는 글꼴. 코딩을 할 때 주로 사용 • cursive - 사람이 쓴 손글씨 모양의 글꼴 • fantasy - 장식이 들어간 형태의 글꼴 ✔ Font-style • normal - 일반적인 글자의 형태를 의미 • italic - 글자가 기울어진 형태로 나타남 - 별도로 기울어진 형태의 글자들을 직접 디자인해서 만든 것 • oblique - 글자가 비스듬한 형태로 나타남 - 그냥 글자를 기울인 것 2023. 4. 25. [React] Context 를 사용하여 테마 변경 기능 만들기 src > chapter_14 > ThemeContent.jsx import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext; src > chapter_14 > MainContent.jsx import {useContext} from "react"; import ThemeContext from "./ThemeContext"; function MainContent(props) { const {theme, toggleTheme} = useContext(ThemeContext); return ( 안녕하세요, 테마 변경이.. 2023. 4. 25. [React] Card 컴포넌트 만들기 ✔ Card 컴포넌트 만들기 src > chapter_13 > Card.jsx function Card(props) { const {title, backgroundColor, children} = props; return ( {title && {title}} {children} ); } export default Card; src > chapter_13 > ProfileCard.jsx import React from "react"; function FancyBorder(props) { return ( {props.children} ); } export default FancyBorder; index.js 고치고, npm start ? 2023. 4. 24. [React] Composition 방법과 Inheritance ✔ Composition : 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 ① Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 ⁎ Sidebar 나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. children prop 을 사용한 FancyBorder 컴포넌트 function FancyBorder(props) { return ( {props.children} ); } WelcomeDialog 컴포넌트 import React from "react"; import FancyBorder from "./FancyBorder"; function WelcomeDialog(props) { return ( 어서오세요! 우리 사이트에 방문하신 것을 환.. 2023. 4. 24. [React] Shared State (섭씨 화씨 변환기 만들기) ✔ Shared State : State 에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 하위 컴포넌트가 공통된 부모 컴포넌트의 state 를 공유하여 사용하는 것 하위 컴포넌트에서 State 공유하기 - 물의 끓음 여부를 알려주는 컴포넌트 import React from "react"; function BoilingVerdict(props) { if (props.celsius >= 100) { return 물이 끓습니다.; } return 물이 끓지 않습니다.; } export default BoilingVerdict import React, {useState} from "react"; import BoilingVerdict from "./BoilingVerdict"; funct.. 2023. 4. 21. [React] Form을 통해 사용자 정보 입력 받기 ✔ 사용자 이름 받기 src > chapter_11 > SignUp.jsx import React, { useState } from "react"; function SignUp(props) { const [name, setName] = useState(""); const handleChangeName = (event) => { setName(event.target.value); }; const handleSubmit = (event) => { alert(`이름: ${name}`); event.preventDefault(); }; return ( 이름: 제출 ); } export default SignUp; index.js 수정 후, npm start 이름을 입력해서 제출하면 알림이 뜬다. ✔ 사용자 성별.. 2023. 4. 21. 이전 1 2 3 다음 반응형
