Giter Club home page Giter Club logo

chromemomentum_clone's Introduction

chromemomentum_clone's People

Contributors

nninzy avatar

Stargazers

 avatar

Watchers

 avatar

chromemomentum_clone's Issues

찾아오는 리뷰서비스

개선점:

1. 주석 종류 번경

함수명위에 붙는 주석은 /***/ 를 사용해서 달면 더 좋을것같습니다.
마우스 커서를 올렸을때, 해당 주석이 표시되는 기능을
제공합니다
설명주석

아직은 clock.js에밖에 주석이 달려있지 않지만, 주석 스타일을 살펴보기엔 충분했습니다.
깔끔하고 간결하게 잘 작성하시는것 같아요.

###2. input 공백 비허용

Todo와 오늘의 목표에 아무것도 입력하지 않고 엔터를 쳐도, 공백으로 추가가 됩니다.
의도하신게 아니라면, 입력 값이 없는 경우에 대한 처리를 추가하시면 좋을거같아요
emptyTodo

ex)
js를 이용하여 해결

if (input.value ==="") {
    return input.placeholder ="공백은 곤란합니다"
} else { 
todo 추가하기
}

html을 이용하여 해결

input required

좋은점, 신박한점:

0. 반응형 디자인

브라우저의 사이즈를 마구마구 변경해도 반응형으로 잘 변화되어 디자인의 틀이 깨지지 않습니다.

1. 변수만 구현

배경화면을 새로고침 시에만 변경하기 위해,
별도의 함수를 사용하지 않고 하나의 변수만을 이용한 점이 참신했습니다.

2. 클래스 명명

또한, CSS 클래스명이 잘 정리되어 있어서,
CSS를 읽으면서 바로 HTML 구조를 머릿속에 그릴 수 있었습니다.
결과적으로, 제가 작성한 CSS보다 이해하기 쉬웠네요...

배운점, 도움이 된점

1. CSS

border-radius와 padding을 제외한 대부분의 값에
px이 아닌 %와 rem, vw, vh 값을 사용하신것을 볼 수 있었습니다.

반응형 디자인에대한 고민이 많았는데 길을 찾았습니다.
제 사이트는 사이즈 번경시 컴포넌트가 전부 탈출하는
코드에서 px를 치우면서 리팩터링 해야겠습니다.

2. 객체지향 아이디어

객체지향에 대한 관심은 많았는데, 자바스크립트에서 class 설계를 위한 코딩은
예제 따라치기 말고는 한번도 안해봤습니다.

미구현 파트에대한 코드를 미리설계해놓으신걸 보고,

login시 hidden 값이 번경되며, localStorage를 사용하는 구성요소들을 위한
class를 만들수 있겠다는 생각이 들었습니다.

class ComponetUsingLocalStorage {

	//localStorage key와 tag로 초기화
  	constructor(storageKey, displayElement) {
    	this.storageKey = storageKey;
    	this.displayElement = displayElement;
  }

  load() {
	const savedData = localStorage.getItem(this.storageKey);
	if (savedData !==null ) {
	return JSON.parse(savedData)
	} else { 
	return null
	}
  }

  save(data) {
    localStorage.setItem(this.storageKey, JSON.stringify((data));
  }

  hide() {
    this.displayElement.classList.add("hidden");
  }

  show() {
    this.displayElement.classList.remove("hidden");
  }
  
}
const user = ComponentUsingLocalStorage("USERID", loginDiv);
const diary =ComponentUsingLocalStorage("DIARY", diaryDiv);

/**
*대충 길고 많은 코드들
*/

if ( user.load() !== null) {
	user.hide();
	diary.show();
	diaryArray = diary.load();
		
} else { user.show() } 

이런식으로요.

하지만 유투브가 복잡하다그래서.. 유투브 공부 이후에
리팩터링하는게 나을거같아요

궁금한점

1. key.js를 따로 분리한 이유가 무엇인가요?

2. 어떤 코드스타일을 사용중이신가요?

todo.js의 함수하나의 코드가 굉장히 길고 들여쓰기 및 띄어쓰기가 되어있지 않습니다.
하지만 전체적인 코드스타일이 굉장히 깔끔하여 실수라고 생각되지는 않습니다.
혹시 의도하신것이라면 어떤 스타일을 따르고 계신것인가요?

"배움은 누구도 챙겨주지 않고 내가 훔쳐 먹는 것이다"
이 문구를 보고 리뷰를 남깁니다.

사실 원래도 말안하구~ 노션 양식이랑 문서작성법 참고하고 있습니다~
그리고 덕분에.. 정말 신기하게도.. 사람들이랑 (제생각에는)잘 어울리고 있습니다.

여러가지로 감사합니다~

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.