fpzmfks 님의 블로그

오늘은 놀라운 성과를 낸 날이다. 저번 주 금요일만 해도 이런 진행속도로는 과제를 제때 제출하지 못할지도 모른다며 주말 작업을 각오했는데, 매니저님이 전체 방송으로 만류해서 그만뒀었다. 그리고 오늘 시간을 쏟아서 프로젝트를 진행하니 무려! 프로젝트 필수 요건을 모두 충족한 것이다! 어쩌면 난 좀 잘하는 편일지도 모른다고 생각했는데, 이어서 추가 요건을 만족하려고 코드를 손대다보니 어느새 저녁이 되어 있고, 완성된 건 되다만 추가 기능 하나뿐이었다. 아마 내일 제출 때까지 이 프로젝트를 200% 완성하는 건 불가능할 것으로 보인다.  일단 오늘 한 것들을 나열하자면업데이트 기능 추가(글 작성 중 오류 발견...)삭제 기능 추가컴포넌트 분리input 박스를 컴포넌트로 분리css 조금정렬이다. 먼저 글 작성 ..

나도 내가 이걸 해낼 줄은 몰랐는데, 오늘 오전에 어제 못 다 본 리액트 강의를 완주하고 오후시간 만에 개인 프로젝트를 1/3 정도 완성시켰다.  개인 프로젝트 필수 요건인 추가/업데이트/삭제 중에서 추가를 구현한 모습이다. 이들 대부분이 오늘 오전에 배운 것들을 활용하여 구성한 것인데, 배운 대로만 작성하지 않고 응용해서 구성해보려다가 피를 보고 아는대로 만든 모습이다. 첫번째로는 input 태그를 자식 요소로 내려보내려다가 실패했다. input태그가 자식 요소로 내려간 상태에서도 다른 자식 요소들과 상호작용하려면 input 태그의 value를 부모요소로 다시 가져올 수 있어야 하는데, 나의 지식과 논리력으로는 이건 아직 불가능한 경지였다. 때문에 부모요소에 input태그 여러개를 남겨 놓은 약간 보기..

오늘은 드디어 js 공부를 간단하게나마 마무리짓고 리액트 입문을 하게 되었다.  리액트는 내가 이번에 참가한 부트캠프의 핵심 학습내용인데, 프론트엔드 개발의 필수기술이라고 한다. 지금까지 배운 js는 언어이고, 리액트가 기술에 영역에 있다고 하는데 아마 js를 다루는 것은 한글을 쓸 줄 안다는 것이고 리액트를 다루는 것은 기자나 작가 등의 직업적 기술이라고 보면 될 것이다. 즉 직업을 가지려면 리액트를 쓸 줄 알아야 한다는 것이다.  리액트 입문으로 지급받은 강의는 총 2주차로, 개인과제도 있고하니 오늘 하루를 모두 써서 강의를 완주하려고 했는데, 생각보다 기억할 것이 많은데다가 대충보고 다시 보는 것보다는 찬찬히 살피고 다시 강의 볼 필요가 없도록 하는 게 낫다고 생각해서 오늘은 리액트로 아주 간단하게..

오늘로써 다른 팀과 결과물을 공유하고 프로젝트를 완료했다. 다른 팀들이 한 것을 보고 부러웠던 것은 비밀번호 암호화/복호화였는데, 상상도 못했던 기능이라 언제 한 번 이런 것도 한 번 해보고 싶다고 생각했다. 그리고 우리 팀에서 의논한 이번 팀 프로젝트에 대한 의견은 아래와 같다.  Keep - 현재 만족하고 있는 부분스케줄에 맞춰서 일정이 잘 끝났다.맡은 기능에 대한 공부하는 시간이 되었다.Problem - 불편하게 느끼는 부분dev 브랜치를 좀 더 초반에 만들어서 파일들을 병합했어야 했다.js 파일명 중에서 핵심 기능을 나타내는 파일이 없었다.의사소통이 원활하지 않았던 부분이 있고, 개인적으로 의견을 피력하기에는 어려움이 있었다.Try - Problem에 대한 해결책, 당장 실행 가능한 것코드 리뷰 ..

오늘은 달리 할 일이 없어져서 대부분 코드를 점검하고 개선하는 데에 시간을 보냈다. 이미 main에 병합까지 했으니 이제는 완전히 자기만족이지만, 아직은 스스로 코드를 짜고도 이게 왜 작동이 되는지 잊어버리기 쉽상이다보니 이러한 시간이 있는 게 좋았다는 생각이 들기도 했다.  먼저 최초로 살펴본 코드는 함수를 만들어놓고도 사용하는 걸 까먹은 경우이다. let review = JSON.parse(localStorage.getItem(`review${movieId}`)) || [];let review = getReviewData(); 이 두 코드에서 review는 같은 값을 가지게 되도록 getReviewData 함수를 선언해두었다. 그리고 그러고도 사용하지 않아 main에는 위쪽 코드가 반영되어 있다.....

