MaMaMeMo 시력저하로 작은 글씨를 못보는 어머니를 위해 개발된 웹사이트 입니다. 메모장 기능과, 메모장을 커스텀할 수 있습니다. 아이디어 구상 및 기획 MaMaMeMo는 어머니를 위한 웹사이트이다. 어머니가 예전에는 시력이 좋으셨지만 컴퓨터를 보는 업무를 몇년동안 해오시며 시력이 급격하게 안좋아지셨고 핸드폰으로 보이는 글씨를 못읽어 나에게 읽어달라고 하시는 일이 종종있었다. 이럴때마다 가슴이 찡해지며 어머니가 사용하시는 웹이나 앱 들은 왜 다 글씨가 작은지 의문이 들었다. 어머니가 기억해둬야할 것들은 모두 메모장에 저장을 해두시는데 이를 볼 때마다 잘 안보여 나아게 읽어달라고 할 때가 많았다. 따라서 나는 어머니를 위해 어머니가 자주 이용하시는 메모장을 개발해보려고 한다. 최대한 기존에 있는 웹사이..
리액트
오늘은 리액트로 프론트엔드를 구축할 때 , 구조적으로 코드를 작성하는 방법에 대해 작성해 볼 것이다. CDD 란? Component Driven Development 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법 같은 UI 컴포넌트를 공유 즉 재사용할 수 있는 UI 컴포넌트를 개발하기 위해 고안됨 CSS-in-JS 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러옴 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없음 그래서 탄생한 것이 CSS-in-JS CSS도 컴포넌트 영역으로 불러들이겠다 ! 대표적 예 ) Styled-Component Styled-Component 기능적 혹은 상태를 가진 컴포넌트로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공 CSS를 컴포넌트화 시켜주는 라..
기존 ES5 문법과 비교해 전개 연산자를 통해 배열과 객체 데이터를 합치거나 추출하는 방법을 이해해보겠습니다. 전개연산자 ? 배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다 . 변수 앞에 ... (마침표 3개)를 입력해서 사용합니다. 예제 작성을 통해 전개연산자에 대해 알아보겠습니다. 먼저 App.js 파일을 생성해줍니다. App.js import './App.css'; import { React } from 'react'; import SpreadOperator from './SpreadOperator'; function App() { return ( Start React 200! css 적용하기 ); } export default App; SpreadOpe..
오늘은 ES6의 변수 선언 방식인 let과 const에 대해 기존 var 변수와 비교해 변수의 재선언, 재할당이 가능한지 공부해보겠습니다. ES5에서 사용하던 var는 유연한 방식으로 변수를 재선언, 재할당 할 수 있습니다. 이런 특징으로 인해 변수의 사용 범위가 불확실해지거나 의도하지 않은 변숫값 변경이 발생할 수 있습니다. 따라서 이러한 var의 단점을 보완하기 위해 ES6에서 let와 const가 추가 되었습니다. App.js 파일 Variable.js 파일 이미 선언한 var 변수 varName을 다시 선언했을 때 var 변수는 재선언, 재할당을 허용하기 때문에 페이지가 정상적으로 출력됩니다. 이미 선언한 let 변수 letName을 다시 선언했을 때 에러메세지가 발생하며 let 변수는 재선언을 ..
ES(ECMA 스크립트)는 표준화된 스크립트 언어이고 ES 뒤에 붙은 숫자는 버전을 의미합니다. 2015년 발행된 ES6는 많은 유용한 기능이 추가됐고 자바스크립트는 이 기술 규격을 따릅니다. 리액트도 자바스크립트 기반 언어이기 때문에 ES6의 모든 기능을 사용할 수 있습니다. 오늘은 ES6 문자열의 사용 방법에 대해 알아보겠습니다. App.js 파일을 생성합니다. Es6.js 파일을 생성합니다. 기존 자바스크립트에서 줄바꿈을 하려면 개행문자(\n)을 사용해야 합니다. 문자열과 변수를 합치기 위해서는 문자열을 작은 따옴표(또는 큰따옴표)로 감싸고 + 로 연결해야합니다. 따옴표가 아닌 백틱(`)으로 전체 문자열과 변수를 묶어 사용할 수 있습니다. 변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개..
이전 포스트와 연결되는 내용입니다. shouldComponentUpdate() 함수는 component의 변경 과정에 속합니다. 변경이란 props 나 state의 변경을 말합니다. App.js LifeclycleEx008.js componentDidMount() 함수는 '생성'단계의 생명주기 함수 중 가장 마지막으로 실행됩니다. tmp_state2 라는 state변수에 true 라는 boolean 유형의 데이터를 세팅해주었습니다. setState() 함수는 변수의 선언과 초기화를 동시에 실행합니다. this.setState({tmp_state2: true}) 에서 state의 변경이 발생했기 때문에 ' 변경 ' 단계의 생명주기 함수 shouldComponentUpdate() 가 실행됩니다. should..
constructor(props) 함수는 생명주기 함수 중 가장 먼저 실행되며 , 처음 한번만 호출 됩니다. component 내부에서 사용되는 변수(state)를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화 할때 사용합니다. super() 함수는 가장 위에 호출해야 합니다. 생명주기 함수들이 실행될 때 로그를 출력해 어떤 함수가 먼저 실행되는지 알아보겠습니다. src 폴더에 LifecycleEx005.js 파일을 생성한 후 App.js 에 이식하겠습니다. 결과를 확인해보면 ... constructor 함수가 실행된 후 render 함수가 실행된 것을 알 수 있습니다! 오늘도 즐공 ! ! 리액트
