본문 바로가기

분류 전체보기73

React - Side Effect / Pure Function Side Effect(부수효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다. 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나, 이벤트를 활용해 DOM을 직접 조작할때 Side Effect가 발생했다고 한다. 전역 변수 foo를 bar라는 함수가 수정하는 예제 let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! Pure Function(순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 순수 함수라고 한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치거나, 함수가 입력으로 전달된 값을 .. 2023. 4. 3.
CSS - 기초 CSS(Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 즉, CSS는 좋은 사용자 경험을 제공하기 위한 도구이다. 사용자 인터페이스(UI: user interface) 인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI(Command Line Interface)를 사용하였다. 하지만 이는 컴퓨터에 무지한 일반 사용자가 사용하기에는 어려움이 있다. 트.. 2023. 4. 2.
HTML - Sementic Element 시맨틱 요소(Sementic Element)란? 시맨틱이란 '의미가 있는, 의미론적인'이라고 해석할 수 있다. 시맨틱 요소를 사용해야 하는 이유 검색 엔진이 시맨틱 요소를 더 좋아하기 때문이다. 네이버, 구글 등의 검색 포털은 모두 고유한 검색 엔진을 보유하고 있다. 이러한 검색 엔진은 입력된 키워드를 각 웹페이지에서 포함하고 있는지 확인하여 결과를 보여준다. 이러한 검색 엔진들은 시맨틱 요소를 중요한 키워드로 고려한다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과 상위 노출이 결정될 수 있다는 것이다. 여러 개발자가 함께 작업할 때 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는것이 훨씬 편리하기 때문이다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉬워진다는 장점이 있다. 시맨틱 .. 2023. 4. 2.
HTML - 기초 HTML(HyperText Markup Language) 웹 페이지의 틀을 만드는 마크업 언어 여러가지 tag를 이용한 HTML 예시 DOCTYPE html> Document div span sapn 구글 1 2 1 2 d c a b submit 2023. 3. 30.
REST API REST(Representational State Transfer) API 로이 필딩(Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개 되었다. 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 뜻한다. REST API 디자인 로이 필딩이 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리차드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 만들었다. REST 성숙모 모델은 총 4단계(0~3)로 나누어진다. 실제로는 엄밀하게 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 볼 수 있고.. 2023. 3. 29.
SSR vs CSR SSR(Server Side Rendering) CSR(Client Side Rendering) SSR vs CSR SSR과 CSR의 주요 차이점은 페이지가 렌더링 되는 위치이다. SSR은 서버에서 페이지를 렌더링 하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링 한다. CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다. SSR 사용 SEO(Search Engine Optimization)가 우선순위인 경우, 일반적으로 SSR을 사용한다. 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR이 적합하다. 웹 페이지가 사용자와 상호작용이 적은 경우, SSR을 활용할 수 있다. CSR 사용 SEO가 우선순위가 아닌 경우.. 2023. 3. 28.