오늘은 최종적으로 각자의 코드들을 dev 브랜치에서 합쳐보고 main에까지 머지해서 페이지를 배포해보았다. 아니나 다를까 코드 충돌이 크게 나서 화면 공유와 dev 브랜치 git clone을 통해 오류를 찾아 수정할 수 있었다. 다만 이러한 방식은 팀원이 5명이라 가능했던 것이고, 더 큰 규모의 팀이나 의사소통이 보다 원활하지 않은 환경을 대비해서 방책을 생각해볼 필요성을 느꼈다.생각하기로는 merge를 테스트하는 dev 브랜치를 보다 초기에 작성하고 하나씩 기능을 완성한 순간마다 한 마디 말을 하고 merge=>다른 팀원이 git pull origin dev하는 식으로 했으면 보다 충돌을 줄일 수 있는 데다가 불필요하게 긴밀한 의사소통을 요하지 않을 수 있을 것이다. 혹은 이전에 들었던 대로 팀원 각자..

오늘에 이르러 드디어 리뷰 기능을 완료했다!  1. 어제 자로 어설프게 완성한 삭제 기능은 어제 생각한 방법대로 특정 삭제할 데이터 하나만 지정해서 삭제 기능을 완전하게 구현했고,2. if else문으로 입력데이터 형식이 완전하지 않으면(넣어야 할 값 중 빈 곳이 있으면) 해당 값을 넣으라는 alert도 띄울 수 있도록 했다.3. 또 올바른 비밀번호를 입력해야지 삭제가 가능하도록 하는 기능을 구현했다. 4. 그리고 가장 중요한 기능 중 하나! 상세페이지가 띄우는 영화 데이터에 맞추어서 해당하는 리뷰만 표시하도록 하기! key값을 ``으로 감싸서 불러온 영화의 아이디를 `review${movieId}`의 형식으로 붙여넣어서 각 영화 데이터마다 다른 객체가 로컬 스토리지에 쌓이도록 했다.  여기에 어제 오늘..

오늘은 리뷰 기능 완성을 자축하며 로컬 스토리지 정복을 선언한다! ...라고 하고 싶지만, 이 글을 쓰려고 다시금 리뷰 기능을 점검하는 와중에 삭제 기능에 문제가 좀 있다는 것을 알게 되어 '대강' 완료라고 제목을 변경했다.  오늘 오전 시간을 쏟아부어서 로컬 스토리지 value에 배열을 할당함으로써 '데이터 저장'과 '데이터 불러오기', '데이터 출력' 문제를 해결할 수 있었다. 예상으로는 나중에 리뷰 데이터를 각 영화 데이터에 맞추어서 내보일 때 key의 이름을 다르게 설정할 수 있으면 지금 코드를 거의 그대로 사용할 수 있을 것이다.  다만 라스트 스퍼트로 구현한 삭제 기능이 문제였는데, 삭제가 가능하긴 하지만 가끔 데이터 여러 개가 한 번에 삭제 되고는 해서 완성했다고 보기는 어렵다. 이전과는 달..

오늘부터 다시 팀 프로젝트가 시작되었다. 이번 프로젝트는 이전에 한 개인 과제로 완성한 영화 리스트를 팀 내에서 공유한 뒤, 가장 깔끔한 코드로 페이지를 작성한 팀원의 것을 기준으로 상세페이지 등의 기능을 늘리는 것이었다. 나는 저번에 개인과제 정답지를 보고 코드를 깔끔하게 정리해두어서 이번에는 내 개인과제를 기초로 영화 리스트를 확장하기로 했다. 그 과정에서 처음으로 git에서 콜라보레이터를 등록해보았는데, 이제 git에서 어떻게 협업을 주도적으로 시작할 수 있는지 알게 되었으니 지금까지의 경험과 더불어 git을 대강 사용할 수 있게 되었다고 볼 수 있겠다.  그리고 이번에 내가 맡은 역할은 로컬 스토리지를 이용해서 리뷰 저장, 추가, 삭제하기이다.  사용해보니 로컬 스토리지는 map, set과 비슷해..

오늘은 어제 못다한 코드 정리를 마치고 여태껏 틈틈이 학습한 자바스크립트 강의 내용을 정리하는 시간을 가져보았다.  이번에 살펴볼 자바스크립트 학습 내용은 실행 컨텍스트, this인데 이들은 코드 내에서 변수와 함수 등이 정확히 어떤 순서로 작동하는지들을 살펴보는 데에 매우 유용하다.  여태껏 코드가 작동하지 않았던 원인 중 많은 것들이 변수나 경로를 잘못지정했거나 코드의 알맞은 위치를 잘못 파악했거나 하는 등의 일들이었으니 실행 컨텍스트와 같은 내용을 잘 익혀두면 두고두고 유용하게 쓸 수 있을 것이다.  목차실행 컨텍스트 실행 컨텍스트 역할 실행 컨텍스트 저장방식 실제 코드의 실행 컨텍스트 범위(이미지) 실행 컨텍스트 구성 실제 코드와 실행 컨텍스트(코드) 개별 실행 컨텍스트가 활성화될 때 ..