분류 전체보기
-
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)은 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하..
-
프로젝트에 Github PR, Issue Template 적용하기Git 2020. 8. 15. 16:09
Github을 활용하여 협업을 하는 프로젝트라면 PR을 통해 서로의 코드를 리뷰하거나 Issue를 등록해 개발에 대한 이슈를 확인하곤 합니다. 물론 정해진 형식대로 작성하지 않아도 상관은 없지만, 가독성과 통일성을 위해서는 하나의 템플릿을 정하여 사용한다면 훨씬 깔끔하고 편안한 협업이 될 것입니다. 프로젝트에서 이 두가지의 템플릿을 세팅하여 자동으로 완성되는 작업을 해보려 합니다. PR Template PR을 통해 서로의 코드를 리뷰하는 방식을 많이 진행하게 됩니다. 먼저 프로젝트 루트 디렉토리에 .github 디렉토리를 생성하고, PULL_REQUEST_TEMPLATE.md 파일을 만듭니다. 위처럼 PR 할 때 원하는 내용들을 넣고 저장해줍니다. 그리고 새로운 브랜치를 만들어 PR을 요청해봅니다. 마크..
-
자바스크립트 배열을 탐구 & 활용하기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 ..
-
자바스크립트의 데이터 타입에는 어떤 것들이 있을까?Front-end/Javascript 2020. 7. 27. 18:01
자바스크립트의 데이터 타입 자바스크립트는 말 그대로 스크립트 프로그래밍 언어이며, 빠르게 배우고 쉽게 접근할 수 있도록 하기 위해 개발되었습니다. 자바스크립트가 만들어졌던 1995년 말에 본격적으로 보급형 컴퓨터가 생산되고 사용되면서 자바스크립트도 동시에 함께 개발되어 사용되어졌습니다. 기존에 존재했던 Java 등의 언어는 개발자가 직접 데이터 타입을 정하여 선언하는 등 고려해야할 점이 많았습니다. 하지만 스크립트의 특징을 가진 자바스크립트는 개발자가 직접 데이터 타입을 정하지 않는 정책을 사용하였습니다. 그래서 그 때 당시 보급형 컴퓨터에서 감당할 수 있는 데이터를 고려하여 모든 타입의 데이터를 8 byte로 고정 후 자바스크립트 엔진에서 타입을 대신 정해주었습니다. 즉, 넣는 값에 따라서 변수의 데이..
-
[CSS Pattern] 탭(Tab) 패턴Front-end/CSS 2020. 7. 23. 17:00
네비게이션에서 자주 사용되는 탭 패턴에 대해서 알아보겠습니다. HTML HTML CSS Javascript React 전체를 감싸는 div 내에 순서 없는 리스트들을 선언해주었습니다. CSS * { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .wrap-box { display: flex; justify-content: center; width: 100%; background-color: #fff; } .tabs { display: flex; justify-content: center; align-items: center; margin-top: 40px; } .tab { position: relative; padding:..