WeCode
-
[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 데이터 가져오기 무한 스크롤의 가장 기본이 되는 단계는 그만큼의 데이터를 가져오겠다는 신호를 보내는 것입니다. 데이터의 양이 부족..
-
[TIL]Day 26. 간단한 js 내장 객체 : math (feat. code kata)IT 지식 2020. 10. 16. 11:15
오늘은 자바스크립트에서 지원하는 내장 객체인 Math와 그 메소드들에 대해 알아보도록 하겠습니다. 1. Math 더보기 Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없습니다(from MDN). Math는 자바스크립트에서 기본적으로 지원해주는 표준 내장객체입니다. Math 를 활용하여 길게 표현해야 하는 문법들을 보다 간단하게 줄일 수 있다는 장점이 있습니다. 그 활용도는 코딩테스트와 같은 알고리즘 문제 풀이에서도 활용될 수 있지만, 물리법칙을 활용한 알고리즘이 필요한 영역에서도 사용할 수 있습니다. 자바스크립트 응용 어플리케이션을 만들 때 유용하게 활용할 수 있다는 뜻이 되겠네요...
-
[TIL]Day 25. map, sort, slice 에 관하여 (in javascript, feat.code kata)IT 지식 2020. 10. 15. 11:46
오늘의 포스팅은 자바스크립트에서 많이 사용하는 메소드인 map, sort, slice 에 관하여 알아보도록 하겠습니다. (map은 어제도 정리하긴 했지만 오늘 다시 보니 새로워서 한 번 더 정리하려고 합니다.) 1. map 더보기 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다(from. MDN). const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] //(from MDN) map 메소드는 배열내의 인자를 반복하여 새로운 ..
-
[TIL]Day 24. map, reduce 메소드에 관하여 in javascriptIT 지식 2020. 10. 13. 17:47
오늘은 자바스크립트 메소드 중 활용도가 매우 높다고 하는 map과 reduce 메소드에 대해 알아보도록 하겠습니다. 1. map map 메소드는 MDN 문서에는 다음과 같이 정의하고 있습니다. 더보기 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. map메소드는 다음과 같이 사용합니다. arr.map((요소, 인덱스, 배열) => { return 요소}); map은 반복문을 돌며 배열 안의 요소들을 1 대 1로 짝지어 주는 역할을 합니다. 그 요소들을 어떻게 짝지어줄 것인가에 대해서는 함수로 정의할 수 있습니다. 이때 특이한 점은 map 메소드의 return 값으로 나온 배열은 기존의 배열과는 다른 새로운 배열이라는 것입니다. 단, 배열..
-
[TIL]Day 23. 마크다운에 대하여IT 지식 2020. 10. 8. 13:51
오늘 포스팅은 개발자들 사이에서 흔하게 볼 수 있는 마크다운(Markdown) 문서에 대해 알아보겠습니다. 1. 마크다운이란?? "마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 처음 이메일의 글쓰기 형식에 영감받아 python을 이용하여 html변환기를 만드면서 시작되었다. 마크다운 문법은 읽기도 쉽지만 쓰기도 쉽다는 장점이 있다. 그루버는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었다. 확장자는 .md를 쓴다." 웹 개발을 하거나 git 을 사용하다보면 확장자가 .md 인 파일을 종종 마주치게 되는 일이 있으실 겁니다. 보통 readme.md의 파일 명으로 작성되어 있기 때문에 별로 중..
-
[TIL]Day 22. Code Kata 내용 정리(201006)IT 지식 2020. 10. 6. 11:25
이번 포스팅은 Code Kate에 대한 내용을 정리해보도록 하겠습니다. * 문제 reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x: 숫자 return: 뒤집어진 숫자를 반환! 예를 들어, x: 1234 return: 4321 x: -1234 return: -4321 x: 1230 return: 321 더보기 해결책: Number형태의 자료형은 그 단일 문자를 split 할 수 없기 때문에, 우선 각각의 숫자들을 구분하기 위해 string 자료형으로 바꿔줘야 합니다. 그 후 string화 된 자료형을 split 메소드를 이용하여 각각의 구분된 배열로 바꾼 후 -> reverse 메소드를 이용하여 배열의 순서를 바꾸고 -> join 메소드를 이용하여 각각의 문..