Ming devlog

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 값을 리턴한다. 함수도 마찬가지다. 중첩된 오브젝트 프로퍼티에 접근하는 데에 가장 안전한 방법으로, 중간 프로퍼티가 존재하지 않은 경우에도 안전하게 접근..

[항해99] Day23. TIL – 양방향 바인딩이란?

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ 데이터 바이딩이란? 두 데이터 혹은 정보의 소스를 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 객체)를 일치시키는 것을 말한다. 예를 들어, MVC 모델에서 model과 view를 서로 묶어 model과 view의 “자동 동기화” 시키기 라고 이해할 수 있다 ✨ 양방향 데이터 바인딩 양방향 바인딩이란, 자식 컴포넌트에서 발생하는 이벤트를 감지하는 바인딩과 자식 컴포넌트에 데이터를 전달하는 프로퍼티 바인딩이 결합된 형태를 말한다. 장점 : 데이터를 직접 렌더링 해줄 필요가 없기 때문에 그와 관련한 코드가 필요 없어져서 코드가 짧아진다. ⇒ 양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, ..

[항해99] Day22. TIL – Redux를 사용하는 것과 Context API 사용의 차이점

2022.02.19· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ✨ Redux – Middleware vs Context API 미들웨어 Redux 에는 미들웨어(Middleware)라는 개념이 존재합니다. 리덕스로 상태 관리를 할 때에는 우리가 [userReducer] 를 사용해볼 때 접했던 개념인 reducer 함수를 사용합니다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행 할 수 있습니다. 예를 들자면.. -특정 조건에 따라 액션이 무시되게 만들 수 있습니다. -액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다. -액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. -특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 ..

[항해99] Day16. TIL – React(리액트) 에서 JSX 배열 반복문 / React – Router v6 변화

2022.02.19· 개발/⛵ 항해99

⭐ React(리액트) 에서 배열 반복문 쓰기 이번 주에 주어진 개인 과제를 하기 위해서 코드를 썼는데, 공부할 때는 술술술 적히던 코드가 갑자기 꽉! 막혔다. 바로 배열 때문이였는데, return () 안에서 for문을 불러 낼 수 있나, 없나에 대한 의문과 늘 상 map()으로만 반복문을 만들어내던 버릇으로 한참을 헤매였다. 일단, 못 불러낸다! ㅎ 역시나 기억에 없었던 이유가 확실하게 있었다. for문 자체를 return () 값 안에서 불러낼 수 없지만 함수로 위에서 쓰고 JSX를 반환하는 함수로 호출을 할 순 있다! 개인 과제로 만들고 있는 일주일 평점을 주는 프로젝트인데, 앞선 메인 페이지에 뜨는 평점이 들어가 있는 부분은 랜덤 숫자를 뽑아서 💜🤍 이모티콘을 이용해서 만들었다. 이 때 랜덤으로..

[항해99] Day15. TIL – 주특기 입문시작 / 라이프 사이클이란?

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐라이프 사이클이란? 라이프 사이클을 이야기 하기 전에 ‘리액트’의 특징적인 부분을 먼저 이야기 해야합니다. 리액트는 컴포넌트를 기반으로 하는 View 중심의 자바스크립트의 라이브러리입니다. html단위 하나하나를 객체로 생각하는 DOM은 여러가지 하위 값을 가지고 있습니다. 이걸 트리 구조라고 합니다. 이 때 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정할 걸 찾고 수정한다면 불필요한 연산들이 엄청 많이 일어납니다. 리액트는 이 부분의 보안할 수 있는데요. 이게 가상DOM이라는 것입니다. 기존 DOM과 어떤 행동 후 새로 업뎃된 부분이 가상DOM에 표현되고 두 가지를 비교해서 수정된 부분은 바꿔줍니다. 그러면 불필요한 연산들이 일어날 필요가 없겠죠? ..

[항해99] Week02. WIL – ECMAScript, ES란? ES5/ES6 문법 차이

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Weeky I Learned 📚 ⭐ ECMAScript 란? JavaScript를 공부하다보면 ECMAScript 라는 단어를 한번쯤은 보게 될 겁니다. 두 용어가 믹스되어서 사용되기 때문에 헷갈리기 쉽습니다. 오늘 그 두 가지 용어의 차이를 알아보려고 합니다. ECMA 인터내셔널 👉🏻 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구입니다 브라우저가 생겨나고 서로 사용자를 끌어내기 위해 혼란스러울 시기에 MS의 IE가 JScript 라는 이름으로 자바스크립을 더해서 만들어냅니다. 이 때 이미 Javascript는 존재하고 있었는데 두 가지의 스크립트는 시간이 흐를수록 달라져가고 더욱 혼란을 가중하자 ECMA 인터내셔널에서 이런 스크립트 언어에 대한 표준을 내리게 됩니다. 이 뿐만 아니라 다..

[항해99] Day10. TIL – 알고리즘 공부는 습관이다 / 망한 하루

2022.02.18· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 알고리즘 공부는 양인 것 같다 알고리즘 공부는 꾸준해야 한다는 걸 한번 더 깨달았다. 하면 할 수록 사고의 방식이 다양해지는 것 같고. 확실히 알고리즘 문제를 풀 때에는 단순히 머리로만 생각만 하는게 아니라 노트에 간단히 그림을 그리거나 생각을 적어 내려가면서 하는 것이 훨씬 빨리 풀 수 있다는 점도 깨달았다. 노트에 적어 내려가다 보면 안 풀리던 것도 뭔가 잘 보이는 느낌이 든다. 오늘 로또 관련 문제를 푸는데 1시간 이상이 걸렸지만 결국은 풀어냈고, note taking 도 엄청 많이 했다. ⭐ 소통의 방식 이런 문제를 2주차에 겪게 될 지 몰랐는데, 불만이 있다면 매니저에게 이야기를 해서 풀어 나가야 할 문제인거 같은데, 이걸 그렇게 모두가 보는 앞에서 ..

전체 글

티스토리툴바