2020.07.11.

* 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다.

---

2020.07.11

 

오늘의 목표

• Github DYB-Nooks, simplecounter Readme파일 정리하기
• 아는 동생 정보 수행평가 도와주기
• simplecounter를 활용한 scorecounter 개발하기

동기

• class형 컴포넌트가 아닌 함수형 컴포넌트로 개발하고 싶어서
• react hooks를 사용한 함수형 컴포넌트 개발에 익숙해지고 싶어서
• 다른 사람들이 포기 편하도록 Readme 파일 정리

---

React Hooks의 기본정보를 알기 위해서는 2020.07.08.과 2020.07.09. 게시글을 보시면 됩니다 😀

 

일단 제일 먼저 Readme 파일을 정리했습니다!

 

DYB-Nooks 보러가기 - https://github.com/Bigstar1108/Do_Your_Best/blob/master/DYB_Nooks

SimpleCounter 보러가기 - https://github.com/Bigstar1108/Do_Your_Best/tree/master/simple-counter

 

이 전에 프로젝트를 진행했을 때도 Readme를 적는것이 정말정말이지 귀찮았다.

그래서 그냥 안적고 남기는 경우도 많았는데 이건 정말 내가 블로그를 써서 그런것이 아니라 정말 지금까지 매일매일 써온것이 도움이 많이 되었다. 정말 Readme를 적는데 시간이 많이 줄었다 ㅎㅎ.. 더 열심히 적어야겠다!

---

오늘은 아는 동생 수행평가를 도와주기로 했다. 인문계 고등학교를 다니는데 정보시간에 받은 수행평가가 있다고 도와달라고 해서 도와주기로 했다. '인문계 정보 수행평가가 얼마나 어렵겠어?'라는 생각을 가지고 직접 봤는데... 생각 이상으로 가관이였다 정말... 어떻게 인문계 학생한테 이런 수행평가를 시키는지 이해가 안될정도였다...

 

수행평가는 python을 사용해 프로그램을 개발하고 보고서를 작성해야하는 것이였다.

 

프로젝트의 대한 정확한 정보를 말해줄 순 없으니, 수행평가를 도와주고난 후 나의 느낌점? 을 말해보고 싶다.

 

일단 처음으로 든 생각은 인문계 학교에서 이런 수행평가를 하기에는 힘들거라는 생각이였다. 왜냐하면 대부분의 인문계학생들은 '구글링'을 할 줄 모른다. 정령 검색한다하더라도 네이버? 인데 구글을 사용해도 정확한 정보를 얻기에는 힘들기 때문이다. 물론 나도 1학년 때 그랬다. 개발을 하면서 '구글링'을 못한다면? 그 친구들은 무엇을 보고 개발을 하나? 예상했다시피 정보 교과서를 보고 개발을 한다. 음... 책을 보면서 개발을 하는것이 도움이 될 때도 있지만.. 프로그램을 만드는데에는 많은 도움이 될거라고는 생각이 들지 않는다. 그래서 나는 그 친구에게 제일 먼저 '구글링'을 하는 방법을 알려주었다. '영어를 사용해서 검색해라', 'Key Point만 짚어서 검색해라'와 같은 방법들을 알려주었다.

그리고 순서도도 작성해야하고 엄청나게 많은 것들이 있었다. 그것을 하나하나 도와주면서 '인문계 학생들이 더 힘들겠다..' 라는 생각도 들었다.

 

수행평가를 도와주면서? 다 도와주고나서 많은 생각이 들었다. 정말 우리나라가 S/W 쪽으로 교육을 많이 시킨다는 생각이 들었다. 내가 중학교 3학년 때 방과후 시간에 파이썬이 생기고, 정보 수업시간에 스크래치를 했는데 지금은 정보시간에 파이썬으로 프로그램 개발까지... 정말 S/W 업계가 활발하게 발전하고 있다고 생각이 들었다.

우리나라에 항상 부족하던 S/W 인재가 발굴될 수 있다는 가능성을 보고 기분이 좋았다. 그렇지만 한편으로는 좀 안타깝기도 했다. 인문계 학생들은 대학 진학을 위해 점수를 받는데 정보시간에 하는 수행평가 때문에 원하는 대학에 못갈 수도 있는 상황이 생길수도 있으니... 그냥 좀 안타까웠다. 정말 하기 싫을수도 있고, 관심이 많이 없을 수도 있을텐데... 점수를 위해 코딩을 해야하는 현실이 좀 마음이 아팠다. 그냥 여러모로 많은 생각이 들었었다.

---

ScoreCounter 개발하기!

 

ScoreCounter는 1대1 게임을 할 때 시작 점수, 목표 점수, 벌칙을 직접 설정할 수 있는 도우미 서비스 입니다.

