우기의 알 블로그 저자 한승욱이라고 합니다.
스스로 알을 깨고 나오는 새처럼
언젠가 알을 깨고 온전한 나 자신이 되었을 때, 그때를 기다리며 제 속에서 솟아 나오는 것을 글로써 표현하고자 합니다.
'개발 기술블로그'를 위주로 저 한승욱의 다양한 관심사, 생각, 철학 등을 포스팅합니다.
하고자 하는 것 협업하는 기획자나 디자이너 등 다른 직군이 개발중인 페이지에 접근하며 진행도 파악을 할 수 있게 하고 싶다. 해결방법으로는 최근 스토리북 등 다양한 방법이 있겠지만 나는 Github Pages를 통해 React 페이지를 띄워보려고 한다. Storybook: UI component explorer for frontend developers Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient. "Storybook is a powerful frontend..
json-server란 프론트엔드 개발을 하며 백엔드를 동시에 구축해서 사용하기에는 매우 어렵고 번거로울 것이다. 이를 해결하기 위한 솔루션으로 json-server라는 것이 있는데, 내부적으로 lowdb라는 단순한 데이터베이스를 이용하며 REST API를 지원한다고 한다. GET, POST, DELETE, PUT 메소드를 지원한다. (POST, PUT 시에는 헤더에 Content-Type: application/json 작성 필수라고 함) sqlite보다 더 단순한 db인 것으로 확인되는데, 주의 점으로는 직접 만든 db.json 파일에 직접 데이터를 저장하고 갱신하는 방식이라 앱 재배포시 기존 데이터 전부 날라갈 수 있다고 한다. json-server 설치 - (단발적으로 진행시 필요 없음. 아래 j..
https://binaryjourney.tistory.com/15?category=916264 문제 현재 윗글 블로거 님의 글을 보면서 내가 개발하려는 서비스에 맞춰서 진행을 하고 있었다. (현재 개발하고 있는 서비스는 게시판 서비스와 동일하다고 봐도 무방하다.) history.push()를 통해 특정 액션 이후에 해당 페이지로 이동을 하려고 하는 것이 핵심 로직 중 하나인데, 아래와 같다. 유저가 아래와 같은 폼에서 방을 생성한다. (디자인이 허접해도 이해 부탁드립니다...) 2. 등록하기 버튼을 누름으로써 방이 생성되면 해당 방으로 이동한다. import { call, put, getContext } from 'redux-saga/effects'; import Axios from 'axios'; im..
리덕스의 흐름 액션 → 스토어 전달 → 리듀서에서 액션타입에 따른 payload 전달 → 상태 변경 위 흐름은 동기적 으로 일어나는데 만약 실제 서버와 통신하며 API 같은 외부 리소스를 가져오는 경우에는 리덕스 흐름만으로는 제어하기가 어렵다고 한다. 그래서 리듀서 단계 전이나 마지막인 액션에서 스토어 상태 변경 전에 비동기 로직을 넣을 수 있는데 이를 미들웨어(middleware)라고 한다고 한다. (출처: https://binaryjourney.tistory.com/11?category=916264) 미들웨어 대표적인 미들웨어로는 redux-thunk, redux-saga가 있다. 리덕스 툴킷 createAction createSlice 위 둘은 리듀서를 한 파일에서 쉽게 만들고 활용하기 위해서 사용..
리액트에서의 배열 특징 자바스크립트에서 배열을 다뤄보신분이라면 그냥 배열에 데이터를 추가할 때, push 를 사용하지만 리액트에서는 state 내부의 값을 직접적으로 수정하면 절대로 안된다. 이를 불변성 유지 라고 하는데, 이전에 나는 이것을 모르고 push를 통해서 수정한 적이 있다. push, splice, unshift, pop 같은 자바스크립트 내장함수는 배열 자체를 직접 수정하게 되므로 리액트에서는 적절하지 않고 concat, slice, map, filter 같은 함수를 사용해야 한다. 불변성 유지가 중요한 이유는 불변성을 유지해야, 리액트에서 모든것들이 필요한 상황에 리렌더링 되도록 설계 할 수 있고, 그렇게 해야 나중에 성능도 최적화 할 수 있기 때문이다. (출처: https://velop..
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. Lifecycle React Lifecycle Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting. Mounting means putting elements into the DOM. https://www.w3schools.com/react/react_lifecycle.asp Lifecycle은 크게 Mounting, Updating, Unmounting의 3가지 단계가 있다...
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. form 실제 서비스에서는 form을 통해 유저에게 데이터를 받고 또 해당 데이터를 서버로 옮겨주는 일이 빈번하다. 이와 같은 부분을 공부하고자 한다. # pages/about.jsx import React from 'react'; class About extends React.Component { constructor(props) { super(props); this.state = { username: '' }; } myChangeHandler = evt => { this.setState({ username: evt.target.value }); }; doSave = () => { const { username..
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. state props와는 다르게 다른 곳에서 변경을 하면 html dom을 re rendering 시킴(props도 리렌더링 함) state 안에 데이터 값을 입력해 놓고 dom에서 사용 class BusinessName extends React.Component { constructor(props) { super(props); this.state = { brand: '한승욱짱' }; } render() { // const { brand } = this.props; const { brand } = this.state; return ( {/* hello, {brand} */} hello, {brand} ); } 여..
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. props props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용 parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때 사용 쉽게 말해서 컴포넌트를 호출할때 넣어주는 것 변경될 때 리렌더링 일어남 편의상 한 jsx 파일안에 2개의 클래스를 사용 import React from 'react'; class BusinessName extends React.Component { render() { const { brand } = this.props; // console.log(brand); return hello, {brand}; } } class Contact extends Re..
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. 부트스트랩 Bootstrap Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. https://getbootstrap.com/ 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS ..
기술개발/React, Frontend 2021. 3. 22. 19:40
하고자 하는 것 협업하는 기획자나 디자이너 등 다른 직군이 개발중인 페이지에 접근하며 진행도 파악을 할 수 있게 하고 싶다. 해결방법으로는 최근 스토리북 등 다양한 방법이 있겠지만 나는 Github Pages를 통해 React 페이지를 띄워보려고 한다. Storybook: UI component explorer for frontend developers Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient. "Storybook is a powerful frontend..
기술개발/React, Frontend 2021. 3. 18. 14:40
json-server란 프론트엔드 개발을 하며 백엔드를 동시에 구축해서 사용하기에는 매우 어렵고 번거로울 것이다. 이를 해결하기 위한 솔루션으로 json-server라는 것이 있는데, 내부적으로 lowdb라는 단순한 데이터베이스를 이용하며 REST API를 지원한다고 한다. GET, POST, DELETE, PUT 메소드를 지원한다. (POST, PUT 시에는 헤더에 Content-Type: application/json 작성 필수라고 함) sqlite보다 더 단순한 db인 것으로 확인되는데, 주의 점으로는 직접 만든 db.json 파일에 직접 데이터를 저장하고 갱신하는 방식이라 앱 재배포시 기존 데이터 전부 날라갈 수 있다고 한다. json-server 설치 - (단발적으로 진행시 필요 없음. 아래 j..
기술개발/React, Frontend 2021. 3. 17. 00:59
https://binaryjourney.tistory.com/15?category=916264 문제 현재 윗글 블로거 님의 글을 보면서 내가 개발하려는 서비스에 맞춰서 진행을 하고 있었다. (현재 개발하고 있는 서비스는 게시판 서비스와 동일하다고 봐도 무방하다.) history.push()를 통해 특정 액션 이후에 해당 페이지로 이동을 하려고 하는 것이 핵심 로직 중 하나인데, 아래와 같다. 유저가 아래와 같은 폼에서 방을 생성한다. (디자인이 허접해도 이해 부탁드립니다...) 2. 등록하기 버튼을 누름으로써 방이 생성되면 해당 방으로 이동한다. import { call, put, getContext } from 'redux-saga/effects'; import Axios from 'axios'; im..
기술개발/React, Frontend 2021. 3. 16. 16:56
리덕스의 흐름 액션 → 스토어 전달 → 리듀서에서 액션타입에 따른 payload 전달 → 상태 변경 위 흐름은 동기적 으로 일어나는데 만약 실제 서버와 통신하며 API 같은 외부 리소스를 가져오는 경우에는 리덕스 흐름만으로는 제어하기가 어렵다고 한다. 그래서 리듀서 단계 전이나 마지막인 액션에서 스토어 상태 변경 전에 비동기 로직을 넣을 수 있는데 이를 미들웨어(middleware)라고 한다고 한다. (출처: https://binaryjourney.tistory.com/11?category=916264) 미들웨어 대표적인 미들웨어로는 redux-thunk, redux-saga가 있다. 리덕스 툴킷 createAction createSlice 위 둘은 리듀서를 한 파일에서 쉽게 만들고 활용하기 위해서 사용..
기술개발/React, Frontend 2021. 3. 15. 16:48
리액트에서의 배열 특징 자바스크립트에서 배열을 다뤄보신분이라면 그냥 배열에 데이터를 추가할 때, push 를 사용하지만 리액트에서는 state 내부의 값을 직접적으로 수정하면 절대로 안된다. 이를 불변성 유지 라고 하는데, 이전에 나는 이것을 모르고 push를 통해서 수정한 적이 있다. push, splice, unshift, pop 같은 자바스크립트 내장함수는 배열 자체를 직접 수정하게 되므로 리액트에서는 적절하지 않고 concat, slice, map, filter 같은 함수를 사용해야 한다. 불변성 유지가 중요한 이유는 불변성을 유지해야, 리액트에서 모든것들이 필요한 상황에 리렌더링 되도록 설계 할 수 있고, 그렇게 해야 나중에 성능도 최적화 할 수 있기 때문이다. (출처: https://velop..
기술개발/React, Frontend 2021. 3. 12. 18:29
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. Lifecycle React Lifecycle Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting. Mounting means putting elements into the DOM. https://www.w3schools.com/react/react_lifecycle.asp Lifecycle은 크게 Mounting, Updating, Unmounting의 3가지 단계가 있다...
기술개발/React, Frontend 2021. 3. 10. 20:14
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. form 실제 서비스에서는 form을 통해 유저에게 데이터를 받고 또 해당 데이터를 서버로 옮겨주는 일이 빈번하다. 이와 같은 부분을 공부하고자 한다. # pages/about.jsx import React from 'react'; class About extends React.Component { constructor(props) { super(props); this.state = { username: '' }; } myChangeHandler = evt => { this.setState({ username: evt.target.value }); }; doSave = () => { const { username..
기술개발/React, Frontend 2021. 3. 8. 15:02
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. state props와는 다르게 다른 곳에서 변경을 하면 html dom을 re rendering 시킴(props도 리렌더링 함) state 안에 데이터 값을 입력해 놓고 dom에서 사용 class BusinessName extends React.Component { constructor(props) { super(props); this.state = { brand: '한승욱짱' }; } render() { // const { brand } = this.props; const { brand } = this.state; return ( {/* hello, {brand} */} hello, {brand} ); } 여..
기술개발/React, Frontend 2021. 3. 5. 12:09
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. props props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용 parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때 사용 쉽게 말해서 컴포넌트를 호출할때 넣어주는 것 변경될 때 리렌더링 일어남 편의상 한 jsx 파일안에 2개의 클래스를 사용 import React from 'react'; class BusinessName extends React.Component { render() { const { brand } = this.props; // console.log(brand); return hello, {brand}; } } class Contact extends Re..
기술개발/React, Frontend 2021. 3. 3. 23:22
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. 부트스트랩 Bootstrap Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. https://getbootstrap.com/ 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS ..