본문 바로가기

개념정리

1/18[TIL]MVC Pattern, ORM MVC 하나의 소프트웨어가 돌아가기 위한 패턴으로 Model, View, Controller로 구성되어 있다. 서비스 하나가 돌아가기 위해서 여러 과정과 처리들이 필요한데 그 처리들을 각 기능별(Model, View, Controller)로 나누는 특징이 있다. 하나의 코드 베이스에서 전부 구현하는 것이 아니라 의도적으로 구분하고 나누어서 진행한다는 점을 가진다. 이렇게 MVC 패턴을 사용하게 되면 가독성, 퀄리티 등 여러 측면에서 장점을 가지고 온다. MVC 패턴들을 사용하는 웹 프레임워크가 많이 존재한다. JS : Express, Backbone, Angular PHP : Laravel, Codeigniter Python : Django, Flask Ruby : Ruby on Rails Model, .. 더보기
1/13[TIL]Database Database를 이야기할 때 SQL을 논하지 않을 수 없다. SQL 데이터베이스 용 프로그래밍 언어로 데이터베이스에 query(질의문 : 저장되어 있는 정보를 필터 하기 위한 질문)를(을) 보내 원하는 데이터 만을 뽑아올 수 있다. Database가 필요한 이유는 In-memory 방식은 끄면 데이터가 없어진다. File I/O 방식은 원하는 데이터를 가져올 수 없을 뿐만 아니라 항상 모든 데이터를 가져온 뒤에 서버에서 필터링 작업이 필요하다. 그렇기에 서버의 과부하가 생긴다. 그렇기에 필터링 이외에도 File I/O 로 구현이 힘든 관리를 위한 여러 기능들을 가지고 있는 데이터에 특화된 서버인 Database가 필요한 것이다. DB는 스프레드시트(엑셀)와 비슷하게 생겼다. 비교해보자면 테이블(DB) .. 더보기
1/11[TIL]Redux Redux js 앱에서 예측 가능한 상태 관리를 해주는 컨테이너이다. 기존 react에서 상태(state)는 클래스 컴포넌트 안에서 관리한다. 그렇기에 형제 컴포넌트끼리 데이터를 주고받을 때 부모 컴포넌트를 통해서 주고받는다. 하지만 자식이 많아진다면 상태 관리가 매우 복잡해진다. 이러한 단점들을 해결할 수 있는 것이 redux이다. 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. redux는 데이터를 저장하는 스토어라는 공간 존재한다. 기존 react의 상태 변경을 하기 위해 setState를 사용했다면 redux는 action이라는 객체를 사용해서 state를 변경할 수 있다. 변경은 순수 함수로만 가능하다. 리듀서와 관련된 개념이다. Redux에서는 Store / Action / Reduc.. 더보기
1/7[TIL]React Hooks Hooks? 기존 클래스 컴포넌트를 사용하면서 생긴 단점들을 해결하기 위해 나온 것이 Hooks라고 전반적으로 이해해도 될 것 같다. Hooks는 클래스 컴포넌트가 아닌 함수 컴포넌트에서 내가 필요한 로직만 가져와서 사용 할 수 있다. 기존 클래스 컴포넌트를 사용하면 불편했었던 this.binding 이슈 라던지 이벤트 핸들러 사용 측면... 여러가지 데이터들을 사용하여 라이프사이클을 쓰게 되면 어느 시점에 라이프사이클을 사용할지 복잡했던 문제들... 한 가지 정보를 표현하기 위해 여러가지 Wrapper들이 생기고 이는 퍼포먼스가 떨어지게 되는 결과를 가져오게 되는 점... 위에 언급했던 측면들을 해결 해준다고 보면 될 것이다. Hooks 가 나오기 이전에 함수 컴포넌트에서 stateful 한 로직 / .. 더보기
1/6[TIL]React(3) 프론트엔드 개발에서의 Side Effect? 상태를 다룰 때에 Side Effect는 주요 고려대상이다. 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인으로 대표적으로 네트워크 요청, API 호출이 Side Effect의 예로 볼 수 있다. 우리는 컴포넌트를 만들 때 Side Effect를 최대한 배제하고 컴포넌트를 만들어야 한다. 쉽게 말해 위의 예로 들었던 네트워크 요청이나 API 호출 이 없어도 하드코딩 데이터 만으로도 작동이 가능해야 하다는 것이다. 하지만 앱을 만들다 보면 분명 API 호출도 해야 하고, side effect는 불가피하게 생기기 마련이다. 장바구니에 데이터가 서버에 있다면 네트워크 요청(fetch) 때문에 오래 걸릴 수도 있다. 데이터 로딩 여부 (isLoading) 라는 .. 더보기
1/5[TIL]React(2) React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 페이지를 만들기 이전에 컴포넌트를 만들고 조립한다. 즉, 상향식(bottom-up)으로 앱을 만드는 것이다. 이렇게 하면 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 그래서 여러분이 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. 단일 책임 원칙에 따른 구분에 따라 하나의 컴포넌트는 한 가지 일만 한다. 그렇기에 보통 트리 구조로 나타낼 수 있으며 데이터를 어디에 둘 지를 결정해야 한다. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attribut.. 더보기
1/4[TIL]React(1) 프론트 엔드의 꽃이라고도 불리는 React React 에 대해 알아보기로 하자 먼저 엘리먼트는 React 앱의 가장 작은 단위로 화면에 표시할 내용을 기술한다. DOM에 엘리먼트 렌더링 하기 위해서는 HTML 파일 어딘가에 가 있다고 가정해 보면 로 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다. React 엘리먼트를 루트 DOM 노드에 렌더링 하려면 둘 다 ReactDOM.render()로 전달하면 된다. React에서는 JSX라는 문법을 사용하게.. 더보기
12/30[TIL] Server & Node 서버가 CORS를 허용하기 위해 HTTP 헤더에는 목적들이 있는데 1 2 3 4 5 6 const defaultCorsHeaders = { "access-control-allow-origin": "*", "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS", "access-control-allow-headers": "content-type, accept", "access-control-max-age": 10 // Seconds. }; Colored by Color Scripter cs allow-origin은 허용할 오리진을 뜻하며 요청을 보내는 프런트엔드 주소와 백엔드 주소가 다르게 되면 CORS 에러가 난다. 그래서 여기에는 프런트엔드 .. 더보기

티스토리툴바