❓ 문제 상황 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와..

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가 변..

Component (컴포넌트) 컴포넌트는 데이터를 가진 props 객체인자를 받아 element를 반환한다. UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것으로, 엘리먼트 트리를 캡슐화 하는 것이다. Element (엘리먼트) element는 component를 이루는 작은 단위로, 보통 바로 사용되지 않고 Component에 리턴받아서 사용되곤 한다. 엘리먼트는 인스턴스가 아니다. 엘리먼트는 immutable한 plain object이다.(엘리먼트가 생성되면, 절대로 변화되지 않는다.) PlainObject 오래된 방식의 단순 자바 객체다. 조금 더 디테일한 의미는 특별한 환경(클래스나 인터페이스 등)에 종속되지 않는 일반적인 Java 객체를 의미한다. 이 단순 자바 객체는 다른 클래스나 인터페이..

SSR (Server Side Rendering) 서버 사이드 랜더링은 서버로부터 완전하게 만들어진 html을 받아와 페이지를 렌더링하는 방식. CSR과의 차이점으로는 초기 로딩속도가 빠르지만, 새로운 요청이 있을때마다 페이지 전체를 다시 구성해야하는 단점이 있다. 장점으로는 SEO 검색엔진 최적화에 유리하다. 검색엔진이 웹을 크롤리하면서 페이지의 컨텐츠 색인을 생성하는 과정에서 유리하다. (SPA - Single Page Application -> 인터랙션이 발생할때마다 서버로부터 새로운 파일을 받아 해당 링크로 이동하여 페이지 전체를 새로 랜더링하는 웹페이지 구성방식 ) 왜 SEO 검색엔진 최적화에 유리할까? SSR은 서버에서 초기 페이지 로딩시 페이지의 내용을 렌더링 한 후 클라이언트에게 전달하기 ..