AI Platform / Web

Frontend에서 컴포넌트를 만들기 위해 우리가 가장 먼저 접하는 개념은 컴포넌트 주도 개발(Component Driven Development)이라고 할 수 있다. 컴포넌트 주도 개발(Component Driven Development)이란 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스를 만드는 개발 및 설계 방법론이다. 컴포넌트란, 상호 교황이 가능하고 표준화된 UI 구성 요소라고 할 수 있다. 우리는 리액트를 통해 작은 컴포넌트를 만들고, 그 컴포넌트를 활용해 개발을 진행한다. 컴포넌트 주도 개발(CDD)란 재사용 가능한 컴포넌트 만든 후에, 전체 화면(View)을 구성하기 위해 결합해 가는 상향적 구조(bottom-up)라고도 할 수 있다. UI는 프로젝트가 커질 수록 관리하기가 어렵다. 왜..

앞에서 우리는 브라우저에 대한 기본적인 지식을 알아보았다. 이번엔 브라우저가 어떠한 방식으로 렌더링을 하는지 알아보자. 사실 초창기 브라우저에서는 기본적인 마크업 문법을 지키지 않으면, HTML을 파싱 하지 못하였다. 예를 들면, body 태그를 안적거나 닫는 태그를 넣지 않으면 파싱자체가 안되었다. 그러나 현재 브라우저(모던 브라우저) 자체의 성능이 좋아지고, 예외처리도 잘 되어 있어서 많은 기초지식이 없더라도 웹 페이지와 application 동작에는 무리가 없이 실행이 된다. 그럼에도 우리는 서비스 사용자가 웹 페이지를 이탈하지 않고 조금 더 좋은 UX를 보여주기 위해서는, 브라우저 렌더링에 대한 지식을 정확히 적용하여 응답 속도를 높이는 과정이 필요하다. 응답 속도를 높이는 방법에는 Infra /..

우리는 브라우저를 통해 정보전달이나 데이터를 저장한다. 현재 이 글을 쓰고 있는 곳도 브라우저이다. 브라우저에 대한 개념을 찾고 있는 당신 또한 사실상 웹 개발을 하고 있을 가능성이 높다. 브라우저에 대해 잘 알 수록 웹 애플리케이션을 효율적으로 구축하고 UX를 최대화할 수 있다. 인터넷을 사용하거나 개발을 할 때, 브라우저에 대해 고민을 해본 적은 사실 많이 없다고 생각한다. 브라우저에 조금 더 친숙해지는 시간을 가져보고자 한다. 브라우저를 공부하는 이유 브라우저는 HTML 문서를 해석하고, CSS를 적용하며, JavaScript를 실행한다. 각 요소의 동작 원리를 이해하면 웹 페이지의 구조와 스타일링, 상호작용을 제어하는 방법을 알 수 있고 브라우저의 동작 방식을 이해하면 웹 페이지의 오작동을 디버깅..

JavaScript에서 if문과 비슷한 switch 문에 대해 적어보려 한다. 우리는 switch문을 언제 사용하고, 잘 사용하고 있는지에 대해 고민해 보면 좋을 것 같다. 기본적인 문법 설명은 생략한다. eslint관점에서 우선 설명을 풀어본다. 그리고 TypeScript에서 SRP(Single Responsibility Principle) 원칙으로 switch를 어떻게 사용해야 할지에 대한 고민을 함께 해본 후, 추가로 React에서 활용해 보도록 하자. 일반적으로 우리는 switch 문에서 default값을 꼭 넣어줘야 에러가 발생하지 않는다고 생각한다. 왜냐하면, 개발자도 사람이기 때문에 실수로 모든 조건을 넣지 않아 예외가 발생 할 수 도 있기 때문이다. 또한, eslint 관점에서 defau..

구글 로그인, 카카오 로그인과 같이 깃헙으로 로그인 하는 방법에 대해 알아보도록 하자. 개념 정리보다는 react를 통해 빠르게 구현할 수 있도록 핵심만 간결하게 적어보고자 한다. 만약 github이 아닌 카카오 로그인 붙이는 방법은 아래의 내용을 참고하자. https://han-py.tistory.com/417 [React/Nodejs] 카카오 로그인 연결하기 카카오 로그인을 진행해 보자. 기본적인 작동 방식은 여기를 눌러서 확인하자. 기본 셋팅은 할수 있다 판단하고 글을 적어보겠다. 사실 쉽게 사용하기 위해 만들어진 라이브러리도 많다. 그러나 han-py.tistory.com 1. github OAuth 등록 당연한 말이지만 github에 oauth를 한다고 등록하는 과정이 우선 필요하다. https..

Nextjs에서 TypeError: Cannot destructure property 'styles' of 'this.context' as it is null. 에러를 만났다면 해결책은 어렵지 않다. ); }

javascript의 변수를 다른 값으로 복사를 하려고 한다. 이때 우리의 생각처럼 복사가 이루어지지 않는다. 왜냐하면 자바스크립트의 복사 방법은 깊은 복사와 얕은 복사로 나누어 지기 때문이다. 보통은 아래와 같이 변수를 만들어서 복사를 한다. let a = '10'; b = a; 매우 간단한 예이다. 우리는 b에 10이 담겨 있음을 직관적으로 이해할 수 있다. 여기서 변수란, 값을 저장하기 위한 메모리 공간을 식별하기위해 붙인 이름이다. 즉, 변수 사용 시 자바스크립트 엔진은 변수에 메모리 주소를 기억하게 하여, 변수 사용 시 저장된 메모리 주소로 가서 저장된 값을 가져온다. 이러한 방식은 아래의 타입에 따라 약간씩 다르다. 1. Primitive Type (원시 타입) 원시 타입에는 number, s..

react로 DOM에 접근하여 스크롤 이벤트, 포커싱 등을 할 수 있는 방법이 바로 ref를 사용하는 방법이다. 기본적인 React에서 부모 자식 컴포넌트의 상호작용은 props로 한다. 그리고 자식을 수정하기 위해서는 props의 값 변경을 통해 수행한다. 수정을 하는 것이 자식 컴포넌트가 아닌 DOM Element나 React Element인 경우도 있을 것이다. 이러한 경우에 ref를 통해 render 되는 html 태그(DOM Node, React Element)에 접근하는 것이 가능하다. 또한, Ref 자체가 단방향 흐름인 React에서 어떠한 오아시스 같은 역할을 하는지도 알아보자. 1. Ref 사용 시기 공식문서는 아래와 같은 시기에 사용을 권장한다. focus 하는 경우 input 태그 선..