'TIL' 태그의 글 목록 (4 Page)

[항해99] Day63. TIL – 리액트 즐겨찾기 버튼 / 댓글 구현 – redux, useState, useEffect

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 댓글구현의 후폭풍 댓글, 대댓글을 리액트 돔에서 useState만을 이용한 구현 후폭풍이 끝나고 상세페이지에 등장하는 또 다른 버튼. 즐겨찾기 버튼 구현에서 또 다시 많은 시간을 잡아 먹었다. 이때까지만해도 대댓글을 구현해냈다는 자신감에 가득 차있었는데, useState로는 즐겨찾기를 구현하다가 새로고침을 하면 내용이 저장되지 않고 모두 사라진다는걸 불현듯 깨닫고 😵 실시간으로 랜더링되는 걸 구현하려면 useEffect와 redux가 필요했다. 게다가 이 때 댓글이 들어가있는 게시글 상세 페이지를 다 랜더링하는게 아니라 댓글부분만 따로 관리를 해서 컴포넌트를 랜더링해줘야한다는거! 댓글이라는 걸 처음 구현해보는거라서 마음이 복잡했다. ㅎ ….. 댓글부분만 red..

[항해99] Week08. WIL – 실전 프로젝트 1주차

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 ⭐ 불안함과 조급함 실전 프로젝트 1주차를 시작하면서 기획회의부터 모든게 순조로웠다. 백엔드 개발자분들과도 트러블 하나 없이 서로 배려를 하며 조율을 했고, 러프버젼이긴하지만 와이어프레임을 짜는 동안에도 디자이너분들과 트러블도 없었다. 아직 구체적인 디자인이 나오지 않았기에 와이어프레임을 기반으로 페이지를 구현해나갔다. api로 연결시에 바로 할 수 있게 기능부분까지 해서 말이다. 주변에서 트러블난 다른 조들의 소식을 접하며 우리 팀은 참 순탄하게 흘러나네라고 생각했는데. 이게 불안하게 느껴지기 시작했다. 뭔가 내가 놓치는 부분이 있는건가? 라는 생각과 우리의 스코프가 너무 적은가? 하는 생각도 들고 서비스에서 사용할 수 있는 기능을 더 추가해야하나? 하는 조급..

[항해99] Day55. TIL – 리액트 무한 스크롤 ( w. redux & react-infinite-scroll-component )

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐들어가며 실전 프로젝트에 들어가는 기능과 디자인을 살펴보다가 당연하게 무한 스크롤을 써야한다는 의견이 나왔다. 강의를 보며 구현해본 적도 있고 이전 미니 프로젝트를 하면서 구현을 직접 해보지는 않았지만 코드를 함께 봤던 적이 있었다. 하지만 본 것과 직접 구현하는 것은 천지 차이라는 점. 메인 페이지 게시글을 조회하는 부분에서 필요한 기능인데 내가 맡게 된 페이지는 아니지만 무한 스크롤을 구현해보고 싶어서 따로 구현했다. ⭐ react-infinite-scroll-component 리액트에서 무한 스크롤을 구현할 수 있는 방법이 몇 가지가 있는데, 1) 브라우저의 onScroll을 이용해서 scrollHeight 값을 사용하는 거다. 2) Intersection..

[항해99] Day54. TIL – 핑퐁 프로젝트 기획 – 첫 멘토링

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 핑퐁! 물물교환 서비스를 기획하고 서비스를 이용할 타켓층을 정하고 그들이 어떤 물건들을 거래할 것인가? 어떻게 유저들을 모집할 것인가? 하는 마케팅적인 부분도 생각해보면서 기획을 잡아갔었다. 첫 기획회의 후 항해대표님과의 그룹멘토링에서 특이점이 없다라는 평을 받아 들고나서는 특이한 무언가, 우리만의 무언가가 더 필요하다는 생각을 하면서 조금씩 구현해나갔었다. ⭐ 첫 멘토링 시간 월요일부터 프로젝트를 시작했고, 아직 구체적인 디자인이 다 나오지는 않았지만 와이어 프레임을 기반으로 해서 프론트는 뷰를 반 이상 구현한 시점에서 멘토링 시간을 가졌다. 기획적인부분에 대해서는 크게 언급이 없었지만 기능 스택부분에서는 부족이 없는 것 같다는 피드백을 받았고, 단지 협업 ..

