Front-end
-
[React] React-Router를 활용해 원하는 페이지로 이동하기Front-end/React 2020. 11. 9. 01:55
React-Router 리액트 라우터는 여러 페이지들을 연결시켜주는 역할을 하는 친구입니다. 리액트 자체에서 지원해주는 기술은 아니지만 리액트에서 라우팅을 한다면 이 서드파티를 사용하는 것이 국룰로 자리잡았습니다. 그만큼 간편하고 성능이 뛰어나단 소리겠죠? 이전에 순수 Javascript로 SPA를 구현해보면서 동작 방식을 이해 했었는데요, 이 글을 읽기 전 한 번 읽고 보시면 조금 더 이해는데 있어 좋을 것 같습니다. :) 구현할 예제는 헤더를 가지고 있는 페이지 2개와 헤더를 가지지 않는 페이지 1개를 이용해 각 상황을 고려한 라우팅을 해보려고 합니다. 핵심적인 내용을 살펴보면서 구현해보겠습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사..
-
완전 초 단순하게 캐러셀(Carousel) 구현해보기Front-end/Javascript 2020. 10. 27. 01:45
캐러셀(Carousel) 캐러셀이라는 용어가 조금 생소하실 수도 있는데요 캐러셀은 여러개의 이미지 혹은 영상을 슬라이더 형태로 만들어 표현해주는 것을 말합니다. 바로 위 움짤처럼 말이죠! 정말 간단하게 캐러셀을 구현해보면서 어떤식으로 만들어지는지 살펴보도록 하겠습니다. ❗️ 제가 구현하는 방법은 학습하며 얻은 정보와 지식을 바탕으로 구현한 자료입니다. 혹시 잘못된 정보가 있거나 코드가 있다면 말씀 부탁드리겠습니다. 🙏 전체 코드 보기 프로젝트 구조 엄청 간단하죠? 이제 차근차근 만들어보겠습니다. index.html prev next 먼저 캐러셀을 넣을 컨테이너와 리소스(예제에서는 이미지) 이전, 다음 버튼을 만들어줍니다. 위와 같이 만들어 주면 아래와 같은 화면이 나오게 됩니다. 자 이제 저 위의 사진 ..
-
webpack을 활용해 맛깔나게 번들링 해보기Front-end 2020. 10. 22. 03:12
webpack (웹팩) 현재 웹 시장에서는 bundler(번들러)를 아주 유용하게 사용하고 있습니다. 대표적으로 webpack, parcel, rollup 등 많은 번들러들이 있는데요, 그 많은 번들러들 중 웹팩은 가장 많이 사용되고 있으며 최고의 자리를 지키고 있는 번들러입니다. 최고의 자리를 지키는 이유에는 몇가지가 있는데 대표적인 이유는 바로 생태계가 넓으며, 광범위한 커스터마이징이 가능하다는 점입니다. 가장 많이 사용되고있는 만큼 생태계는 그만큼 넓을 수 밖에 없고 plugin을 통해 특정 기능을 내가 원하는대로 커스터마이징 할 수 있다는 것이 가장 장점입니다. bundle (번들) bundle의 뜻이 무엇일까요? 바로 "묶음"입니다. 여기에 -er이 붙어주면 묶어주는 역할을 하는 bundler가..
-
Javascript로 라우터를 만들어 간단한 SPA를 구현해보기Front-end/Javascript 2020. 10. 1. 02:43
라우터 ? 라우터는 페이지들을 연결해주며 이를 이동시키는 역할을 해줍니다. 쉽게 말해 중계를 해준다고 표현하면 조금 더 이해하기 쉽겠네요! 최근 SPA가 주로 활용되면서 중요성이 커졌는데요, 이전에는 대체적으로 MPA 방식으로 개발이 되었었습니다. 그 이유는 외국에 비해 우리나라는 인터넷이 발달해서 약 10년 전 까지만 하더라도 MPA 방식으로 개발을 하더라도 사용하는데 큰 문제가 없었기 때문이죠.. 하지만 현재는 속도를 떠나 사용자의 사용성의 관점에서 본다면 SPA는 꼭 필요한 방식으로 자리잡았습니다. 그래서 우리는 라우터를 순수 자바스크립트로 직접 구현하면서 공부해보는 시간을 가져보겠습니다. ❗️이 게시글은 개인적으로 공부하면서 얻은 자료들을 바탕으로 구현한 프로젝트입니다. 혹여 잘못된 정보가 있을 ..
-
옵저버 패턴을 활용하여 인스타그램 피드 렌더링 해보기Front-end/Javascript 2020. 9. 9. 19:44
옵저버 패턴 옵저버 패턴은 디자인 패턴중에 하나로서 스타크래프트의 옵저버 처럼 관찰을 하는 역할을 수행합니다. 그 관찰한 결과를 본진(넥서스)에서 관리하여 다음 행동을 수행하죠? 프로그래밍에서도 똑같습니다. 옵저버를 가지고 있는(상속받는) 객체는 항상 관찰을 당하고 있으며, lifecycle을 감지하여 해당 정보(데이터, 행동)를 본체에게 넘겨 관리를 시키게 됩니다. 만약 이런 디자인패턴을 사용하지 않고 일반적으로 구현을 하게 된다면 각각의 객체별로 변수와 메소드를 관리하게 될 것이고, 이는 가독성이 떨어지는 코드와 재사용성이 없는 객체들이 계속 생겨날 것입니다. 그래서 옵저버 패턴을 활용하여 인스타그램 피드 부분을 만들어보며 학습해보겠습니다. 공부를 하며 습득한 내용을 정리한 글이니 잘못되었거나 추가할..
-
객체지향...? 그게 뭐죠..;;;Front-end/Javascript 2020. 8. 30. 04:58
객체지향...?? 컴퓨터로 프로그래밍을 하는 사람이라면 무조건 들어본 그 단어 객.체.지.향! 객체지향적으로 생각해라, 구현하라 등 많은 조건들이 최근에는 객체지향의 개념으로 접근하여 구현됩니다. 이러한 객체지향을 활용하여 개발을 하면서도, 사실 정확한 개념을 알지 않고서 개발을 하는 경우도 있고 어렴풋이 알고 개발하게 되면 설계에 구멍이 나는 경우가 있습니다. 그래서 우린 먼저 객체지향의 개념부터 알아보겠습니다. 객체지향의 사전적 개념 객체 지향 프로그래밍(영어: Object-Oriented Programming, OOP)은 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하..
-
자바스크립트 배열을 탐구 & 활용하기Front-end/Javascript 2020. 8. 1. 22:04
배열 자바스크립트의 배열을 살펴보기 전에, 배열의 역할에 대해서 먼저 알아보겠습니다. 배열은 보통 일반적인 언어에서는 한 가지 타입을 묶어놓아서 관리하는 역할을 수행합니다. Java를 예로 들자면 int[] numbers = {1, 2, 3, 4, 5}; 위와 같이 int형인 데이터만 다루는 배열을 만들어 해당 배열을 다루는 역할을 하게되죠 이러한 데이터들이 모여서 반복이 가능한 상태를 이터러블(iterable) 하다(반복 가능하다) 라고 표현됩니다. 자바스크립트의 배열 자 그러면 자바스크립트의 배열은 어떻게 다를까요? 그렇다면 먼저 자바스크립트의 특성을 생각해보아야 합니다. 🧐 자바스크립트는 스크립트 언어로서 쉽고 빠르게 개발하며, 느슨한 통제를 통해 타입도 직접 정하지 않는 동적 타입 언어입니다. 여..
-
조건문과 반복문을 이용해 별을 찍어보기 (feat. Javascript)Front-end/Javascript 2020. 7. 29. 18:50
모든 프로그래밍의 언어를 배울 때 별찍기는 누구나 거쳐가는 학습 커리큘럼일 것입니다. 🌠 반복문과 조건문을 공부하는데에 주로 사용되지만 기초 알고리즘 사고력을 키우는데도 아주 확실한 역할을 하기 때문에 다양한 별찍기의 예제를 가지고 충분히 연습하는 것이 좋습니다. 저는 자바스크립트로 구현하지만 대부분의 언어는 비슷한 형태를 가지고 있으니 해당 언어에 맞게 연습하면 되겠습니다. 모든 높이와 별, 공백은 아래의 값을 전제로 진행합니다. var STAR = "*"; var SPACE = " "; var HEIGTH = 5; 직각삼각형 for (var i = 0; i < HEIGTH; i += 1) { var result = ""; for (var j = 0; j < i + 1; j += 1) { result ..