C-log

이번 시간에는 event함수를 중점으로 react에서 어떻게 구동시키고 어떻게 구성하는지 알아보려고 한다. 우선 함수를 생성하기 전에 App 컴포넌트를 참고하자. function Class_App() { return ( App.js show name show age { const txt = e.target.value; usedText(txt) }}> ); } export default Class_App; 위의 각 태그들에 onClick속성을 사용해서 함수를 불러오고 있다. onClick뿐만 아니라 onChange를 통해서 즉각적으로 값이 변동될 때 마다 함수를 호출하는 속성도 사용하고 있다. 함수를 호출하는 것은 그리 어렵지 않다. 다만 두 번째 input태그를 보면 화살표기법을 사용했다는 것이다. 아래..

기존에 있던 Start! React를 다시 작성하려고 한다. 해당 포스팅은 유튜브 코딩앙마 수업을 다루고 있으며 해당 강의 링크는 아래와 같다. React js 강좌 www.youtube.com다시 작성하게 된 이유는 과거에 작성한 글의 미흡한 점과 js의 전반적이 지식의 부족으로 포스팅의 글이 단단하지 않다고 느껴진 것이다. 현재는 기존 ⚡ver.0 였던 카테고리는 비공개로 전환이 되면서 생활코딩의 React 포스팅이 ⚡ver.0로 변경된 상태이다. 현재의 포스팅은 ⚡ver.1이다 좀 더 질좋은 글을 작성하려 노력할 것이다.

이번 시간에 우리는 state를 배우게 되었다. 우선 state가 필요한 이유를 설명하기 위해 아래 코드를 먼저 살펴보자 function App() { const mode = 'WELCOME'//event가 발생 했을 때 변경되는 변수 값 const topics = [ { id: 1, title: 'html', body: 'html is..' }, { id: 2, title: 'css', body: 'css is..' }, { id: 3, title: 'javascript', body: 'javascript is..' } ] return ( { mode = 'WELCOME'; }}> { mode = 'READ'; }}> ); } export default App; //contact App_7.js 해당 ..

*해당 알고리즘 연습은 백준 23881번 문제를 참고 했음을 인지해 달라. 선형탐색 기본 형태의 선택형 알고리즘은 어려움이 없었다. 하지만 막상 문제를 통해서 구현하려고 하다보니 어려움을 느꼈다. 생각보다 많은 시간을 할애 하였고 이에 좌절하지 않고 몇일을 틀린 문제를 무한 반복하며 내가 무엇을 놓치고 있는지 생각을 했었다. 3일 걸릴 수 있는 것을 개인 사정 일정과 맞춰가며 문제를 풀다 보니 1주일 정도의 시간이 필요했다. 문제를 파익하고 이해했다기 보단 선택정렬이 어떻게 이루어졌으며 어떤 구조를 통해서 문제가 돌아가는지에 초점을 맞춘 포스팅이다. 우선 선택 정렬 알고리즘의 이중 for문만을 기준으로 바라본 그림은 아래와 같다.조금 복잡해 보이니 리스트 요소 하나만을 동작 시켰을 때의 모습은 오른쪽과 ..

우선 readdir을 통해서 특정 파일 목록에 있는 이름들을 가지고 와본다. 아래 코드를 통해서 코드와 실행 결과를 살펴본다.let testFolder = './data';let fs = require('fs');//읽어낼 폴더 위치, 함수 매개변수는 error 이후 filelist라는 변수에 반환 받은 값 저장fs.readdir(testFolder, function (error, filelist) {  console.log(filelist);}) [nodemon] starting `node readdir.js` [ 'CSS', 'HTML', 'JavaScript' ] [nodemon] clean exit - waiting for changes before restart  이를 이용해서 우리가 만든 홈페..

예외적인 url경로를 들어 갔을 때 NotFound라고 표기가 되는 페이지를 생성하려고 한다. 그렇게 어렵지 않으니 필요한 코드만 살펴보자. if (pathname === '/') { fs.readFile(`data/${queryData.id}`, 'utf8', function (err, description) { var template = ` ... 이렇게해서 우리가 페이지를 url을 포함해서 조금 더 구체적으로 만들어 냈다.

props를 이용하는 방법을 앞시간에 배웠다. 이제는 함수를 이용해서 event처리를 하는 방법을 배우 볼 것이다. 우선 함수를 구현하는 방법은 Header 컴포넌트로 예시를 들어보면 아래와 같다. ... { alert('Header'); console.log('test') } }> ... 우선 우리가 만든 Headr 컴포넌트에 onChangeMode라는 함수를 넣어주고 onChangeMode함수를 props를 컨트롤 할 수 있는 Header컴포넌트로 돌아가서 onChangeMode를 실행시키면 된다. props를 컨트롤 할 수 있는 Header컴포넌트는 아래와 같다. function Header(props) { return section04 { event.preventDefault(); props.on..