전체 글
-
[what is?] react hooks 가 뭔가요?IT 지식 2020. 11. 8. 18:25
저번 프로젝트까지는 react개발을 class 형 컴포넌트로 작성했었습니다. 그리고 이번 프로젝트에서는 함수형 컴포넌트로 작성하게 되었는데요, 이 함수형 컴포넌트를 작성하면서 꼭 필요한 기능인 react hooks에 대해 알아보는 시간을 가져보도록 하겠습니다. 1. react hooks? react hooks는 react v16.8 버전에 도입된 새로운 기능입니다. 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공함으로써 기존의 함수형 컴포넌트에서는 할 수 없던 다양한 기능들을 제공하고 있습니다. 이 말을 들었을 때 '그렇다면 그 전에는 이런 기능이 없었던 말이야?' 라는 생각이 드실 수도 있습니다. 그리고 그 생각은 정확하다고..
-
[TIL] Day 30. SVG 파일에 대해서IT 지식 2020. 11. 8. 17:53
웹에서 사용되는 이미지는 주로 png 파일이 많아서 svg 파일에 대해 잘 모르는 경우가 많습니다. 저도 이번 프로젝트 진행 전까지는 svg 파일에 대해 잘 몰랐는데요. 오늘의 포스팅은 웹 코딩 중 자주 마주치게 되는 svg 파일에 대해 알아보도록 하겠습니다. 1. svg 파일이 뭔가요? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형 식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. SVG 형식의 ..
-
[What is?] 리덕스가 뭔가요?IT 지식 2020. 11. 1. 22:40
리액트를 쓰다보면 리덕스에 관한 정보를 심심치않게 접하게 됩니다. 그리고 주워들은 정보에 의하면, 리덕스를 사용했을 때 state 관리가 훨씬 쉬워진다고들 이야기 합니다. 오늘의 포스팅은 바로 그 리덕스에 관한 이야기를 해보도록 하겠습니다. 1. 리덕스에 대한 정의 1) 리덕스란? 리덕스란 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구 입니다. 하나의 페이지에서 모든 레이아웃과 기능들이 작동하는 요즘의 SPA에서 특히나 유용하게 사용할 수 있는 도구라고 할 수 있습니다. 리덕스는 리액트 외에도 다양한 js 프레임워크 및 라이브러리에서 사용할 수 있지만, 리액트에 특화되어 있기에 리액트에서 그 효율성이 극대화 된다고 할 수 있습니다. 2) 리덕스 왜 필요한가요? 리액트로 ..
-
[What is?] 타입스크립트가 뭔가요?IT 지식 2020. 11. 1. 19:38
오늘 포스팅에서는 자바스크립트의 상위 호환으로 알려져 있는 타입스크립트에 대해 다뤄보도록 하겠습니다. 1. 타입스크립트? 더보기 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로 소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. (From 위키백과) 타입스크립트는 마이크로 소프트에서 개발한 오픈소스 프로그래밍 언어 입니다. 타입스크립트는 자바스크립트의 슈퍼셋이기 때문에 자바스크립트에서 사용할 수 있는 모든 기능을 사용할 수 있습니다. 이로 인해 ES6 문법을 사용하기 위해 Bab..
-
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 28. CSS grid를 정리해보자!IT 지식 2020. 10. 25. 15:11
오늘의 포스팅은 css 끝판왕 기능이라고 할 수 있는 gird에 대해서 알아보도록 하겠습니다! CSS grid가 뭔가요? css grid는 기존의 display:flex를 대체할 수 있는 새로운 display property라고 생각하시면 됩니다. flex와 grid의 가장 큰 차이점은 flex는 1차원 레이아웃인 반면, grid는 2차원 레이아웃이라는 점입니다. 2차원 레이아웃을 지원하기 때문에 grid는 flex에 비해 더 다양하고 고차원적인 레이아웃이 가능해진다는 장점이 있습니다. 기본 용어 정리 그리드 컨테이너 (Grid Container) display: grid가 적용되는, grid의 전체 영역입니다. grid 컨테이너 안의 요소들은 display:grid의 영향을 받아 정렬됩니다. 그리드 아..
-
[TIL] Day 27. 무한 스크롤 기능 구현하기(in React)IT 지식 2020. 10. 24. 17:21
요즘 인스타를 포함해서 많은 사이트 등에서 활용하고 있는 무한 스크롤 기능을 구현해보는 시간을 가지도록 하겠습니다. 제가 진행하고 있는 프로젝트의 메인 페이지에서 적극 활용하고 있는 기능인데요, 그 원리가 생각보다 쉬워서 어렵지 않게 구현하실 수 있으실 겁니다. 무한 스크롤 무한 스크롤 기능을 사용하는 이유는 서버에서 보여줘야 하는 데이터의 양은 방대한데, 이를 한꺼번에 화면에 띄워주려 한다면 페이지 로딩도 오래 걸리고, 사용자의 입장에서도 원하는 데이터를 쉽게 찾기 어렵기 때문에, 특정 이벤트가 발동 될 때에만 소량의 데이터를 보여주기 위해 활용하는 것입니다. step. 1 데이터 가져오기 무한 스크롤의 가장 기본이 되는 단계는 그만큼의 데이터를 가져오겠다는 신호를 보내는 것입니다. 데이터의 양이 부족..