o-kreator / nyong-studio

Website of 'Nyong Studio'.

개인 아티스트 브랜드 '도로뇽'의 웹 사이트, '뇽 스튜디오'의 소스코드입니다.

Features

• SPA(Single Page Application) made with MVC pattern
• Image Gallery made automatically with JavaScript
• A lot of ugly Scss to style its look pretty

Built With

• HTML5
• Scss
• Vanila JavaScript
• Parcel

Updates

• 0.1.1
  • add: index section
  • refactor: modulate Scss
• 0.1.0
  • Redesigned, Rewrited Everything!
  • add: Parcel and Scss
  • chore: apply basic MVC model, ready for re-markup
• 0.0.3
  • add: function erasing event listeners of works' list
  • add: style of works' view page
  • fix: make removing events global
  • 레포지토리 공개로 설정 변경
• 0.0.2
  • add: basic Structure of works' list page
  • add: template engine for works' list
  • add: works' view section
  • style: modify some code format
• 0.0.1
  • add: index.html
  • add: main contact menu and media queries
  • feat: basic SPA structure

Authors

• Doro-nyong - Director, Designer, Publisher, Front-end. All of them!

Thanks to

• RanolP - 꾸준한 코드 리뷰 감사합니다.
• Danuel - 꾸준한 코드 리뷰 감사합니다.
• SDSkyKlouD - PR 감사합니다.
• x86chi - PR 및 이슈 감사합니다.
• Alex4386 - PR 감사합니다.

License

Copyright (c) Doro-nyong ALL RIGHTS RESERVED
다른 누군가가 소스코드를 자신의 저작물에 직접 사용하는 것을 허용하지 않습니다.

Contributing

누구든 fork 및 PR을 해주셔도 괜찮습니다. 코드 리뷰를 해주시면 더욱 감사합니다.
단, 직접적인 소스 코드 수정의 반영을 요구하는 것은 지양해주세요.

nyong-studio's Issues

a 태그에 자동으로 이벤트 리스너를 넣도록 하기

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

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

페이지 이동에 따른 History 조작 기능 구현

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

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

템플릿 방식으로 구조 변경

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

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

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

Loading Screen 만들기

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

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

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

MVC 구조 차용 건의

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

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

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

Sass 적용

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

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

Placeholder 대신 실제 데이터로 교체하기

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

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

Works' List 및 Works' List Wide로 돌아갈 시 당시 스크롤 기억하기

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

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