crabLab

https://www.youtube.com/watch?v=GkX8FGmXIOA&t=35s "직접 DOM에 접근하는 것은 지양해야 한다.”는 말이 있습니다. 과연 DOM이 무엇이길래 이런 말이 있을까요? MDN에서는 "DOM은 HTML, XML document와 상호작용하고 표현하는 API이다. DOM은 browser에서 로드되며, Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다. (ex. element, 문자열, 혹은 코멘트)" 라고 나와 있습니다. 위의 설명으로, Document는 HTML, XML을, Object는 노드 트리라 유추해볼 수 있습니다. 그렇다면 노드 트리는 무엇일까요? 위의 그림에서 볼 수 있듯이 노드란 웹을 만들어본 사람이라..

https://www.youtube.com/watch?v=I-gJfFFyiqY 더보기 react를 사용하는 이유에 앞서 우선 프론트엔드 라이브러리가 등장하게 된 이유에 대해서 말하자면 그 이유는 동적인 웹 페이지를 보다 효율적으로 유지보수하고 관리할 수 있도록 하기 위함입니다. 여기서 정적, 동적인 페이지에 대해 잠깐 설명하자면 정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML문서를 클라이언트에게 전달하여 받은 페이지입니다. 단순히 기업 정보를 전달하기 위한 목적이기 때문에 유저의 인터렉션은 중요하지 않은 요소로 볼 수 있습니다. 이 경우는 프론트엔드 라이브러리 없이 HTML과 CSS의 구성만으로 괜찮은 웹페이지를 만들 수 있습니다. 반면, 동적인 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을..

나 뭐하고 있는거지..? 항해는 끝이 났다. 그리고 다 같이 지원을 해서 인지 꽤 많은 기업에 지원을 넣었고 생각보다도 많은 기업에 서류합격을 했다. 이게 나에게 독이 된 것 같다. 아니 그니까 좀 겸손하라고 제발 좀.. 나는 내가 모른다는 것만 안다는 점을 명심하자. 항해하면서 주기적으로 계속 되뇌었던 말이다. 사전스터디때 우쭐해져서 자아도취하다가 부족함을 깊이 깨달았을때도 주특기주차에서 쪼금의 선행학습으로 나아가다 진짜 노력에 막혀 멘탈이 터졌을때도 프로젝트중에 자신의 능력을 믿다 진도가 안나가 좌절하고 프레셔에 짓눌렸을때도 보면 항상 나는 나 자신을 몰랐다. 나는 진짜 아무것도 아니다. 아니 근데 진짜 아무것도 아니다. 근데 왜 안하냐? '배는 항구에 있을 때 가장 안전하지만, 배는 항구에 머물기 ..

실전 프로젝트 6주차(09/30 ~ 10/06) https://github.com/moodCatcherProject/Front-End GitHub - moodCatcherProject/Front-End: mood catcher mood catcher. Contribute to moodCatcherProject/Front-End development by creating an account on GitHub. github.com 마무리 단계 길고 긴 프로젝트가 끝이 나고 있다. 마무리단계에서는 발표를 위해 팀이 협력하여 그간의 자료들을 문서화하고 정리했다. 이 기간 우리가 계속 얘기했던건 진짜 아이러니하게도 “다시 코딩하게 해줘..”였다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 개발자는 개발자인가보다 6주차 마지막날 전시회..

실전 프로젝트 5주차(09/23 ~ 09/29) 배포 그 이후 유저 피드백 정리 🤔 유저 피드백 · moodCatcherProject/Front-End Wiki GitHub - moodCatcherProject/Front-End: mood catcher mood catcher. Contribute to moodCatcherProject/Front-End development by creating an account on GitHub. github.com 정말 어마어마한 피드백이 쏟아졌다.. 프론트, 백, 디자이너, 기획자가 다 뭉쳐서 찾은 것보다 더 많은 에러와 피드백 사항들이 쏟아졌다. 사실 이번주는 기술적으로 무언가를 추가하고 그런게 없다 끊임없는 유저 피드백과의 싸움이었다. 나는 이 과정의 나를 “..

