developer_jju's_day

오류메시지 : [DOM] Input elements should have autocomplete attributes (suggested: "new-password")  Google Chrome과 같은 최신 브라우저에서 권장되는 사항중 하나는 바로 바로! 비밀번호 자동완성 입니다! 코드를 다 작성하고 돌려보면 저런 warning이 생기곤 하는데, 절때 저런 warning을 노출 시키고 납품할 순 없죠?  input 태그를 사용하시고 비밀번호를 인풋 값으로 받으신다~ 하시면 필수로  autocomplete 속성을 넣어주시면warning 이 사라집니다! Material-UI(MUI) 또는 다른 UI 라이브러리를 사용할 때 기본적으로 autocomplete="off"가 설정되거나, 생략될 수 있기 떄문에 확인 ..

원래 처음 리액트 다운로드 받으면 App.tsx 파일에 (타임스크립트버전) 이렇게 뜹니다. App.tsximport React from 'react';import './App.css'; // 필요하면 유지, 불필요하면 삭제 가능import Board from './components/Board'; // Board 컴포넌트를 임포트function App() { return ( Welcome to My Board! {/* Board 컴포넌트를 사용하여 게시판 표시 */} );}export default App;  이랬던 코드를 이제 my-board를 사용할 수 있도록 변경해야합니다. import React from 're..

/* src/components/Board.css */.board { max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } .posts { margin-bottom: 20px; } .post { border-bottom: 1px solid #ddd; padding: 10px 0; } .post h2 { margin: 0; font-size: 18px; } .pos..

Board.js import React, { useState } from 'react';import './Board.css';// 더미 데이터를 위한 임시 배열const initialPosts = [ { id: 1, title: '첫 번째 게시글', content: '이것은 첫 번째 게시글의 내용입니다.' }, { id: 2, title: '두 번째 게시글', content: '이것은 두 번째 게시글의 내용입니다.' }];const Board = () => { const [posts, setPosts] = useState(initialPosts); const [newPost, setNewPost] = useState({ title: '', content: '' }); // 게시글 추가 핸들러 ..

뭐부터 해야할까? 일단 VSCODE를 깔고리엑트 테스트라는 이름의 빈 폴더를 엽니다. 1. Node.js 및 npm 설치React와 TypeScript를 사용하려면 Node.js가 필요합니다. Node.js가 설치되어 있지 않다면 Node.js 공식 웹사이트에서 설치하세요. 설치가 완료되면 터미널에서 다음 명령어로 설치 여부를 확인할 수 있습니다..  이것은 vsCode를 키고 터미널에 배쉬 터미널을 열어 명령어들을 쓰면 됩니다.  2. Create React App으로 프로젝트 생성터미널을 열고, 새로운 React 프로젝트를 생성합니다. TypeScript 템플릿을 사용할 수 있습니다. 다음 명령어를 입력하세요. npx create-react-app my-board --template typescrip..

안녕하세요 오랜만에 돌아온 jju_developer입니다. 리액트 공부를 위해 맥북을 사용한 리액트 초기 설정에 대해 알아보겠습니다. 1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 웹사이트에 들어가서 노드제이에스를 깔아줍니다. 왼쪽 버전으로 설치를 한 후, 아무 폴더나 만들어서 거기서 2. 새폴더의 터미널을 열고 npx create-react-app blog 엔터 치기 npx create-react-app blog를 치고 리액트 프로젝트를 만들어봅니다. 이렇게 뜨면 성공적으로 작업 파일이 생성이 된 것입니다. 파일에 들어가 보면 blog 폴더에 기초 파일이 생성된..

23.04.11 수업내용 안녕하세요 jju_developer입니다. 오류사항을 해결하고 나서 node.js express 프레임워크 설치하였습니다. 기본적으로 NodeJS를 먼저 알아보겠습니다. Node.js란? Node.js는 Chrome의 V8엔진을 이용하여 javascript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)입니다. 그렇다면 Express란 무엇일까요? Express란? Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다. 사실상 Nodejs의 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있습니다. Express는 Node..

23.04.11 수업내용 안녕하세요 jju_developer입니다. 오늘은 오류.. 팡팡팡 난 사건에 대해 해결방안을 공유드립니다. react에서 create-react-app을 설치해 front-end 서버를 간편하게 구동했던 것처럼 node에서는 express를 사용하면 back-end 서버 구현을 쉽게 할 수 있다는데... lab 폴더로 이동을 했는데 npm i -g express-generator하니까 오류가 나서 아래와 같이 해결을 하였습니다! vscode에서 lab폴더로 이동한다음에 npm i -g express-generator 이렇게 치니까 오류나서 // express를 설치한다. // D:\dev\workspace\react\lab>npm i -g express-generator // D..

안녕하세요 jju_developer입니다. 오늘 수업내용 중 리액트에서 사용하는 데이터 전달 변수와 리엑트 아키텍처에 대해 간략하게 알아보겠습니다. [React 데이터 전달 변수] 1. props: 부모 컴포넌트에서 자식 컴포넌트 전달하기 위한 변수이며, 부모에서 자식으로 자식에서 손자로 가는 구조입니다. 부모 -> 자식 -> 손자 (단방향) 2. states: 자신 컴포넌트에서 사용하는 지역 변수입니다. 3. context: props와 다르게 부모에서 손자로 바로 갈때 사용가능! 또는 손자(소비자)->부모(공급자) 가능 context는 데이터의 공급자와 소비자를 정의하여, 필요한 컴포넌트만 사용합니다. 4. redux: 리덕스는 부모, 손자 관계 없이 아무 곳(아무 컴포넌트)에서나 접근 가능합니당 s..

맥쌤 수업 내용 브라우저가 화면에 요청을 하면 Front-End 서버 (리액트)가 그 요청을 받고 데이터는 Back-End 서버에서 (백엔드 서버_Java, Spring, DB) 받아옵니다. 어떻게 요청을 받느냐면 REST API로 요청을 받습니다. Front에서 Back으로 요청을 보낼 때에 REST API를 이용하는 것이죠! reponse로 JSON 데이터를 받습니다. 데이터를 받으면 변화가 생기니까 Front에서는 랜더링이 발생하죠! (rendering) 이런 구조로 개발을 해야 한다는 맥선생님의 말씀! 💡fetch()란? 웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고받습니다. http에서 사용하는 방식은 여러 가지가 있지만, GET과 POST를 가장 많이 사용합니다. G..