국비지원교육

내일배움카드를 통해 리액트 리덕스 강의 마지막 주차다. 마지막 주차 강의에서는 성능개선을 위해 어플리케이션을 만들었다. 성능을 체크할 때 구글에 프로파일러와 하이라이트를 통해 성능을 체크할 수 있었다. 이것은 구글 확장프로그램이어서 깔고 쓸 수 있다! 프로파일러와 하이라이트를 사용하면 내가 입력할 때마다 반짝이는 것을 볼 수 있다. 이 부분은 하이라이트를 체크해야 볼 수 있는 부분이다. A, B 컴포넌트를 각각 만들 때 A컴포넌트는 한 번에 만들었고 B는 쪼개서 만들었다. 쪼개서 만들었을 때 성능이 더 좋지않을까? 싶지만 그것도 아니다. 오히려 불필요한 곳에서 리렌더링이 일어나 좋지 않을 수 있다. 따라서 React.memo를 이용해 성능을 최적화 시킬 수 있다. React.memo로 래핑될 때 리액트는..

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

드디어 국비지원 교육을 통해 들을 수 있는 리액트 강의에 접어들었다. 선생님이 바뀌셔서 그런지 수업 스타일도 약간? 바뀐 것 같았다! 초반에는 클래스를 이용해 컴포넌트를 짰다. 일단.. 리액트를 함수 컴포넌트로만 자주 짜봐서 클래스 컴포넌트로 짜는법이 어색했다. 리액트로 조그마한 어플리케이션 하나를 만들었다. 원래는 완성본을 올리고 싶었지만 아직 진행중이라 완성본은 추후에 넣을 예정이다. 하지만 클래스로 컴포넌트를 짜면서 constructor, super, props의 개념을 다시 잡을 수 있었던 것 같다. 일단 이런식으로 클래스로 기본틀을 짜줬다. constructor안에 super와 state가 바뀔 대상을 지정해준다. 이때 9칸의 네모칸을 만들건데 이 안을 클릭할 때마다 변해야 하는 구조이다. 칸 ..

오늘도 내일배움카드를 통해 수강한 리액트 & 리덕스 강의 5주차 후기를 써보려고 한다. 기간이 얼마 남지 않아서.. 후딱 듣고 빨리 후기를 남겨야하는데 이것저것 할게 너무 많아서 계속 미뤄졌다. 그래서 그냥 자바스크립트 부분을 다 듣고 쓰는게 좋을 것 같아서 자바스크립트 까지 모두 들었다! 이번 강의를 들으면서 좋았던 점은 npm에 익숙하지 않은 사람들에게 좋은 강의가 되었을 것 같다. 개발을 처음 시작할 때 환경설정하는게 어찌보면 제일 힘들고.. 영어가 많아서 어지럽다. 그냥 어찌저찌 npm을 깔고 개발환경을 구축했었는데 이번 강의를 통해서 npm과 nvm의 차이점에 대해서도 정확히 알 수 있었다. 그리고 npm버전에 대해서 자세히 알 수 있었다. 그냥 숫자면 버전인가보다~ 하고있었는데 프로젝트를 배포..

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

이것 저것 하느라 강의 듣고 글 쓰는게 미뤄졌다..🥲 이번엔 CSS 속성에 관한 글을 작성하려고 한다! 나름.. CSS는 못하지 않는다고 생각하지만 flex나 grid 같은게 아직 익숙치 않은 것 같다. flex는 그래도 예전에 예제 만들며 직접 해봐서 많이 늘은 것 같다! 처음에는 가상선택자니.. 선택자 개념이 좀 헷갈렸는데 확실히 하면서 많이 익숙해지는 것 같다. 개발은.. 하면 할수록 느는(?) 과정인 것 같다. 그리고 이 강의를 들으면서 처음으로 :not 에 대해서 알 수 있었다. 개발하면서 써보지 않아서 있는지도 몰랐던.. 개념강의라 세세하게 다 알려주시는 것 같았다. 예를들어 이런 코드가 있다. p:not(.classy) { color: red; } body :not(p) { color: gr..

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

리액트를 복습하고 리덕스를 좀 더 배우고 싶어서 패스트캠퍼스 강의를 신청하게되었다. 예전에 발급받았던 내일배움카드를 통해 신청할 수 있었다! 강의 초반은 기초 과정인 것 같아서 쉽게 들을 수 있었다. 내가 원하던건 리액트, 리덕스를 가지고 실습을 해보는 것이라서 앞 기초부분은 정리할 겸 들으면서 복습하고 있다. 듣다보니까 VS code에서 모르고 넘어갔던 단축키도 다시 상기시킬 수 있어서 좋았다. 😊 내가 초반에 무턱대고 배울 때 제일 어려웠던 부분이 '상대 경로와 절대 경로' 였는데 이 부분에 대해서 잘 정리를 해주신 것 같아서 정리해두려고 한다. 특히 상대경로의 개념을 설명할 때 '그 파일의 주변'이라고 말씀해주셨는데 처음 배우시는 분들이 듣고 빠르게 이해할 수 있는 부분일 것 같았다. 처음에 절대 ..