section1/unit12/Coz’ Mini Hackathon(9/15~16)

블로깅 주제

• Coz’ Mini Hackathon

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• '나만의 아고라 스텡이츠 만들기' 프로젝트는 계산기 만들기 프로젝트를 진행할 때 보다 10배는 정신없고 어려웠다. 어제, 오늘 약 이틀간 정말 열심히 했다. 밤 늦게까지 코딩해본건 학부생 이후로 오랜만인 것 같다. 비록 Advanced mission인 페이지네이션과 로컬스토리지 구현까지는 해보지 못하고 제출했지만, 꼭 개념과 적용 방식을 이해해서 구현에 성공해보고 싶다! 이 프로젝트를 통해 DOM과 css 이해도를 높일 수 있었던 것 같아 뿌듯했다. 어드벤스드 미션을 꼭 구현해보고 싶었는데 웹 개발이 처음이고 관련 지식이 없다보니 구글링을 해서 개념을 익혀도 적용하는데 있어서 상당한 어려움을 겪었다. 조금 속상했지만 스터디원분들과 함께 소통하며 늦게까지 코딩하는 과정 자체는 매우 즐거웠다. 애증의 아고라 스테이츠 만들기 프로젝트였다!!! ㅋㅋㅋㅋ 
• 이제 하루만 더 하면 unit1이 끝이다. 교육을 처음 시작한 날에 비해 나는 성장했을까? 그래도 아주 조금은 성장한 것 같다. 적어도 css가 예전보단 익숙해졌다고 느끼고, 자바스크립트로 직접 웹페이지도 만들어보고 배포까지 해봤으니까. 어드벤스드미션을 해결하지 못해서 자신감이 조금 하락하긴 했어도.. 베어미니멈을 스스로 끝내지 못한 것은 아니니 그 점은 다행이라고 생각한다. 

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• Coz’ Mini Hackathon

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

Coz’ Mini Hackathon: 나만의 아고라 스테이츠 만들기

 

나는 Bare minimum request 및 Advanced Challenge의 현지 시간 적용까지 구현했다.

목요일~금요일 정말 끙끙대며 구현했더니 애정과 증오심이 동시에 차오른다...

그래도 항상 flex 등의 css 개념들이 이해되지 않아 애를 먹었는데, 이번 기회를 통해 css 여러가지 기능도 구현해보며 이해도가 조금은 상승하지 않았나싶다.

그리고 이번 기회를 통해 처음으로 웹 페이지 배포까지 해보았다.

Advanced mission까지 완료한 후 제출했으면 참 좋았을텐데..미련이 계속 남는다.

구글링을 아무리 해봐도 페이지네이션과 로컬스토리지를 어떻게 적용해야할지 감이 안왔다.

페이지네이션은 꼭 성공해보고싶었는데! ㅠㅠ 

조금 더 배우고 실력을 쌓으면 언젠간 나도 어려움없이 다양한 기능들을 구현할 수 있는 날이 오리라 믿는다.

이번 주말은 푹 쉬어줘야겠다. 비교는 어제의 나와 하는거니까! 작은 부분이라도 배웠으면 된거다.

---

★ Advanced mission  ★ 

▶ localStorage

1. localStorage란?

localStorage를 사용하면 브라우저에 key-value 값을 Storage에 저장 가능하다.

저장한 데이터는 세션간에 공유되어 세션이 바뀌어도 저장한 데이터가 유지된다.

• setItem() - key, value 추가
• getItem() - value 읽어 오기
• removeItem() - item 삭제
• clear() - 도메인 내의 localStorage 값 삭제
• length - 전체 item 갯수
• key() - index로 key값 찾기

2. localStorage 사용법

localStorage 에는 문자열만 저장된다.

따라서, localStorage에 객체나 배열를 저장하기 위해서는 객체 또는 배열을 문자열로 변환해서 저장해야 한다.

1. JSON.stringify() 함수를 사용하여 객체와 배열을 JSON 문자열로 변환한다.

const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr);

2. 객체와 배열을 JSON 문자열로 변환 후, setItem을 사용하여 JSON 문자열을 localStorage에 저장한다.

window.localStorage.setItem('person', objString);
window.localStorage.setItem('nums', arrString);

3. localStorage에 저장한 데이터를 getItem을 사용하여 가져온다.

const personString = window.localStorage.getItem('person');
const numsString = window.localStorage.getItem('nums');

4. 가져온 데이터를 사용할 때는에는 JSON 문자열을 객체, 배열로 변환하도록 한다.

const personObj = JSON.parse(personString);
const numsArr = JSON.parse(numsString);

참고한 사이트)

https://hianna.tistory.com/697

[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등)

---

레퍼런스를 보며 로컬 스토리지와 페이지네이션의 적용법에 대하여 공부하였다.

코드를 보며 차근차근 이해하고 내 프로젝트에도 적용시켜보았다. 

지금은 경험이 부족해 레퍼런스를 보며 이해하는 수준이지만, 더 배우고나면 스스로 구글링하며 구현할 수 있으리라는 기대감을 가져본다. 

주말에는 쉬려고 마음먹었는데, 레퍼런스 코드 올라온 것을 보고 내 코드에도 너무 구현해보고 싶어 결국 노트북을 켜버렸다 ㅋㅋㅋ

내 프로젝트에도 적용해보니 어드벤스드 미션을 구현하지 못했던 미련이 좀 사라지는 것 같다...ㅎㅎ

 

이제 진짜 unit1 솔로 프로젝트가 종료된 느낌이다!

레퍼런스 없이는 어드벤스드 미션 내용인 페이지네이션과 로컬스토리지를 적용하지 못했을 것 같지만,

그래도 레퍼런스 코드를 보며 이해하려고 노력해보고 공부해본게 어딘가!

어제의 나보다 조금이라도 나아졌으면 된거다. 잊지말자:)