재혁이의 SW 공부일지

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다. www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 드디어 40강짜리 강의를 모두 다 들었습니다! 👏👏👏👏👏👏 이제는 React로 Github.io 페이지 구축을 연습해보고 웹페이지 외의 앱을 만들기 위해 Flutter를 개인적으로 공부할 예정입니다. 20. Update 구현 개인적으로 CRUD 중에 가장 어려웠던 것 같습니다. Create는 만들고 Contents에 추가하는 것으로 Read는 state의 mode만 변환하는 것으로 진행했다면, Update는 Create된 것을 Read하여 바로 다시 수정하는 방식(Create와 비슷하게)을 ..

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다. www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 이제부터는 글을 짧고 간결하게 정리용으로만 남기겠습니다. 이제 강의 마지막까지 19, 20, 21차만 남은 상태인데 이 3개의 강의에서 할 계획은 1. TOC List에 내용을 추가하기 2. TOC List에 추가된 내용을 수정하기 3. TOC List에 추가된 내용을 삭제하기 이 세 가지로 추려진다. 개인적으로 19강을 전부 듣고 실습해본 결과, 내가 이 기능을 HTML, CSS, Javascript로 구현하면 어떻게 되었을까? 를 상상하면서, 비교하면서 들었다. 어떻게보면 React를 처..

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다. www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 17.1. 컴포넌트 이벤트 만들기 이제 이벤트 프로그래밍을 소비자가 아닌 매체의 생산자의 입장에서 만들어보는 과정! 이전 강의까지는 위의 코드에서 주석처리된 부분처럼 가독성을 위해서 Subject Component를 Component로 사용하지 않고 코드를 다 가져왔었지만, 이제부터는 다시 Component로 이용하기 위해 주석처리된 부분을 모두 지운다. React에서 이벤트를 설치하고 싶다면? → onChangePage를 사용할 것! 이벤트에 함수를 설치해놓으면 a Tag를 클릭할 때 설치..

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다. www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 15.1. State 소개 이전시간까지는 React의 기본 기능, 그리고 그 중에서도 중요한 개념인 'Props'에 대해 배웠다. 어떤 사람이 아이폰을 사용한다고 해보자. 아이폰을 사용할 때 터치하는 화면, 볼륨을 높이기 위해 누르는 볼륨 버튼들을 모아서 '사용자 인터페이스(UI)'라고 한다. 여기서 사용자가 제품을 조작하는 장치들을 Props에 props의 값들에 따라 내부적으로 구현에 필요한 것들을 State에 비유할 수 있다. - Component들은 Props들을 이용하여 조작하게 됨..

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다. www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 10. 리액트가 없다면 - 이번 시간부터 Component를 만드는 방법에 대하여 배움! (중요한 것이며 제대로 해놔야 함) - React의 기능을 사용하지 않은 채로 만든 후에 React로 전화하면서 기능을 이해하는 방향으로 수업 - Public 디렉토리 : 'run npm start'했을 때 찾는 root 만약 현재 pure.html의 코드가 약 10,000줄~20,000줄이면 어떨까? ≫ header와 nav, 그리고 article 등을 사용자 정의 태그(Component)로 숨기면 가..

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다. www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 7. JS 코딩하는 법 - 디렉토리가 어떤 구성을 하고 있는지, 어디를 수정하면 될지 확인하면 됨 - public 디렉토리 : index.html이 있는 곳 ≫ npm run start를 했을 때, 나오는 홈페이지가 index.html로 이루어진 것임 - 중요한 부분 : body tag 중 → 우리가 만들 Component는 안에 들어가게끔 만들어 놓는 것 - 그렇다면 안에 들어가는 Component들은 어디에 있는가? - src 디렉토리 : 개발 작업을 할 때, 모든 파일은 이 디렉토리 안..

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다. www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1강. 수업 소개 - React란? : Facebook에서 만든 UI 라이브러리 - 특징 홈페이지에서 특정 영역을 HTML로 코딩할 때, 사용자 정의 태그를 사용하여 main HTML 페이지에서 간단하게 사 용자 정의 태그를 적어주면 됨 (= 가독성) 사용자 정의 태그는 재사용할 수 있음. 다른 HTML 페이지에서도 사용할 수 있음 (= 재사용성이 높다) 특정 사용자 정의 태그에서 오류가 생기면, 그 사용자 정의 태그에 관련된 내용만 고치면 됨 (= 유지보수가 편리함) ≫ 이 때, React..