💬 들어가며 firebase를 사용하여 프로젝트를 진행중에 게시글을 실시간으로 불러와야하는 문제점이 생겼다. 이럴땐 onSnapshot을 사용하여 실시간으로 DB정보를 가져올 수 있다. 이 onSanpshot은 firestore를 이용하는데 .. FireStore란? Firestore는 구글(firebase)에서 지원하는 NoSQL 데이터베이스 서비스로, 실시간 리스너를 통해 사용자와 기기간 데이터의 실시간 동기화가 가능하다. 또한, Cloud Firestore는 앱에서 많이 사용되는 데이터를 캐시하기 때문에 기기가 오프라인 상태가 되더라도 앱에서 데이터를 쓰고 읽고 수신 대기하고 쿼리할 수 있다. firebase를 이용해본 사람이면 누구나 아는 부분일 것이다. 여기에서 firestore Database..

❓ 문제 상황 textarea 에서 줄바꿈 표시하기 프로젝트 진행중 게시글에 수정하기를 누르면 textarea 에서 줄바꿈이 나타나지 않는 현상이 일어났다. 이러한 문제가 생기는 것을 찾아본 결과 입력된 텍스트의 줄바꿈을 제대로 저장하고 출력해주지 않아서 그렇고 한다. 하지만 찾아보니 문제는 생각보다 간단했다. 💡 문제 해결 white-space white-space는 요소안의 공백처리를 어떻게 할지 지정하는 속성이다. normal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시되고, 글이 길어지면 텍스트가 자동 줄바꿈 됨니다. nowrap : 공백을 여러개 넣어도 1개만 표시되고, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시 된다. pre : 공백을 코드에 있는 그대로 표시한다. 태그처럼..

sort를 이용한 인기순위 정렬 firebase를 이용해 게시글을 받아온 후 해당 게시글중 인기순위에 든 목록을 따로 만들어야 했다. 우리가 이용한 방법은 sort를 이용하여 게시글을 인기 순서대로 정렬시켜서 원하는 만큼 자르기! 먼저 받아온 글들을 출력하면 아래와 같이 배열형태로 구성되어 있었다. 우리는 이것을 sort와 slice를 이용하여 정렬한 후 잘랐다. 우리가 원하는 게시글은 3개 이기 때문에 0-3 까지 잘랐다. sort 와 slice를 이용한 코드 //받아온 data const [contents, setContents] = useState([]); // 인기 게시글을 가져오기 위한 방법 const bestBoard = contents .sort((a, b) => { return b["lik..

간단하다! 컴포넌트를 리랜더링 시키고 싶으면 useEffect를 사용하면 된다. 처음 코드를 작성했을 시 전반적인 Link 연결상태가 좋지않아 제대로 확인하지 못했던 문제점을 수정했다. const url = window.location.href; const lastIndex = url.lastIndexOf("/"); const urlNumber = url.substring(lastIndex + 1); 위 코드는 현재 url의 게시글 index번호를 불러오는 코드이다. (서버와 연결하지 않은상태라 임의의 데이터로 작업중) 게시글 목록중 하나의 게시글을 선택했을때, 그에맞는 상세 내용이 떠야하는데. 처음랜더링 된 게시글이 계속해서 뜨는 오류가 발생하고 있었다. 따라서 컴포넌트가 호출될때마다 리랜더링해주며 그..

MVC (Model - View - Controller) 소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성을 높이는 모델이다. Model 애플리케이션의 데이터를 관리하는 역할을 담당 데이터의 구조와 접근 방식을 정의, 데이터 변경에 따른 로직도 포함 View 애플리케이션의 사용자 인터페이스를 담당 데이터의를 보여주는 역할을 하며 UI와 데이터의 상호작용도 포함됨. Controller Model과 View 간의 상호작용을 관리하는 역할을 담당함 사용자의 입력에 대한 처리와 Model의 데이터 업데이트 등을 수행함. Flux 패턴 Facebook에서 개발된 소프트웨어 아키텍처 패턴중 하나로, React와..

