생활코딩 7

생활코딩 : React - Update & Delete 기능 구현

update read 기능과 create기능이 결합되어 있다. update란 기존의 콘텐츠를 수정하는 것이다. read처럼 기존의 콘텐츠를 불러와서 form에다가 내용을 추가해주는 작업이 필요하다. form이 들어있는 CreateComponent를 복사해서 이름을 바꾼다. 내용도 바꾼다. App.js로 와서 import에 CreateComponent를 추가한다. 그리고나서 render()부분에 else if 부분을 복사해서 붙여넣기 한다. (this. state.mode === 'update')로 바꿔준다. UpdateComponent.js 에서 제목을 Update로 바꿔준다. 결과 : 브라우저에서 update를 클릭하면 내용부분에 Update라고 뜨고, 콘솔 컴포넌트에서도 mode: update로 바뀐..

React 2020.11.18

생활코딩 : React - 컴포넌트 이벤트 : onChangePage 이벤트 생산자가 되다 (17강)

이벤트 강의에서 한 것 : Subject.js 파일에 있던 코드를 App.js의 Subject 컴포넌트가 있던 자리에 복붙해서 작업했다. 옮겨놨던 코드를 비활성화 한다. 그리고 원래 Subject 컴포넌트 코드를 돌려 놓는다. 이벤트 생산자가 된다! [제목을 클릭했을 때, welcome화면으로 바꾸고 싶다] [Subject 컴포넌트는 onChangePage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때, 이벤트에 설치한 함수를 설치하도록 만든다] App.js 에서 Subject 컴포넌트에 onChangePage 이벤트를 입력한다. onChangePage라는 함수는 props의 형태로 Subject.js에 전달된다. Subject.js 에서 a 태그를 onClick 했을때, 함수가 실행되고, ..

React 2020.11.07

생활코딩 : React - 이벤트 : state와 props 그리고 render의 관계, e.preventDefault, bind, setState 함수 (16강)

이벤트 챕터에서 하려는 것은 다음과 같다 1. 제목 WEB에 링크를 달아서 -> 클릭하면 Welcome 화면을 보이게 한다 2. 목차 링크를 클릭해서 -> 해당 본문으로 이동한다 이벤트 state props 그리고 render()함수 [제목에 링크를 단다] 제목 파일은 Subject.js 이다. 를 제목을 포함해서 넣는다. [현재 페이지가 Welcome 페이지인지 Read 페이지인지 알아햐 한다] App.js 파일에서 App 컴포넌트 안 State에서 mode 값을 준다. mode: 'welcome' 그리고 mode: 'Welcome'일 때, Content 영역에 있을 내용 넣는다. welcome: {title: 'Welcome', desc: 'Hello, React!!!'} 리액트에서는 props나 S..

React 2020.11.07

생활코딩 : React - State 소개, 사용, key (15강)

props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것 state : props의 값에 따라서 내부의 구현에 필요한 데이터들이다, 복잡한 컴포넌트 만들 때 사용 State 사용 State 값 초기화 : render() 보다 먼저, constructor()함수 이용해서 코드를 짠다 constructor에서 this.state ={} : 초기화 subject: {title:'WEB', sub: 'World Wid Web'} : subject의 값을 스테이트화 시킨다 Subject 컴포넌트에서 : 리액트에서 코드를 인식하게 하려면 { }를 쓴다 외부에서 볼 수 없게 철저히 은닉하는 것이 좋은 사용성이다. 상위 컴포넌트의 state를 하위 컴포넌트로 props로 전달 가능하다. this.state ={}..

React 2020.11.06

생활코딩 : React - 설치, 실행, 종료, 코딩방법, 배포(1~9강)

오류 'react-create-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 해결법 npm install -g react-scripts 입력후 이어서 설치 터미널 -> npm run start 터미널-> ctrl + C 리액트는 class type으로 이용한다 (오른쪽) 화면에 표시되는 내용은 연결된 App.js 파일 안에 내용 이다. import로 연결된 index.css 에서 작성한다. 저장하면 자동 실행. 오른쪽 클릭 -> 캐시 지우고 강력새로고침 버튼 create-react-app은 무겁다! 터미널 -> npm run build 입력 -> build 폴더 생긴다 build 폴더 : src 폴더의 내용을 최적화 했다 (버그해결, 심미적 문제 해결) 실..

React 2020.11.05

생활코딩 : PHP와 JS

PHP 반가워. 넌 처음만난다. 코드가 굉장히 독특하구나. ?라니.. 독특한 코드군.. php 덕분에 에버노트 폭풍입력했다. 이고잉님이 동적인 언어의 시작이라고 알려줬다. "이것이 바로 프로그래밍입니다." by이고잉 (드디어 내가 진정한 프로그래밍을 한것인가? 댓글창에도 뿌듯했다는 글이 유독 많다.) 오늘은 12시부터 7시반까지 5시간정도 공부했다. 동네 카페에서 공부함. 다행히 에버노트 ~ 깃허브 ~ 아톰 동시에 입력하는 흐름에도 집중력을 잃지 않았다. 아직까진... 괜찮다...

생활코딩: 웹어플리케이션 만들기

20/08/20 생활코딩 웹어플리케이션 만들기 코스를 수강한다. 비전공자. 문과대학 졸업자. 코딩 처음 해봄. 8월 동안 카페를 열심히 다니면서 WEBn 수업 중 HTML, CSS, JavaScript 를 생활코딩으로 수강했다. 실질적으로 7일 정도 걸린 듯 하다. (생활코딩 감사합니다.) ▽ ▽ ▽ 완강후 나만의 페이지를 만들었다. 깃허브에 코드를 저장했다. 게임개발학과 친구한테 페이지를 보여줬다.(친구는 실행력을 칭찬했다. 홈페이지 칭찬은 안 함ㅋㅋ) https://sigcho.github.io/web1_HCJ/nindex.html 생활코딩으로 웹어플리케이션 수강 후 (2회독) freecodecamp 수강예정이다. 완강하는데 1000시간, 2000시간 걸린다고 하는데.. 수료증을 준다고 한다. 링크드..