React
-
[what is?] react hooks 가 뭔가요?IT 지식 2020. 11. 8. 18:25
저번 프로젝트까지는 react개발을 class 형 컴포넌트로 작성했었습니다. 그리고 이번 프로젝트에서는 함수형 컴포넌트로 작성하게 되었는데요, 이 함수형 컴포넌트를 작성하면서 꼭 필요한 기능인 react hooks에 대해 알아보는 시간을 가져보도록 하겠습니다. 1. react hooks? react hooks는 react v16.8 버전에 도입된 새로운 기능입니다. 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공함으로써 기존의 함수형 컴포넌트에서는 할 수 없던 다양한 기능들을 제공하고 있습니다. 이 말을 들었을 때 '그렇다면 그 전에는 이런 기능이 없었던 말이야?' 라는 생각이 드실 수도 있습니다. 그리고 그 생각은 정확하다고..
-
[What is?] 리덕스가 뭔가요?IT 지식 2020. 11. 1. 22:40
리액트를 쓰다보면 리덕스에 관한 정보를 심심치않게 접하게 됩니다. 그리고 주워들은 정보에 의하면, 리덕스를 사용했을 때 state 관리가 훨씬 쉬워진다고들 이야기 합니다. 오늘의 포스팅은 바로 그 리덕스에 관한 이야기를 해보도록 하겠습니다. 1. 리덕스에 대한 정의 1) 리덕스란? 리덕스란 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구 입니다. 하나의 페이지에서 모든 레이아웃과 기능들이 작동하는 요즘의 SPA에서 특히나 유용하게 사용할 수 있는 도구라고 할 수 있습니다. 리덕스는 리액트 외에도 다양한 js 프레임워크 및 라이브러리에서 사용할 수 있지만, 리액트에 특화되어 있기에 리액트에서 그 효율성이 극대화 된다고 할 수 있습니다. 2) 리덕스 왜 필요한가요? 리액트로 ..
-
1차 프로젝트 후기(in Wecode)에세이 2020. 11. 1. 17:06
목차 1. 시작하기 전 2. 프로젝트 진행 중 3. 후기 및 개발자가 되어 간다는 것. 1. 프로젝트를 앞두고... 위코드에서의 한 달 살이가 지난 후 드디어 처음으로 프로젝트를 진행하게 되었다. 각자가 하고 싶은 프로젝트에 대해 발표하고 나서 투표과정을 거친 후 클로닝할 사이트와 팀원이 발표 되었다. 그때까지만 해도, 기대보다는 우려가 많이 앞섰다. 위코드에서 처음 했던 레플릿 과제는 진행순위로 보면 항상 하위권이었고, 인스타그램을 클로닝하는 프로젝트인 위스타그램에서도 추가 기능 구현까지 한 많은 동기들에 비해 나는 기초 기능구현도 버거웠기 때문이다(결국 추가기능 구현은 시도조차 하지 못했다). 그런 상황에서 제대로 된 사이트를 클론한다는 것이 걱정되었다. '제대로 사이트를 구현하지 못해 제대로 된 포..
-
[TIL]Day 29. 핀터레스트 레이아웃을 구현해보자!IT 지식 2020. 10. 25. 15:56
오늘은 지금 진행하고 있는 프로젝트에서 구현해보았던 핀터레스트 레이아웃에 대한 포스팅을 진행해보도록 하겠습니다. masonry layout 위와 같은 핀터레스트의 레이아웃을 masonry 레이아웃이라고 합니다. masonry 라는 뜻은 석공직, 석조 건축이라는 뜻을 가지고 있다고 합니다. 마치 벽돌을 쌓아 올리는 것 같은 모습이죠? 이런 모습을 구현하는 방법은 여러가지가 있습니다. 라이브러리를 사용하는 방법도 있고, 생활코딩에는 기초적인 css를 활용해서 구현하는 강좌도 있습니다. 하지만 오늘 제가 사용하려는 방법은 지난 시간에 설명드린 grid css와 자바스크립트 함수를 통해서 구현하는 방법입니다. 함수를 만들어보자 우선 이 방법을 사용하기 위해선 무한 스크롤 기능 구현 당시 이야기했던 client ..
-
[TIL] Day 27. 무한 스크롤 기능 구현하기(in React)IT 지식 2020. 10. 24. 17:21
요즘 인스타를 포함해서 많은 사이트 등에서 활용하고 있는 무한 스크롤 기능을 구현해보는 시간을 가지도록 하겠습니다. 제가 진행하고 있는 프로젝트의 메인 페이지에서 적극 활용하고 있는 기능인데요, 그 원리가 생각보다 쉬워서 어렵지 않게 구현하실 수 있으실 겁니다. 무한 스크롤 무한 스크롤 기능을 사용하는 이유는 서버에서 보여줘야 하는 데이터의 양은 방대한데, 이를 한꺼번에 화면에 띄워주려 한다면 페이지 로딩도 오래 걸리고, 사용자의 입장에서도 원하는 데이터를 쉽게 찾기 어렵기 때문에, 특정 이벤트가 발동 될 때에만 소량의 데이터를 보여주기 위해 활용하는 것입니다. step. 1 데이터 가져오기 무한 스크롤의 가장 기본이 되는 단계는 그만큼의 데이터를 가져오겠다는 신호를 보내는 것입니다. 데이터의 양이 부족..
-
[TIL]Day 20. 리액트(React)란?IT 지식 2020. 10. 4. 17:50
프론트엔드 개발자라면 누구나 리액트라는 단어는 한 번쯤 접해보셨을 겁니다. 현재 수많은 기업에서 활용하고 있고, 리액트 커뮤니티도 엄청나게 활성화 되어 있어서 이것을 잘 배워둔다면 여기저기 활용할 요소가 많은 것이 사실이죠. 오늘은 이렇게 핫한 리액트가 도대체 무엇인지 살펴보는 시간을 가져보도록 하겠습니다. 1. 리액트란? 리액트는 웹/앱의 뷰를 개발할 수 있도록 도와주는 라이브러리입니다. 우리가 지난 시간에 살펴보았던 라이브러리라는 단어가 다시 나오는군요! 이전 포스팅에서 얘기했던 것처럼 라이브러리는 특정 언어로 작성된 응용도구라고 생각하시면 되는데요, 리액트의 경우에는 자바스크립트로 작성된 라이브러리라고 할 수 있습니다. 그렇다면 왜 리액트가 탄생하게 된 것일까요? 예전의 웹 생태계에서는 html과 ..