[항해99] Day52. TIL – React Modal 을 써보자!

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ React에서 모달창 만들기 지난 주에 모달창을 만들어야할 때 따로 React-Modal 라이브러리를 쓰지 않았는데, 이번에 또 모달창을 만들어야해서 새로운 것을 써보자는 마음에 써봤다. 생각보다 간단해서 너무 좋았던 react-modal ⭐ React-Modal 아주 효율적인 리액트 라이브러리 중 하나인 모달. 사용하려면 우선 설치부터 해야한다. react-modal(공식문서) npm install react-modal or yarn add react-modal ⭐ 모달 컴포넌트 만들기 modal창을 본격적으로 만들기 전에 index.js 파일에서 리액트 모달을 import 해줘야합니다. 모달이 열려있을 때 화면을 보고 있을 유저가 모달창이 아닌 다른 컴포넌..

[항해99] Day50. TIL – FINAL PROJECT 시작

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 실전 프로젝트 시작 드디어 항해99 여정의 반을 지나 실전 프로젝트를 시작했다. 믿기지 않는다. 벌써 실전 프로젝트라니… 가슴이 두근두근한다. 실제로 서비스를 만들어서 유저들의 피드백까지 받는 프로젝트주간! 아직도 많이 부족한 것 같은데 새로운 것들을 구현하기 위해서 공부도 해야하고 팀원들과 무언가를 함께 만들어갈 생각에 즐겁다! ✨ 아이템 선정 프로젝트를 구상할 때 유저들이 사용했을 때 많은 이득을 챙길 수 있는 거였으면 좋겠다라는 생각을 했었다. 시기에 맞춰서 바이럴하기 좋은 이슈인 대선이라던가 올림픽이라는 아이템으로 프로젝트를 정하기에는 아쉽다라는 생각이 많이 들었었다. 실생활에서 누군가가 쓸 수 있는 유용한 서비스! 그런 생각을 하면서 주제를 정했다. ..

[항해99] Week07. WIL – 클론 프로젝트를 마무리하며

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 ✨ 이번 주 마무리하며 백엔드개발자 분들과 함께하는 클론 코딩 프로젝트를 시작하면서 github을 많이 활용해본다던가 하는 목표들이 있었다. 좋은 팀원분들을 만나서 다양한 것들도 사용해보고 공부할 수 있는 주간이였던 것 같다. 다만, 프로젝트의 막바지 때 조부상으로 2일 정도를 빠졌어야 했었기에 작은 디테일을 잡는 작업들에 많이 참여를 못 했던 점이 많이 아쉬웠다. 나의 부재를 채워준 프론트팀원들에게 너무 감사했다. 😊 지난주 미니 프로젝트를 진행하면서 배웠던 내용을 50% 이해했었다고 적었었는데, 이번 프로젝트를 통해서 80% 이해하게 된 것 같다. 아직도 100%가 아닌거니?! 라는 생각에 조급한 마음이 있지만 생겨나는 오류를 마주하면서 풀어나가는 것들에 조..

[항해99] Day43. TIL – 백엔드와 함께하는 두번째 프로젝트 – 클론 코딩

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 협업 협업! 협업! 지난 주 깃헙을 사용한 프론트들끼리의 협업을 제대로 하지 못 했기 때문에 이번 주에 하는 클론 코딩에서는 프론트들끼리의 협업에 대한 부분을 잘 해보고 싶다라는 생각을 가지고 프로젝트에 임했다. 백엔드분들은 지난 주와 달리 스프링을 하시는 분들을 만났고, 우리가 클론하기로 한 서비스는 “당근마켓”. 웹 버젼보다는 앱 버젼을 웹으로 가져오는 식의 방식을 택했다. ✨ 구조와 데이터 흐름 구현 계획을 따라 가느라 정신없었던 지난 주와 달리 이번 주는 훨씬 더 탄탄하게 체계적인 흐름으로 프로젝트를 시작할 수 있었다. github에 다양한 메뉴들을 적극 활용하기로 하고 구현 계획을 초기 단계부터 탄탄하게 잡아서 github merge시 혼란스러움을 최..

