'개발/⛵ 항해99' 카테고리의 글 목록 (3 Page)

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 스타일인데 이름은 트위터에서 가져왔다 ㅎ 한 주 동안 구현 해낸 기능들을 나열해보자면 로그인 회원가입 게시물 추가 게시물 조회 게시물 수정 (+재업로드 / 레이아웃 변경) 게시물 삭제 무한 스크롤 댓글 쓰기 좋아요 ..

[항해99] Day31. TIL – 무한 스크롤 네 이놈!

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 💜 TODAY 무한 스크롤 구현하면서 오류를 만났다. 나중엔 멘토님을 붙잡고 40분가량있었는데 결과는 오타로 인한 오류였다 😐 무한 스크롤인데, 스크롤을 하면 초반에 불러지는 값의 길이만큼 똑같은게 반복적으로 로딩이 되었다. 무한 렌더링이 되는 줄 알고 데이터베이스 어쩔? 이랬는데 그건 아니였다. 무한 스크롤 컴포넌트에 넣겨주는 props값 중에 리듀서 함수에서 넘어오는 값 중에 오타가 있어서 로딩이 제대로 이루어지지 않았던 것이다. 오늘 알게 된 console.log()의 힘. 멘토님과 하나 하나씩 다 찍어보고 값이 제대로 안 들어온게 있어서 그거부터 고쳐보자 싶어서 고치러 갔다가 발견한 오타. 그리고 해결된 오류. …그리고 밀려오는 민망함. 저 오류 때문에 2..

[항해99] Day30. TIL

2022.02.19· 개발/⛵ 항해99

💜 TODAY 오늘 하루 동안 firebase를 이용해서 게시물을 올리는 걸 다 할 수 있을 거라고 생각했는데, 파이어베이스와 연동해서 로그인/회원가입 기능 구현이 어려웠다. 데이터베이스에 글을 올리고 아미지까지 올리는데 점점 흐린 눈이 되어서 강의를 보게 되는 것 같았다. 이렇게 강의를 보면서 프로젝트를 해나가면 되는건가 이게 머리에 남나? 이런 의심이 또 들기 시작했다. 그런데 확실히 코드를 적어두고 구현시켜보고 다시 그 코드를 한번 더 보면 확실히 기능 구현의 흐름을 잘 볼 수 있는 것 같기도 하다. 이제 알 것 같으면서도 점점 미궁 속으로 빠지는 느낌. 그와 동시에 작은 기능들이 하나,둘 구현되는게 눈에 보이니 뿌듯함과 동시에 재미까지 있으니 멈추지 못하고 계속하는 것 같다. 오늘 굉장히 시간을 ..

[항해99] Day29. TIL – 리액트 심화주차 시작!

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 💜 TODAY 리액트 입문주가 모두 끝나고 심화주차가 시작되었다. 개인 과제로 부여받은게 순한맛, 매운맛이 있는데 순한맛도 순한맛이 아니였다. ㅎ 순한맛으로 부여받은 과제는 약간, 채팅 기능이 빠진 트위터같은 느낌 😵 도전정신이 확! 일어나면서눈이 핑글핑글 도는 느낌을 받았다. 로그인 페이지 회원가입 페이지 메인 페이지 로그인 기능 구현 파이어베이스 회원가입 연결 를 끝낸 상황인데, 사실 컴퍼넌트를 쪼개서 구현하는 것만 해봤지 element까지 쪼개서 구현해보는 건 처음이라서 정말 신세계이면서도 모바일, 태블릿같은건 사이즈를 어떻게 조절하지? 라는 생각이 들었다. 좀 더 기능 구현이 이루어지만 디테일하게 view를 다듬을 계획이다. 💜 TOMORROW 로그인 유지..

[항해99] Week04. WIL – 라이프 사이클(클래스형 vs 함수형)

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Weekly I Learned 📚 이전에 리액트의 라이프 사이클에 대해서 포스팅을 한 적이 있는데, 이번에는 리액트의 클래스형 , 함수형에 따른 사이클의 메소드에 대한 자세한 이야기를 해보려고 한다. ⭐ 라이프 사이클 (클래스형) 클래스형에서 라이프 사이클은 세세하게 나누면 총 9개가 존재한다. 이 중에서 카테고리를 나눠보자면 크게는 3가지로 나뉘는데, 생성이 될 때(Mount), 업데이트 될 때(Update), 사라질 때(Unmount) 이다. 이해를 돋기 위해서 예전에 첨부했던 사진이지만 한번 더 첨부해본다. ⭐ 라이프 사이클 메소드 1️⃣ constructor 클래스형 생성자라는 말이다. 클래스형 컴포넌트를 만들 때 처음으로 실행된다. 이 메서드에 초기 state를 넣을 수 있다. 함수형 ..

[항해99] Day27. TIL – TDZ? / 또 다른 오류의 발견?

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ TDZ? TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻. →스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다. ⭐ 변수 생성 과정 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다. 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다. 할당 단계(Assignment phase) : 사용자가 u..

[항해99] Day25. 옵셔널 체이닝(Optional Chaining)이란?

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 옵셔널 체이닝이란? 그냥 스윽- 보고 지나갈 때는 삼항연산자에 쓴느거를 다르게 말하는건가? 라며 가볍게 생각하고 찾아봤는데 그런게 아니였다. ……… Optional Chaining은 ES2020에서 등장한 새로운 연산자로서 ‘?.’ 의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자(.)와 비슷하게 동작하지만 참조가 null 혹은 undefined여도 에러식을 리턴하지 않고 undefined 값을 리턴한다. 함수도 마찬가지다. 중첩된 오브젝트 프로퍼티에 접근하는 데에 가장 안전한 방법으로, 중간 프로퍼티가 존재하지 않은 경우에도 안전하게 접근..

티스토리툴바