본문 바로가기

전체 글72

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_210318(First Project) 📝 오늘 한 일 / 배운 것 🖋 상태관리를 위한 Redux 세팅 및 뼈대 완성 🖋 React Hooks를 사용해 페이지 렌더링 구현 🙏 기억할 것 / 느낀 점 🖋Redux 제대로.. action 수정 처음엔 const userInfo = useSelector(state => state.~~reducer) 후, console.log(userInfo)를 하면 바로 상태값이 나오는 줄 알았다. 사실 이게 맞는건지 아닌지 너무 헷갈린다... useSelector가 redux의 storer값을 가져오는 게 맞다고? 생각이 드는데 내일 더 자세하게 알아보고 확인해야할 것 같다... 🌟리덕스에서 api 요청하는 법 🖋React Hooks UseEffect 무한루프 방지법 💁느낀 점 Redux에 대해 안다고 생각했지만.. 2021. 3. 19.
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.
MVC Design Pattern & Sequelize ORM MVC Design Pattern 이란? Model View Controller의 약자 소프트웨어 설계와 관련된 디자인 패턴으로, "흔히 사용되는" 설계 패턴을 의미한다. Model 어플리케이션이 "무엇"을 할 것인지를 정의 Database와 상호작용(CRUD Create Read Update Delete) Controller 모델이 “어떻게” 처리할 지를 알려주는 역할 화면에서 사용자의 요청을 받아서 처리되는 부분을 구현되게 되며, 요청 내용을 분석해서 Model과 View에 업데이트 요청 사용자로 부터의 입력 을 받고 Model 또는 View중개인 역할 View 화면에 “무엇” 인가를 “보여주기 위한 역할” 컨트롤러 하위에 종속되어, 모델이나 컨트롤러가 보여주려고 하는 모든 필요한 것들을 보여줌 장점.. 2021. 3. 7.
TIL_210224 (SQL) 📝 오늘 한 일 / 배운 것 🖋 SQL 관계형 데이터(Relational DataBase)를 이용하기 위해 sql문법을 사용한다. 데이터베이스가 필요한 이유는 기존에 사용하던 1) In-memory 2) File I/O 방법의 단점들을 보완하기 위해 나온 것! sql기본 문법에 대해 공부하고, GUI중 하나인 DBeaver와 터미널을 통해 어떻게 데이터를 관리하는 지 직관적으로 볼 수 있었다. 내일부턴 실제 sql문법을 통해 데이터를 찾고, 추가하고, 삭제하는 것들을 연습할 것 같다. 🙏 기억할 것 🖋 3 Tier Architecture 클라이언트 - 서버 - 데이터베이스 🖋SQL Structured Query Language(SQL)은 데이터베이스 언어의 기준으로 주로 관계형 데이터베이스에서 사용 qu.. 2021. 2. 25.

티스토리툴바