사실 제가 처음에 구상했던 디자인은 다음과 같은데요, figma를 활용해서 직접 디자인 하고 구현해 나가면서 구상한 대로만 나와주길 기대했었지만 생각보다 쉽지 않았습니다🥲 하지만 저는 원래 css와 디자인적인 요소를 많이 다루었다면 이번 기회를 통해 vanilla-JS로 기능 구현을 하면서 좀 더 기능적인 요소에 재미를 느꼈습니다. 또한 React에 익숙해져서인지 vanilla-JS 만으로 기능을 구현하는 것이 어색했지만, 리액트가 이런 문법을 기반으로 만들어졌구나 하는 기초를 다질 수 있는 기회가되었습니다. 로컬 스토리지와 삭제 버튼 애니메이션까지 완성 할 수 있었다면 얼마나 좋았을까 하는 아쉬움이 많이 남아 미션제출 이후에도 시간이 남는다면 좀더 완성해 보고 싶습니다. 간단한 todo 리스트이지만, 사용자 입장에서 디자인을 구상하다보니 overflow 처리도 깔끔하게 하면 어땠을까 하는 생각도 드네요.
-
DOM은 무엇인가요?
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 자바스크립트의 경우에는 각 태그를 노드로 하여 렌더트리를 만든다.
-
HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
insertAdjacentHTML, createElement가 있다. insertAdjacentHTML는 가독성은 좋지만 보안 이슈가있고, createElement는 HTML element를 생성할때마다 dom tree 자료구조를 탐색해야하기 때문에 js의 성능을 저하시키지만, 이번 과제를 통해 구현할 때는 appendChild()를 통해 부모자식 관계를 인지하기가 더 쉬웠고, JS 가독성도 좋다고 느껴졌다.
-
Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?
비교적 익숙하지 않은 태그를 설명해보면, section : 문서의 부분을 의미하는 태그로, section 안에 section을 넣을 수 도 있고, article을 활용해 내용을 넣을 수도 있다. nav : 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의 한다. article : 독립젹인 글을 다루는 데 사용하는 태그입니다. 독립적으로 배포하거나 재사용 할 수 있는 독립형 콘텐츠를 정의한다. 시멘틱 태그는 다음 3가지의 이점이 있다.
- 접근성 향상
- 검색엔진최적화
- 가독성 향상
-
Flexbox Layout은 무엇이며, 어떻게 사용하나요?
flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 가로 세로 축을 정할 수 있고, 유연하기 때문에 반응형 웹 제작에 용이하다. align-items는 교차축을 기준으로 요소를 배치하고, justify-content는 기본축을 기준으로 요소를 배치한다.
-
JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?
자바스크립트는 인터프리터 언어이기 때문에 컴파일이 필요한 다른 언어에 비해 시간이 적게 소요된다. 또한 서버로딩이 브라우저 자체에서 데이터 유효성 검사를 할 수있다는 이점이 있다. 그외에도 프론트 언어로서 풍부하 인터페이스가 있다는 점이 이점이다.
-
코드에서 주석을 다는 바람직한 방법은 무엇일까요? 제 3자가 코드를 읽었을때에도 막힘 없이 이해 할 수 있도록 달아야한다.따라서 정보를 제공하고, 의도를 설명하며 나아가서는 결과에 대한 경고까지 다른 사람이 내 코드를 실행했을 때 문제가 없도록 해야한다.