분류 전체보기
-
Google Domain에서 구매한 도메인을 티스토리에 적용하기DevOps 2021. 1. 2. 19:44
구글 도메인 도메인을 구매할 때 정말 많은 업체가 있습니다. 대표적으로 국내에는 가비아라는 곳에서 정말 많이 구매를 해서 사용을 하죠 역시 세계 최대 갓구글 또한 도메인 서비스를 진행하고 있습니다. 제 닉네임을 정하고 관련 자료들을 업데이트 하다보니 도메인이 필요해서 이번 기회에 구매해 티스토리에 적용을 해보려 합니다. 도메인 찾기 먼저 구글 도메인 링크에 접속하여 새 도메인 찾기 탭으로 이동합니다. 그리고 원하는 도메인을 입력합니다. 보통 최상위 도메인에서는 가장 많이 사용되는 도메인을 추천해줍니다. 이 중에서 원하는 도메인을 선택하여 장바구니로 추가해줍니다. 이렇게 추가된 도메인을 우상단에 장바구니를 클릭해주면 본격 구매 페이지로 넘어갑니다. 위에 경고창을 보면 SSL 인증서가 필요하다고 나와있는데요..
-
[React] Context로 언제 어디서든 상태 관리 해보기Front-end/React 2021. 1. 1. 21:35
상태 관리 React의 영원한 과제 상태 관리.. 이 상태관리를 위해 정말 많은 라이브러리가 탄생했습니다. 대표적으로 가장 많이 사용하는 Redux도 있고, Mobx, Recoil 등이 있습니다. 컴포넌트는 생성 될 때부터 끝날 때까지 가지고 있는 상태를 책임지게 되는데요, 즉 이말은 컴포넌트 내에서 생성된 상태는 외부에서 침범할 수 없다는 것을 의미합니다. 그렇다면 어떻게 해야 이 상태를 외부에서도 사용 및 관리를 할 수 있을까요? 첫 번째로는 상위 컴포넌트에서 상태를 관리하여 props로 내려주는 방법이 있습니다. 상위 컴포넌트에서 상태를 만들고 필요한 컴포넌트까지 prop으로 넘겨주는 것은 마치 축구 경기시 공격수가 공을 필요로 할 때 골키퍼 -> 수비수 -> 미드필더 -> 공격수까지 순서를 거치며..
-
[React] styled-components로 스타일 적용해보기Front-end/React 2020. 11. 30. 12:52
styled-components styled-component는 CSS in JS의 개념을 가지고 있는데요, 말 그대로 JS 안에 CSS를 넣는다는 의미입니다. 예전부터 웹에 스타일을 적용하기 위해서 일반적으로 전역에 CSS 파일을 두어 하나의 파일에서 관리하는 방식을 지속적으로 사용되어 왔고, 현재까지도 이용되고 있습니다. 하지만 이 방식의 경우 CSS 파일이 전역에 존재하기 때문에 클래스 명이 의도치 않게 겹치게 되거나, 같아야 하는 경우를 관리 하는 것이 쉽지 않았습니다. 그래서 최근에는 모듈화를 통해 각 컴포넌트 별로 묶어 Scope를 관리하는 방식도 존재합니다. styled-component는 이런 고민을 해결함과 동시에 편리함을 제공하게 되는데요, 말 그대로 스타일을 컴포넌트처럼 관리하고 사용..
-
[React] React로 범용적인 재사용 컴포넌트 만들어보기Front-end/React 2020. 11. 30. 12:52
컴포넌트 컴포넌트란 독립적인 단위모듈인데요, 이는 말 그대로 독립적으로 사용(수행)할 수 있다는 것을 말합니다. 그런데 뭔가 독립적이란 것이 조금 추상적이라고 느껴지시지 않나요? 그만큼 컴포넌트를 나누는 일은 이 독립이라는 단어를 어떻게 해석하느냐에 따라서 방법이 바뀌게 됩니다. 리액트와 같은 SPA 라이브러리 혹은 프레임워크를 사용하다보면 컴포넌트들을 만들게 되는데요 이렇게 만든 컴포넌트들은 특정 화면에서 사용이 될 것입니다. 이 컴포넌트들은 규모가 작은 애플리케이션에서는 적을 수 있지만 규모가 커질수록 컴포넌트의 갯수와 크기도 비례하여 커지게 될 것입니다. 이에 따라 프론트 개발자는 아마 이런 고민들을 하게 될겁니다... "음.. 어떻게 하면 컴포넌트를 재사용 할 수 있게 개발 할 수 있을까...?"..
-
Webpack으로 React 개발 환경 세팅해보기Front-end/React 2020. 11. 30. 12:51
리액트 프로젝트 리액트 프로젝트를 생성하는 방법에는 몇가지가 있는데요 대표적으로 CRA(Create React App)이 있습니다. CRA를 통해 프로젝트를 생성하게 되면 개발자가 특별한 세팅을 하지 않아도 아주 쉽고 편리하게 사용할 수 있습니다. CRA로 생성된 프로젝트는 웹팩 뿐만 아니라 엄청나게 많은 기본 세팅이 되어있는데요, 처음 프로젝트를 생성하면 등장하는 README.md를 보게되면 eject라는 명령어가 있다는 것을 알 수 있습니다. 이는 리액트 내부에 숨겨져 있는 설정 파일들을 꺼내서 볼 수 있게 해주는데요 실행을 해보면 아래와 같은 디렉토리가 추가가 되고 엄청나게 많은 양의 설정 파일들이 있습니다. 이만큼 하나의 프로젝트를 세팅하기 위해 엄청나게 많은 코드와 모듈이 필요한 것을 알 수 있..
-
[React] 라이프 사이클(Life-Cycle) 알아보기Front-end/React 2020. 11. 30. 02:39
라이프 사이클 리액트에서 라이프 사이클은 총 3가지로 나뉘어집니다. Mount: 컴포넌트 실행 후 DOM이 생성되고 웹 브라우저에 나타나는 것 Update: 컴포넌트를 업데이트 할 때 Unmount: 컴포넌트를 DOM에서 제거할 때 리액트가 최근 v17로 업데이트가 되면서 기존에 존재했던 몇가지 메소드가 아예 없어졌기도 합니다.(componentWillMount, componentWillUpdate, componentWillReceiveProps) 단계별로 하나씩 살펴보겠습니다. Mount DOM이 생성된 후 웹 브라우저에 최종적으로 나타나는 것을 Mount라고 합니다. 이 때 호출되는 메소드는 아래 순서대로 작동합니다. 컴포넌트 생성 constuctor: 컴포넌트 생성시 호출되는 생성자 getDeriv..
-
[React] state 알아보기Front-end/React 2020. 11. 30. 00:59
State state는 상태라는 뜻을 가지고 있습니다. 컴포넌트에서 상태는 컴포넌트가 살아있는 동안 변화가 가능한 객체입니다. props와 헷갈릴 수도 있지만 명확히 구분하자면 props는 탑다운 방식으로 내려온 읽기 전용의 데이터의 느낌이라면, state는 컴포넌트가 소유하고 있는 고유의 값이라고 보면 될 것 같습니다. 선언하기 import React from 'react'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { number: 0, }; } render() { return ( { this.setState({ number: this.state.number + 1, }); }}..
-
[React] useReducer Hooks 알아보기Front-end/React 2020. 11. 29. 23:56
useReducer useState처럼 상태를 업데이트할 수 있습니다. 차이점으로는 useState는 다음 상태를 직접 지정하지만, useReducer는 액션이라는 객체를 기반으로 상태를 바꾸어줍니다. useReducer 선언하기 import React, { useReducer } from "react"; const [number, dispatch] = useReducer(reducer, 0); number는 현재 상태값, dispatch는 액션을 발생시키며 reducer에는 함수를, 0에는 초기값을 나타냅니다. useReducer 사용하기 useReducer(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. functio..