객체지향 프로그래밍 실제 적용해서 만들어보기 part 3(스테픈 2km완료)
마지막으로 간단하게 배치정도만 scss로 처리하려고 합니다.
디자인 적인 부분이라 딱히 포스팅할 만한 내용이 아닌것 같지만
SCSS는 타입스크립트처럼 컴파일 과정이 필요합니다.
브라우저에서 읽을 수 있는 파일은 html , js, css 파일만 가능하기 때문입니다.
컴파일러는 vscode 확장프로그램에서 다운이 가능합니다.
리엑트에서 작업할때는 웹팩에 컴파일러가 포함되어 있어
따로 다운받을 필요는 없었지만
직접 작업하게된 이번 프로젝트는 전부 수동으로 세팅을 해야합니다.
npm install -g node-sass
설치 후에
세팅화면에서 컴파일후 출력시킬 파일 경로를 지정해줘야합니다.
전 일단 dist폴더에 css 폴더로 하긴 했는데 그냥 ./로 지정하면 현재 폴더에 바로 컴파일이 되니 그게 더
사용하긴 편하겠네요
컴파일된 파일을 html에 연결했습니다.
여기부턴 기본적인 css와 같습니다.
여기 부분이 중요한데요
scss에서는 선택자내부에서 &를 사용하면 보통 자기자신을 가리킵니다.
이걸활용해서 p태그에서 done과 notdone 으로 분리하여 서로 다른 효과를 넣었습니다.
scss에서는 이렇게 간단하게 표현하게 되었지만
이걸 css로 작성한다면
컴파일러는 이런식으로 나타내고 있군요
구동이 잘되는지 확인해보겠습니다.
update 메서드에서 제가 생각하는것과 조금 다르게 동작하는 부분이 있어서
내용을 좀 수정했습니다.
바로 이 부분인데요
id부분과 dataset부분의 값이 일치하는 경우 index부분에 id를 넣어서 처리했더니
오류가 발생했습니다.
고민을 좀 해봤는데요 리스트의 목록이 사라지게되면 id는 8번을 가리키고 있어도 실제 리스트에 값이 3개만 있다면
list[8] 이런식으로 표시할때는 오류가 발생하는게 맞네요
그래서 인덱스값으로 변경했습니다.
자 완성된 투두 리스트입니다.
클래스로 정의된 부분만 제외하면 실제로 사용되는 코드는 적어지네요
코드의 가독성이 정말 좋아진것 같습니다.
정리하자면
객체지향 프로그래밍은 프로그래밍의 패러다임중 하나이고
프로그래머에게 프로그래밍 관점을 가지게 하고 코드를 어떻게 작성할지 결정하는 역할을 합니다.
명령형 프로그래밍 : 무엇(What)을 할 건지를 나타내기보다 어떻게(How)를 할 건지 설명하는 방식
절차지향 프로그래밍 : 수행되어야 할 기능을 순차적인 처리 과정으로 진행하는 방식
객체지향 프로그래밍 : 객체들의 집합으로 프로그램의 상호작용으로 진행하는 방식
프로그래밍의 트랜드는 정말 빠르게 발전하는것 같습니다.
객체지향 프로그래밍을 직접 코드에 도입해보니 코드의 가독성과 유지보수에는 정말 좋다고 느껴지지만
확실히 절차적으로 코딩을 하는것보다는 고민할게 많아서
시간이 더 걸리는것 같습니다.
주석을 예쁘게 다는 습관을 기르기 위해
해당 클래스에 주석도 달아봤습니다.
주석을 이렇게 달아두면
나중에 까먹더라도
혹은 다른 사람이 제 코드를 볼때 조금이라도 쉽게 볼 수 있겠지요
지금부터라도 습관들여야겠어요
https://yonggyu01.github.io/todo_typescript/
완성된 TODO리스트입니다.
타입스크립트와 scss를 사용해서 만들었는데
전체 화면에서 보면 좀 어색할 수 있겠네요
모바일에 자연스럽게 보이도록 %로 화면을 구성했습니다.
max-width를 지정해서 모바일하고 컴퓨터에서도 크게 차이 없게 보이는 방향으로 다시 수정할까 고민중입니다.
https://github.com/yonggyu01/todo_typescript
완성된 코드는 여기에서 확인할 수 있습니다.
스테픈 2km완료했다.
