본문 바로가기

전체 글77

JavaScript - Function(함수) 1. 함수의 정의 함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 변수도 이름이 있듯이, 함수도 이름이 있다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행된다. 함수 이름을 부르는 것을 "함수를 호출한다."라고 표현한다. function test() { let hi = "안녕하세요"; return hi; } 함수 이름이 test이다. 위와 같이 함수를 생성하고 이름을 불러 호출할 수 있다. test(); 이름을 쓰고 이름 뒤에 ();를 해주면 호출된다. 2. 함수의 형태 함수의 형태는 그림과 같다. 함수를 선언할 때는 함수 이름을 지어주고, 함수를 알리는 괄호()를 열고 닫고, 함수의 시작을 알리는 중괄호를 열어준다. 그리고 실행할 코드를 작성한다. 함수의 body라고 부르.. 2020. 6. 21.
React - JSX 1. JSX란? JSX는 리액트에서 사용하는 자바스크립트 확장 문법이다. JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨(Babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX는 많은 개발자에게 친숙한 구문을 사용하여, 요소(구성요소)의 렌더링 구조를 지정하는 방법을 제공한다. JSX 장점 - HTML 태그를 사용하기 때문에 보기 쉽다. - HTML 태그를 사용하면서 자바스크립트도 {}를 사용해 JSX 안에서 동작하게 할 수 있다. 2. JSX - Fragment react에서 컴포넌트를 나누어 개발을 할 때 불필요하게 div를 감싸고 내부부터 태그를 삽입하다 보면 불필요하게 DOM구조가 복잡해진다고 느낄 때가 있다. 이것을 Fragment를 통해서 불필요한 div 렌더링을 .. 2020. 6. 20.
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.

티스토리툴바