본문 바로가기

TIL62

Code States 49일차 - [Linux] 심화 Chapter - 사용 권한 Read, Write, Execute 권한 폴더인지 파일인지 확인하기 임의의 폴더와 파일을 생성하고 비교하며 설명한다. 먼저, 폴더와 파일을 생성하기 위해 명령어 mkdir 과 nano 를 이용한다. mkdir linux nano helloworld.js 폴더 하나와 파일 하나를 생성했다. 이번에는 명령어 ls -l 을 입력한다. 터미널 결과를 보면, 파일 helloworld.js는 -rw-r--r-- 이라고 출력되었고, 폴더 linux는 drwxr-xr-x 라고 출력되어있다. 첫 시작인 - 와 d 는 각각 not directory와 directory를 나타낸다. 폴더는 d, 파일은 - 로 나타낸다. r, w, x는 각각 read permission, write permiss.. 2021. 10. 5.
Code States 44일차 - 클라이언트 빌드와 배포 Chapter - 빌드 SSR과 CSR What is SSR? SSR은 Server Side Rendering의 줄임말이다. 웹 페이지를 브라우저에서 렌더링 하는 대신에, 서버에서 렌더링한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다. 브라우저가 다른 경로로 이동할 때마.. 2021. 9. 28.
Code States 43일차 - React 상태관리 Redux Redux는 애플리케이션에서 정교한 상태 관리를 구현하는 데 도움이 되는 라이브러리 중 하나이다. 구성 요소의 로컬(React의 로컬 상태)를 넘어선다. 상태를 길들이기 위해 더 큰 응용 프로그램에서 취하는 솔루션 중 하나이다. React 애플리케이션은 Redux에 완벽하게 적합하지만 다른 라이브러리와 프레임워크도 Redux의 개념을 많이 채택했다. React가 없는 Redux의 기초 Redux는 Flux 아키텍처에서 몇 가지 제약 조건을 채택했지만 전부는 아니다. 실제 상태 업데이트에 대한 정보를 캡슐화하는 작업이 있다. 상태를 저장하는 저장소도 있지만 Store는 싱글톤이다. 따라서 Flux 아키텍처에 사용된 것과 같은 여러 Store가 없다. 또한 단일 Dispatcher가 없다. 대신 .. 2021. 9. 17.
Code States 42일차 - React 상태관리 프론트엔드 개발에서의 상태관리 이번 챕터에서 프론트엔드 개발에서의 상태관리에 대해 (React를 알고 있다는 가정) 얘기한다. React는 상태 관리를 위한 라이브러리는 아니지만 상태관리의 주요 원칙을 배우고 따라가면, 컴포넌트 간 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다고 한다. 상태가 무엇인지 다시 점검해보면 변하는 데이터이며, 프론트엔드에선 "UI에 동적으로 표현될 데이터"이다. 예로 쇼핑몰의 장바구니를 들 수 있다. 이 화면을 컴포넌트로 분리해서 서로 어떤 상태를 공유하고, 주고받는지 알아보자. 알아보기 전에, Side Effect부터 상태를 다룰 때에 Side Effect는 주요 고려대상이다. Side Effect는 "함수 입력 외에도 함수의 결과에.. 2021. 9. 16.
Code States 39일차 - React 컴포넌트 디자인 컴포넌트 단위로 개발하기 Component-Driven Development (CDD) 컴포넌트를 더 나은 방법으로 만들기 : 작은 구성 요소부터 최근 몇 년 동안 웹용 프론트엔드 UI(User Interface) 개발의 가장 큰 추세는 component이다. React 라이브러리가 첫 번재는 아니지만 대부분 잘 지정된 구성요소에서 UI를 구축하기 위한 패턴을 설정했다. 물론 잘 지정된 역할을 수행하는 더 작은 조각으로 만들어지 소프트웨어를 향한 추세는 새로운 것이 아니다. Component-Driven Development (CDD)란 무엇일까? 구성 요소를 중심으로 빌드 프로세스를 고정하는 개발 방법론이다. 구성 요소 수준에서 시작하여 페이지 또는 화면 수준에서 끝나는 '아래에서 위로' UI를 구축하.. 2021. 9. 13.
Code States 35일차 - React 데이터 흐름의 이해와 비동기 요청 처리 이번 코드스테이츠 챕터는 제목부터 길군 React 데이터 흐름 컴포넌트로 생각하기 React의 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작한다는 것이다. 컴포넌트를 만들고, 다시 페이지를 조립해 나간다. 즉, 상향식(bottom-up)으로 앱을 만든다. 테스트가 쉽고 확장성이 좋기 때문이다. 데이터는 위에서 아래로 흐른다 컴포넌트는 바깥에서 props를 이용해 데이터를 인자(argument) 혹은 속성(attributes)처럼 전달받을 수 있다. 즉, 데이터를 전달하는 주체는 부모 컴포넌트 이다. 데이터 흐름이 하향식(top-down)이라는 것을 의미한다. 단방향 데이터 흐름(one-way data flow)이라는 키워드는 React를 대표하는 설명중 하나이다. 데이터 상태 모든 데이터를 상태로 둘.. 2021. 9. 6.

티스토리툴바