o-kreator / nyong-studio Goto Github PK

하이퍼링크가 구현되어야 하는 DOM을 일일이 찾아 리스너를 등록하는 방식도 좋지만,
이전에 모 프로젝트를 도왔을 당시, a 태그의 href를 분석해 사이트 내부를 가리킬 경우,
이벤트 리스너를 등록하는 방식 또한 구현이 가능했던 것으로 기억합니다.

퍼포먼스에 어떤 영향을 미칠까요? 다른 이슈들과 충돌이 되지 않을까요?
고민이 필요합니다.

SPA의 경우 첫 로딩 시간이 오래 걸린단 단점이 존재합니다.
미관상으로나 사용자 경험상으로나 로딩 스크린이 있으면 좋을 것입니다.

간단하게, 흰 배경에 로고가 정 중앙에 있으면 괜찮을 것 같네요.

• HTML 문서에 로딩 스크린 구현
• CSS를 이용한 간단한 스타일링
• JavaScript를 이용해 Document가 모두 로드되었을 시 사라지도록 기능 부여

갤러리에서 그림을 본 후 이전 상태로 돌아갈 시, 스크롤의 위치가 맨 위로 초기화됩니다.
이는 당연히도 UX에 좋지 않은 영향을 끼칠 것이라 판단됩니다.

갤러리에서 그림을 클릭했을 당시의 스크롤 위치를 기억한 후,
다시 돌아갈 시에 해당 스크롤 위치로 이동해 있으면 될 것 같습니다.
실제 구현이 어떻게 될 지 모르니 연구가 필요합니다.

CSS는 거의 완성되었다고 봐도 무방합니다.

이 쯤에서 코드 정리 및 경량화를 위해 Sass 적용이 필요하다고 판단됩니다.
아직 Sass에 대한 지식이 전무하므로, 관련 Documentation을 보면서 천천히 적용해야겠습니다.

현재는 html에 해당 부분을 미리 작성한 후, 그것의 클래스를 조작해 내용을 변경했지만,
이러한 방식은 조금 outdated 하다는 의견을 받았습니다.

차라리 고정된 템플릿을 하나 만들고 그 안의 내용물을 바꿔치기 하는 것이,
퍼포먼스도 훨씬 나으니, 구조 변경이 어떻냐는 제안을 받았습니다.

기존의 코드를 좀 많이 갈아 엎어야 한다는 게 걱정이지만, 차후 천천히 적용키로 하겠습니다.
해당 프로젝트는 계속 학습하면서 발전하는 것을 궁극적인 목표로 삼았으니까요.

마치 실제 웹 페이지처럼, '뒤로 가기' 나 '앞으로 가기' 가 가능했으면 좋겠습니다.

Router나 History API에 대한 학습이 필요합니다.

어플리케이션이 '일단은 보여질 수 있는' 상태에 가까워지고 있습니다.
데이터의 구조는 변할 확률이 없다고 판단되니, 슬슬 실제 데이터를 넣어도 되지 않을까 싶네요.

제 멋진 작품들과 그것에 대한 설명들을 찬찬히 넣어볼까요?

UI와 데이터 관리 액션을 ./script.js 에서 모두 관리하는 방식은 좋지 않습니다.

맡는 역할마다 코드를 분리하는 방법을 권장드립니다.

모델과 뷰, 컨트롤러(MVC)나 Vue/React에서 얘기하는 MVVM 패턴을 권해드릴 수 있겠네요.