React
1.[TIL] React의 돌고 도는 Life Cycle API 👶👱♂️👨🦳
Life-Cycle은 리액트의 모든 데이터 흐름의 단 방향을 보장하며, 컴포넌트 내 에서 데이터를 효과적으로 관리하기위한 로직을 구성하는 기능을 갖고있다. 즉 컴포넌트가 브라우저에서 생성되고 사라질때, 그리고 변경 될 때 호출되는 API라고 할 수 있다.
2.[TIL] List와 고유한 Key, 그것이 뭣이 중헌디! 🔑
리액트에선 데이터 배열을 Mapping 하여 각각의 데이터를 갖고있는 컴포넌트 배열로 변환할 수 있다. 이는 반복되는 각각의 컴포넌트에 데이터가 배열의 각 값을 할당해주는 수고스러움을 덜어 줄수있을뿐아니라, 배열에 데이터가 추가됨에 따라 자동으로 데이터가 담긴 컴포넌트
3.[사이드 프로젝트] <오늘의 교훈/> 컴포넌트 사전 설계를 습관화 합시다🤦🏻♂️
정말 많은 에러들과 쓸때 없이 거슬리는 `never used` 경고를 헤쳐나가며 여러가지를 느낄 수 있었던거같다. 아직 리액트를 시작한지 얼마 되지않아서 컴포넌트의 세분화, 재사용 등등 머리로만 알고있었지, 직접 와닿지는 않았었는데, 이렇게 직접 불편함을 겪어보고, 해
4.[TIL] MVC 패턴 vs Flux 패턴
리덕스를 보다 정확하게 이해하고 사용하기 위해선 리덕스의 근원이되는 Flux 아키텍쳐에 대한 이해가 필수라 생각되어 정리용으로 글을 써봤다. Flux 아키텍쳐란 facebook에서 기존의 Model-View-Controller 방식의 MVC 패턴을 포함한 비슷한 패턴들
5.[TIL] React-router 리액트 라우터 시작하기
현대의 웹에서는 제공되는 정보가 많을뿐 아니라, 과거와는 달리 사용자와의 인터랙션이 많기 때문에 어플리케이션 형태에 가까운데 이를 페이지가 1개인 어플리케이션, 즉 SPA(Single-page-aplication)라고 한다. 물론 페이지가 1개 뿐이라고 해서 보여주는
6.[TIL] 에러노트📕 - Can't perform a React state update on an unmounted component
요즘 MERN스택으로 로그인 및 회원가입 기능 기반의 보일러 플레이트를 만들어보고 있다. 사실 내가 쓸려고 만들고있다 :)React, Nodejs(Express), MongoDB 기반으로 제작중이며, 로그인 및 회원가입이 메인 기능인 보일러 플레이트인 만큼 bcrypt
7.[사이드 프로젝트] multer를 이용한 이미지 업로드 feat.React x Node js
요즘 코드스테이츠 부트캠프에서의 빡센 일정과 학습량 덕에 정신없는 나날들을 보내고 있지만, 하루의 남는 시간들을 최대한 활용하여, 만들었던 사이드 프로젝트의 기능들을 보완하고 개선시키는 중이다. 위 사이드 프로젝트는 React, MongoDB, NodeJS(Expres
8.[사이드 프로젝트] React, Node js 로 “이미 존재하는 이메일 입니다” 기능 구현하기
사용자가 form 태그에 입력한 값을 서버에 전송해야하는 상황의 대부분은 사용자가 입력하여 전송한 값 중 특정한 값을 데이터 베이스와 비교하여 중복 시 에러 메세지를 보내주는 상황을 만들어주어야한다. 오늘은 회원가입 시 만일 db에 사용자가 입력한 이메일값이 이미 존재
9.[TIL] Redux-Saga 맛보기
리액트를 사용해서 무언가를 개발하다보면, 컴포넌트의 상태관리에 많은 신경을 써줘야한다. 작은 프로젝트의 경우 props를 이용해서 컴포넌트끼리 데이터를 교류해도 되지만, 프로젝트가 복잡해질수록 데이터 흐름을 추적하기 힘들어져서 많은 불편을 겪게된다. 그래서 나온것이 바
10.[사이드 프로젝트] 토이 프로젝트에 리덕스 사가 끼얹기
이번에 진행할 새로운 토이 프로젝트는 해외 유명 블라인드 데이트앱 tinder의 클론 서비스이다. 리액트와 Express, 몽고db 기반으로 제작중이며, 리덕스 사가를 이용한 상태관리와 socket i.o를 이용한 실시간 채팅 기능이 주 이기 때문에 tindux로 이름
11.[사이드 프로젝트] React_Image_Crop_Component ✂️
현재 토이 프로젝트로 개발중인 블라인드 데이팅 서비스 Tindux는 유저 개개인의 프로필 이미지가 중요한 역활을 하기 때문에, 기존 방식대로 유저의 이미지를 통째로 받아서 업로드한 후 이미지 정중앙을 틀에 끼워넣는식의 방식은 맞지않다고 생각했다. 그래서 유저의 프로파일
12.[사이드 프로젝트] Tindux 회원가입 컴포넌트 작업기📝
토이 프로젝트로 개발중인 블라인드 데이팅 서비스 Tindux의 회원가입 컴포넌트 작업이 어느정도 마무리되었다. 지금까지 만들어봤던 일반적인 회원가입 관련 컴포넌트에 비해 받아야할 항목들도 많고, 입력받은 항목들을 기반으로 컴포넌트 내에서 실시간으로 변화를 줘야 했다보니
13.[사이드 프로젝트] Redux-Saga 를 이용한 하위 컴포넌트들의 데이터 흐름 관리
요즘 부트캠프의 바쁜 일정 덕분에 새로운 지식들을 빠르게 습득하고 있다는 기분이 들지만, 한편으론 개인 프로젝트를 진행할 시간이 점점 부족해져서 그런지 한편으론 아쉽다. 그래도 나름 시간을 내서 틈틈히 개인프로젝트를 진행중이며, 최근엔 기존의 회원가입 및 로그인 관련
14.[사이드 프로젝트] 리액트에서 카카오 로그인 구현 하기
진행중인 사이드 프로젝트 'Tindux'에 소셜 로그인 기능을 추가했다. 리액트 관련 라이브러리와 카카오 개발자 사이트의 공식문서 덕분에 카카오 API를 통한 카카오계정 인증까지는 빠르게 구현 했지만, 인증 후 사이드 프로젝트 앱 의 계정 및 JWT 인증 시스템과 어떻
15.[사이드 프로젝트] 리액트에서 페이스북 로그인 구현 하기
카카오 로그인 기능에 이어서 페이스북 로그인 기능도 추가했다. 페이스북 로그인 기능 또한 리액트용 라이브러리를 사용하면 빠르게 구현할 수 있었고,클라이언트에 컴포넌트 추가 이후의 후처리는 카카오 로그인 때문에 수정해 뒀던 서버 단의 로그인 관련 API를 그대로 사용하면
16.리액트 Life cycle 과 Redux & JWT 기반의 사용자 인증에 대한 고찰
최근 리액트와 Redux를 이용한 사이드 프로젝트를 진행하다가 좋은 아이디어가 생겨서 프로젝트의 전반적인 구조를 바꾸게되면서 사용자 인증 관련 로직들 또한 재구성해야 했고, 그 과정에서 겪었던 여러가지 문제들과 새로 배웠던 것들을 기록해보려한다. API를 사용하는 웹
17.[React] react-reveal을 이용해서 스크롤 애니메이션 만들기
얼마전 개인 포트폴리오 페이지 제작때 아주 유용하게 사용했던 라이브러리 하나를 소개해보려한다. react-reveal는 몇줄의 코드만으로 손쉽게 스크롤 애니메이션을 구현할 수 있게끔 만들어져 있으며, 특히 공식 홈페이지에 가이드가 깔끔하게 잘되어 있기에 누구나 손쉽게
18.[ Team Project ] Redux-Saga 간단 사용 가이드
❗️ 해당 게시물은 팀 프로젝트 팀원 배포용 문서 입니다.
19.[React] Create-React-App에 Prettier & ES Lint 적용하기
협업을 진행하다보면 각기 다른 코드 스타일 때문에 코드의 통일성과 가독성이 떨어지거나, 잠재적으로 여러 문제를 일으킬 수 있는 위험이 있다. 그렇기에 협업시엔 코드 스타일을 합일화 할 필요성이 있는데, Prettier와 ES Lint를 적절히 사용한다면 협업시의 코드스