본문 바로가기

분류 전체보기502

JS 근본 공부 - function 1. function이란 무엇일까? - function이란, 프로그램 안에서 하나의 기능을 수행하는 역할을 한다. 여러개의 function들이 모여 하나의 프로그램을 구성하기 때문에 function을 sub-program이라고 부르기도 한다. - JavaScript와 같이 절차적 언어에서는 이 funciton의 역할이 매우 중요한데, 코드가 순차적으로 실행되기 때문에 function과 function이 맞물려 작동하기 때문이다. - 그렇다면 function이란 무엇일까? function이란, 입력값(input 또는 parameter)을 받아서 각 function에 할당된 연산을 수행한 뒤 그 결과값(output 또는 return)을 반환하는 과정을 의미한다. 2. JavaScript 함수 선언 - fun.. 2020. 10. 30.
JS 근본 공부 - 연산자 1. 사칙연산 - 다른 프로그래밍 언어의 사칙연산과 동일하게 +(덧셈), -(뺄셈), /(나누기), %(나머지), *(곱셈)가 존재한다. - 제곱 연산자는 ** 이다. - 문자열 합병의 경우 +를 사용한다. 2. Increment & decrement operator (증감연산) a) pre-increment/decrement - 변수명 앞에 ++ 또는 -- 기호를 붙여주면 +1 또는 -1이 된 값이 적용된다. let counter = 2; const preIncrement = ++counter; // 위의 코드는 preIncrement = counter + 1; 과 동일하다. // 이 경우, preIncrement는 3이 되고 counter도 3이 된다. let counter = 2; const pre.. 2020. 10. 25.
JS 근본 공부 - 데이터 타입 1. 변수 선언문 - 변수란, 메모리에 값을 할당하여 읽고 쓰는 것(read & write)이 가능하게 하는 작업이다. - 변수를 선언할 때 사용하는 선언문에 따라 읽기와 쓰기를 개발자가 조정할 수 있다. 그 차이를 알아보자. a) let (mutable type) - read & write ES6에서 추가된 데이터 타입으로, 변수를 선언할 때 사용된다. let으로 선언된 변수는 저장된 값을 바꿀 수 있다. 그러므로 메모리에 값을 읽고 쓰는것이 가능하다. let variable1 = 123; variable1 = "abc"; 위의 코드에서 처럼, variable1이 갖고있는 값이 선언시에는 123(정수)였으나 "abc"라는 값으로 바꾼 것을 확인할 수 있다. 이처럼, 갖고있는 값을 변경할 수 있는 변수를.. 2020. 10. 24.
JS 근본공부 - JS의 동작원리 1. JavaScript를 사용하는 이유 - JavaScript를 사용하는 이유는 정적인 웹사이트를 동적으로 만들기 위해서다. 그렇다면 정적, 동적의 차이는 무엇일까? - 정적인 웹사이트는 링크를 이용한 페이지 이동만이 구현된 웹사이트를 의미한다. - 동적인 웹사이트는 JavaScript를 이용하여 HTML 엘리먼트를 객체화 시킴으로써, 사용자에 의한 입력에 따라 특정 event가 발생하게 되면 지정된 DOM조작을 하여 페이지를 이동하지 않고 현재 페이지의 동적인 변화를 주는 것을 말한다. 예를들어, 사진을 클릭하면 모달창이 생성되면서 더 큰 사진으로 볼 수 있는 기능 같은 것들이 여기에 해당된다. 2. JavaScript는 어떻게 동작되는 것이며, 웹사이트에서 어떻게 읽히는가? - JavaScript가.. 2020. 10. 23.
JS 근본공부 - 자바스크립트의 역사 Vanilla JS를 공부하면서 JS의 근본에 대해 궁금증이 생겼다. 이를 시작으로, 앞으로 JS의 기본이 되는 여러 개념과 정보들을 하나씩 정리해보려 한다. 1. 1993년 MOSAIC 웹 브라우저 MOSAIC은 UI가 적용된 최초의 웹 브라우저로 기본적인 HTML의 형식을 갖추고 있다. MOSAIC 브라우저를 만든 Marc Andreessen은 후에 Netscape의 창업주가 되어 간단한 HTML 형식과 CSS를 갖춘 Netscape Navigator라는 브라우저를 출시하게 된다. 당시 80%의 시작점유율을 갖고 있던 Netscape Navigator는 정적인 웹사이트였고 이를 동적으로 구현하여 사용자에게 dynamic한 경험을 선사하기위해 많은 고민 끝에 scripting언어를 추가하기로 한다. 새.. 2020. 10. 23.
여행을 다녀왔습니다.(부재 - 기본에 대하여) 한동안 슬럼프에 빠져서 공부효율이 좋지 않았습니다. 그래서 여수로 여행을 다녀왔습니다. 항상 무언가에 쫒기듯 공부하며 복잡했던 머리를 비운채 느긋하게 시간을 보내니, 오히려 내가 무엇을 해야할지 명확해졌습니다. 개발공부를 하면서 언제나 기본에 대한 목마름이 있었습니다. 왜 이 기술을 사용하지? 이 기술의 근본이 무엇이지? 개발자로서 탄탄한 기초가 무엇일까? 라는 질문으로 시작하여 저 스스로 어떤 것에 대한 개념을 정의하고자 노력했습니다. 단순히 학술적인 해석이나 이론을 떠나서, 스스로 정의하고 정리하여 머리에 담아두고 싶었습니다. 그렇게 해야 더 오래 남고 내가 배운 것에 대해 자신감이 생기기 때문입니다. 이 과정이 한 순간에 되기를 원했습니다. 그리고 누군가 그것을 깨우칠 수 있게 해주기를 바랬죠. 그.. 2020. 10. 22.
Vanilla JS - Pastel Browser 1. 개요(Introduction) Vanilla JS를 이용하여 Momentum이라는 크롬 extension의 기능을 재구현했습니다. A clone of the chrome app Momentum's features using Vanilla JS. 2. 기능(Features) ClockTo-Do List (local-storage) Username (local-storage) Weather and location (openWeather API) Random Background (refresh and change) 3. GitHub 링크 https://github.com/devraphy/pastelBrowser GitHub - devraphy/pastelBrowser: A repository for th.. 2020. 10. 17.
Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) - 이전 포스팅에서 지역저장소에 데이터를 저장하여 toDoList를 생성하는 방법까지 알아보았다. - 오늘은 삭제하는 기능을 구현해보자. 1. 삭제기능 - 아래의 사진처럼, 할일을 작성하면 li태그에 입력값이 하나씩 저장되고 x버튼을 눌러 삭제하는 방식이다. - 삭제를 위해 x버튼을 눌렀을 때, HTML상에서 어떤 x버튼이 어떤 li태그에 존재하는지 구분할 수 있어야 한다. 어떻게 할 수 있을까? a) event.target - event.target은 해당 event가 발생한 엘리먼트를 가리키는 기능이다. - eventHandler 함수를 작성할 때, 매개변수로 선언되어야지 사용할 수 있다. [구현내용] 1) x버튼이 눌렸을 때, event.target을 이용하여 어떤 엘리먼트에서 이벤트가 발생했는지 .. 2020. 10. 16.
HTML/CSS - 음악 플레이어(Music Player) 1. 개요(introduction) HTML/CSS 실력향상을 위해 음악 플레이어의 디자인을 만들었습니다. To have a better understanding of the usage of HTML and CSS, I copied a music player FE. 2. 화면구성(UI) 재생 목록과 재생화면을 구현했습니다. I made two screens, playList and playing screen. 3. 프로젝트 링크(Project Link) gitHub: https://github.com/devraphy/musicPlayer GitHub - devraphy/musicPlayer: A repository for musicPlayer portfolio A repository for musicPl.. 2020. 10. 13.

티스토리툴바