IT기록 isaac

React App에서 경고 메시지 끄기, warning message off React App Project를 생성하고 개발을 시작하면서 React App의 Console에서 Warning Message가 많이 나타납니다. 노란색으로 Warning message가 나타나는데 이는 'eslint'가 프로젝트에 적용되어 그렇습니다. 개발하는 중에는 변수를 선언하고 바로 사용하지 않는 경우도 존재하는데, React Project에서 사용하지 않는 변수 등에 대해서 Warning message를 띄우게 되어 있어 개발 중에 노란색 Warning message를 자주 보게 됩니다. 이 warning 메시지를 띄우지 않도록 eslint 기능을 off 해주어야 하는데요. 사용하는 data javascript 파일이나..

Javascript 특정 문자 사이의 문자열 추출하기 (substring 사용) 다음과 같은 문자열이 있다고 가정합니다. "[Hello], (Hello)" 문자열에서 대괄호([ ]), 소괄호(()) 같은 특정한 문자들 사이의 문자열을 추출하고 싶은 경우가 있습니다. Javascript에서 특정 문자 사이의 문자열을 추출하려면 문자열과 관련된 함수를 사용해 추출할 수 있습니다. P. 문자열 "[Hello]"에서 특정 문자 "[ ]" 사이의 문자열 "Hello" 추출하기 var str = "[hello]" console.log(str) var s = str.indexOf("[") + 1 var e = str.indexOf("]") var res = str.substring(s, e) console.log(r..

React에 Bootstrap 적용 및 사용하는 방법 (간단하게 적용하기) Bootstrap 많이 들어보셨을 겁니다. Web사이트에 디자인을 해야 하는데 디자인에 약하거나 디자인을 직접 하기 싫은 경우 대안으로 선택되는 웹 디자인 방법이라고 할 수 있습니다. Bootstrap은 설치가 간편하고 적용하기가 쉽습니다. 다만 Bootstrap에서 제안하는 방식을 적용해야 하고, Bootstrap 공식 사이트에서 제공하는 컴포넌트들을 적용해야 Bootstrap을 이쁘게 잘 사용할 수 있습니다. React에 Bootstrap 적용하는 방법을 알아보겠습니다. 먼저 React Project가 준비되어 있어야 합니다. 없다면 다음 설치 명령어를 사용해서 React Project를 생성해 줍니다. React Projec..

React - Components 사이에서 데이터 공유하기 & lifting State Up React에서 컴포넌트들 사이에서 데이터를 공유하는 방법에 대해 알아보자. 먼저 컴포넌트 간의 데이터를 공유하지 않는 예제를 보자. import { useState } from 'react'; export default function MyApp() { return ( Counters that update separately ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} times ); } 위 코드로 만들어진 렌더..

React App Delete 기능 구현하기 Create, Update에 이어서 마지막 Delete 기능을 구현해 보자. 일반적으로 Delete 버튼은 Update 버튼과 함께 있다. 게시판 상세 페이지에 수정, 삭제 버튼이 있듯이. 이전 글에서 mode state가 'READ'일 때 Update 버튼을 추가했다. 이전 글 2023.06.21 - [JS] - React App Update 기능 구현하기 mode state가 'READ'일 때, 즉 상세 페이지를 확인할 때 Update 버튼 아래에 'Delete' 버튼을 추가한다. 삭제 버튼의 기능을 추가한다. 삭제(Delete) 기능은 Create, Update와 비교하면 비교적 간단하다. 구현 방법은 다양하겠지만 위 코드는 다음과 같다. 빈 배열 new..

React App Update 기능 구현하기 Create 기능에 이어서 Update 기능을 구현하자. Update는 Create + Read 기능이라고 볼 수 있다. 기존 코드에서 Update 버튼을 추가한다. (버튼 = a 태그) 우선 버튼을 추가했는데, 이렇게 하면 어떤 것을 수정해야 하는지 명확하지 않다. 보통의 서비스라면 상세 페이지에 수정 버튼이 존재한다. 상세 페이지에 수정 버튼이 존재하도록 수정한다. mode state가 'READ'일 때 화면 처리하는 부분에 Update 버튼을 추가한다. (= 상세 페이지에 Update 버튼을 추가한다.) contextControl 변수에 저장하였으니, App 컴포넌트에서는 contextControl 변수를 호출한다. 그럼 이제 상세페이지에서만 Update..

React App Create 기능 만들기 현재 필자는 생활코딩 React를 보고 학습 내용을 작성하고 있다. 이 글을 쓰기 전까지 React의 Component, Props, Event, State에 대해서 알아보았다. 이번에는 응용 편이라고 할 수 있겠다. React App Create 기능 만들기 먼저 App.js 파일의 App 컴포넌트의 컴포넌트 배치 부분에서 본문이 보여지는 곳 아래에 Create 버튼(a tag)을 만들었다. 그리고 다른 a 태그들과 같이 기본 event는 막도록 하였다. 그리고 Header나 Nav 컴포넌트의 메뉴 리스트를 클릭했을 때 mode state가 변경되었던 것처럼, Create에서도 mode를 변경해 준다. 다른 화면을 띄우기 위해 mode를 변경하는 코드를 추가한..

React에서 State란? 지금까지 React의 Component, Props, Event에 대해 알아보았다. 이전 글 2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기 2023.06.19 - [JS] - React Props에 대해 알아보자. Component에 데이터 보내기 2023.06.20 - [JS] - React에서 Event 처리 어떻게 할까? 이번에는 React에서 State 라는 개념을 알아볼 것이다. React에서 State란? React에서 Event에 의해 변경되는 동적인 값이다. state 관련 기능을 사용하기 위해서 먼저 react library에서 {useState} 를 import 시킨다. App 컴포넌트에 동적으로 변..

React에서 Event 처리 어떻게 할까? 이전 글에서 React 컴포넌트를 만들고, 컴포넌트에 데이터를 전달하고, 컴포넌트로 전달받은 데이터는 props로 꺼내어 사용하는 방법까지 익혔다. 이전 글 2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기 2023.06.19 - [JS] - React Props에 대해 알아보자. Component에 데이터 보내기 이번에는 React에서 Event 처리에 대해 알아보자. 현재까지 작성한 코드 예제를 보자. function Header(props) { console.log("props",props,props.title) return {props.title} } function Nav(props) { cons..

React Props에 대해 알아보자. Component에 데이터 보내기 바로 이전 글에서 React 프로젝트 시작하기에 대한 글을 썼다. 이전 글 2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기 이전 글에 대해서 간략히 설명하자면 1. React Project를 시작하기 위해 nodejs를 설치 2. React Project 생성 3. Project 구조 파악 4. React Component에 대해서, Component 만들기 에 대해서 알아보았다. 이제 컴포넌트(Component)를 응용하고, 컴포넌트에서 사용되는 Props라는 개념에 대해 알아보려고 한다. 어제까지 작성했던 코드는 다음과 같다. /src/App.js function Head..