react
-
2차 프로젝트 회고록Trainings/clone project 2020. 6. 22. 15:33
1. 프로젝트 소개 원티드 - 지인 추천하고 보상금 받기 8,000개 기업, 150만 회원. 국내기업부터 글로벌기업까지, 지금 원티드에서 지원하세요. www.wanted.co.kr 1차 프로젝트 리모아가 끝이 나고, 2차 프로젝트로 "원티드"라는 사이트를 클론 하게 되었다. 원티드는 ‘지인을 추천해 채용되면 채용된 사람과 추천한 사람 모두에게 보상금을 주는 곳’으로 알려진 원티드는 채용 추천 플랫폼이다. 이 원티드는 내가 낸 아이디어였고, 다행히도 투표를 많이 받아서 진행하게 되었다. 2. 사용된 기술 - HTML / CSS 및 Styled Component - JavaScript(ES6) - React(Hooks, styled component) 3. 내가 맡은 부분 및 역할 원티드 채용 상세 페이지 ..
-
React - Font Awesome과 Toastify 사용하기React/라이브러리 2020. 5. 26. 10:00
Font Awesome 이란? - 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중 하나이다. Font Awesome fontawesome.com Font Awesome 패키지 설치 방법 1. FontAwesome의 SVG 기반 아이콘을 활성화 시키기 위해 기본 패키지를 설치한다. 2. FontAwesome 아이콘 대한 패키지를 설치해야 한다. 여기서 무료로 제공하는 Solid, Regular, Brands 3개의 카테고리에 대한 패키지만 설치한다. 3. 마지막으로 FontAwesome을 React 컴포넌트 형태로 사용할 수 있도록 하는 패키지를 설치한다. 그러고 나서, 적용 시켜보자. 인스타그램 클론 했던 소스에서 Header 컴포넌트에 적용해보았다. 저렇게 돋보기 아이콘이 생긴 것을 확인할..
-
React - CRA로 프로젝트 시작하기React/CRA 세팅 2020. 5. 25. 10:00
create-react-app 이란? - 페이스북에서 만든 react 웹 개발용 boilerplate이다. - 리엑트에서 편리하게 개발하기 위한 세팅이 잘 되어있다. ex) 자동 리프레쉬 - 줄여서 CRA라고 부른다. boilerplate란? 표준 문안이라는 뜻의 단어이며, 프로그래밍에서의 boilerplate code는 최소한의 변경으로 재사용할 수 있는 것과 적은 수정만으로 여러 곳에 활용 가능한 코드, 문구를 말하며, 각종 문서에서 반복적으로 인용되는 문서의 한 부분을 의미한다. create-react-app 설치 하는 법 우선 설치 전에 다음과 같이 npm과 node가 설치되어 있는지 확인해야 한다. 설치가 된 것을 확인했으면, 프로젝트 폴더를 생성하고자 하는 폴더로 가서 다음과 같은 명령어를 입..
-
React - map() 활용React/기본 2020. 5. 24. 23:01
아래 나열된 순서대로 진행해 주세요. 1. API 주소를 호출하여 데이터 로딩을 처리해주세요! - componentDidMount() - fetch - setState (monsters에 저장) 2. SearchBox 컴포넌트에 정의한 handleChange 메서드를 넘겨주고, 호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput으로 setState. App.js 1. App.js에서 API 호출 호출할 API 주소 : https://jsonplaceholder.typicode.com/users 위 주소를 호출하여 데이터 로딩을 처리하기 리액트에서 데이터 로딩을 할때, 필요한 메서드가 존재한다. 그것은 바로 fetch()라는 메서드이다. 그렇다면 fetch()의 적절한 위치는 어디인가? 바..
-
React - 메인 페이지 기능 구현React/기본 2020. 5. 20. 10:00
Assignment 메인 페이지 - 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요. 피드 컴포넌트는 인스타그램에서 피드에 해당하는 부분이다. 바로 이 부분이다. Feed.js 댓글 구현할 부분은 이 부분이다. Comment.js 먼저 사용자가 먼저 댓글을 입력했을 때를 생각해보자. 일단 state안에 commentList: [], commentText: "", userId: "ljtaek2"ljtaek2"라는 값을 미리 초기화를 시켰다. input 태그에 무언가를 입력하는 순간 onChange 이벤트 핸들러가 실행되고, commentState라는 함수가 실행된다. commentState 함수 안에서 event를 이용해서 해당 input값을 setState..
-
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형 컴포넌트를 만드는 형식이다. ..
-
React - React의 탄생React/기본 2020. 5. 17. 12:00
React의 탄생 React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다. 하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다. 이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다. 그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다. React와 다른 프레임워크의 차이 먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이러한 구조들의 공통점은 모델(Model)과 뷰..
-
React - Component의 PropsReact/기본 2020. 5. 12. 14:40
Component란? - 재사용 가능한 UI 단위라 부른다. Component를 왜 사용해야 할까? 만약, '회원정보 페이지'와 '회원정보 수정 페이지' 두 개의 페이지를 만들어야 한다. Component를 모르면 회원정보 페이지의 html과 css를 작성하고, 회원정보 수정 페이지의 html과 css를 작성할 것이다. 이렇게 동일한 코드를 두 번 작업하는 것은 상당히 귀찮은 일이다. 이럴 때, 동일한 코드가 반복되는 부분을 하나의 Component로 만들어서 같은 디자인 input이 필요한 곳마다 재사용 한다면 귀찮은 작업을 피할 수 있게 된다. 그렇기 때문에 Component를 써야한다. Component의 특징 Component는 독립적으로, 재사용이 가능한 코드로 관리할 수 있다. 컴포넌트도 in..