본문 바로가기

분류 전체보기77

React - Component 1. Component란? UI의 구성 요소이다. 과제였던 westagram main 페이지를 예로 들어 Component로 나눠본다면, 크게 nav 컴포넌트와 main 컴포넌트, 그리고 main 컴포넌트 안에는 feed 컴포넌트와 mainright 컴포넌트로 나눌 수 있다. 이와 같이 화면의 구성 요소들을 컴포넌트로 나눌 수 있다. Component를 나눌 시 컴포넌트를 재활용하여 사용할 수 있고, 코드 유지보수에 좋고, 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다. 그리고 특징으로는 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. 2. Class vs Functional Component 컴포넌트를 선언하는 방식은 두 가지가 있다. Class형 컴포넌트(Class Component) 함.. 2020. 6. 19.
React - CRA default Settings 1. CRA 초기 세팅 구성 CRA를 설치하면 초기에 세팅되는 파일 구성이다. 2. 묶어서 이해하기 node_modules + package.json + .gitignore package.json은 라이브러리/패키지의 세팅 리스트 정보(버전, 종류)가 들어있는 파일이다. 모든 프로젝트마다 package.json이 하나씩 존재한다. package.json 안에 "dependencies": {안에}를 보면 리액트를 사용하기 위한 모든 패키지 리스트, 버전을 확인 가능하다. 실제 코드는 node_modules 폴더에 존재한다. 내가 작성한 코드와 설치한 패키지는 내 로컬에만 존재한다. 공유할 때 내가 작성한 코드 + package.json(설치한 패키지 정보)만 넘긴다. (이유: node_modules 등 같.. 2020. 6. 19.
React - CRA, Node, npm 1. CRA 리액트 앱 생성은 리액트를 학습하기에 편안한 환경이며 리액트에서 새로운 단일 페이지 어플리케이션 구축을 시작하는 가장 좋은 방법이다. 최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고, 앱 생산에 있어 최적화해준다. 리액트 앱은 백엔드 로직이나 데이터베이스를 처리하지 않고 프론트엔드 빌드 파이프라인을 생성하므로 원하는 백엔드와 함께 사용할 수 있다. 2. 환경 설정 CRA 프로젝트를 설치하기 위해선 Node와 npm이 설치되어 있어야 한다. Node 크롬의 자바스크립트 실행 환경에 기반을 둔 빠르고 확장성 있는 네트워크 애플리케이션을 만들기 위한 플랫폼 브라우저 밖의 환경에서도 자바스크립트를 사용 가능하게 해줌 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드라 Nod.. 2020. 6. 19.
React - Intro 1. Web Application 웹 애플리케이션 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다. 일반적으로 특정한 종류의 동적 웹 애플리케이션을 구별하는 것은 불분명하다. 웹사이트는 대개 "웹 애플리케이션"을 가리킬 가능성이 높은데, 데스크톱 응용 소프트웨어나 모바일 앱과 비슷한 기능을 갖추고 있기 때문이다. HTML5는 웹 페이지로 로드되는 애플리케이션을 만들 수 있는 명시적인 언어 지원을 도입하였으나 로컬로 데이터를 저장하여 오프라인 상태에서도 기능할 수 있다. 초기의 클라이언트 - 서버 컴퓨터 환경에서 각 응용 소프트웨어들은 저만의 사용자 인터페이스를 가지고 있고 사용자 PC마다 따로 설치해야 했다. 서버 환경이 바뀌면.. 2020. 6. 19.

티스토리툴바