Lololol Lololol

사용할 폴더로 들어간다 npm init 아래와 같이 나오는데 이름을 정해주면 된다. 나머지는 일단 다 엔터 package.json파일이 생긴다 (내가 쓰는 패키지-남의 소스코드) 몇버전 어떤걸 썼는지 기억하기 위해 vue 설치 npm install vue 이제 스크립트 안씀 웹팩 설치 npm i webpack webpack-cli -D //웹팩이랑 웹팩cli를 설치한다. //-D 혹은 --save-dev를 통해 개발용으로만 설치하겠다 같은 폴더에 webpack.config.js파일을 생성 // node에 module을 만든 것 이렇게 만든 모듈을 웹팩 처리를 하는데 사용됨 웹팩 설정을 넣으면 됨 module.exports = { // 대표가 되는 파일 entry: { // 하나로 합쳐질 파일의 이름 ap..

누르자마자 삭제 링크를 사용하면 안된다. contextControl = ( { event.preventDefault(); setMode("UPDATE"); }} > Update { const newTopics=[] for (let i = 0; i );

Update는 Create와 Read를 합쳐서 구현하면 된다. mode가 read(상세보기)일때만 update가 보이게 하기 그냥 보이게 하기 위해서 let contextControl=null; 을 만들어 준다. ... let content = null; //변하게 될 값이니까 let으로 설정한다. let contextControl=null; if (mode === "WELCOME") { ... 모드가 read 일때만 보일 수 있게 만들어 놓은if 구문에 추가해 준다. 모드가 read 이면 null 이었던 contextControll가 업데이트 링크를 생성하게 바뀐다. {"/update/"+id}로 인해 id도 주게되고 onClick이벤트를 줘서 mode를 UPDATE로 바뀌게 한다. ... } else..

대망의CRUD 버튼 만들기 a의 기능을 막고 모드를 바꾼다. { event.preventDefault(); setMode('CREATE');}}>Create 모드 관련 if문에 esif로 mode가 CREATE일때를 추가해준다 기능이 꽤 될 것 같으니 Create 컴포넌트를 따로 만들자 }else if (mode === 'CREATE'){ content= } 폼 구현 ... function Create(){ return Create Create }; ... 이용자가 버튼을 눌렀을 때 기능이 실행될 것이라 선포 form 태그 제출(submit)은 form 태그에 onSubmit으로 달아주면 된다 그런데 submit은 제출하게 되면 페이지가 리로드 되기 때문에 기능을 막아야 한다! function Creat..

또테이트 리액트 컴포넌트입력 prop 리액트 컴포넌트 함수가 처리 리액트 컴포넌트 출력 return prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 return 값을 만들어 주는게 state 이란말이다. prop과 state 모두 값이 변경되면 새로운 return값을 만든다 차이점 prop 컴포넌트를 사용하는 외부자를 위한 데이터 state 컴포넌트를 만드는 내부자를 위한 데이터 본문을 클릭하면 그 글에 대한 상세보기가 나오는 웹 화면을 만들고 로고를 클릭하면 웰컴페이지가 나오게 할 것 function App() { const mode ='WELCOME' //mode의 값에 따라서 뭐냐에 따라서 본문이 달라지게 하려한다. ... let content = null; //변하게 될 값이니까 let으로 ..

내가 만든 컴포넌트는 속성(props)는 있지만 이벤트 기능은 없다. 무언가 어떤 일이 발생했을 때 사용자가 추가적인 작업을 처리하게 하고 싶다 나도!!!! a태그가 달려있으니 href를 통해 가려하는 기본 기능을 막고 대신해서 onClick했을때 함수(function(){})이 실행되게 하는데 이 함수는 이벤트를 변수로 가지고 있다 onClick - props - onChangeMode function Header(props) { return ( { event.preventDefault(); //a 태그 기본동작을 방해한다! //onClick의 함수가 호출 되었을때 헤드의 props로 전달된 onChangeMode가 가리키는 함수를 호출해야한다. props.onChangeMode(); }}>{props..

내가 만든 컴포넌트도 속성값을 가질 수 있을까? 리액트는 속성을 PROP이라고 부른다. 그럼 오른쪽 사진에서 React라고 써져있는 부분을 하드코딩하지 않고 바꿀 수 있을까? 아래 코드에 Header 부분에 저렇게 title을 줘서 말이다 function App() { return ( ); } 그럼 Header컴포넌트를 확인해줘야 한다. 파라미터로 props를 주고 어떤 내용이 있는지 콘솔창에 찍어보자 function Header(props) { console.log('props', props); return ( React ); } props에는 객체가 들어오는데 title이 DUBU로 나온다 Header태그에 달아준 것처럼 말이다! 그러면 이 DUBU라는 텍스트를 얻어내려면 props에 있는 title..

리액트는 사용자 정의 태그를 만드는 기술이다. 어떻게? 왜? import "./App.css"; function App() { return ( Web html css js Welcome Hello WEB ); } export default App; 현재는 이렇게 간단한 페이지를 가지고 있는데 혹여 이 코드줄이 엄청나게 많다면 가독성이 좋지 않게된다. 그룹하고 이름을 붙여주는게 사용자 정의 컴포넌트를 만드는 것이다. 위의 header 부분을 다른 펑션을 사용해 이렇게 나누어 줄 수 있다. import "./App.css"; function Header() { return ( Web ); } function App() { return ( ... 이러면 이제 Header가 필요한 곳은 어디든지 간단하게 복사에..