[항해99] Week06. WIL – 백엔드와 함께 했던 첫 미니프로젝트

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 주특기 3주차를 다 마무리 짓고 나서 처음으로 백엔드 개발자분들과 함께 진행했던 협업! 이전에 여러 명과 협업해서 진행했던 적이 있었기 때문에 이번에는 깃허브 사용을 잘 하리!! 라고 다짐하며 진행했다. 이번 협업을 통해서 잡고 가야할 게 있다면 깃헙 사용법과 지난 주 과제에서 제대로 이해하지 못한 부분들이라고 생각했다. 그리고 백엔드 개발자분들과 처음 해보는 협업이였기에, 서로에 대한 배려 + 이해가 제일 중요하다고 생각하며 진행했다. 다행이도 함께 했던 백엔드 개발자분들은 너무 착하셨고 많은 배려를 해주셨다 👍🏻 ✨ 프로젝트 소개 프로젝트 : Together 지난 주 과제를 베이스로 하는 프로젝트는 진행했었다. “투게더” 라는 이름의 개발 스터디 모임을 만드..

[항해99] Day37. TIL – 백엔드개발자분들과 협업!

2022.02.19· 개발/⛵ 항해99

💜 백엔드개발자분들과 첫 협업! 이번주 프로젝트를 시작으로 이제 백엔드 개발자분들과의 협업이 시작되었다! 처음 해보는 협업이라서 긴장도되고 서로의 언어와 프로세스를 이해하지 못 할까 걱정을 많이했지만 4일이 지난 지금까지 무리없이 잘 진행되어가는 것 같다! 함께 하는 노드개발자분들도 프론트가 일이 많다고 엄청 배려해주시고 도와주셨다! API 명세를 적어내려가면서 동시에 와이어프레임 작업도 해서 프로젝트에 사용되어야 할 부분들은 꼼꼼히 챙기고 협의해야하는 부분을 잘 챙겼던것 같다. 현재는 서버개발은 끝나서 프론트 파트가 준비가 되면 axios 를 이용해서 연결하면 된다! 아직 프론트파트가 다 준비가 되지않았다. 내가 맡은 부분은 얼추 리덕스까지 진행되었는데, 로그인, 회원가입 파트가 정말 생소해서 어렵다는..

[항해99] Week05. WIL – 리액트 전역상태관리

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 ⭐ React 전역상태관리 전역 상태 관리란, 말 그대로 전역에서 상태를 관리한다는 말입니다. 리액트에서는 상위에서 하위로 상태 값을 전달하며 관리를 하게 되는 시스템입니다. 아래의 사진처럼 리액트 프로젝트를 만들다보면 수많은 컴포넌트들이 발생합니다. 이 때 상태값을 전달 전달하게 되면 당연히 헷갈리고, 필요없는 값도 전달하게 되는 상황이 발생하게 됩니다. 이 때 불필요한 props를 전달받아야하는 상황에서 props drilling 이라는 문제가 발생하기도 합니다. props drilling 리액트 컴포넌트에서 다른 부분으로 데이터(props)를 전달하는 과정에서 오로지 전달만을 위해서 여러 컴포넌트를 거치는 상황을 말합니다. 이런 불필요한 props dril..

[항해99] Day34. 리액트 심화주가 끝났다. 매거진 사이트 구현 완료!

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 이번 주 개인 과제였던 매거진 사이트 만들기 – 인스타그램같은 느낌의 사이트였다. 다양한 요구사항들이 있는 과제였는데 사실 제대로 잘 구현했다고 100%로 장담은 할 수가 없다. 아쉽게도 말이다. 이번 주 과제는 수요일이면 다 완성하겠지? 라고 생각했었는데, 마지막 마감까지도 좋아요 버튼 기능 버그를 잡아내지 못해서 데드라인직전까지도 코드르르 만지고 있었다. mitter 라고 이름을 지어 준 이번 나의 프로젝트! 인스타그램같은 이미지 공유 기반 sns 스타일인데 이름은 트위터에서 가져왔다 ㅎ 한 주 동안 구현 해낸 기능들을 나열해보자면 로그인 회원가입 게시물 추가 게시물 조회 게시물 수정 (+재업로드 / 레이아웃 변경) 게시물 삭제 무한 스크롤 댓글 쓰기 좋아요 ..

티스토리툴바