본문 바로가기

코딩

 (156)
리액트 프로젝트가 실행안될때(react-scripts 배치파일 어쩌구) 리액트 프로젝트를 실행하려고 npm start 위 명령어를 실행했는데 react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이런 메시지가 뜬다면??? npm update 위 명령어를 실행해서 현재 필요한 라이브러리들을 설치해줍니다. 이런 오류가 뜨는 이유는 리액트 소스코드를 실행하기 위한 라이브러리가 없기 때문인데, 보통 깃허브에서 리액트 소스코드 다운받아와서 그냥 실행했을때 생기는 오류입니다. 그래서 npm update를 통해 해당 코드에서 요구하는 라이브러리들을 다운받고 다시 npm start를 해주면 정상적으로 리액트 프로젝트를 실행할 수 있습니다.
reactjs로 동적인 UI 만들어보기 1. 개요 동적인 UI 만드는 STEP HTML, CSS로 미리 디자인 완성 UI의 현재 상태를 state로 저장 state에 따라 UI를 어떻게 보여줄지 조건문 등으로 작성 2. 코드 import {useState} from 'react'; function App() { let [card, setCard] = useState(false); return( { if (card==true){ setCard(false) } else { setCard(true) }}> 카드 컴포넌트 보여주기 {card == true ? : ''} ) } function Card() { return( 카드컴포넌트 ) } 우선 Card 컴포넌트를 만들어주고 먼저 card라는 state를 만들고, 그 안에다가 false 값을 넣어줌..
reactjs에서 component로 편리하게 HTML덩어리 관리하기 1. 개요 컴포넌트는? 반복적으로 출현하는 HTML덩어리를 쉽게 생성할 수 있게 해주는 도구 커다란 페이지를 컴포넌트화 해두면 편함 자주 변경되는 UI를 컴포넌트화 해두면 편함 함수 만들고, return() 안에 HTML 담고, 형태로 쓰면 됨(도 됨) 함수 규칙은 다른 함수의 밖에 만들 것, 첫글자를 영어 대문자로 만들 것 2. 코드 function Card() { return( 카드임 ) } 이 코드는 Card라는 이름의 컴포넌트를 만드는 코드임 function 뒤에 컴포넌트의 이름을 쓰면 되고 return 뒤에 내가 컴포넌트로 만들고 싶은 HTML코드를 넣어주면 됨 function App() { return( ) } function Card() { return( 카드임 ) } 이런식으로 코드 짜면 ..
reactjs 필수스킬, state 변경함수 동작원리 알아보기 1. 개요 state 변경함수는 기존state와 신규state가 동일하면 동작을 안함 이런 특징 때문에 state 변경함수 사용 시 주의사항이 있음 일반적인 문자열이나 숫자 데이터는 그냥 조건 없이 state변경 함수로 state 변경 가능 근데 array랑 object는 저장된 데이터가 아닌, [데이터를 감싸는 괄호]가 state와 연결되는 형태임 그래서 그냥 바꾸면 안되고 [...state명] 형태로 써줘야함 대괄호 열고 점(.) 3개 찍고 state명 입력하고 괄호 닫아줘야 한다는 뜻임 이렇게 하면 array의 괄호를 벗기고 새로운 array를 만들어줌 (기존의 array와 별개의 array가 만들어진다는 뜻) 이거 안하면 기존state와 신규state가 동일한 걸로 인식됨 (괄호 안에 들어있는 데..
reactjs의 꽃, state를 알아보자 1. 개요 state가 뭐냐면 변수랑 거의 똑같음 변수는 수정되어도 html에 바로바로 반영이 안됨(재랜더링 안됨) state는 수정되면 html에 바로바로 반영 됨(재랜더링 됨) 하나의 페이지에서 모든 것을 보여주는게 리액트의 특징임 그래서 페이지 재랜더링 없이도 현재 페이지에서 보여주는 값을 바꿀 수 있어야 하기 때문에 state를 씀 2. state 사용 방법 import {useState} from 'react'; 위 코드를 상단에 적어줘야 함 let [a,b] = useState(데이터); 위 코드를 function 안에다가 넣어주면 됨 그럼 이제 state를 쓸 수 있게 되는 것. a는 변수명처럼 쓰면 되고, b는 state 변경을 도와주는 함수 데이터는 어레이([’ㄱ’, ‘ㄴ’, ‘ㄷ’]) ..
reactjs 속의 HTML, JSX 문법 알아보기 1. 개요 JSX는 리액트에서 레이아웃 만들때 씀 자바스크립트를 확장한 문법인데 JS랑 HTML을 섞어놓은 형태임 HTML이랑 다른건 브라우저에 바로 보여줄 수 없고 빌드 과정을 거쳐야 랜더링 가능한 점 app.js파일에다가 JSX코드 작성하면 됨(나중에 이걸 빌드해서 HTML파일로 바꿀거임) 시작하기 전에 div태그만 남기고 다 지웁시다(아래 처럼 만들면 됨) import logo from './logo.svg'; import './App.css'; function App() { return ( ); } export default App; 2. CSS 적용하기 app.css파일에 css코드 작성하면 됨 import './App.css'; css파일을 app.js에 적용하려면 위 코드를 입력해서 css파..
남들 다쓴다는 ReactJS 설치하고 셋팅해보기 1. 개요 다들 리액트 씀 리액트 설치하고 프로젝트 셋팅하기 2. 특징 리액트로 SPA(Single Page Application)을 쉽게 만들 수 있음 SPA는 이름 그래도 하나의 페이지(Single Page)만 보여주는 방식 하나의 페이지를 로딩하고, 그 안에 들어있는 데이터만 바꿔서 새로운 컨텐츠를 보여줌 html 재사용이 편리함(HTML을 변수에 담아서 쓸 수 있음) (= 컴포넌트) 앱도 만들 수 있음 (= 리액트 네이티브) 3. 설치방법 우선 nodejs 설치해야 함 2023.01.19 - [코딩/NodeJS] - 백엔드 공부를 위한 NodeJS 알아보기 + 설치 백엔드 공부를 위한 NodeJS 알아보기 + 설치 개발자가 되고 싶은 사람이라면 프론트엔드와 백엔드라는 단어를 들어봤을 건데 궁금해서..
nodejs에 웹소켓으로 채팅 기능 구현하기 1. 개요 socket.io 를 이용해서 실시간 채팅 기능을 구현 단체 채팅 및 1:1 채팅 기능 구현 2. 코드 (1) server.js // 누가 웹소켓 접속하면 코드 실행 io.on('connection', function(socket){ console.log('유저 접속됨'); console.log(socket.id); // room1-send 이벤트 발생 시 코드 실행 socket.on('room1-send', function(data){ // room1 채팅방 내 모든 사람들에게 메시지 전송 io.to('room1').emit('broadcast', data); }); // joinroom 이벤트 발생 시 코드 실행 socket.on('joinroom', function(data){ // 채팅..

티스토리툴바