분류 전체보기

개발 공부를 시작하고 처음으로 해본 2주간의 팀 프로젝트! 나는 개발 실력은 현재 매우 부족하나 팀장 포지션이었고, 우리 팀 구성은 나 포함 다섯명. 두 분은 현업 경험이 조금 있는 분들이고 나 포함 나머지 셋은 처음 공부하고 팀 프로젝트 경험이 처음인 경우였다. 기술적 측면의 프로젝트 리드 및 백업을 경험자 두 분이 많이 맡아주셨고, 나머지 인원은 기능 구현 및 각자 맡은 역할에 충실했다. 프론트엔드 과정이라 백엔드, 디자이너는 없이 프론트 5인으로만 구성되어 진행되었다. 🧐 어떤 프로젝트를 만들었나? OPEN MIND라는 서비스로, 익명 기반으로 질문과 답변을 할 수 있는 소통 플랫폼이다. 일정: 2023. 11. 03.(금) ~ 2023. 11. 17(금) (2주) 서비스 기획안 및 디자인 시안은..

Presentational & Container 디자인 패턴 Presental & Container 디자인 패턴이란, 로직을 수행하는 컴포넌트와 마크업을 통해 UI를 보여주는 컴포넌트가 분리된 패턴을 의미한다. 이 패턴이 가지는 특징은 아래와 같다. 앱의 기능과 UI에 대한 구분이 쉬워진다. 같은 state를 다른 container에게 props로 내려 상태를 공유할 수 있다. 로직 수행, 마크업을 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어나다. (특히 마크업 변경에 매우 유연하다) 동일한 마크업, 컨테이너 레이아웃(header, footer)는 반복해서 작성하지 않아도 this.props.children 으로 구현할 수 있다. Presental 컴포넌트 사용자가 직접 보고, 조작하..

CSS-in-JS CSS-in-JS란 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일링 하는 방법을 말한다. 👍 장점 지역 스코프 스타일 일반 CSS를 작성할 때는 실수로 의도한 것보다 더 광범위하게 스타일을 적용하기 쉽다. 하지만 CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결한다. 코로케이션 일반 CSS를 이용할 경우 모든 리액트 컴포넌트가 src/components 에 있는 동안 .css 파일을 src/styles 디렉토리에 넣을 수 있다. 이런 경우 앱이 커짐에 따라 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어려워진다. 사용되지 않는 스타일을 쉽게 구분할 수 없어서 CSS에 사용하지 않는 코드가 표시되는 경우가 많아진다. ..

초창기 웹 렌더링 방식과 Ajax의 등장 모든 웹페이지는 정적인 페이지였다. 변화가 있을 때마다 서버로부터 새로운 HTML을 전송받아 다시 렌더링을 해야 했고, 이는 성능적 문제와 부정적인 사용자 경험의 이슈가 있었다. 그 후, 자바스크립트를 통해 비동기적으로 데이터를 주고 받는 Ajax가 등장했고, 전체 페이지를 리렌더링하지 않고 필요한 부분의 데이터만 불러와 웹 사이트 화면을 동적으로 변경할 수 있게 되었다. 기존에 서버에서만 이루어지던 다야한 로직 처리나 HTML 생성을 상당수 클라이언트(브라우저)에서 처리할 수 있게 되었다. 현재는 React, Angular, Vue 등의 다양한 프레임워크 사용으로 웹을 보다 쉽게 구축할 수 있게 되었다. CSR(Client Side Rendering) React..

리액트 라이프 사이클 리액트의 컴포넌트는 생명 주기가 있다. 생애 주기 또는 라이프 사이클이라고도 한다. 리액트 앱을 개발하면서 렌더링 직전에 특정한 작업을 해야 하거나, 컴포넌트 업데이트 전후에 처리해야 할 작업이 있을 수 있는데, 이때 리액트 컴포넌트 라이프 사이클 관련 함수들을 이용하면 이를 처리할 수 있다. 아래 표 내부 단계에 따라 다양한 종류의 라이프 사이클 함수가 있다는 것을 확인할 수 있다. 컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount로 나뉜다. 1. 마운트(Mount) 마운트는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다. 이때 호출되는 함수는 아래와 같다. constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되..

Key 리액트의 key는 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분 데이터의 id를 key로 사용한다. const todoItems = todos.map((todo) => {todo.text} ); 렌더링한 항목에 대한 안정적 id가 없을 경우, 항목의 인덱스를 key로 사용하기도 하나 권장되지 않는다..