본문 바로가기

Today I Learned(TIL)27

TIL_210322(First Project) 📝 오늘 한 일 / 배운 것 🖋 로그인 상태에 따른 UI 변화 구현 로그인 시 NavBar의 LOG IN / SIGN UP 버튼 ⇒ LOG OUT 및 리덕스 상태 변경 EditUserInfoChange 페이지 이동 ⇒ MainPage 이동 EditUserInfo 페이지 상태에서 NavBar의 상단 버튼 비 활성화 로그인 버튼 클릭 시 기본 상태 변경 SignUp 컴포넌트 Form On -> SignIn 컴포넌트 Form On 🖋 토큰 처리 서버에 요청을 보낼 때 Token이 필요한 컴포넌트에서 토큰 상태 확인 ⇒ 토큰 만료 시 재 로그인 권유 🖋 MainSection, Navbar 검색 함수 및 처리 방법 수정 기존 - 요청 처리 오류 및 페이지 이동 미 구현 => 수정 - 오류 수정 및 경로 수정 Se.. 2021. 3. 23.
TIL_210321(First Project) 📝 오늘 한 일 / 배운 것 🖋 MainPage 스크롤 이벤트 처음엔 스크롤에 따른 상태 변화를 주기위해 useEffect 안에 window.addEventListener 를 넣어 스크롤할 때마다 실시간으로 위치를 확인 후, 조건을 만족하면 useState 를 통해 상태를 변화시켜 검색창이 뜨거나 사라지게 했다. 하지만 이러한 방식은 앱의 퍼포먼스에 문제가 발생한다고 한다.(무한 이벤트 같은..?) 더 찾다보니 interSection Observer 라는 것을 찾을 수 있었다. 이를 이용해 새로운 hooks를 만들어 사용할 수 있게 되었다. 하지만 처음 스크롤을 내려서 일정위치에 도달했을 때 이벤트를 실행시킬 수 있었지만 역으로 다른 함수를 실행시키는 것은 아직 생각이 안나 구현하지 못했다.. 앞으로 개.. 2021. 3. 22.
TIL_210319(First Project) 📝 오늘 한 일 / 배운 것 🖋 MainPage 관련 상태관리 및 렌더링 구현 MainPage에는 총 3개의 Section이 존재하는 데 각 Section 마다 나타내는 정보가 달라서 상태를 어디서 관리해야 할 지 고민을 했다. 결론적으로는 MainPage 컴포넌트에서 useEffect를 이용해 서버에 요청을 보내고 응답을 redux store에 저장한 후, 각 Section 컴포넌트에서 store 값을 사용하기로 했다. 그런데 이게 효율적인지 차근차근 생각해봐야겠다. 또한 목표는 인터렉티브하게 만드는 것! 🖋 NavBar, SearchPage NavBar의 검색창은 모든 라우팅(페이지)에 존재하지만 SearchPage에서는 사용하지 않고 SearchPage 자체 검색창을 사용할 것이다. 따라서 우선 순.. 2021. 3. 20.
TIL_210317(First Project) 📝 오늘 한 일 / 배운 것 🖋 와이어프레임 개선 어제 짜놓은 와이어프레임을 당연히 수정했다. className을 일일이 정하고 리액트를 사용할 예정이라 Component, Page를 구분지었다. 공통적으로 사용 할 컴포넌트를 7개 맡아서 전부 완료한 후 PR을 진행했다. 하나하나씩 진행하다보면 무사히 마무리할 수 있을 것이다! 🙏 기억할 것 / 느낀 점 🖋Git으로 프로젝트 관리하는 법 Issue (Task Card) 및 PR의 연관성 브랜치 관리 (커밋, PR 등 제목과 내용 통일하기) 💁느낀 점 처음부터 만드려니 구조를 어떻게 잡아야 할 지 모르겠다. 기존에 스프린트를 진행할 땐 구조들이 짜여있고 빈칸만 채우는 형식이었다. 그런데 이젠 class 명 하나하나 지정해줘야 하니 이것도 일이다... 하지.. 2021. 3. 18.
TIL_210316(First Project 프로젝트) 📝 오늘 한 일 / 배운 것 🖋 DB 스키마 팀원중 한 분이 일찍 일어나셔서 먼저 DB 스키마를 제작해오셨다. 이를 참고하여 프로젝트 플로우를 짤 수 있었고, 내가 맡을 프론트 작업에 대한 대강적인 느낌을 정할 수 있었다. 🖋 API 문서 DB 스키마를 기반으로 팀원들과 함께 어떤 데이터를 주고받을지, 어떻게 요청하고 어떤 답변을 받을지 정했다. 🖋 플로우 수정 역시나 수정할 부분이 끊임없이 나왔다. 사실 어제 프로젝트의 플로우를 정했을 땐 두루뭉술한 느낌이었는데 오늘 팀원들과 얘기를 나누며 수정을 하니 좀 더 구체적으로 계획을 세울 수 있게 된 것 같다. 🖋 팀 규칙 정하기 본인의 생활 규칙 및 팀 전체적으로 지켜야 할 규칙을 정하고, 앞으로 진행할 프로젝트에서 어떤 식으로 커밋 메시지를 작성할 지에 .. 2021. 3. 17.
TIL_210315 (First Project 시작!) 📝 오늘 한 일 / 배운 것 🖋 2주 프로젝트 시작 드디어 오늘부터 3명의 팀원들과 프로젝트를 시작한다. 코드스테이츠의 기본적인 가이드를 따라서 팀원들과 주제 선정을 했다. 역시 이 과정에서 소통의 중요성을 깨달았다. 같은 주제를 바탕으로 같은 기능에 대해 이야기를 하는데 팀원 전부 각각 이해하는 바가 조금씩 달랐다. 이야기를 하면서 서로의 생각을 조합해 나갔고, 최종적으로 웹의 작동순서, 플로우를 결정할 수 있었다. 물론 앞으로 만들어나가면서 생각했던 바로 진행이 되지않을 것이 분명하기에 매 순간 팀원들과 생각을 공유하는 노력이 필요할 것이다. 첫 시작이 순조롭게 진행이 된 것 같다! 이번 프로젝트를 통해서 단순히 기능을 구현하는 것 뿐아니라 협업, 소통을 위한 마음가짐을 가질 것이다! 내일은 좀 더 .. 2021. 3. 16.
코드스테이츠 IMMERSIVE Course 회고 코드스테이츠에 들어와서 Pre Course를 한 달 동안 수료하고 Immersive Course에 들어온지 얼마 안된 것 같은데 벌써 2달이 지났고, 프로젝트로 가기 위한 마지막 HA를 진행했다. 처음 시작할 땐 return이 왜 굳이 중괄호 { } 안에 들어가야하는 지 의문을 가졌던 나였는데, 세션을 기반으로 한 로그인 창을 구현할 줄 알게 되었다. 이머시브 코스에 들어오고 나서 개념정리는 했었어도 나에 대한 정리는 해본 적이 없는 것 같다. 다음 주부터 프로젝트를 진행하는데 그 전에 나의 마음가짐과 생각 정리를 해볼 겸 회고 글을 쓰기로 다짐했다. 코드스테이츠에 오고 나서 바뀐 것 스스로 부족함을 인정할 수 있게 되었다. 코드스테이츠는 기본적으로 페어활동으로 스프린트를 진행한다. 1주일에 약 2개 정.. 2021. 3. 13.
TIL_210311 📝 오늘 한 일 / 배운 것 🖋 AWS를 통해 직접 배포하기 예전에 진행했었던 스프린트인 c-market의 서버, 클라이언트를 아마존에서 구입한 도메인(내 돈..)을 통해 접속할 수 있도록 해보았다!!! 클라이언트는 aws cli를 통해 S3 버킷 및 객체를 생성한 후, cloud front를 통해 배포를 가능하게 했다. 서버는 RDS로 만든 데이터베이스와 연결을 시킨 후, EC2를 통해 서버를 실행하게 했다. 사실 한 건 정말 없어보이지만, 배포에만 거의 20시간은 보낸 것 같다... 하지만 모든 과정을 따로 정리했으니 프로젝트를 진행하면서 많은 도움이 될 것 같다! 🙏 기억할 것 🖋서버 HTTPS 배포 방법! 2021. 3. 12.
TIL_210310 📝 오늘 한 일 / 배운 것 🖋 AWS 마지막 ha가 끝나고 프로젝트를 진행하기 전 정말 중요한 배포를 위해 AWS에 관한 내용들을 배웠다. 한번에 너무 많은 양이 들어와 혼란이 왔지만 이젠 익숙하다! AWS서비스 중 EC2, RDS, S3를 직접 생성하고 연결해볼 수 있었다! 🙏 기억할 것 🖋AWS 서비스 및 기본 개념 정리 할 것 2021. 3. 11.
TIL_210309 📝 오늘 한 일 / 배운 것 🖋 adavanced web hiring assessment 프로젝트를 진행하기 전 마지막 시험?인 듯 시험이 아닌 ha를 진행했다. 지금까지 열심히 공부한대로라면 오전중에 끝날 줄 알았는데.... 역시 자만심이었던 것 같다. 분명히 구현은 되고 이론상 맞지만 제대로 테스트 케이스가 완료되지 않았던 것은 나의 문제였다. 단순히 기능 구현이 되는 것만으로 만족할 것이 아니고 어떻게 더욱 효율적으로 관리할 수 있는지를 고민해 볼 수 있는 시간이었던 것 같다. 주말동안 solo day를 통해 내가 느꼈던 점과 앞으로 프로젝트를 위해 가져야 할 마음가짐등을 한번 정리해보는 시간을 가져야 할 것 같다. 🙏 기억할 것 🖋 https express 에서 어떻게 구현하는지를 혹은 이론에 대.. 2021. 3. 10.
TIL_210222 (Redux + 반성..ㅠ) 📝 오늘 한 일 / 배운 것 🖋 Redux를 통한 상태관리 기존에는 React로만 프로젝트를 진행했을 때, 상태를 전달하고 관리하기 매우 복잡했다. 이러한 복잡함을 해결해주기 위해 나온 Redux! React에서는 UI요소 표현에 집중하고, Redux에서는 상태를 관리함으로써 기능별로 집중할 수 있게 되었다. 처음엔 이해가 하나도 되지 않았던 리덕스의 개념들이 주어진 스프린트 과제를 해결하면서 조금은? 이해가 된 듯하다. 🖋 포트폴리오 제작 포트폴리오를 미리 제작해보기 시작했다. 아직 진행한 프로젝트는 하나도 없지만..! 후에 포트폴리오를 제작함에 있어 수월한 진행을 위해서 또한, 현재 많이 부족하다고 느끼는 html, css에 대한 보강을 위해 시작했다. 들어갈 내용들을 찾아보니 현재 나의 기술, 언어.. 2021. 2. 22.
TIL_210217 📝 오늘 한 일 / 배운 것 🖋 React를 이용한 유튜브 클론코딩 오늘은 비디오 플레이어 애플리케이션을 간단하게 리액트로 구현해보는 스프린트가 있었다. 그런데 생각외로 너무 일찍 끝나서 페어분과 함께 직접 유튜브 클론코딩을 해보기로 했다. 기본적으로 유튜브 API를 이용해 검색을 가능하게 하는 것과, 플레이리스트, 동영상 플레이어를 위한 컴포넌트를 제작했었다. 그 외에 추가 하고 싶은 기능들을 페어분과 얘기해 기능뿐만이 아닌 직접 유튜브 처럼 댓글, 구독, 좋아요 등을 추가해보기로 했다. 처음엔 리액트가 어려웠지만 조금이나마 익숙해졌는지 원하는 기능을 직접 만들 수 있었지만 CSS는 많이 모자르다는 생각이 들었다.. 이 중에 댓글에 있는 좋아요를 눌렀을 때, state를 어디서 관리할지에 대해 생각해보.. 2021. 2. 18.

티스토리툴바