choi95의 TIL📝

Infinite Scroll 기능의 필요성 원래는 진행하던 프로젝트의 메인 페이지 내에서 추가 데이터를 서버에서 가져와 랜더링하는 방식은 Carousel Slide 였지만 관련 디자인 시안이 대폭 수정되었다. 이에 따라 데이터를 보여주는 방식이 특정 지점에 도달했을 때, 이를 인식해 서버에서 추가 데이터를 가져오는 Infinite Scroll 방식을 사용하기로 하였다. 처음에는 특정 지점을 계산하기 위해 ScrollingElement 내의 scrollTop값을 사용하였지만, 스크롤이 되는 속도에 따라 값이 항상 바뀌는 이슈와 scroll event 자체의 성능 저하 문제(동기적으로 이벤트 발생할 때마다 호출되는 콜백 함수)로 인해 Intersection Observer API를 사용해 보기로 했다. In..

문제 현재 mainPage redux store에는 크게 콘텐츠를 보여주는 contents와 사용자 방을 보여주는 roomList가 저장되어 있다. redux-saga를 통해 서버와 API 통신을 하여 각각의 배열 내에 데이터들을 적재해주는 과정에서 문제가 발생하였는데, contents에 해당하는 데이터들은 서버에서 문제 없이 가져와 저장되는 반면에, roomList에 해당하는 데이터들은 저장되지 않았다. 처음에는 서버와 API 통신하는 과정에서 문제가 발생한 줄 알고 Promise 후속 메서드인 then 메서드 내에서 콘솔을 찍어봤는데, 문제 없이 roomList에 해당하는 데이터들도 가져왔다. 문제해결 한참을 해당 Blocker에 대해서 고민한 결과, 리액트 상에서 불변성을 지켜주지 못해 발생한 문제..

Before 코드 다음은 로그인 컴포넌트의 JSX 코드이다. 로그인 식별을 위해 id와 pwd의 value 값을 식별해주기 위해 state에 값을 저장하는 메서드인 checkVal를 onChange 이벤트에 바인딩해주었다. 두 개의 다른 Input value를 하나의 함수로 관리해주다 보니, 아래와 같이 똑같은 코드 반복되며 불필요한 조건문이 사용되어졌다. checkVal = event => { let { value } = event.target; if(event.target.className === 'login-form') { this.setState({ login : value, }); } else { this.setState({ pwd : value, }); } }; After 코드 위의 내용을 수..

구현 결과 다음과 같이 Scroll값이 화면 상에 끝 지점에 도달했을 경우에 추가적으로 서버에 데이터를 요청하여 화면에 랜더링되도록 기능 구현하였다. 리액트 상에서 전역 객체(Window)에 스크롤 이벤트를 바인딩해주는 작업은 이번에 처음하는 거였기 때문에 관련된 코드를 포스팅해보고자 한다. 소스 코드 우선, 전역 객체 Window에 Scroll Event를 바인딩해주는 시점은 모든 요소가 화면에 나오는 처음부터 이다. Vanilla Javascript 상에서는 이 작업을 DomContentLoaded 나 load 된 시점에 해주지만 리액트 상에서는 해당 이벤트 발생 시에 Scroll 이벤트를 바인딩해주는 것보다 컴포넌트가 처음 Mount(마운트) 되는 시점에 하는 것이 더 명확하다고 생각이 들었다. 이..

https://choi95.tistory.com/175 Carousel Slide 기능 Component로 분립 Issue 위 Carousel Slide 기능은 해당 Main Page 뿐만 아니라 다른 Page 내에서도 쓰이기 때문에 따로 컴포넌트로 분립할 필요가 있음을 확인하였다. Carousel Slide 기능이 리스트 형식에서 제대로 동작하기 choi95.tistory.com 이전 포스팅에서 Carousel Slide 기능 내에 쓰인 Feeds Layout은 총 2개이다. 해당 Layout 형식은 Main Page 내에서 뿐만 아니라 여러 다른 Page 내에서도 공통적으로 쓰인다. 이를 위해 임의로 Layout Type 값을 props로 넘겨주어 Type 값에 따라 다른 형식의 Feeds List가..

Issue 위 Carousel Slide 기능은 해당 Main Page 뿐만 아니라 다른 Page 내에서도 쓰이기 때문에 따로 컴포넌트로 분립할 필요가 있음을 확인하였다. Carousel Slide 기능이 리스트 형식에서 제대로 동작하기 위해서는, 해당 리스트 요소들이 Wrapper인 Carousel Slide 태그 내부로 들어가야 한다. Solution 우선은 다음과 같이 리스트 요소를 동적으로 생성해 주는 MovieList 컴포넌트를 따로 분리하여 주었다. (Feed Layout 또한 나중에 재활용하기 위해 Presentation Component로 따로 분리하여 주었다) render() { let { curFeedsType, curMovieListData } = this.state; if (this..

Issue 선언형 React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다. 다음 설명은 리액트 공식 사이트에 처음 들어가면 메인 페이지에서 바로 확인할 수 있다. 여기서 말하는 선언형이 정확히 어떤 의미를 지니고 있는지, 실제 코드 필자의 코드와 함께 살펴보고자 한다. 명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍은 어떻게 할 것인가, 선언형 프로그래밍은 무엇을 할 것인가 명령형 프로그래밍(Imperative Programming)은 어떤 방법(How)으로 할 것인지에..

Issue import React, { Component } from 'react'; import { Link } from 'react-router-dom'; class Comments extends Component { render() { let { name, comment } = this.props; let isSkip = false; let addVal; if (comment.length > 20) { comment = comment.slice(0, comment.length - 6); isSkip = true; addVal = ( 더보기... ); } return ( {name} {comment} {isSkip && addVal} ); } } export default Comments; 다음 코드..