Til
-
React - 로그인 페이지 기능 구현React/기본 2020. 5. 19. 10:00
로그인 페이지의 기능을 구현해보자! Login.js 1. import React from "react"; : react 라이브러리에서 react의 함수나 클래스들을 가져와서 그 기능을 사용하려고 하는 구문이라고 보면 된다. import { withRouter } from "react-router-dom"; : "react-router-dom"은 DOM에 접근하고 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리이다. "react-router-dom" 안에 있는 withRouter라는 2. class Login extends React.Component { render(){ return(); } } export default withRouter(Login); : class형 컴포넌트를 만드는 형식이다. ..
-
css - Sass의 네스팅 (nesting)CSS/SCSS 2020. 5. 18. 10:00
SaSS란? : CSS를 보다 효율적으로 편리하게 사용하기 위해 만들어진 언어이다. SaSS를 쓰는 이유 : 리엑트는 index.js와 index.html로 여기서 각종 컴포넌트들이 합쳐지기 때문에 방대한 양의 css의 class이름들이 겹쳐서 오류가 난다. 하지만, SCSS의 네스팅(nesting) 기능을 사용하면 오류가 나지 않을 것이다. 그렇기 때문에 SCSS를 써야 한다. 예시로 알아보자. 소스는 여기서 확인! wjdxor133/westagram Contribute to wjdxor133/westagram development by creating an account on GitHub. github.com Login.css * { box-sizing: border-box; } body { back..
-
React - React의 탄생React/기본 2020. 5. 17. 12:00
React의 탄생 React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다. 하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다. 이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다. 그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다. React와 다른 프레임워크의 차이 먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이러한 구조들의 공통점은 모델(Model)과 뷰..
-
JavaScript의 반복문 종류Trainings/세션 정리 2020. 5. 16. 19:46
for 문 가장 대표적인 반복문은 for문이지만, for문을 이미 익숙해졌기 때문에 따로 정리하지 않는다. for문 이외에도 자주 쓰이는 반복문을 정리할 것이다. 1. for in 문 - 객체의 property에 루프를 실행한다. - 예제를 보면 idx에 배열의 값이 아닌 index가 담기는 것을 확인할 수 있다. 2. for of 문 - 배열에서의 값에 대한 루프를 실행하는 반복문이다. 3. forEach 문 - 함수의 parameter 값으로는 1. (value) -> 배열의 값 2. (value, index) -> 배열 값, 배열의 위치 3. (value, index, array) -> 배열 값, 배열의 위치, 배열 전체 , array를 쓰긴 하지만, 없어도 상관없다.
-
React - React의 routerReact/기본 2020. 5. 15. 12:00
Routing란? 간단히 말하면, 경로 이동 혹은 페이지 이동이라고 생각하면 된다. 예를 들어 사용자가 로그인을 위해 /Login에 접근했을 때, react-router는 로그인 페이지를 렌더링 해준다. 하지만, Create React App(CRA)에 특별히 routing(경로 이동)을 위한 로직이 들어있지 않기 때문에 따로 설치해서 사용해야 한다. 왜냐하면, React는 프레임워크가 아니라 오로지 뷰로만 이루어진 라이브러리 이기 때문에, 필요한 기능들을 따로 설치해서 사용해야만 한다. reacttraining.com/react-router/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhe..
-
React - Component의 StateReact/기본 2020. 5. 13. 22:12
state state란 말 그대로 컴포넌트의 상태 값을 의미한다. state와 props는 둘 다 Object이고, 화면에 보여줄 정보(상태)를 가지고 있다. 그런 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있다. 마치 parameter(값)을 보내는 것과 같다. 반면, state는 컴포넌트 내에서 정의하고 사용한다. 특징 - state정의 할때, 반드시 constructor()함수를 호출하고 super()를 해줘야 사용 해야한다. - state 타입은 Object이고, 키와 값으로 이루어진 그 안에 배열, 객체와 같은 타입들을 다 담을 수 있다. ex) 이미지 리스트(배열) - 이벤트 발생 요소와 반영 되는 요소는 엄연히 다르다. 공부 할 예제를..
-
React - Component의 PropsReact/기본 2020. 5. 12. 14:40
Component란? - 재사용 가능한 UI 단위라 부른다. Component를 왜 사용해야 할까? 만약, '회원정보 페이지'와 '회원정보 수정 페이지' 두 개의 페이지를 만들어야 한다. Component를 모르면 회원정보 페이지의 html과 css를 작성하고, 회원정보 수정 페이지의 html과 css를 작성할 것이다. 이렇게 동일한 코드를 두 번 작업하는 것은 상당히 귀찮은 일이다. 이럴 때, 동일한 코드가 반복되는 부분을 하나의 Component로 만들어서 같은 디자인 input이 필요한 곳마다 재사용 한다면 귀찮은 작업을 피할 수 있게 된다. 그렇기 때문에 Component를 써야한다. Component의 특징 Component는 독립적으로, 재사용이 가능한 코드로 관리할 수 있다. 컴포넌트도 in..
-
React - JSXReact/기본 2020. 5. 12. 12:27
JSX란? 자바스크립트의 확장 문법이다. JSX를 왜 사용하는 가? function App() { return ( Hello react ); } 이렇게 작성된 코드를 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } 이런 식으로 코드를 변환된다. 하지만 컴포넌트를 계속 랜더링 할 때마다 JSX 코드를 작성하는 것이 아니라 위에 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다. 그렇기 때문에 JSX가 생겨났고, JSX를 사용하면 매우 편하게 UI를 랜더링 할 수 있다. 그렇다면 JSX도 자바스크립트 문법이라고 할수있나?..