Ming devlog

2022.02.21· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 오늘 한 일 리액트 테스트 코드를 짜다! 이번 파이널 프로젝트를 진행하면서 우리 팀을 전담으로 멘토링해주셨던 멘토님께서 현업에서 어떻게 작업을 하는지 어떤것들을 협업으로 하면 좋을지에 대해서 조언을 많이 해주셨었는데 그 중에 하나가 테스트 코드를 짜보라는 것이였다! 그 조언 당시에 이미 구현을 시작하는 단계였고, 테스트코드라는 걸 한번도 짜본적이 없었던지라 구현에 급급했던 우리들은 테스트코드를 뒷전이였고 일단 구현에만 몰두를 했었다. 유저 피드백을 바탕으로 수정해야 할 부분이 있으면 수정하며 조금 쉴 틈이 생겨서 테스트 코드를 짜보았다!! 비록, 회원가입 / 로그인 페이지의 버튼 잘 랜더되는 가?하는 부분밖에 못 했지만 앞으로 계속 해나갈거다!!! 이 부분은 ..

[항해99] Day85. TIL – user들의 피드백을 받다!

2022.02.21· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 오늘 한 일 1차 발표 자료 준비 (기술적 챌린지) 유저 테스트에 따른 피드백 정리 및 개선할 수 있는 부분 정리 메인 예외 페이지 추가 채팅 리스트 페이지 짤리는거 수정 즐겨찾기 페이지 예외 처리 페이지 추가 프로그래머스 코딩테스트 기술 면접 관련 공부 (리드미 보충) ✨ 내일 할 일 멘토님들께 받은 피드백 정리 + 개선 방안 찾기 프로젝트 테스트 코드 짜기 프로그래머스 코딩테스트 계속해서 풀기 ✨ 유저 피드백 정말 놀라운 경험이다. 처음 메인 타켓으로 잡았던 층이 대학가에서 자취하는 대학생들이였기에 1차적으로 대학생들이 다니는 커뮤니티의 중심지인 ‘에타’를 중심으로 홍보를 했었다. 그리고 지인들에게 추가적으로 – 피드백이 들어오긴 했지만 뭔가 아쉬움이 있었..

[React] 리액트 프로젝트 Netlify로 배포하기

2022.02.21· 개발/React

알고보면 넘나 유용한 사이트인 Netlify! 주로 호스팅을 하기 위해서 썼는데, netlify dev 라는 기능도 있어서 백엔드부분까지 살짝 도와줄 수 있는 기능도 가지고 있다. dev 기능을 알게 된지 얼마 안 되서 깊이 공부를 아직 못 했지만 유용하다고 생각했음 ㅎ 오늘은 react netlify 배포에 대해서 알아보자! Netlify ( https://app.netlify.com/ ) 1. 계정을 생성합니다 이메일로도 계정을 만들 수 있지만 git과 연동할 수 있답니다. git 계정이 있다면 손쉽게 계정을 만드실 수 있어요 2. 상단 메뉴의 [Sites] 나 [new site from git] 을 클릭합니다. netlify로 배포하는게 무료라는 이점도 있지만, git에 올라가 있는 프로젝트를 바로..

[항해99] Day.84 – TIL – User Test 시작!

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 오늘 한 일 유저 테스트를 시작했다!! 게더에 올려서 유저들이 한꺼번에 몰렸다 -> 서버 다운 서버 과부하 현상으로 인한 문제를 찾기 위해서 다시 테스트 또 테스트! 채팅 알림을 구현하면서 생긴 과부하 문제였다. 수정완료 기술 면접대비 CS 공부하던거 github에 업데이트 ✨ 내일 할 일 잊고 지냈던 코테!! 기술 면접대비 공부 유저 테스트에서 얻은 피드백 개선하기

[항해99] Day81. TIL

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ CSS 수정이 끝이 없다. 유저 테스트를 앞두고 계속해서 style을 수정해야할 부분이 나왔다. project가 막바지로 향하면서 github의 readme도 업데이트했다.

[항해99] Day80. TIL

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 오늘 한 것 글로벌 페이지 및 수정된 캐릭터 적용 기술 면접 공부 (리드미 작성) 진행중인 프로젝트 관련 리드미 초안짜기 ✨ 내일 할 것 채팅방 랜더링 버그 수정하기 프로젝트 주요 기능 정리 ✨ 계속해서 발생하는 오류 잔치에 끊임없이 이어지는 수정 잔치 😳 처음 설계할 때부터 잘 하자…

[항해99] Day79. TIL

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 오늘 한 것 글 작성 페이지 수정 – 글 작성 완료 버튼 비활성화 수정 – 글 작성 완료시 메인 페이지로 넘어가기 전까지 스피너 걸어주기 – 글 작성 페이지 해시태그 입력 후 input 창 초기화시켜주기 기존의 글 작성 페이지 작업을 내가 했던게 아니라서 작성 페이지에서 발견되는 오류들을 나중에 시간되면 다함께 수정해야지라고 생각하다가 무언가 하나 수정해야 할 게 생겨서 겸사겸사해서 다른 부분들도 함께 수정했다. 기초 컴퓨터 지식 README.md로 옮기기 항해를 하고 취업을 준비하면서 조금씩 해놓았던 메모장의 노트들을 깃헙에 올리기 위해서 리드미로 옮기기를 시작했다. 작업을 하다가 발견하는 용어들을 간단하게 메모해뒀었는데. 한 곳에 올려서 한꺼번에 보기 위해..

[항해99] Day78. TIL – 쿠키가 삭제되지 않을 때

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 쿠키가 삭제가 안 된다!! 어제는 safari에 한글로 생성된 값이 쿠키에 저장이 안 되서 인코딩하는 코드를 넣고 디코딩하는 작업을 했었는데 이젠 잘 들어간 쿠키가 삭제가 되지 않는다. 로그아웃을 하면 삭제가 되어야하는데!!!! 😳 구글링을 해보니 도메인과 path를 지정해주라는 말이 있어서 했더니 해결되었다! 그런거 없이도 웹에서는 삭제가 잘 되고 있는 부분이여서 정말 당황했다. 아니 하나의 에러를 찾아서 해결하고 나면 또 다른게 계속 나타나니 다들 실성 😵 document.cookie = ‘value=; expire=날짜; domain=[도메인주소]; path=[지정한경로]’; 이렇게 해주면 되는데 따로 거창한 경로를 지정해준건 아니고 모든 페이지에서 가능..

[항해99] Day77. TIL – 아이폰에서 디버깅을?

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 오늘 한 것 프로젝트를 시작하면서 와이어 프레임을 짜면서 구상했던 기능들은 모두 구현을 끝마쳤다. 하지만 아직도 해야 할 일은 많다 😁 글로벌 스타일 수정 AWS S3로 배포한 서비스에 HTTPS 적용하기 서버 기능 개선으로 인한 데이터 값 형태 수정에 따른 프론트 코드 수정 safari에서 깨지는 쿠키 수정 🔧 웹에서도 서비스가 잘 켜지고 안드로이드에서도 잘 되는데 왜인지 아이폰 사파리에서만은 제대로 돌아가지 않았다. 도대체 무슨 문제인가? 라며 https를 사용하지 않아서인가 라며 SSL인증서도 발급받고 했는데, 또 안되서 진짜 뭘까?라며 아이폰에서 디버깅하는 방법을 찾아 구글링을 했다. 그러고 발견한 Web Inspector 어플리케이션! 바로 아이패드에..

[항해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..

전체 글

티스토리툴바