저는 이 프로젝트를 진행하면서 React Hooks, 함수형 프로그래밍, SCSS와 친해지기 위해 기획했습니다.

 

이 프로젝트를 진행하면서 작성한 코드는 제 깃헙에서 확인하실 수 있습니다!(https://github.com/Bigstar1108/Do_Your_Best/tree/master/scorecounter)

 

블로그에서는 ScoreCounter를 개발하면서 배웠던 지식들, 중요한 코드, 문제 해결 등을 작성하겠습니다!

 

저는 이 프로젝트를 시작하면서 처음으로 SCSS를 접했는데 SCSS를 쓰면서 신기했던 것들을 적어보려합니다!

 

• SCSS = SASS + CSS로 기본틀은 CSS 문법과 동일합니다.
• SCSS를 사용하면서 유용했던 기능이 셀렉터 네스팅과 속성 네스팅이였습니다.
• 여기서 네스팅이란? 서브루틴 중에 다른 서브루틴을 짜 넣는것입니다. 말로 들으면 어려우니 예시 코드를 봅시다.

 

셀렉터 네스팅

//scss
.div {
	p {
    	color : white;
    }
}

//css
.div p { color : white;}

div 안에 있는 p 처럼 하위구조를 가지고 있을 경우, div의 속성 정의 블록 안에 하위에 있는 p가 들어갈 수 있습니다.

이렇게 코드를 작성하면 코드를 분석할 때 훨씬 알기 쉽고 편하겠죠?

 

속성 네스팅

.div {
	p {
    	font : {
        	fmaily: "Noto Sans KR", sans-serif;
            size: 16px;
            weight: 700;
        }
    }
}

축양형으로 묶일 수 있는 속성들끼리도 네스팅이 가능합니다.

 

SCSS도 정말 개발 효율에 도움이 되는 것 같습니다. 개발을 하면서 이렇게 새로운 기술들을 배우면서 개발에 효율이 늘면 정말 기분이 좋습니다.

 

아직 개발 초기라 처음 시도해본 SCSS를 제외한 다른 곳에서는 아직 문제사항이나, 새로운 기술이 없었습니다.

추 후 개발을 진행하면서 더 좋은 지식이 생기면 바로바로 기록하겠습니다 ㅎㅎ.

모든 코드는 위의 깃헙 링크를 들어가 봐주세요 감사합니다 😀

---

2020.07.11. 회고

 

오늘의 목표를 이루었는가?

• Github DYB-Nooks, simplecounter Readme파일 정리하기
• 아는 동생 정보 수행평가 도와주기
• simplecounter를 활용한 scorecounter 개발하기

2020.07.11. 하루를 지낸 소감

오늘 하루는 알차게 보낸 것 같다. 주말을 이렇게 알차게 보낸 날이 얼마만인지 모르겠다.

많은 생각을 했던 하루인 것 같다. 앞으로 S/W 교육에 관심을 더 가지고, 찾아보고 싶다는 생각이 든다.

그리고 앞으로 많은 프로젝트를 진행하면서 새로운 기술들을 많이 접목해서 개발해야겠다. 이번 프로젝트에서는 SCSS를 접했고, 지금 개발이 끝나고 난 후 TypeScripts를 접해야겠다. 

ScoreCounter 개발이 완료되면 TypeScripts를 활용해서 리팩토링 해야겠다. 그리고 반응형 웹을 개발해봐야겠다. SCSS를 사용해서 반응형 디자인을 개발해봐야겠다.

음,.. 오늘 하루는 너무 많은 것을 한 것 같다. 그냥 많이 피곤하고, 피곤한만큼 알찬 하루였다. 앞으로도 이렇게 열심히 살아야겠다. 모든 인문계 학생들과, 마이스터고 학생들 그냥 대한민국에 사는 모든 학생분들 힘내셨으면 좋겠어요.

앞으로 좋은일들만 있을거니까, 너무 힘들어하지말고 지금 해야하는것에 최선을 다하셨으면 좋겠습니다.

오늘도 긴 글 읽어주셔서 감사합니다. 좋은하루 보내세요 😀🥰

 

아래는 이 글을 쓰면서 도움을 받은 링크입니다.

저의 글보다 훨씬 더 좋은 영상과 자료들이 많으니 아래의 사이트도 한 번씩 들어가보시는 것을 추천드립니다!

 

SCSS - https://velog.io/@psm8873/SCSS

리액트 Hooks 공식 문서 - https://ko.reactjs.org/docs/hooks-intro.html

React-Redux Hooks - https://levelup.gitconnected.com/react-redux-hooks-useselector-and-usedispatch-f7d8c7f75cdd

 

저의 깃헙 링크도 첨부하겠습니다. 공부하면서 작성한 코드가 있으니 들어오셔서 봐주시면 감사하겠습니다!

Bigstar1108 - https://github.com/Bigstar1108/Do_Your_Best