프로젝트 관리의 기본이 되는 git과 github에 대해서 공부했다. 생활코딩 - GITn 시리즈를 이용하여 공부하였다. 작년에 써볼 일이 있어서 급하게 수박겉핥기식으로만 배우고 써봤는데 이번 기회에 확실하게 git에 대해 배울 수 있었던 것 같다. 익숙해지는 건 시간 문제니까 열심히 써봐야겠다. 기초가 제일 중요한 법이니까!
Web 개발에 사용되는 언어로는 크게 HTML, CSS, JavaScript가 있는데, 오늘은 그중 HTML에 대해서 공부했다. 생활코딩 - WEBn 시리즈를 이용하여 공부하였다. (WEB1) HTML의 기초 문법 태그를 이용해서 간단한 웹사이트 만들기를 따라해보았다. 이후 완성한 웹사이트를 github page를 이용하여 웹호스팅 해보았다.
저번 시간에 만들어놓은 웹사이트에 동영상 추가, 댓글 기능을 추가해보았다. Visual Studio Code의 확장 프로그램인 Live Server을 이용해서 웹 서버를 열어서 실시간으로 수정되는 웹페이지를 확인해볼 수 있었다. JavaScript는 HTML과 달리 사용자와 웹페이지의 상호작용을 위해 필요한 언어이다. JavaScript의 기본 문법을 공부하는 중 - 데이터 타입과 이벤트(onclick, onchange, onkeydown)에 대해 공부했다.
웹페이지를 디자인할 때 필요한 CSS에 대해 공부해보았다. CSS의 기초 개념을 배우고 웹페이지를 구성하는 CSS 코드를 작성했다. 동일한 레이아웃을 가진 웹사이트의 경우에는, 중복을 피하기 위해 html 코드에서 <style> </style>로 작성된 부분을 별도의 styel.css 파일로 빼내어 태그를 이용하는 것이 경제적이다. 이를 이용해 간단한 웹페이지를 구성해보았다.
JavaScript를 다시 이어서 공부하려고 한다. 조건문, 배열, 반복문에 대해 학습했다. 이를 이용하여 앞서 만들어놓은 홈페이지에 버튼을 누르면 배경이 까맣게 변하고 글자가 흰색 및 다른 색상으로 변경되도록하고, 다시 한 번 더 누르면 원래대로 돌아오도록 야간모드를 적용, 해제하는 버튼을 구현해보았다.
JavaScript의 함수, 객체에 대해 공부했다. 배운 내용을 적용하여 웹사이트 html 코드를 수정해보았다. jQuery로 javaScript로 작성된 언어를 대치해보았는데 javaScript에서 여러 줄의 반복문으로 작성된 부분을 jQuery로 간단하게 표현할 수 있었다. 배운 내용을 복습한 후에 React 공부를 시작해야겠다.
JS를 좀 더 공부하고 React를 공부해야겠다고 생각이 들어 '한 입 크기로 잘라먹는 리액트'를 이용해서 공부했다. 오늘은 JS 기초를 공부했는데, 중간중간에 몰랐던 부분이 있어서 전체적으로 한 번 다시 훑어보았다. React는 Node.js 기반의 JS 라이브러리이기 때문에 React를 배우기 위해서는 Node.js도 함께 알고 있어야 한다.
JS의 비동기, 동기까지 학습했다. 콜백 함수 개념이 아직 확실하게 갖춰지지 않은 것 같아 복습이 더 필요할 것 같다. Node.js와 React.js를 본격적으로 공부해보려고 한다.
Node.js와 React.js에 대한 기초 부분을 수강하면서 정리했다. 다음 시간에 React.js 입문 부분을 수강하고 카운터 앱 클론 코딩을 해보려고 한다.
React.js 입문 부분 수강을 수강하였다.
간단한 카운터 앱을 클론 코딩해보았다. App 컴포넌트에 Controller 컴포넌트와 Viewer 컴포넌트를 갖도록 했는데, count 값을 저장할 state는 부모 컴포넌트에 생성해야 한다. 부모 - 자식 관계에서는 props를 통해 값을 전달할 수 있지만, 자식 - 자식 관계에서는 이를 전달해줄 수 없기 때문이다.
useEffect라는 리액트 훅에 대해서 공부했다. useEffect는 첫번째 인수로 콜백 함수를, 두번째 인수로 deps(dependency array)를 가지는데, 저번 시간에 만든 카운터 앱에서 state인 count 값(deps)이 변경되면 콜백 함수가 실행되도록 업데이트 해보았다. 또한 useEffect를 이용해서 앱 컴포넌트의 라이프사이클 (Mount -> Update -> unMount) 제어에 대해서도 함께 알아보았다.