SWDC - 프론트엔드 스터디

원래 어제 썼던 백엔드 스터디나 이번에 쓸 프론트엔드 스터디, 둘 중 하나만 선택해야하지만 나는 백엔드를 빨리 끝내서 둘다 할 수 있었다. 그래서 아무 생각 없이 프론트엔드 스터디에서 React를 하기로 결심했다.

 

난 처음에 useState와 useEffect가 HTTP의 응답코드를 전달하는 함수인줄 알았다. 한번 실행해보니까 내가 input에서 입력하면 변수의 값이 실시간으로 바뀌었다!  좀 연구해보다가 미션제출을 하였는데

Mission 15, 16이 Mission 14에서 다 만든 기능이라 14번 코드로 클리어 했다.

 

localStorage는 사용해보니까 Web Cookie 느낌이 들었다. 그래서 클라이언트에서 쓰이는 쿠키(?)로 이해하였다. 그래서 좀 간단하게 끝낼수 있었다.

 

드디어 마지막 미션 요놈은 1시간 30분만에 완성해야해서 기능을 많이 넣지 못했다.

App.js는 기본적인 틀만 잡고 Base_Templete에 메모 기능을 주었다.

 

그리고 Base.js는 코드가 생각보다 길다. 그래서 간단하게  알고리즘만 설명하면, 글을 쓰다가 Save버튼을 누르면 쓴 내용을 localStorage에 저장하고 Load버튼을 누르면 저장된 값을 글을 쓰는 곳에 넣어준다.

글을 쓰는 모드와 읽는 모드, 두 가지로 설정할수 있게 만들었다.

 

 

Save와 Load는 localStorage를 통해 저장하였다. Save를 누르면 localStorage에 저장되고, Load를 누르면 localStorage에서 데이터를 불러온다. 이 부분에서 가장 고생했었다.

setContent(localStorage.getItem("content"))

이렇게 써야하는데 잘못써서

localStorage.getItem("content")
setContent("content")

이렇게 되버렸다. 왜 안되는지 몰라서 20분동안 고민했지만 나의 구원자, 멘토형님께서 단번에 고쳐주시고 오늘도 나는 실성했다.

 

 

이렇게해서 간단한 메모 앱을 만들었는데 생각보다 간단하지 않았다. 동적으로 변수의 값이 변하는걸 보는게 신기했었다. React 배우면서 "나는 프론트엔드가 적성인가?" 라는 생각이 들정도로 재밌긴 했다. 아직 얕게 팠기 때문에 주말에 좀 더 연구해봐야 겠다.

 

소스코드 : https://github.com/Function1790/FE-Study

GitHub - Function1790/FE-Study: school

도움 : https://github.com/HyunsDev

HyunsDev - Overview

 

그래도 나는 파이썬이 그립다.