크롬 앱, momentum 클론 코딩

퇴사 전에, 프론트엔드 프리랜서 분께서 니콜라의 클론코딩을 추천해주셨다.

신입이면 클론코딩 해보는 것 만으로도 배우는게 많을 것이라며 구직활동 쉬는 동안 해보라고 하셨다.

책만 읽는 것보단 실제로 코드를 쳐보는게 좋은데, 기획이나 디자인이나... 그런 것 신경 쓰다 보면 프로젝트가 엄청 밀릴게 뻔했다.

그래서 하루에 동영상 10분짜리... 하나씩이라도 하자! 하고 시작한 구글 크롬앱 클론코딩이다.

css는 완벽하진 않지만, 기능만큼은 똑같이 구현이 되었다.

나중에 css를 다시 공부 할 때, 여기에도 적용을 해봐야 할 것 같다.

 

🥨 console.log( )와 console.dir( )

console.log(object) : 콘솔에 메세지를 보여줌 & html과 같은 트리 구조로 출력

console.dir(object) : 특정 object를 JSON과 같은 트리 구조로 출력하여 보여줌

일반적으로 콘솔을 찍을 때, 별 차이는 못느꼈다.

하지만 console.dir은 DOM요소를 콘솔로 확인할 때 DOM JS 객체를 전체로 보고 싶을 때 쓰면 좋다고 함!

# console.log(localStorage); Storage {todos: "[{"id":1,"text":"이력서 준비하기"},{"id":2,"text":"경력증명서 서류 우편 부치기"}]", currentUser: "yerimm", coords: "{"latitude":22.6960909,"longitude":12.7654128}", length: 3}

 

# console.dir(localStorage); Storage coords: "{"latitude":22.6960909,"longitude":12.7654128}" currentUser: "yerimm" length: 3 todos: "[{"id":1,"text":"이력서 준비하기"},{"id":2,"text":"경력증명서 서류 우편 부치기"}]"

 

크롬 데브툴즈에 가면 더 많은 콘솔의 종류를 확인 할 수 있다!

https://developers.google.com/web/tools/chrome-devtools/console/api#log

이미지 썸네일 삭제

Console API Reference  |  Chrome DevTools  |  Google Developers

Use the Console API to write messages to the Console.

developers.google.com

 

🥨 JSON.stringify( )와 JSON.parse( )

JSON.stringify( ) : javascript 값이나 객체를 JSON 문자열로 변환

JSON.parse( ) : JSON 문자열의 구문을 분석하고, javascript 값이나 객체를 생성

JSON 문자열은 { 안에 들어있는 스트링 }

문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON으로 작업하기 - Web 개발 학습하기 | MDN

 

const parsedCoords = JSON.stringify(localStorage.getItem(COORDS));

# 결과

"{\"latitude\":37.6960909,\"longitude\":126.7654128}"

 

const parsedCoords = JSON.parse(localStorage.getItem(COORDS));

# 결과

{latitude: 37.6960909, longitude: 126.7654128}