Front-end/Javascript
-
[JS] 함수 알아보기Front-end/Javascript 2020. 11. 29. 22:06
함수 함수는 자바스크립트 프로그래밍의 꽃이라고 볼 수 있으며, 그만큼 중요하고 활용성이 뛰어나다고 할 수 있습니다. 기초부터 차근차근 알아보도록 하겠습니다. 함수 선언문 function plus(x, y) { return x + y; } 이 함수는 x, y의 인자값을 가지고 있으며 가져온 인자값을 + 연산자를 통해 return을 통해 반환하는 함수입니다. 여기서 주의할 부분은 return문은 절대 줄 바꿈 문자를 넣으면 안됩니다. 만약 줄 바꿈을 넣게 되면... function plus(x, y) { return; x + y; } 위처럼 값이 없이 반환이 되기 때문입니다. 함수명 위에서 든 예시는 plus라는 함수명을 가지고 있습니다. 지금은 하나의 함수만 있어서 바로 구별이 가능하지만 몇십, 백개의 함..
-
[JS] 객체 알아보기Front-end/Javascript 2020. 11. 29. 21:56
객체 자바스크립트에서는 원시 타입을 제외한 모든 값이 객체입니다. JSON이라고도 하며 자바스크립트의 가장 중요한 데이터타입이라고 볼 수 있습니다. 객체를 생성하는 방법에는 총 2가지의 방법이 있습니다. 리터럴 방식 생성자 방식 리터럴 방식 리터럴 방식은 변수 내에 {...}을 사용하여 key와 value값을 선언하여 하나 이상의 프로퍼티를 만드는 방식입니다. var artist = { singer: "서태지", music: "Live Wire" }; artist 변수 안에 key로 singer, music을 주었고 value는 "서태지", "Live Wire"를 주었습니다. 여기서 key는 문자열로 선언할 수도 있습니다. key와 value는 콜론(:), {} 안의 프로퍼티는 쉼표(,)로 구분합니다. ..
-
[JS] 변수 알아보기Front-end/Javascript 2020. 11. 29. 21:41
변수 변수는 프로그램을 작성하는데 가장 중요한 요소입니다. 자바스크립트에서는 타입이 없는 변수를 var, let, const라는 선언자를 사용하여 선언하고, 이후 변수명을 입력해 최종적으로 변수를 선언하게 됩니다. 변수 선언 var age; // 1개의 변수 선언 var egg, lemon; // 2개 이상의 변수 선언 console.log(age); // undefined -> 변수를 선언하기만 하면 변수 값이 없다는 뜻인 undefined를 뱉어냅니다. age = 28; // = 연산자를 통해 age 변수에 28을 넣어줍니다. console.log(age); // 28 출력 var name = "junjang"; // 변수 선언과 함께 변수 값을 할당합니다. console.log(name); // j..
-
완전 초 단순하게 캐러셀(Carousel) 구현해보기Front-end/Javascript 2020. 10. 27. 01:45
캐러셀(Carousel) 캐러셀이라는 용어가 조금 생소하실 수도 있는데요 캐러셀은 여러개의 이미지 혹은 영상을 슬라이더 형태로 만들어 표현해주는 것을 말합니다. 바로 위 움짤처럼 말이죠! 정말 간단하게 캐러셀을 구현해보면서 어떤식으로 만들어지는지 살펴보도록 하겠습니다. ❗️ 제가 구현하는 방법은 학습하며 얻은 정보와 지식을 바탕으로 구현한 자료입니다. 혹시 잘못된 정보가 있거나 코드가 있다면 말씀 부탁드리겠습니다. 🙏 전체 코드 보기 프로젝트 구조 엄청 간단하죠? 이제 차근차근 만들어보겠습니다. index.html prev next 먼저 캐러셀을 넣을 컨테이너와 리소스(예제에서는 이미지) 이전, 다음 버튼을 만들어줍니다. 위와 같이 만들어 주면 아래와 같은 화면이 나오게 됩니다. 자 이제 저 위의 사진 ..
-
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) 하다(반복 가능하다) 라고 표현됩니다. 자바스크립트의 배열 자 그러면 자바스크립트의 배열은 어떻게 다를까요? 그렇다면 먼저 자바스크립트의 특성을 생각해보아야 합니다. 🧐 자바스크립트는 스크립트 언어로서 쉽고 빠르게 개발하며, 느슨한 통제를 통해 타입도 직접 정하지 않는 동적 타입 언어입니다. 여..