React의 SPA 란? SPA (Single-Page-Application)는 어플리케이션을 단일 페이지로 구성하는 것을 의미한다. 처음 웹페이지 전체가 한번만 로드되고, 이후에 사용자 인터페이스가 동적으로 변경되면서 필요한 데이터만 서버에서 가져오는 방식으로 동작한다. React 의 SPA는 여러개의 컴포넌트를 조합하여 구성되는데 각각의 컴포넌트는 독립적으로 작동하며, 필요에 따라 다른 컴포넌트와 상호작용 한다. 쉽게 설명하면 Web에서 변경되어야할 부분(컴포넌트 단위)만 리 랜더링 되는것을 말한다. Android의 fragment와 차이점 이러한 컴포넌트들은 어플리케이션의 fragment와 비슷한 개념이지만, 더욱 동적이고 재사용성이 높은 방식으로 작동한다. React의 SPA는 React Rout..

Hook Hook 이란 함수 컴포넌트에서 상태관리 및 라이프사이클과 관련된 작업을 사용할 수 있도록 하는 리액트의 API이다. 이전에는 클래스 컴포넌트에서만 React의 라이플 사이클을 관리하고 사용할 수 있었는데 Hook의 등장으로 함수 컴포넌트 에서도 같인 기능의 작업을 수행할 수 있게 되었다. React에서 제공하는 Hook중 useState, useEffect, useContext 등을 알아보자. useState 상태를 관리하기 위해 사용되는 것으로 초기값을 인자로 받으며, 배열 형태로 현재 상태값과 해당 상태값을 업데이트 하는 함수를 반환한다. 예제 export default function Home() { //useState를 이용하여 초기 값을 설정함 const [count, setCount..

CRA (Create React App) Facebook에서 제공하는 React 애플리케이션을 더 쉽게 생성하고 설정할 수 있는 도구로 React를 사용하여 웹 애플리케이션을 개발할 때, 초기 설정을 수동으로 수행해야 하지만, CRA를 사용하면 초기 설정을 자동으로 수행할 수 있다. CRA를 사용하면 React 애플리케이션을 생성하고, 빌드하고, 개발 서버를 실행할 수 있다. 이를 통해 사용자는 빠르게 React 애플리케이션을 개발할 수 있으며, Webpack과 Babel과 같은 도구의 설정을 수동으로 수행할 필요가 없어 초보자인 경우에는 어려운 환경설정을 대신해서 간편하게 React 개발을 시작할 수 있게 해준다. CRA는 React 애플리케이션을 시작하는 데 좋은 선택이며, 초기 구성이 간단하고 사용..

ECMAScript JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어다. 대부분의 웹 브라우저에서는 JavaScript를 볼 수 있는데 브라우저마다 ECMAScript 지원되는 것이 다르기 때문에 조금씩문법에 대해 호환성이나, 속도 차이가 날 수 있다. 수행 능력과 지원되는 ECMAScript가 다르기 때문에 사람들은 일반적으로 JavaScript 호환성보다 ECMAScript 호환성이라는 단어를 더 사용한다. 바벨 바벨은 ES6 사양으로 작성된 코드를 함수적으로 동일한 ES5 코드로 바꿔준다. 대부분의 주요 브라우저는 ES5까지는 지원을 하기 때문에, 개발자들은 브라우저 간 호환성 걱정을 덜 수 있었다. 이전에 인터넷 익스플로어는 ES6가 지원되지 않아 ES5를 사용했는데 그..

Props properties의 줄임말로 리액트 컴포넌트간에 데이터를 전달하고 통신하는데 사용되는 개념이다. 부모컴포넌트가 자식 컴포넌트에게 데이터나 설정값을 전달할 때 사용되며, 컴포넌트의 속성(특성)을 나타내는 데이터이다. props를 통해 컴포넌트의 동작을 다르게 조정하거나 동적인 데이터를 렌더링하는 데 사용된다. props 특징 읽기전용 : 자식 컴포넌트는 부모로부터 받은 props를 변경할 수 없다. 읽기전용으로 사용한다. 전달방식 : 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할 때 사용된다. 동적 데이터: props를 사용하여 동적으로 데이터를 렌더링하거나 컴포넌트의 동작을 제어할 수 있다. 재렌더링 트리거 : props가 변경되면 해당컴포넌트가 리렌더링된다. 부모로부터 받은 props가 변..