heeney.log

[Git] npm package-lock.json conflict (충돌해결 및 존재이유) package-lock.json 파일을 아시나요? package.json은 봤어도 package-lock.json은 생소한 사람도 있을 것이다. 프로젝트를 하다가 만나본 적은 있어도 정확히 저 녀석이 하는 일이 무엇인지 잘 몰랐다. 'package'라는 단어가 들어갔으니 중요한 녀석인 것 같고 삭제하면 안될 것만 같다. 구글링을 해보니 작업한 파일과 함께 커밋해야한다고 한다. 바쁘니 일단 넘어가자고 생각했다. 그렇게 어물쩡 넘어가고 "해치웠나?" 라고 생각하면 나중에 뒷통수를 얼얼하게 얻어맞는다. 고맙게도(?) 뭔지 모르는데 그냥 적당히 넘어가면 내가 확실히 알게 될때까지 세상은 알아야만 하는 상황을 제공해준다. ..

기록의 중요성 2차 프로젝트가 끝이 났다. 확실히 1차 프로젝트 끝난 후 바로 진행해서 그런지 심력, 체력적으로 많이 지쳤다. 예민한 육신을 가져서 조금만 스트레스를 받아도 오장육부가 다 아팠다... 그래서 다소 내용이 쳐질까봐 걱정이 된다. 그럼에도 불구하고 작성하는 이유는 이 회고는 빠른 시일 내에 머릿속에서 휘발될 가능성이 높으며 1차 프로젝트때 몸소 느꼈던 기록의 중요성을 알기 때문이다. 프로젝트 자체가 어느 누가 힘들지 않았을까? 다양한 이유로 각자의 문제로 인해 힘들었을 것이다. 프로젝트를 진행하면서 겪은 우여곡절을 성장의 일부로 가져갈 것인지, 그저 고통으로 인식하고 추억할 것인지는 오로지 내 몫이다. 나는 성장의 일부로 가져가기 위해서 프로젝트 기간중 힘든 과정을 거쳤어도 그 과정을 글로 ..

[React / 2차 프로젝트] react-slick 적용법 2차 프로젝트부터는 라이브러리를 써보게 되었다. 1차 프로젝트에서는 학습을 위해 지양했었다. 라이브러리라고 무조건 좋지 않은 것도 아니고, 무조건 좋은 것도 아니다. 적재적소에 필요할 때 사용할 수 있어야 한다. 가스레인지를 쓰면 되는데 굳이 부싯돌로 불을 피울 필요 없기도 하다. 다양한 라이브러리를 만나면서 배울 수 있는 것도 많다. 그 코드를 뜯어보면서 학습효과를 본다던가 혹은 라이브러리 사용법을 익히면서 점점 다양하게 마주칠 라이브러리에 대한 진입장벽이 좀 낮아진다고 해야할까? 2차 프로젝트를 진행하면서 react-slick이라는 라이브러리를 활용해 캐러셀을 만들었다. 역시 유명한 만큼 편리하고 좋았지만 공식 문서를 보아도 해결되지 않는 ..

[JS] 객체안에 객체에서 원하는 값만 가져오기 (feat. entries, filter) 2차 프로젝트 - 마이리얼트립 (마이코드트립)를 진행하는 도중에 mock data에서 데이터를 가져오려는데 객체 안에 객체에서 조건에 맞는 데이터만 가져와야만 했다. 객체에 접근하는건 어려워도 천천히 생각하면 다 가능했는데 이건 조건이 들어가니까 어렵게 느껴져서 끙끙대고 있었다. 어떤 조건? 👩🏻‍🎨 마이리얼트립에서 항공권을 검색하는 부분에서 인원 및 좌석을 선택하는 곳이 있다. 성인, 소아, 유아의 데이터를 mock data에서 관리했는데 데이터를 관리할 때 0명인 승객은 보여주지 않아야 한다. 승객이 1명 이상일 때에만 표시된다. 예시) 성인 1, 소아 0, 유아 2일 경우 성인 1, 유아 2만 보여주도록 한다..

[React] fetch로 백엔드와 통신하면서 놓쳤던 부분 장바구니를 구현하면서 백엔드와 통신할 일이 많았는데, 이때 다양한 실수를 범했기에 기록한다. 다음 통신때는 절대 이런 실수를 하지 않으리 다짐해본다. 우선 내가 장바구니에서 백엔드와 통신해야했던 부분, 중요한 부분을 이야기 해보자면, 장바구니는 회원만 이용이 가능하다. 백엔드에 POST로 보내줄 body 내용은 JSON 문자열로 변환해야 한다. 전체 삭제 및 선택 삭제, 제품 직접 삭제가 가능하고 삭제한 내용은 DB에서 지워져야 한다. 구매하기를 누르면 구매한 데이터가 백엔드 측에서 따로 저장되어야 한다. 장바구니는 회원만 이용이 가능하다. 회원만 가능하다는 뜻은 결국 Token을 갖고 있는 회원만 장바구니에 접근이 가능하다는 뜻이다. 회원만 가..

주마등처럼 스쳐 지나가는 2021년 그렇다. 지금 이 글을 쓰는 시간은 31일 오후 11시 23분경이다. 다소 감성적이게 될 수 있기 때문에 주의하며 글을 쓰겠다. 어차피 몇분 지났다고 어썸한 2022년이 마법처럼 펼쳐지는게 아니라 그냥 2022년 1월 1일에 불과하기 때문이다. 이제 나는 기념일이며 뭐며 감흥이 없다. 감흥 없는 사람치고 글을 쓰고 있는게 좀 웃기긴 한데 그래도 한 해를 마무리하는 시간을 가지는게 스스로에게 값지기도 할 것 같고, 벨로그 구경하다보니 다양한 회고록이 있던데 왠지 더 열심히 살아야할 것 같은 느낌과 에너지를 주기에 한번 도전해보았다. 일단 2021년을 떠올려 보면, 나에게 2021년은 되게 긴 한 해였다. 회사를 1년 다녔다. 나는 웹디자인 & 퍼블리셔로 스타트업이자 첫 ..

[React] map 함수 적용시 key props를 부여하는 이유 본론부터 말하자면 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다. key값 부여 안하면 어떻게 될까? 🤓 콘솔에 에러 메세지가 뜬다. 너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유닠크한 키 prop을 줘야돼. 왜 필요하지? 🤔 map으로 요소를 하나씩 뿌려준다고 하자. 리액트는 내용이 바뀔 때 다시 랜더링을 하는데 10개의 리스트중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 여기서 달라졌네? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다. 그러면 리액트는 key값으로 변한 내용인지, 아..

[JS] westagram - 댓글 게시 기능 구현 메인 페이지 내에서 피드에 댓글을 다는 기능을 구현하였다. 쉽게 말해서 해당 댓글 게시 기능은 사용자가 입력한 input값을 담은 요소가 새로 생성되는 것이다. Check List ✅ 사용자가 원하는 내용의 댓글을 입력할 수 있도록 input 요소가 있어야 한다. => input ❌, textarea ⭕️ input으로 구성하려던 도중 인스타그램의 경우 textarea로 구성되어 있었다. 생각해보니 사용자가 정말 긴 내용을 코멘트로 달 수도 있었다. 실제로 인스타그램에서는 많은 양의 내용을 담은 코멘트를 다는 사용자도 있으니 필요한 부분이었다. 사용자가 댓글을 입력을 할 때에만 게시 버튼이 활성화 되어야 한다. keyup 이벤트를 줘서 사용자가 입력하면..