리덕스

어느덧 내일배움카드를 통해 듣고 있는 리액트 & 리덕스 강의 7주차째다! 새삼 시간이 빠르고 많은 일이 있었지만 앞으로 나아갈 일만 남은 것 같다. 이번주에는 저번에 만들었던 것에 이어서 상태관리를 app 컴포넌트로 옮겼다. 처음에는 square 컴포넌트였다가 두번째는 board 컴포넌트로 옮겼었는데 아예 제일 최상위 컴포넌트로 상태를 옮겨서 board컴포넌트에 props를 통해 받아줄 수 있도록 변경했다. 코드는 이런식으로 다시 짰다. 좀 많이 길어지긴 했는데 앱 컴포넌트에 squres안에 들어갈 내용과 눌렀을 때 변경되는 부분등을 관리하도록 넣어준 부분이다. 처음에 똑같이 작성했는데 홈페이지에 나오지 않아서 당황했다. 나는 calculateWinner라는 함수를 계속 사용했는데 위에서 사용되지 않는다..

요즘 할게 많아서 강의를 조금 미뤘더니 너무 쌓여서 css 부분 끝까지 후딱 들어버렸다! 나름 css는 좀 할 수 있다고 생각했는데 많이 써보지 않은 속성까지 배울 수 있어서 좋은 기회였던 것 같다. css 강의가 끝나고 마지막에 예제를 만들어보는 수업을 했다. 오직 HTML과 CSS로만 이루어진 예제라서 약간의 노가다(?)가 필요했다. 오버워치 예제를 만들었는데 원래 이미지를 그냥 자바스크립트로 반복되게 굴려주면 쉬울 것 같은데 자바스크립트를 사용하지 않아서 배경이미지를 32개나 일일이 다 넣어주었다..... 그래도 따라하기 쉬운 예제라서 재미있었던 것 같다. (머리에 휴식을 주는 예제였음) 또 transform 속성을 많이 사용하긴 했는데 skew나 이런 속성은 자주 사용하지 않았어서 더 유용했던 것..

2주차에는 HTML을 중점적으로 배웠다. HTML은 뼈대라고 할 수 있는데 여러 사람들과 프로젝트를 하면서 이 뼈대가 참 중요하다고 다시금 느꼈다. 그리고 이번 강의를 들으면서 빈 태그에 관해서 개념을 잘 잡을 수 있었다. 원래 우리가 자주 쓰는 태그 유형 안녕하세요. 빈 태그 유형 또는 등 나도 처음에 코드를 배울 때 빈태그를 닫지않고 그냥 이런식으로 사용했었는데 XHTML/HTML5 부터는 안전하게 로 사용한다고 한다. 그래서 나도 이제 빈 태그를 사용할 때 이런식으로 사용하고 있다! 직관적으로 보이기도 하고 안전해서 이런식으로 써주는게 좋을 것 같다. 그리고 많이들 헷갈려하는 인라인 요소와 블록 요소에 관해서도 개념을 잘 정리할 수 있었다. 인라인 요소는 요소가 수평으로 쌓이며 콘텐츠 크기만큼 자동..