반응형 Front37 [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. [JavaScript] decodeURI() vs decodeURIComponent() 📌 decodeURI() vs decodeURIComponent() : decodeURI 와 decodeURIComponent 는 인코딩 된 URI를 디코딩하는 데 사용되는 JavaScript 전역 함수다. ◽ decodeURI() 와 decodeURIComponent() 의 차이점 • decodeURI() - encodeURI(url) 문자열을 사용하므로 문자, 특수문자( / ? : @ & = + $ #)를 디코딩할 수 없다. - ex) decodeURI("%41") : "A" 를 반환 - ex) decodeURI("%26") : "%26" 을 반환 • decodeURIComponent() - 문자, 특수문자를 디코딩할 수 있도록 encodeURIComponent(url) 문자열을 사용한다. - ex).. 2023. 6. 14. [JavaScript] XHR / XHR 표준 / XHR 예시 ✔ XHR ◽ XHR XHR 은 XMLHttpRequest 의 약자이다. Web API 중 하나인 이 XHR 객체는 비동기적으로 서버와 통신할 수 있도록 해주는 Ajax의 핵심 역할을 한다. Ajax 와 같이 페이지를 새로고침 하지 않고, 서버와 데이터를 받아오는 등의 인터랙션을 하기 위해서 사용한다. ◽ XHR 표준 const xhr = new XMLHttpRequest(); const formData = new FormData(); // 요청시 같이 보낼 데이터 xhr.open('요청 방식', '요청 주소'); xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status >= 200 && xhr.. 2023. 5. 25. [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. 이전 1 2 3 4 다음 반응형
