코드스테이츠 수업이 9시부터 시작하기떄문에 일부로 일찍 새벽에 일어나서 작업을 추가 적으로 해보았다.

일단 기본적인 html과 css작업을 완료를 하였기 떄문에 js를 손보았다.

내가 추구하는 것은 좋아요를 누르면 버튼이 바뀌고 버튼이 바뀌게 되면
favorite목록에 추가되기를 원했다.

html

일단 html을 js로 다루고자 수정을 하였다.

React같은 경우에는 이런 과정이 필요없지만 나는 현재 React를 사용하는 것이 아니기 떄문에 html을 지워주었다.

지운 부분은 메인 음식이 보이는 화면이다.

메인 음식이 보이는 화면은 랜덤으로 새로 고칠떄마가 새로운 음식이 나와야 하기때문에 동적으로 작동을 해야 한다.

그러기 떄문에 js로 다루어 주었다.

• html로 다루게 되면 정적이기 떄문에

js - 1

일단 기본적으로 fetch를 사용을 하였다.

전에 있던 api링크에서 랜덤으로 값을 가져오는 api를 가져왔고

값을 가져온뒤에 다음 코드들이 실행이 되어야 하기 떄문에 async, await를 활용 하였다.

이후 json처리하여 읽을수 있는 값으로 수정후 로그를 보고 내가 필요한 값을 가져왔다.

이후 값을 다 가져오게 된다면 화면에 띄워주는 함수를 실행하게 해주었다.

• addMeal()

일단 div태그와 class를 지정해 준뒤

innerHTML을 이용하여 직접 값을 넣어주는 방법을 선택했다.

• 사실 innerHTML은 보안상으로 매우 좋지 않은 방법으로 알고 있다.
• 하지만 다른 방법이 떠오르지는 않았고..ㅠㅠ
• textcontent등 이러한 메서드들은 너무 복잡하기도 하고 연습용으로 만들어 보는 것이기 떄문에 간편한 innerHTML를 활용 하였다.

그다음에는 버튼을 눌렀을떄 색이 변하는 과정을 추가해 주었다.

나 같은 경우에는 영상속 그분은 간단하게toggle를 활용하여 값을 바꾸어 주었는데 나는 if문을 활용하여 값이 있을떄 없을떄를 확인하였다.

• 후에 그분도 if문을 활용하였는데 그 이유는 좋아요를 눌렀을떄 local저장소에 값이 추가되기를 원해서 이다.

updateSt, removeSt이 두 함수는 모두 좋아요를 눌렀을떄 값이 local에 추가되고 삭제되는 역할을 한다.

js - 2

• local저장소에 값이 추가되고 삭제되는 코드이다.

나는 이부분에 대해서 지식이 전무하여서... 영상을 참고 하였다.

값이 저장되는지 확인하는 방법은
개발자 도구 - 저장공간 - 로컬 저장 공간
을 확인하면 알수가 있다.

getMeals

일단 mealIds는 localStorage에서 mealIds라는 이름의 값을 가져오는 역할을 한다.

• 이떄 처음에는 localStorage에는 저장된 값이 없기 떄문에 null값이 나오게 되고 삼항 연산자를 통해서 빈배열을 return해준다.

updateSt

버튼을 눌렀을떄 = 버튼에 클래스가 추가 되었을떄 작동을 한다.
getMeals의 return값을 받아와서 값을 로컬저장소에 저장을 한다.

• 처음에 값이 없으면 빈배열이 받아오게 되어서
• mealIds는 빈배열이지만 spread코드를 이용하여 일단 뿌려주고
• 인자로 받은 mealId값을 저장해 준다.

spread를 사용하는 이유는 후에 값이 여러개 있는경우에 그 값을 유지해야 하기 떄문이다.

removeSt

이 코드는 단순히updateSt와 완전히 반대되는 역할을 하기 떄문에 부가적인 설명은 하지 않겠다.

후기

오늘 밤에도 작업을 할수 있으면 할것이다.

하지만 오늘은 알고리즘 문제를 좀더 풀어볼까 생각중이고 너무 지치게 된다면 그떄 다시 이 작업을 시도 해볼 것이다.

다음에 할 작업은 로컬저장소에 있는 값을 이제 화면에 띄워주는 작업을 해야한다

• 좋아요 목록에 추가하는 작업