Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Seal 1주차 #28

Merged
merged 21 commits into from
Mar 21, 2022
Merged

Seal 1주차 #28

merged 21 commits into from
Mar 21, 2022

Conversation

parksil0
Copy link
Contributor

@parksil0 parksil0 commented Mar 15, 2022

🔎 개요


📝 진행상황

  • 각 화면 분리
    • 로그인, 회원가입을 아예 페이지 단위로 나누었어요.
    • 그래서 페이지는 로그인, 회원가입, 메인 페이지 총 3 페이지입니다.
  • 각 클래스 메서드 분리
    • 하나의 메서드는 하나의 역할만 하도록 메서드를 분리했어요.
      • api 요청 관련 로직은 그다음 pr에서 올릴 예정입니다.
    • 처음에 controller, model view로 나누려고 했는데, 굳이 나눌 필요가 없을 것 같아 화면 단위로만 나눴어요
      • 메인 페이지의 explore, saved 탭이 있어, 탭을 구현하고, 컨트롤러로 각 화면의 display를 다룰까 하다가, 다른 페이지도 똑같이 구현해야 할 것 같아서 이 부분은 아직까지 고민중이긴 해요 ㅋㅋ
      • 그래서 커밋 중에 refactor : mvp 패턴 간소화 라는 메세지가 있는데, 이 부분은 실수입니다..!
  • 기타 마이너 한 부분
    • 유틸 함수를 만들었어요
    • 하드코딩 된 부분은 상수화 처리 했어요.

🖼 스크린샷

💬 의견

  • 많은 리뷰 부탁드립니다~

@parksil0 parksil0 changed the title Seal Seal 1주차 Mar 15, 2022
Copy link
Contributor

@dhrod0325 dhrod0325 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드가 정리가 잘되어서 보기가 너무 좋아요! 다음 커밋이 기대됩니당!

packages/seal/src/constant/index.js Outdated Show resolved Hide resolved
packages/seal/src/views/LoginView.js Show resolved Hide resolved
Copy link
Member

@InSeong-So InSeong-So left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스를 활용하여 최대한 비슷한 맥락으로 짜려는 노력이 보였어요! 아직 완성된 것은 아니겠지만, MVC의 View 부분을 많이 구현했는데 현재까지는 C 역할도 같이 하는 듯 보이네요👀

고생 많았어요, 씰! 잘 보고 가요🤗

packages/seal/src/helper/localstorage.js Show resolved Hide resolved
packages/seal/src/views/LoginView.js Outdated Show resolved Hide resolved
packages/seal/src/views/LoginView.js Show resolved Hide resolved
packages/seal/src/views/LoginView.js Show resolved Hide resolved
packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
Comment on lines 88 to 105
switch (tab) {
case 'saved': {
saved.style.display = 'block';
container.style.display = 'none';

this.renderBookmark();
break;
}
case 'explore': {
saved.style.display = 'none';
container.style.display = 'block';

this.globalIndex = 0;
this.loadMore();
break;
}
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

switch-case 문보다 괜찮은 방법은 없을까요? 2개 조건밖에 없는데 과도한 느낌이 듭니다. if문 하나로도 처리할 수 있을 것 같아요✍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 고민 했는데, 확실히 탭 별로 구분하기 위해서 코드가 길어지더라도 switch-case 문을 넣었습니다. 단순 if문으로 분기 처리를 해도 가독성을 보장할 수 있을지는 조금 의문이긴 합니다..!!

packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
Copy link
Contributor

@dhrod0325 dhrod0325 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드를 정말 읽기 좋고 이쁘게 잘 작성하시는거 같아요!

많이 배웠습니다! ^^

packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
packages/seal/src/views/MainView.js Show resolved Hide resolved
packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
packages/seal/src/views/MainView.js Show resolved Hide resolved
packages/seal/webpack.config.js Show resolved Hide resolved
packages/seal/src/views/SignupView.js Show resolved Hide resolved
packages/seal/src/views/LoginView.js Show resolved Hide resolved
packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
Copy link
Member

@InSeong-So InSeong-So left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고민을 많이 하고 UI/비즈니스를 분리하기 위해 구조를 짰다는 생각이 많이 드네요🙌 고생했어요 씰!

packages/seal/src/helper/localstorage.js Show resolved Hide resolved
Comment on lines +61 to +70
loadMoreWithDebounce() {
return debounce(() => {
const container = $('.container');
const pinList = [];
for (let i = MAIN_EXPLORE_PAGE_PER_AMOUNT; i > 0; i--) {
pinList.push(this.createPin());
}
container.innerHTML += pinList.join('');
}, 500);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

디바운스 함수를 클로저로 처리했는데, 스코프를 숨겨야 하거나 로컬 변수를 유지할 목적이 아닌 것 같은데... 의도를 알 수 있을까요?👀

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스 내부의 메소드 컨벤션이 일반 함수 형태로 되어 있는데, debounce를 wrapping하게 되면 화살표 함수로 만들어야 되는 것 같더라고요.. 그래서 통일성 있게 만들고자 좀 억지스러운 모양이 나오긴 했습니다.

packages/seal/src/views/MainView.js Outdated Show resolved Hide resolved
@parksil0
Copy link
Contributor Author

@InSeong-So 하나의 pr이 너무 길어지는 것 같아요! 이제 머지하고 다음 pr로 이동할까 하는데, 어떻게 생각하시나요?

@InSeong-So
Copy link
Member

이렇게 열심히 PR하고 코드 리뷰를 할 줄 몰랐는데... 다음 세션 때는 방법을 좀 개선해서 공지해야겠네요!

@InSeong-So InSeong-So merged commit 53f6392 into pagers-org:main Mar 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants