본문 바로가기

전체 글130

React 5 - State & 이벤트 React 컴포넌트에서 state과 Props는 컴포넌트가 가지고 있는 정보를 담고 있다는 점에서 매우 중요한 개념입니다. State 현재 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로, 화면에 표시되는 함수가 render()라면, 해당 render값에서 어떠한 데이터를 보여줄지에 대한 정보를 가지고 있는 객체입니다. state는 컴포넌트 내에서 정의 및 사용하고, 함수에 의해 변경될 수 있습니다. state 정의 (클래스형 컴포넌트) import React from "react"; class State extends React.Component { constructor() { super(); this.state = { color : 'red'; } } render() { return ( Class.. 2020. 9. 5.
SCSS SCSS CSS는 웹 HTML 문서와 내부 요소들의 style을 지정하기 위해 사용하는 툴입니다. CSS는 사용하기 편하고 직관적이지만, 서비스가 커지게 되면서 많은 단점 또한 생겨나게 되었습니다. 대표적인 단점으로는 선택자(Selectors)의 과잉으로 인한 추적 및 유지보수의 어려움이 있습니다. 이를 해결하기 위해 나타난 툴이 CSS 전처리기입니다. CSS의 언어로 웹 문서에 적용되지만, CSS에 다양한 확장 기능을 제공하여 보다 편리한 사용을 가능하게 합니다. 주요 기능 공식 문서에 따르면, SCSS는 아래와 같은 특징을 가지고 있습니다. 변수 : 자주 사용되는 CSS 특성을 변수에 저장하여 선택자에 변수로 적용할 수 있습니다. Nesting : 부모 요소에 자식 요소의 스타일을 집어넣어 가독성을 .. 2020. 9. 5.
wecode +17 (9/3) 배운 것/개발한 것/정리한 것 - 오전 : code Kata Day4 (완료) 1. 문제 : 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부) 2. 내 코드 const sameReverse = num => { return num == num.toString().split('').reverse().join('') ? true : false; } - 오후 1) 세션 1 : Database 수업 2) Westagram 레이아웃 React + SCSS 구현 완료 3) Westagram 리액트 팀프로젝트 - 초기 세팅 완료 (git 팀 협업 과정 내일 블로깅) - 내 branch로 .. 2020. 9. 4.
React 4 - React Router 리액트의 특징 리액트는 여러 컴포넌트들을 만들지만, 브라우저에 최종 렌더링되는 html문서는 1개인 SPA(Single Page Application) 방식을 지향합니다. 이에, 렌더링되는 한 개의 HTML 문서에서 여러 개의 페이지를 보여주거나 이동시켜주는 Routing기능을 필요로 합니다. Routing 라우팅이란, 정해진 경로명(주소)에 따라 다른 View(페이지)를 보여주는 것을 뜻합니다. 하지만 리액트 자체에는 이러한 라우팅 기능이 내장되어 있지 않아, 외부 라이브러리를 설치하여 적용하여야 합니다. React-router는 리액트의 라우팅 기능 적용을 위해 가장 많이 사용되는 외부 라이브러리입니다. React-router 설치 아래 npm 메시지를 통해 react-router를 설치합니다. np.. 2020. 9. 3.
wecode +16 (9/2) 배운 것/개발한 것/정리한 것 - 오전 : code Kata Day3 (완료) 1. 문제 : String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요. 2. 내 코드 const getLengthOfStr = str => { let arr = []; let newStr = ''; for (let i in str) { if (newStr.includes(str[i])) { newStr = newStr.slice(newStr.indexOf(str[i]) + 1); } newStr += str[i]; arr.push(newStr.length); } return Math.Max(...arr); } 풀이 과정 1. 빈 배열 (새롭게 생성되는 단어의 길이를 담는다)과 빈.. 2020. 9. 3.
wecode +15 (9/1) 배운 것/개발한 것/정리한 것 - 오전 : code Kata Day2 (완료) 1. 문제 * 문제 reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x: 숫자 return: 뒤집어진 숫자를 반환! 2. 내 코드 const reverse = x => { let result = parseInt(x.toString().split('').reverse().join('')); return (x>=0) ? result : result * -1 } * result 변수에 숫자 -> string -> 배열로 변환 -> reverse() -> 다시 string -> 숫자로 변환한 결과값 저장 ** 삼항연산자 사용하여 x의 양수/음수 여부에 따라 결과값에 + 또는 - 처리 - .. 2020. 9. 2.
wecode +14 (8/31) 배운 것/개발한 것/정리한 것 - 오전 : 출근 - 오후 1) 세션 1 : 자료구조 + Array 간단 리뷰 - 자료 구조란 데이터의 접근과 조작을 위한 저장 및 조작 방식 - 데이터의 형태나 쓰임에 맞는 자료 구조 방식이 존재 (원시형 타입 등) - Array는 가장 빈번하게 사용되는 자료 구조로, 값에 상관없는 순차적인 데이터를 보관하는 데 용이함 - Array에서 값을 변경시키거나 삭제하기 위해서는 다른 값들이 변경되는 변수의 자리(인덱스)를 채워주어야 하기 때문에, 값이 자주 변경되는 데이터나 대규모 데이터에는 적합하지 않음 2) 세션 2 : React 소개, 세팅, CRA, JSX 등 3) React 설치 및 개발환경 세팅 (완료) 4) Westagram 레이아웃 React로 구현 (완료) * .. 2020. 9. 1.
React 3 - 컴포넌트 컴포넌트 재사용 가능한 UI 구성의 기본 단위를 뜻합니다. 페이스북을 예로 든다면, 로그인 후 첫 메인화면에서의 컴포넌트는 1)상단 컴포넌트, 2)메인 컴포넌트 내의 NewsFeed 컴포넌트, 3) 메인 컴포넌트 내의 친구추천 컴포넌트 4) 페이지 맨 하단의 Footer 컴포넌트 등으로 나눌 수 있습니다. 컴포넌트들은 다시 다른 페이지에서 재사용할 수 있습니다. 컴포넌트의 특징 다른 페이지에서도 재사용이 가능합니다. 각 페이지 내에 접근하여 일일이 수정하지 않고, 해당 컴포넌트만 수정해주면 되기 때문에 유지보수가 용이합니다. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 살펴보기 좋습니다. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있으며, 컴포넌트이 특성(Props)을 전달할 수 있습니다. (부모 - 자.. 2020. 8. 30.
React 2 - CRA 초기 세팅 & JSX CRA 초기 폴더 및 파일 세팅 CRA 세팅 시에 초기 폴더에 구성되는 요소들에 대한 설명입니다. 1. node.modules : CRA를 구성하는 모든 노드 패키지 종류와 소스 코드가 존재하는 폴더입니다. 2. package.json : CRA 기본 패키지 외에, 추가로 설치된 라이브러리/패키지의 종류와 버젼이 기록되는 파일입니다. - "dependencies" : 리액트를 사용하기 위한 모든 패키지의 종류와 버젼 확인 * package.json의 존재 이유 : 협업을 할 때, 리액트 구동에 필요한 모든 소스코드 및 패키지 (ex : node_modules)를 모두 깃헙에 올리는 건 번거롭고 불편합니다. 대신에, package.json에 사용된 모든 라이브러리를 명시해놓고, 다른 사람이 해당 소스를 p.. 2020. 8. 30.

티스토리툴바