FrontEnd

[Project] Docker Nginx Express React 연동하기

1. 개요 docker에 docker-compose를 사용해 nginx와 express-react 컨테이너를 생성하는 방법을 정리해보겠습니다! 먼저, docker가 설치가 되어있다는 가정하에 진행합니다 사용된 파일들의 디렉터리 구조는 위와 같습니다. backend에 express, frontend에 react, nginx는 proxy 서버로 워크플로우가 구성되어있습니다. 순차적으로 따라하시면서 frontend와 backend를 구성하는데 어떤 식으로 구성을 하는지 잘 유의하시면서 보시면 될 것 같습니다. 이 워크 플로우 구조를 구현하는데 굉장히 애를 많이 먹었어요ㅠㅠ 막상 복습하면서 만드니까 뚝딱 만드는데 nginx와 express간의 프록시 문제도 있었고… react와 express 간의 문제도 있었고..

[React] React.js 강좌 12. useRef

1. 개요 javascript를 사용할때는 특정 DOM을 선택하는 상황에서 getElementById나 querySelector같은 DOM Select 함수를 사용해서 DOM을 가져오곤 합니다. 특정 같은 부분의 DOM을요. 리엑트를 사용할때도 DOM을 직접 선택해야하는 상황이 생기는데 이럴 때 리액트에선 ref를 사용합니다. 일반적으로 애플리케이션 대부분의 컴포넌트에서 DOM을 다루는 것은 권장되지 않습니다. 왜냐하면 내부 DOM 요소에 대한 정보를 지나치게 간섭하게 되면 의존성에 대한 문제가 발생하기 때문입니다. 하지만 포커스, 선택, 애니메이션과 같은 기능을 관리하기 위해서는 DOM 요소에 접근을 해야하기 때문에 일반적으로 위와 같은 기능에서는 ref를 통해 DOM에 접근하는 것을 허용합니다. 이때..

[ECMAScript] Javascript ES6 Spread, Rest 정리

[ECMAScript] Javascript ES6 Spread, Rest 정리 ES6을 사용한 프로그램에서 … 이라는 기호를 많이 보게 될텐데, 이것은 Spread Operator와 Rest Parameter입니다. 레퍼런스에서는 상세하게 설명이 되어 있는데, 이런 연산자가 생소한 사람에게는 … 기호가 섞인 복잡한 코드를 보면 멘탈이 붕괴됩니다….(본인처럼) 확실하게 개념을 잡고 넘어가기 위해 쉽게 정리해보겠습니다! 1. Spread Spread 연산자는 iterable 객체를 함수의 인자, 또는 배열 literal의 요소로 확장합니다. 이 말은 즉슨 배열과 같은 여러 개의 데이터를 가진 데이터형이 있을텐데, [ , , , ]과 같이 여러 개의 콤마로 구분되는 저장소에 펼쳐서(Spread) 초기화를 해준..

[React] React.js 강좌 11. Context

React Context 1. 개요 리액트 앱을 개발하다보면 모든 컴포넌트(최상위 컴포넌트에서 최하위 컴포넌트)에 특정 값을 props로 넘기고 싶을 때가 있습니다. 전역(global)로 선언된 데이터가 있으면 참 편할텐데 말이죠. 이 Context는 리엑트 컴포넌트 트리 안에서 Global한 데이터를 공유할 수 있도록 고안된 방법입니다. 이러한 데이터는 보통 현재 로그인한 유저, 적용중인 테마, 선호하는 언어 등이 있을 수가 있습니다. 단계적으로 props를 전달하지 않아도 Context를 사용하면 Global한 데이터를 효율적으로 사용할 수가 있겠죠. 2. 일반적인 props의 사용 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨줍니다. class App extends R..

[React] React.js 강좌 10. map, slice, concat, spread 사용법

