React:리액트 교과서 1장(리액트 살펴보기) 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다. |시작하기에 앞서 리액트란 무엇인지, 왜 리액트를 쓰는지 또한 어떠한 특징이 있는지, 그리고 어떠한 장단점을 갖고 있는지 파악해보자. |React란 무엇인가? > 리액트는 UI 컴포넌트 라이브러리특별한 템플릿언어가 아닌 자바스크립트를 이용해 만든다.이러한 컴포넌트들은 시각적 표현과 동작을 구현하는 논리를 모두 담고있다.컴포넌트 기반의 아키텍쳐는 일반적으로 일체형 ui에 비해, 재사용과 유지보수 확장이 용이하다. 리액트의 접근법은 새로운것이 아니다. 컴포넌트로ui를 구성하는 방법을 사용한지는 오래되었지만, 리액트는 최초로 템플릿 없이 순수하게 자바스크립트만으로 이것을 가능하게 했..
Web: 도메인관리시스템에 대한 이해 | 시작하기에 앞서 만든 펜션사이트를 도메인을 연결해주려 하였다. 기존에 파이어베이스에서 제공한 호스팅으로 임의의 url (ex) example.firebase.app.com 로 사이트를 이용하고 있었는데, 알기쉬운 도메인으로 연결하는 과정에서 도메인관리 시스템에 대해서 궁금해져서 검색해보고 알아보았다. | 도메인, 네임서버와 관련한 웹 접속의 흐름 아래에서 볼수 있듯이 모든 도메인은 네임서버를 가지고 있다고 한다. 네임서버에서 도메인과 ip를 연관지어 브라우저에 연결된 ip주소와 관련한 내용을 보여주는 것이다. 도메인을 구입한 네임서버가 해외에 있으면 속도가 느리다고한다. 하지만 가격이 매우싸다고한다..ㅎ(500원에 할수도있다고한다.. 아까 14000원 주고 1년치..
일상 :구글 io extended seoul | 행사장 사진 |Keynote: (David macLaughLin) 오픈소스는 google engineering의 핵심이다.- 2800개의 오픈소스프로젝트- 1년에250k 커밋 커뮤니티는 연결되어있다.gdg (91개의 나라 약700여개의 chapter)google developers expert (한 가지 이상의 구글 기술에 있어서 전문가이자 동시에 영향력 있는 개발자들의 글로벌 네트워크)women techmakersgdg devfesti/o extended핵심: community is core to everything we do > Tech Chapter - web tech- cloud korea- korea android TRACK C | Explorin..
React:리액트에서 mount 와 render의 차이 | 시작하기전 리액트로 개발을 하면서, redner()메소드가 불리는 렌더가 되는것과 컴포넌트가 mount 된다는 개념의 차이점이 나는 모호하게 잡혀있었다.그래서 개발을 하던 중,state가 바뀌어 render가 다시 될때 특정 액션을 해줘야 할때 render 되기전에 다시 컴포넌트가 mount 되기전에 componentWillMount (deprecated 되었으니 이제는 사용 xxx ㅠㅠ) 쪽에서 해주려 했었다..ㅠ 리덕스 state를 활용하지 않고 react의 state 변경시에 액션을 잡으려 해서 componentWillRecieveProps 주기를 쓰지않고 (지금까지는 리덕스를 주로 활용해왔으므로, 리덕스의 state는 props로 들어오므..
일상:2018년 상반기 회고 및 스타트업 개발자 5개월차 회고 | 시작하기에 앞서 6월이 되어, 2018년 상반기의 대부분이 지났다. 올해들어, 스타트업에 입사하여, 이런저런일들이 있었고 여러 내용들을 학습했다. 3개월차가 되었을때 http://ideveloper2.tistory.com/70?category=646723 과 같은 비교적 규모가 작은 이슈들을 처리해 나갔었다. 이후에는 큰 프로젝트를 매니징하고, 설계부터 프론트 백엔드 모두 참여하는 프로젝트들이 대부분이었는데, 어떤 프로젝트와 이슈들을 처리했는지 적어보겠다. | 진행한 사내 프로젝트 1. 신규 런칭 서비스 관련 백반 사이트 [react web app + 기존 중앙 api 서버 결제관련 코드 수정 및 추가 + 버전업 api 서버에 새로운 없던..
React -Redux saga (takeEvery함수와 take) |시작하기에 앞서 redux-saga는 몇몇 특정 액션들이 스토어에 보내질 때, 여러 task들을 함께 실행하기 위한 내부적인 함수를 감싸는 몇몇 helper effect들을 제공합니다. 그 중, redux-thunk와 비슷한 takeEvery 함수가 있는데, 가장 흔히 사용되는 함수입니다. takeEvery는 동시에 시작되는 여러 개의 fetchData instance들을 허용합니다. 이 순간에 이전의 하나 혹은 더 많은 아직 제거되지 않은 fetchData 작업들이 아직 있는 동안 새로운 fetchData 작업을 시작합니다. https://mskims.github.io/redux-saga-in-korean/advanced/Future..
React : props변화에따른 saga와 componentWillReceiveProps()에 대한 생각 및 활용 | 시작하기에 앞서, 일단 componentWillReceiveProps는 리액트 주기중, props에 변화가 있을때, 그 props를 catch하여 이전 props와 변화한 props를 비교등을 통해, 리액트 웹앱의 세부작업을 할수있는 주기이다. 사내 사이트를 만들던 중, 카트에 자동으로 메뉴가 하나 추가하는 기능을 구현했어야 했는데, 그 케이스가 아래의 두가지였다. 1. 처음사이트에 들어왔을때 유저 ux를 위해 카트에 메뉴를 하나추가2.예약기능을 위해 날짜를 변경했을시 다시 카트를 clear하고 메뉴를 하나 추가 | 어려움을 겪었던 부분 기존에 1. 처음사이트에 들어왔을때 유저 ux를 ..
React - navbar item 클릭 후 Link to로 링크 이동시, 메뉴 토글되게하기 | 참고 링크 : https://stackoverflow.com/questions/32452695/react-bootstrap-how-to-collapse-menu-when-item-is-selected | 시작하기에 앞서, Link to로 nav bar 링크 이동시, 페이지가 리로드되는게 아니라 메뉴바가 토글(collapse)되지 않고 그대로 남아있는 현상이 발생했었다. 이를 해결하기 위해 위의 링크를 참고하여, 코드를 구현하였다. 참고로 navitem을 Link to 로 구현하는 방법은 아래와같은 속성을 navitem에 주면 되었었다.componentClass={Link} href="/board" to="/b..