React를 신규 프로젝트에 도입하고 2달여간 사용해본 후기, 사용한 기술 스택, 도입 배경, 앞으로 배울 점 등을 정리해보았습니다.
리액트 라이프 사이클 1. 라이프 사이클 이벤트 리액트는 일정한 생명주기를 가진다. 생명주기란 컴포넌트가 생성되고 소멸될때 까지의 주기를 일컫는다. 이 과정에서 특정시점에 발동되는 이벤트가 있는데 이런 이벤트를 라이프 사이클 이벤트 라고 한다. (ex:componentDidMount, render...) 2. 흐름 li...
리덕스 개발자 도구를 사용하면 스토어의 상태를 크롬 개발자도구에서 조회 할수있다. 또한 어떤 액션들이 디스패치되었는지와 액션에 따라 상태가 어떻게 변했는지 추적할수있다. 프로젝트에 적용하기 * 크롬 웹스토어 확장프로그램 설치 https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcp...
현재까지 SCSS를 사용함에 있어서 SCSS의 특별한 기능을 많이 활용하지 못한것 같아 오늘 하루를 투자해서 스타일 시트를 모두 리팩토링 했다. CSS 전처리기 사용을 통해 조금더 효과적으로 스타일시트를 작성할수 있게 됬다. 중첩된 속성 정의
이번 신한생명과의 협업 프로젝트 진행간 transition과 keyframe에 대한 이해가 없으니, 매번 찾아서 사용해야했는데 이번 주말을 통해 정확히 알아보려 한다. 첫번째로는 transition 과 transform에 대해 알아보려 한다. Transition CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 처리하는것 값의...
2019년은 내 인생에 정말 큰 의미가 있는 한 해 였다. 군인에서 민간인으로 2010년 ~ 2019년 6월까지의 군생활을 마무리 했다. 라고 상담예약을 한뒤... 그 다음주에 상담받고 결재하고 끝!! 이렇게 초단기간에 개발자가 되기로 다짐하고 그렇게 개발자가 되었다. 회고를 통해 작성하다보니 뚝!딱! 하고 개발자가 된것 같지만 위코드 부트캠프...
Store 첫번째 포스팅에서 하나의 앱에는 하나의 스토어가 있다.라고 했다. 스토어는 하나의 저장소를 일컫는데 스토어에는 현재의 상태와 리듀서 그리고 내장 함수들이 있다. 리덕스 확실히 알고넘어가기 리덕스 순서.jpg Action 스토어에 있는 상태값을 변경 시켜주기 위해서는 리듀서에 신호를 보내야하는데 그걸 액션이라고 한다. 액션은 객...
스코프(scope)의 종류 1. 전역 스코프(Global Scope) 변수가 함수에 속하지도 않고 {} 괄호안에 포함되지도 않으면 그 변수를 전역변수라고 한다. 전역변수를 선언하게 되면 자바스크립트 코드 어디서든지 사용이 가능하다. 블록 스코프는 함수 스코프를 포함한다. 함수는 {} 괄호로 작성되어야 하기 때문이다. ES6의 화살표 함수를 사용...
(19년 11월 21일 작성본) 19년 6월 9년간의 군 생활을 마무리하고 전역을 하게되었다. 주변 사람들은 말했다 '너처럼 똘똘하면 밖에서도 뭐든 잘 할수있을거라고' 큰 오산이었다. 폐쇄집단에서만 생활해서인지 우물안 작은 올챙이였을 뿐이다. 6월부터 WeCode Bootcamp에서 개발 공부를 하게되었다. 시작과 끝까지 모든게 쉽지 않았다. 하루하루 ...
('19년 11월 15일 작성본) 어느덧 입사한지 4주가 지났다. 구직할 당시에는 시간이 매우 늦게 지나간다고 느꼈는데 매일 개발을 하다보니 시간이 매우 빠르다. 11월 14일(목) 어제는 신한퓨처스랩 데모데이 행사가 있어, 아침 6시 성수동 S-Factory로 향했다. 데모데이에서 나의 역할은 채용부스에서 웹 신입 개발자들과 인터뷰를 진행하는것이었다....
('19년 10월 30일 작성본) '19년 6월 30일 군 전역 후 약 4개월만에 다시 직장인이 되었다. 3개월은 WeCode에서 개발자가 되기 위해 부단한 노력을 했고, 1개월은 쉬면서 구직했다. 운이 좋았는지 3번의 면접만에 최종합격 통보를 받았다. 평소 나와 어울리지는 않지만 그레이아나토미(미국 메디컬 드라마)를 미친듯이 봤었던 적이 있는데(그냥...
1. Modules이란? 리덕스 모듈에는 액션타입, 액션 생성함수, 리듀서가 있다. 리덕스의 github repositories의 코드를 보면 아래와 같이 코드가 분리되어 있다. Provider로 store를 감쌌으니 컴포넌트에서 리덕스 스토어에 접근 할수 있게 된다.
1. 하나의 App에는 하나의 Store만 있다. 하나의 App에 하나의 Store를 만들어서 사용한다. 여러개의 store를 사용하는것은 권장되지 않는다고 한다. 2. 상태는 읽기전용 이다. 리액트에서는 state의 불변성을 유지하는게 중요하다. 물론 리덕스에서도 마찬가지이다. 기존의 상태를 건들이지 않고 새로운 상태를 생성해서 업데이트 해주는 방...
학부시절 졸업프로젝트로 웹사이트를 만들게 되었다.당시의 나는 굉장히 우유부단한 학생이어서, 아이디어를 정말 많이 변경했다. 게다가 디자인 학과 플젝이므로 디자인이 예뻐야만 했다. 고민 끝에 여러가지 오픈소스 라이브러리를 찾아다녔는데, 그 중 너무 맘에 쏙 들었지만 쓰지 못했던 jquery plugin을 소개하고자 한다. * 우선 내가 소개하려고 하는 ...
MockUp Server main.gif Mockup Server란 MockUp Server는 프론트와 백엔드를 동시에 같이 개발이 진행할때 쓰면 큰효과를 볼 수 있습니다. 예를들어 자주 바뀌는 백엔드의 API와 데이터의 형태를 항상 무엇이 바꼇는지 모니터링(깃으로)을 할 수 있고 프론트엔드 개발자는 그것에 맞춰서 완성된 서버가 없더라도 최대한 비슷...