{"version":1,"pages":[{"id":"-LV81lyQ82OyonllWsat","title":"리액트 강의","pathname":"/coding-apple-react","siteSpaceId":"sitesp_17YAT","description":"안녕하세요 :)"},{"id":"-LW5McnqeBhdFmyuhS5U","title":"* 강의 수강 전 준비 (중요)","pathname":"/coding-apple-react/before-start-class","siteSpaceId":"sitesp_17YAT","description":"리액트 개발을 위해 필요한 사전 준비물"},{"id":"-Lac51QjyVbP8hQiWK85","title":"기본 개념","pathname":"/coding-apple-react/undefined","siteSpaceId":"sitesp_17YAT","description":"자바스크립트, Node.js 기본개념"},{"id":"-LWktMWyJvQr6Zsq1FG3","title":"Node.js & npm","pathname":"/coding-apple-react/undefined/node.js-npm","siteSpaceId":"sitesp_17YAT","description":"nodejs와 npm에 대해서 알아보겠습니다.","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-L_mNlrKF6Ht0Hb7SRq9","title":"npm과 npx의 차이에 대해서","pathname":"/coding-apple-react/undefined/npm-npx","siteSpaceId":"sitesp_17YAT","description":"글로벌 모듈을 설치하지 않기 위한 몸부림","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-LWkxatKfgqH40zRbcRl","title":"Babel","pathname":"/coding-apple-react/undefined/babel","siteSpaceId":"sitesp_17YAT","description":"Javascript의 문법 확장","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-LWkxgvxd5LPawJ77HYs","title":"Bundler","pathname":"/coding-apple-react/undefined/bundler","siteSpaceId":"sitesp_17YAT","description":"브라우저 단에서 import와 export를 하기 위한 움직임","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-L_WuilptZ4iQqrSNmvK","title":"Class","pathname":"/coding-apple-react/undefined/class","siteSpaceId":"sitesp_17YAT","description":"자바스크립트의 Class문법에 관한 내용입니다. 강의 시작 전 보시면 정말 좋습니다.","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-L_X5rR_teHdz-6gmGdP","title":"this","pathname":"/coding-apple-react/undefined/this","siteSpaceId":"sitesp_17YAT","description":"자바스크립트의 트릭인 this키워드의 사용 방법에 대해서 알아보겠습니다.","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-L_mT5VGcjMyoP1c97xm","title":"import, export에 관해서","pathname":"/coding-apple-react/undefined/import-export","siteSpaceId":"sitesp_17YAT","description":"자바스크립트의 import, export 개념을 탄탄히 다지고 싶으신 분들께","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-LbBOGwa2eVWogqTX50F","title":"Arrow function","pathname":"/coding-apple-react/undefined/arrow-function","siteSpaceId":"sitesp_17YAT","description":"'화살표 함수' 에 관해서","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-Lbcl38mhkW4zDAst-x9","title":"Map","pathname":"/coding-apple-react/undefined/map","siteSpaceId":"sitesp_17YAT","description":"for -> forEach -> map !","breadcrumbs":[{"label":"기본 개념"}]},{"id":"-L_mLVcndNwIoE3jDmXX","title":"1강","pathname":"/coding-apple-react/1","siteSpaceId":"sitesp_17YAT","description":""},{"id":"-LW4phuCBa7JKTUJ19jY","title":"React가 뭐야?","pathname":"/coding-apple-react/1/what-is-react","siteSpaceId":"sitesp_17YAT","description":"React.js 라이브러리에 관한 간단한 설명","breadcrumbs":[{"label":"1강"}]},{"id":"-LVnY1jXYKbN8VQtieUy","title":"리액트를 왜 배우니 ?","pathname":"/coding-apple-react/1/why-learn-react","siteSpaceId":"sitesp_17YAT","description":"왜 리액트를 배우는지 알아봅시다.","breadcrumbs":[{"label":"1강"}]},{"id":"-LW5YI85impU5hEVLtyq","title":"CRA를 활용한 리액트 앱 만들기","pathname":"/coding-apple-react/1/create-reactapp-using-cra-5min","siteSpaceId":"sitesp_17YAT","description":"리액트 어플리케이션 만들기","breadcrumbs":[{"label":"1강"}]},{"id":"-LbBX2JCyWI37gNgz5JC","title":"태초에 DOM이 있었다.","pathname":"/coding-apple-react/1/dom-.","siteSpaceId":"sitesp_17YAT","description":"가상 돔에 관한 간단한 동영상","breadcrumbs":[{"label":"1강"}]},{"id":"-LW7FoDX9vnKIEzuq3Xh","title":"React에는 HTML이 없나요 ?","pathname":"/coding-apple-react/1/where-is-html","siteSpaceId":"sitesp_17YAT","description":"JS, CSS 코딩만으로 어떻게 HTML을 생성해 내는지","breadcrumbs":[{"label":"1강"}]},{"id":"-LW7Dbgd70Rpf5mi8L9W","title":"Component Of React","pathname":"/coding-apple-react/1/component-of-react","siteSpaceId":"sitesp_17YAT","description":"리액트의 컴포넌트","breadcrumbs":[{"label":"1강"}]},{"id":"-L_mMMSt1zACeShh7_M4","title":"영화 소개 프로젝트: 프로젝트 생성","pathname":"/coding-apple-react/1/undefined","siteSpaceId":"sitesp_17YAT","description":"Component of React 강의 복습 + 영화 소개 프로젝트 컴포넌트 생성","breadcrumbs":[{"label":"1강"}]},{"id":"-LWC9YZsCwiCWwb4buqu","title":"JSX","pathname":"/coding-apple-react/1/1-jsx","siteSpaceId":"sitesp_17YAT","description":"JSX 문법에 대해","breadcrumbs":[{"label":"1강"}]},{"id":"-LW7A35-8urXhHNS52V2","title":"props & state","pathname":"/coding-apple-react/1/props-and-state","siteSpaceId":"sitesp_17YAT","description":"Data handling in reactjs","breadcrumbs":[{"label":"1강"}]},{"id":"-LacBmW_HGIVKhPhw7Kc","title":"영화 소개 프로젝트: 컴포넌트 작성","pathname":"/coding-apple-react/1/undefined-2","siteSpaceId":"sitesp_17YAT","description":"JSX, Props, State를 배운 것을 바탕으로 컴포넌트를 작성합니다.","breadcrumbs":[{"label":"1강"}]},{"id":"-Lac5_yqTrmyDrgIHet7","title":"2강","pathname":"/coding-apple-react/2","siteSpaceId":"sitesp_17YAT","description":""},{"id":"-LacDiN_i913agIb_rO_","title":"라이프사이클","pathname":"/coding-apple-react/2/undefined-1","siteSpaceId":"sitesp_17YAT","description":"리액트 컴포넌트의 생명주기에 관해 알아봅시다.","breadcrumbs":[{"label":"2강"}]},{"id":"-LbNuu4bmKke8YM7ecih","title":"라이프 사이클이 뭔데?","pathname":"/coding-apple-react/2/undefined-1/what-is-life-cycle","siteSpaceId":"sitesp_17YAT","description":"리액트에서 컴포넌트를 다루는 중요한 개념","breadcrumbs":[{"label":"2강"},{"label":"라이프사이클"}]},{"id":"-LacDnsJd5KlEwFogh_a","title":"render","pathname":"/coding-apple-react/2/undefined-1/render","siteSpaceId":"sitesp_17YAT","description":"JSX를 작성하는 부분, 실제 렌더링이 이루어 집니다.","breadcrumbs":[{"label":"2강"},{"label":"라이프사이클"}]},{"id":"-LacDtGz5neUT1bc6Hhm","title":"componentDidMount","pathname":"/coding-apple-react/2/undefined-1/componentdidmount","siteSpaceId":"sitesp_17YAT","description":"컴포넌트가 첫 로딩을 끝냈을 때 한 번만 실행되는 라이프사이클 함수","breadcrumbs":[{"label":"2강"},{"label":"라이프사이클"}]},{"id":"-LacE-QeKptfX2qDl7vg","title":"componentDidUpdate","pathname":"/coding-apple-react/2/undefined-1/componentdidupdate","siteSpaceId":"sitesp_17YAT","description":"State나 Props가 업데이트 될 때마다 실행되는 함수","breadcrumbs":[{"label":"2강"},{"label":"라이프사이클"}]},{"id":"-LbNxH8ddZ6AaTQ_6bSD","title":"componentWillUnmount","pathname":"/coding-apple-react/2/undefined-1/componentwillunmount","siteSpaceId":"sitesp_17YAT","description":"컴포넌트가 사라질 때","breadcrumbs":[{"label":"2강"},{"label":"라이프사이클"}]},{"id":"-LbYjrKyCuaa7T1SGTZ1","title":"라이프 사이클의 동작","pathname":"/coding-apple-react/2/undefined-1/undefined","siteSpaceId":"sitesp_17YAT","description":"여러 개의 컴포넌트의 라이프 사이클의 동작 방식","breadcrumbs":[{"label":"2강"},{"label":"라이프사이클"}]},{"id":"-LacDCvqDvVXnlu1mDZH","title":"리액트의 스타일링","pathname":"/coding-apple-react/2/undefined","siteSpaceId":"sitesp_17YAT","description":"","breadcrumbs":[{"label":"2강"}]},{"id":"-LacDKHr3mozX13kR0vB","title":"Pure css","pathname":"/coding-apple-react/2/undefined/pure-css","siteSpaceId":"sitesp_17YAT","description":"CSS로 리액트 스타일링 하기","breadcrumbs":[{"label":"2강"},{"label":"리액트의 스타일링"}]},{"id":"-LacCv28VZvVqp3QbNLJ","title":"SCSS","pathname":"/coding-apple-react/2/undefined/scss","siteSpaceId":"sitesp_17YAT","description":"node-sass를 이용한 리액트에서의 SCSS작성방법","breadcrumbs":[{"label":"2강"},{"label":"리액트의 스타일링"}]},{"id":"-LacD7nvPZ69ZOVBdo6r","title":"Styled-components","pathname":"/coding-apple-react/2/undefined/styled-components","siteSpaceId":"sitesp_17YAT","description":"CSS-IN-JS","breadcrumbs":[{"label":"2강"},{"label":"리액트의 스타일링"}]},{"id":"-LacDOBfx0SZLu_m3l99","title":"영화 소개 프로젝트: SCSS, Styled-component","pathname":"/coding-apple-react/2/scss-styled-component","siteSpaceId":"sitesp_17YAT","description":"영화 소개 프로젝트에 SCSS와 Styled-component를 넣어 봅니다.","breadcrumbs":[{"label":"2강"}]},{"id":"-LacFJjPzBs7Gdx-Wzos","title":"영화 소개 프로젝트: 외부 라이브러리 사용해보기","pathname":"/coding-apple-react/2/undefined-2","siteSpaceId":"sitesp_17YAT","description":"DOM Confetti 사용해 페이지 꾸며보기","breadcrumbs":[{"label":"2강"}]},{"id":"-LWME-mV7k0hnJgKMeOn","title":"LifeCycle Of React component - Deprecated","pathname":"/coding-apple-react/2/lifecycle-of-react-component","siteSpaceId":"sitesp_17YAT","description":"리액트 컴포넌트의 라이프사이클","breadcrumbs":[{"label":"2강"}]},{"id":"-LX6yHtT5dJKrmzRBZYM","title":"Optimizing of component - Deprecated","pathname":"/coding-apple-react/2/optimizing-of-component","siteSpaceId":"sitesp_17YAT","description":"컴포넌트 최적화, ShouldComponentUpdate & PureComponent","breadcrumbs":[{"label":"2강"}]},{"id":"-LXB5gtpG9mU2JOuusYg","title":"scss note - Deprecated","pathname":"/coding-apple-react/2/scss-note","siteSpaceId":"sitesp_17YAT","description":"리액트를 이용한 노트를 한 개 제작해 보려고 합니다.","breadcrumbs":[{"label":"2강"}]},{"id":"-Lac60YYedUtSRppJNnQ","title":"3강","pathname":"/coding-apple-react/3","siteSpaceId":"sitesp_17YAT","description":"라우팅의 개념을 배우고, 영화 프로젝트에도 라우팅 개념 집어넣어 보기"},{"id":"-LacOELNnQLxgAHsu4Sd","title":"props 에러 관리","pathname":"/coding-apple-react/3/props","siteSpaceId":"sitesp_17YAT","description":"Prop-types, defaultProps를 통해서 에러 방지를 해 봅시다.","breadcrumbs":[{"label":"3강"}]},{"id":"-LacOMK3iIe6ZlnHFU4L","title":"defaultProps","pathname":"/coding-apple-react/3/props/defaultprops","siteSpaceId":"sitesp_17YAT","description":"props를 주고받을 때 에러 방지를 위한 또 하나의 방법","breadcrumbs":[{"label":"3강"},{"label":"props 에러 관리"}]},{"id":"-LacOPyzA-1pOuLf7FL5","title":"prop-types","pathname":"/coding-apple-react/3/props/prop-types","siteSpaceId":"sitesp_17YAT","description":"라이브러리를 활용한 props관리","breadcrumbs":[{"label":"3강"},{"label":"props 에러 관리"}]},{"id":"-LcK48_pEWFldgvLsvBR","title":"그냥 타입스크립트 쓰세요","pathname":"/coding-apple-react/3/props/undefined","siteSpaceId":"sitesp_17YAT","description":"개발자의 경험 향상","breadcrumbs":[{"label":"3강"},{"label":"props 에러 관리"}]},{"id":"-LXYvTMP7ga8Dg9gKq5J","title":"Routing (준비)","pathname":"/coding-apple-react/3/route-prepare","siteSpaceId":"sitesp_17YAT","description":"기본적인 라우팅 실습 1","breadcrumbs":[{"label":"3강"}]},{"id":"-LXgMjw-TQn5IbHKddPz","title":"Routing (실전)","pathname":"/coding-apple-react/3/route-actual","siteSpaceId":"sitesp_17YAT","description":"기본적인 라우팅에 관한 실습 2","breadcrumbs":[{"label":"3강"}]},{"id":"-LXqWttbbP0ievtw9dfK","title":"history를 이용한 뒤로 가기 버튼 구현","pathname":"/coding-apple-react/3/history-go-and-goback","siteSpaceId":"sitesp_17YAT","description":"'단순한 링크 이동이 아닌 뒤로 가기 버튼'","breadcrumbs":[{"label":"3강"}]},{"id":"-LacET_kmwcVbN6brHnp","title":"영화 소개 프로젝트: 라우팅","pathname":"/coding-apple-react/3/movie-route","siteSpaceId":"sitesp_17YAT","description":"배웠던 것을 바탕으로 리액트 라우터 연결해보기","breadcrumbs":[{"label":"3강"}]},{"id":"-LXhD-6au9GwdwMbvXlS","title":"한국 전통 음식 소개 페이지 만들기 - Deprecated","pathname":"/coding-apple-react/3/korea-food","siteSpaceId":"sitesp_17YAT","description":"Routing 실습 토이 프로젝트","breadcrumbs":[{"label":"3강"}]},{"id":"-Lac6KMn-5TVEPVrFfQT","title":"4강","pathname":"/coding-apple-react/4","siteSpaceId":"sitesp_17YAT","description":"Ajax 요청하기"},{"id":"-LYMRQSR2_Gt1xZyHyrV","title":"Ajax In React","pathname":"/coding-apple-react/4/ajax-in-react","siteSpaceId":"sitesp_17YAT","description":"API 요청을 실습해보는 수업","breadcrumbs":[{"label":"4강"}]},{"id":"-LYXdp8g3Vw-tgOD7zn7","title":"Form in react","pathname":"/coding-apple-react/4/4-form-in-react","siteSpaceId":"sitesp_17YAT","description":"리액트에서 form 태그 사용하기","breadcrumbs":[{"label":"4강"}]},{"id":"-LYXmVexRAEEWPN22SNw","title":"Unsplash API를 이용한 사진첩 만들기","pathname":"/coding-apple-react/4/4-unsplash-api","siteSpaceId":"sitesp_17YAT","description":"Unsplash API를 이용한 토이프로젝트","breadcrumbs":[{"label":"4강"}]},{"id":"-LYggDMAk6ULsgteuMnn","title":"Redux - 데이터를 관리하는 또 다른 방법 - Deprecated","pathname":"/coding-apple-react/4/4-redux","siteSpaceId":"sitesp_17YAT","description":"필요할 때 사용하면 좋습니다.","breadcrumbs":[{"label":"4강"}]},{"id":"-Lac6VxsqgS8rCKgDnb5","title":"부록","pathname":"/coding-apple-react/undefined-1","siteSpaceId":"sitesp_17YAT","description":"리액트 부록"},{"id":"-LZ-Z1NqraM4SgwyOGyZ","title":"CRA 프록시 서버 설정하는 방법","pathname":"/coding-apple-react/undefined-1/cra","siteSpaceId":"sitesp_17YAT","description":"불편하게 하드코딩 할 필요 없잖아요?","breadcrumbs":[{"label":"부록"}]}]}