개발여행의 블로그

styled-components에 대한 활용 react에만 집중해서 과제를 하다보니 styled-components는 단순히 컴포넌트의 스타일을 지정하는 정도로만 사용했다. 역시나 멘토님께서 해당 부분에 대해 코멘트를 남겨주셨다. 더 찾아보고 적용해보았어야 했는데라는 생각이 들었다. 글로벌 스타일 지정(createGlobalStyle), theme, styled-component의 확장 등등 활용법이 굉장히 많다는 것을 배웠다. 1) 전역 스타일 지정 구현된 코드에는 HTML 파일에 style sheet를 지정해서 전역 스타일을 지정해주었는데, styled component를 사용하면 아래와 같이 사용할 수 있다. import { createGlobalStyle } from 'styled-componen..

React project 내에서 Github API를 사용하기 위해 개인 키를 넣어주여야 하는 상황이었다. React 앱에 개인 API키를 저장하면 누구나 앱 파일을 볼 수 있기 때문에 위험하다. 환경 변수를 사용해서 키를 보안하는 방법에 대해 글을 남기고자 한다. 1) 먼저, 디렉토리의 root에 .env 파일을 생성한다. (개발용 환경변수, 테스트용 환경변수 등등 다양하지만 이번에는 .env로 사용해보겠다.) 2) 파일을 생성했다면 먼저 .gitignore에 추가해주어야 원격저장소에 저장할 때 파일이 올라가지 않는다. 3) 이제 .env에 사용할 key를 저장해주어야 한다. (주의할 점은 REACT_APP_ 을 꼭 붙여주어야 한다.) 위의 사진과 같이 key와 value를 설정해준다. 4) 실제 프로..

자리가 변경되고 나서 다른 계정의 commit이 나의 commit내역으로 올라가 파일의 내용이 모두 지워지는 상황이 발생했다! git rebase -i commit 히스토리를 수정하기 위해 검색을 해보았는데, rebase를 활용하면 해당 commit을 지울 수 있다고 해서 질문을 남긴 후 바로 commit 삭제를 진행했다. --interactive는 말 그대로 git rebase 명령어를 대화형으로 실행하는 것을 뜻한다고 하는데, 아직 와닿지가 않는다! 먼저 내가 수정하고 싶은 commit의 바로 이전 commit을 알아야 한다. 나는 gitlab에서 commit hash 값을 가지고 왔다. (수정할 commit의 hash가 아니라 바로 직전의 commit이어야 한다.) git rebase -i 위의 명..

Hooks의 등장 배경 리액트 hook의 역사는 recompose 라이브러리에서 시작되었다. recompose의 아이디어는 hook과 굉장히 흡사하다. 함수형 프로그래밍을 적용하여 개발되었으며, state를 주는 방식이다. 끝내 recompose 라이브러리는 리액트 팀에 의해 인수되었다. 2018년 10월 25일 recompose의 업데이트는 중단되었다. Andrew Clark은 facebook 팀에 합류해서 hook을 릴리즈했다. https://github.com/acdlite/recompose GitHub - acdlite/recompose: A React utility belt for function components and higher-order components. A React utility..

리액트란? 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다. 2013년 5월 JSConf US에서 오픈 소스화되었다. (출처-위키피디아) 리액트는 어떻게 등장했는가? 리액트가 존재하기 전, 이미 많은 라이브러리와 프레임워크들이(Jquery, Backbone, AngularJS 등) 존재했다. 특히 jQuery가 등장했을 때 엄청난 센세이션이었던 것으로 들었다. 수많은 브라우저에 맞춰 ..

React에는 총 9개의 Life Cycle 메서드가 존재한다. 먼저 메서드의 접두사 별로 나눠서 그 차이를 알아보자! will : 작업을 작동하기 전에 실행되는 메서드 did : 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 mount, update, unmount 이렇게 세 가지의 카테고리로 나뉜다. 차례대로 하나씩 알아보자! mount DOM이 생성되고 웹 브라우저 상에 나타나는 것 mount 될 때 호출하는 메서드 ✅ constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 ✅ getDerivedStateFromProps : props에 존재하는 값을 state에 넣을 때 사용하는 메서드 ✅ render : UI를 렌더링하는 메서드 ✅ componentDidMo..