본문 바로가기

전체 글

 (15)
[React] Custom Component TIL CDD란? 부품 단위로 UI컴포넌트를 제작하여 재사용성을 높이는것. 상향식 개발에 가깝다. Styled Components? CDD의 개발 도구중 하나로 Styled Components라이브러리를 설치하여 자바스크립트 내에서 간편하게 CSS를 적용할 수 있게 해주는 것이다.CSS를 컴포넌트별로 제작하여 재사용성을 높이고 CSS파일이 너무 길어지는 것을 방지 할 수 있다. 사용법: 터미널에 아래 1번 명령어를 입력한후 package.json 파일에 2번 코드를 넣어준 뒤 제작하고자 하는 파일에 3번 처럼 import 해주면 된다. 1번 # with npm $ npm install --save styled-components # with yarn $ yarn add styled-components 2번 { ..
UI/UX Chapter1. UI/UX 개념 UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템. 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도UI에 해당한다. GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다.GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경이다. GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있다. UX UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. 제품, 서비스..
[Web Server] 기초 CORS, SOP,Express Chapter1. CORS, SOP 개발을 하다 보면, 이 에러를 적어도 한 번 쯤은 겪게 되고, 그리고 높은 확률로 이 에러 때문에 골머리를 앓는 경험을 하게 될것인데, 바로 CORS 에러 이다. CORS가 대체 뭐길래 이런 에러를 띄우는 건지 알아보기 전에, CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보도록 하자 SOP SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻한다. 한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책인데 여기서 말하는 ‘출처(Origin)’는 다음과 같다. 출처는 프로토콜, 호스트, 포트의 조합으로 되어있고, 이 중 하나라도 다르면 동일한 출처로 보지 않는다. 예시 더보기 https://www.codestates.com vs h..
[React] react데이터 흐름,상태 끌어 올리기,useEffect Chapter1-1. React 데이터 흐름 리액트는 컴포넌트를 먼저 만들고 페이지를 조립하기 때문에 상향식 으로 앱을 만든다.이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 리액트의 데이터는 하향식으로 흐르며, 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 모든 데이터를 상태로 둘 필요는 없다. 사실 상태는 최소화하는 것이 가장 좋고. 상태가 많아질수록 애플리케이션은 복잡해지기 떄문이다. - 부모로부터 props를 통해 전달되는가? 그러면 확실히 state가 아니다. - 시간이 지나도 변하지 않나? 그러면 확실히 state가 아니다 . - 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 그렇다면 state가 아니다. Chapter1-2. State 끌어올리기 (Lifting ..
[HTTP/네트워크] REST API Chapter1. REST API REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. REST API를 작성할 때는 몇 가지 지켜야 할 규칙들이 있다. 로이 필딩이 논문에서 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리차드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 만들었습니다. 리차드슨의 REST 성숙도 모델을 구조화하면 다음과 같다. Chapter1-1. REST 성숙도 모델 - 0단계 REST 성숙도 모델에 따르면, 0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 된다. 물론 이 경우, 해당 API를 REST A..
[HTTP/네트워크] HTTP,AJAX,SSR,CSR Chapter1-1. 클라이언트 - 서버 아키텍처 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부릅니다. 리소스를 사용하는 앱이 바로 "클라이언트", 리소스를 제공(serve)하는 곳은 "서버"라고 부릅니다. 클라이언트(client, 손님)와 서버(server, 서빙하는 사람)라는 단어의 어원을 떠올리면 보다 이해가 쉽습니다. 리소스에 접근하려는 앱은 카페로 치면 손님과 같습니다. 손님은 아메리카노를 마시기 위해 리소스를 가지고 있는 점원에게 요청해야 합니다. 손님의 요청에 따라 점원은 리소스를 담아 응답합니다. 이처럼 클라이언트와 서버는 요청과 응답을 주고받는 관계입니다. 클라이언트-서버 아키텍처에서는 요청이 선행되고 ..
[React] React State & Props Chapter1-1. Props 컴포넌트의 속성(property)을 의미한다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환하기 때문에 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다. 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다. props는 읽기 전용이다. props..
[React] React SPA,React Router Chapter1. React SPA spa란? SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있고, 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다. 하지만 SPA의 경우 자바스크립트 파일의 크기가 크고, 이로인해 첫 화면 로딩 시간이 길어진다는 단점이 있다. Chapter2. React Router React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다. 라우터 역할을 하는 Brow..

티스토리툴바