실전 프로젝트 4주차(09/16 ~ 09/22) 동료 피드백 파티 만약 꼼꼼하게 코딩을 하지않은 개발자가 있다면 이 파티에 간다. 근데 사실 꼼꼼하게 안하지는 않았다.. 9/16, 9/17 백엔드, 디자이너, 기획자님께 전반적인 피드백을 받았다.. 단지 그 목록들은 이 글의 맨마지막에 작성하겠다.. 동료 피드백이후 느낀점 사실 의외로 느낀점은 처음부터 완벽은 없다 이다. 우리가 버그를 안 발견하려 한것도 아니었고 계속해서 프론트작업을 하고 있었다. 이와중에 정말 꼼꼼하게 버그없이 디자인적으로 완벽하게 제품을 낸다? 이건 효율이 떨어진다. 이번에 느낀것은 적절한 시기에 빠르게 다른 사람들에게 피드백을 꼭!꼭!꼭! 받아야 한다는 점이다. 생각지도 못한 피드백들이 나왔다. 지옥에서 돌아온 무한스크롤 무한스크롤..

실전 프로젝트 3주차(09/09 ~ 09/15) 3주차에는 어떤 일이? 2주차가 지난이후에는 사실 조금 순조롭게 진행되는 느낌이었다(사실 뒤늦게 생각하면 전혀 아니었다.. 진짜 아니었다.. 아 이때 경각심을 갖고 좀 더 꼼꼼했더라면..) FE에서 자체적으로 발견되는 잔버그들을 수정하고(자체적으로.. 정말 못 발견한 걸까 아니면 일부러 흐린눈으로 모른척 한걸까..) 이번 주차에 기존의 http를 https로 바꾸고 CICD를 적용하고자 했다. AWS, s3, Route53, cloudfront, https 기획자님의 addon기능중 최상위권 희망은 지도 기능이었다. 따라서 Geolocation API를 위해서도 https는 필수였고 보안과 더불어 사용자의 신뢰도를 확보하기 위해서 필수적으로 적용해야했다. ..

실전 프로젝트 2주차(09/02 ~ 09/08) Json-server 이상하게 나는 이 json-server를 다루는게 힘들었다.. 초반에 백엔드에서 API가 바로 뚝딱 나오지 않는것은 당연하고 따라서 프론트에서는 mock API를 통해 작업을 해나아가야 한다. 다른 사람들은 이 과정을 잘 해나가는 것 같은데 요상하게 나는 이 부분이 매우 힘들었다.. 백으로부터 데이터가 안오는데 어떻게 작업을 해????? 데이터가 없는데!!!!! 이딴 생각을 이렇게까지 하진 않았지만 비슷하게는 했다.. 사실 방법은 알고 있었는데 Json-server를 사용하는 것 이었다. 1주차에 프로젝트의 방향이 어느정도 잡히고 난 이후 2주차에는 (나 홀로)json-server와의 사투를 했다.. 그 와중에 초조함 불안함 사실 2주..

실전 프로젝트 1주차(08/26 ~ 09/01) 협업 툴 정리 우선 협업을 위한 툴들의 기초를 만들었다. 우리 팀은 크게 두가지 였는데 노션과 Figma였다. (이거 두개다 내가 적극적으로 주장하고 기본 틀을 만들었다. 물론 그 이후에는 팀원들과 같이 더 잘 만들었지만..) 팀 노션의 구조는 크게 아래의 4가지였다. 협업과 화목한 소통을 위해 육성으로가 아닌 문서로 자신이 다른 포지션에게 요구사항을 전달할 수 있는 공유 사항 포지션별로 회의와 각종 자료들을 정리할 수 있는 포지션 별 하위 페이지 프로젝트의 뼈대를 담당하는 문서를 정리하는 프로젝트 구성 페이지 프로젝트의 룰을 정하고 피드백들을 정리하는 프로젝트 진행 페이지 이렇게 정리를 하고 나니 프로젝트가 좀 더 정형화되어 진행되는 느낌이었고 중구난방 ..

이미지 출력 프론트에서는 formdata를 이용해서 보낸다. 백에서는 multer와 aws s3를 이용해서 이미지를 저장한다. CRUD 프론트는 기본적으로 CRUD를 토대로 기능을 만들어가는 게 좋다. 모든 기능들이 CRUD에 있다는 말을 이해하게 되었다. 토큰을 이용한 로그인 유지 우선 axios의 interceptor기능을 이용해서 모든 요청마다 token을 넣어 줄 수 있다. 토큰을 세션스토리지 or 로컬스토리지 or 쿠키에 넣어서 로그인유지에 이용한다. search기능 백과 통신하는 걸로 기능을 구현했다. 프론트에서는 키워드를 전달하고 백에서 그 키워드에 맞게 DB를 뒤져 다시 데이터를 배열형태로 보내준다. git flow 전략 이번 프로젝트를 진행하면서 제일 크게, 뼈저리게 느꼈던 부분이다. d..