React map, slice, concat, spread 사용법 1. 기본적인 map() 사용법 map()함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다! const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num *2); console.log(result); numbers.map 안에 (num)이라고 되어있는 부분이 있는데, 이거는 함수 내부에서 임의로 지정한 변수이기 때문에 아무렇게나 작성하셔도 됩니다!(알기 쉬운 data나 param 등등…) 위 코드의 결과로는 각 요소의 2배인 값이 나옵니다! 2. 함수형 컴포넌트에서 map() 사용하기 이제 본격적으로..

[HTML/CSS] display 속성 inline과 block, span과 div

제작된 웹 페이지를 F12버튼을 눌러서 개발자 모드로 보다보면 HTML 태그의 display 속성을 자주 보게 됩니다. display는 보여준다는 의미인데... inline, block 이라는 속성은 대체 무엇을 의미하는지 궁금해서 찾아보았습니다! 1. inline, block, inline-block 예전에 웹 페이지를 공부했을 때, HTML을 처음 배웠을 때 span과 div 태그에 대해 공부했었던 기억이 있는데요. span과 관련된 태그가 무엇무엇이 있고, div와 관련된 태그가 무엇무엇이 있는지 나열된 것을 본 기억은 있는데 지금와서 생각해보니 머릿속에 잘 정리가 되질 않아서, 한번 다시 찾아보았습니다. 먼저 HTML은 문자 일부분만 선택해서 지정하는 Inline 방식과, 넓은 범위를 묶어서 지정..

[React] React.js 강좌 9. Input 상태 관리하기

React Input 상태 관리하기 1. Form을 사용한 컴포넌트 만들기 먼저 input을 다루기 위해 Form DOM을 사용한 컴포넌트를 만들어봅니다. import React, {Component } from 'react'; export default class FormTest extends Component{ state ={ id: '', name: '' } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }) } render(){ return( {this.state.id} {this.state.name} ) } } 여기서 handleChange의 파라미터 e는 event의 줄임말로 input에서 입력한 값의 변화가 있..

[React] React.js 강좌 8. 함수형 컴포넌트 props 정리

React 함수형 컴포넌트 props 정리 react에서는 클래스형과 함수형으로 컴포넌트를 작성할 수 있는데, 리엑트 16버전에서는 함수형 컴포넌트가 성능이 조금 더 빠르다고 페이스북 개발자가 언급한 이유가 있어서 이러한 함수형 컴포넌트를 사용하는 것을 권장하는 편입니다. 1. 기본 Props 사용 // src/MyComponent.js import React from ‘react‘; const MyComponent = (props) => { return 안녕하세요, 제 이름은 {props.name}입니다.; }; // 부모 측에서 props를 전달하지 않을 경우 default로 설정되는 이름 MyComponent.defaultProps = { name: '기본 이름' }; export default M..

[React] React.js 강좌 7. 조건부 연산자

React.js 조건부 연산자 흔히 사용하는 if 조건부 말고도 여러 조건들을 JSX 안에서 인라인으로 처리할 수 있는 방법이 있습니다. 논리 && 연산자로 if를 인라인으로 표현할 수가 있는데요. JSX안에는 중괄호를 이용해서 표현식을 포함할 수 있습니다. 이때, 그 안에 Javascript의 논리 연산자 &&을 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( Hello! {unreadMessages.length > 0 && You have {unreadMessages.length} unread messages. } ); } const messages = ..

[React] React.js 강좌 6. Error Catch

컴포넌트 에러 발생 render 함수에서 에러가 발생할 경우 리액트 어플리케이션이 종료가 됩니다. 이러한 상황에서 유용하게 사용할 수 있는 API가 있는데요, 생명주기 이벤트 중에 하나인 componentDidCatch라는 녀석입니다. componentDidCatch(error, info) { this.setState({ error: true }); } 에러가 발생하면 이런 식으로 componentDidCatch가 실행되게 하고, state.error를 true로 설정하게 하고, render 함수 쪽에서 이에 따라 에러를 띄워주시면 됩니다. 이때 주의할 점이 이 componentDidMount는 컴포넌트 자신의 render 함수에서 발생하는 에러는 잡아낼 수는 없지만, 컴포넌트의 자식 컴포넌트 내부의 에..