본문 바로가기
  • 프론트엔드 개발자 세오세오 | Frontend dev Seo
728x90
반응형

전체 글86

[JS] 자바스크립트로 구현하는 그래프(Graph), 인접행렬(Adjacency Matrix), 인접리스트(Adjacency List) 컴퓨터 공학에서 말하는 그래프(graph)란 이산수학의 그래프 이론의 단방향 그래프(directed graph) 및 무향 그래프(undirected graph)의 개념을 적용하기 위해 가져온 추상적인 데이터 타입이다(출처). 이산수학(discrete mathematics)는 '이산적인' 수학 구조에 대해 연구하는 학문인데, '이산적'과 'discrete'의 사전적 의미는 다음과 같다 (출처). 이산적: 관·명 정보·통신 서로 단절되는. 또는 그런 것. 연속되는 것과 반대되는 것으로 0, 1, 2, 3 따위와 같이 서로 단절되는 값들을 이르는 말이다. discrete: (같은 종류의 다른 것들과) 별개의 (=seperate) 이산수학은 서로 단절되어 있는, 또는 서로 구분되는 값을 가지는 대상들을 연구하는.. 2021. 4. 23.
[JS] num++과 ++num의 차이 코드들을 들여다보다가, 우연히 이와 같은 것을 발견했다: let num = 0 return ++num 내가 배운 increment, decrement는 항상 변수 뒤에 붙었던 것이어서, 앞에 쓰면 뭐가 다른지 찾아보았다. 우선 결론부터 말하자면, num++와 ++num은 동일한 효과를 가진다. 둘다 변수에 1을 더하는 일을 한다. let num = 0 num++ console.log(num) // 1 let num = 0 ++num console.log(num) // 1 하지만 다른 점은, 그들의 리턴값에 있다. num++ 같은 경우, increment를 한 이후의 결과값을 리턴한다. 반면 ++num은 increment 하기 이전 값을 리턴한다. let num1 = 0 console.log(num1++).. 2021. 4. 10.
[JS] 클로저(Closure)란? 클로저(Closure)란? 자바스크립트를 공부하는 분들께, 자바스크립트를 공부하며 맞닥드렸던 여러 개념들 중 이해하는데 애를 먹었던 것이 무엇이었냐고 묻는다면 가장 자주 등장하는 개념 리스트에 클로저(closure)가 필수로 들어가 있을 것이다. 그만큼 이해하기가 어려웠던 개념인데, 오랜 시간을 들여 들여다본 결과 이전보다 1 정도 이해 정도가 늘어난 것 같아 블로그에 포스팅하려고 한다. 우선, 나에게 있어 클로저에 대한 이해가 어려웠던 것엔 MDN의 클로저에 대한 정의부터가 굉장히 난해했다는 사실도 한몫했다. "A closure is the combination of a function and the lexical environment whitin which that function was declar.. 2021. 4. 10.
[JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing) 클래스(Class)와 인스턴스(Instance) 객체 지향 프로그래밍 패러다임을 따른다는 것은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그리고 그 청사진을 바탕으로한 객체(object)를 만든다는 것을 의미한다. 하나의 모델이 되는 청사진, 바로 이것이 클래스(class)가 되는 것이고, 그 청사진을 따라 만들어진 것이 객체이면서 그 클래스의 인스턴스(instance)가 된다. 2021.04.07 - [Learn to Code] - [JS] 객체 지향 프로그래밍(Object-Oriented Programming) 클래스(class)는 말하자면 '틀'이라고 생각할 수 있다. 무언가를 만들 때, 그 만들 물건의 겉 모양을 미리 만들어놓고 그대로 찍어낼 수 있게 하는 '틀' 말이다. 학창시절 .. 2021. 4. 9.
[CSS] 개발자를 위한 가시성(visibility) 올리는 디자인 꿀팁! (두가지 컬러 조합 추천 사이트 + 크롬 개발자도구 Contrast 참고 방법) 디자인 백그라운드가 없는 개발자들에겐 디자이너의 서포트 없는 개인 작업은 굉장히 어렵게 느끼질 수 있다. 특히, 개인 프로젝트를 만들어야 할 때 아무리 아이디어가 좋아도 디자인이 영 이상하다면 그 누구도 좋게 보지 않을 것이 뻔하기 때문에 디자인에 대한 부담은 배로 다가올 수밖에 없다. 그러다보면 각종 특이한 것들을 마구잡이로 가져다가 쓰게 될 수가 있는데, 강약조절에 실패한 디자인은 정말 보는 이의 마음을 아프게 한다. 예를 들면... 2가지 컬러 조합 추천 사이트 이런 무시무시한 경우를 최대한 피하기 위해서 여러 조언들을 찾아보셨을탠데, 그 조언들 중 자주 들었던 것 중에 너무 여러 색깔을 한번에 사용하지 말라는 것도 분명히 있었을 것이다. 그래서 이번에 아주 좋은 색깔 조합 사이트 하나를 추천하려고.. 2021. 4. 8.
[JS] 객체 지향 프로그래밍(Object-Oriented Programming) 프로그램(program)이란 무엇일까? ...라는 질문에 답하는 방식은 여러가지가 있을 수 있다. 그 이유는 프로그램을 바라보는 관점(perspective) 또는 패러다임(paradigm)이 여러가지이기 때문이다. 그중에서도 가장 전통적인 패러다임에 따르면 프로그램이란 '명령어 또는 함수의 목록'이 된다. 이 전통적인 관점은 명령형 프로그래밍(imperative programming)이라고 부르며, 이러한 패러다임을 따르는 언어들은 절차적 언어라고 불린다. (참고: 링크) 대표적으론 C언어가 있다. 객체 지향 프로그래밍(Object-Oriented Programming) 하지만 시간이 지나고 기술이 발전하면서, 프로그램을 바라보는 새로운 시각들이 생겨나기 시작했다. 객체 지향 프로그래밍도 그러한 패러다임.. 2021. 4. 7.
[JS] 화살표 함수 (Arrow Function) 화살표 함수는 ES6에서 추가된 간단한 형태로 함수를 정의하는 방식이다. 기존에 함수를 정의하려면 function 키워드를 사용했어야 했지만, 화살표 함수를 사용하면 function 키워드 없이 간략하게 함수를 정의할 수 있다. 또한, 화살표 함수는 콜백 함수 안에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대용으로 사용할 수도 있다. 화살표 함수 정의하기 화살표 함수를 정의할 땐 함수 표현식을 써주어야 한다. 함수 선언으로는 불가능하다. const addNums = (x, y) => x + y; 1. 매개변수 매개변수가 1개일 경우엔 소괄호 ( ) 를 생략할 수 있으나, 2개 이상인 경우엔 소괄호 ( )를 꼭 써주어야 한다. 매개변수가 없는 경우에도 소괄호 ( )를 꼭 써주어야 한다. //.. 2021. 3. 31.
[회고] 코드스테이츠 Pre Course 회고 및 4개의 웹앱 과제 결과물 어느덧 코드스테이츠의 Software Engineer 과정을 시작한지 한 달이라는 시간이 지났다. 총 20주 동안의 공부 기간은 크게 Pre Course와 Immersive Course로 나뉘는데, 첫 한 달에 해당하는 부분이 Pre Course이다. 한달 내내 풀타임으로 아침 9시부터 오후 6시까지 (때로는 그 시간을 조금 넘어서까지) 각종 세션들이 있었고, 이제 내일이면 Pre Course를 수료하고 Immersive Course로 넘어갈 수 있는지 확인하는 Hiring Assessment이 진행된다. Pre Course의 주요 목표는 HTML, CSS, 그리고 자바스크립트의 기반을 다지는 것에 있다. 그래서 여러 레슨들과, 그 레슨들에서 배운 내용들을 문제 풀이에 적용하여 푸는 것이 주요한 공부 방.. 2021. 3. 29.
[JS] 정규 표현식 (Regular Expression, RegExp) 정규 표현식은 문자열의 집합을 나타내는 패턴을 뜻한다. 정규 표현식을 사용하면 유저가 회원가입 페이지에 정보를 작성할 때, 핸드폰 번호나 이메일 등이 특정 패턴 모양에 맞게 작성이 되었는지를 더욱 쉽게 확인할 수 있다. 같은 작업을 반복문과 조건문을 통해 할 수도 있지만, 그러려면 엄청 긴 코드를 작성해야 하는데, 정규 표현식을 사용하면 더욱 간결하게 해결할 수 있어서 좋다. 아래 내용은 MDN 페이지의 정보를 기반으로 하고 있다(링크). 정규 표현식의 형태 /pattern/i 정규 표현식의 형태는 크게 패턴(pattern)과 플래그(flag) 두 영역으로 나뉜다. 시작기호 /와 종료기호 / 사이에 패턴이 들어가고, 종료기호 뒤에 플래그가 들어간다. 정규 표현식 만들기 정규 표현식을 만드는 방법은 두가지.. 2021. 3. 26.
728x90
반응형