전체 글

TypeScript를 사용하는 이유 자바스크립트만 사용하는 것에 비해 타입스크립트를 사용하면 어떤 점이 좋은걸까? 타입스크립트의 특징을 기준으로 정리해보자. 정적 타이핑 타입스크립트는 정적 타입을 제공해 코드 작성 시의 변수, 함수, 객체 타입을 명시해준다. 이는 컴파일 시간에 오류를 발견하고 디버깅을 용이하게 해준다. 자바스크립트는 동적 타입 언어로, 런타임에서만 타입 관련 오류를 발견할 수 있기 때문에 구동 전에 오류를 디버깅할 수 있다는 점이 용이하다. 강력한 객체 지향 프로그래밍(OOP) 지원 타입스크립트는 클래스, 인터페이스, 상속 등의 강력한 객체 지향 프로그래밍 기능을 제공한다. 이를 통해 큰 프로젝트를 더욱 쉽게 관리하고 구조화할 수 있는 장점이 있다. 개발 도구의 향상된 지원 타입스크립트..

개발 공부를 시작하고 처음으로 해본 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 : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되..