분류 전체보기
자바스크립트(javaScript) Instantiation Patterns / 객체 지향 언어 / 인스턴스를 만드는 과정, class, instance
자바스크립트는 ES6에서 class 키워드가 추가되었다. ES5 자바스크립트를 사용했을 때 사용자 입장에서 아쉬운 부분들에 대해 보완되어 나온 게 ES6라고 생각하면 된다. class 키워드를 사용하여, 이전보다 간단하고 원활하게 객체의 재사용이 가능하다. 그렇다면 class 키워드의 추가가 있기 전까지 어떠한 방식으로 인스턴스를 만들었는 지에 대해 정리하고자 한다. four Instantiation Patterns - Functional - Functional Shared - Prototypal - Pseudoclassical 1. Functional // ES6 이전 변수 선언 시, var 키워드 사용 var Test = function() { var someInstance = {}; someInst..
OOP(Object Oriented Programming)
오늘은 OOP에 관해 공부한 내용을 포스팅 해보고자 한다. OOP (Object Oriented Programming) 무엇인가를 해결하기 위한 논리적 사고의 단계들을 알고리즘이라고 한다. 코드를 작성하고, 논리를 구체화하여 구현하는 과정이 필요한 모든 컴퓨터 프로그래밍 또한 알고리즘이라고 볼 수 있다. 컴퓨터 프로그래밍 언어는 크게 3가지로 구분 할 수 있다. - 기게어 (Machine languages) - 어셈블리어 (Assembly languages) - 고급언어 (High-Level languages) 1. 기계어 (Machine languages) 기계어는 근본적인 컴퓨터의 언어라고 볼 수 있다. 0과 1로 되어있으며, [ ex) 1010110101010, 0001100011 ] 사람이 보기..
자료 구조 (Data Structure) - stack 정리, 자바스크립트(JavaScript)로 구현하기
스택 (Stack) 앞서 정리한대로 자료구조란 자료를 저장하는 방법이라고 볼 수 있으며, 오늘은 자료 구조 중 스택 (Stack)에 대해 설명할 것이다. 스택은 간단하게 말하면 후입 선출 개념이다. (LIFO: last in, first out) 스택을 우리말로 번역하자면, '더미'이다. 더미? 더미인데 그래서?라고 생각 할 수 있는데 이 더미를 쉽게 접시 더미로 생각을 해보자 접시를 하나씩 쌓아 올린다고 가정했을 때, 접시가 두 개, 세 개 ~ 점점 쌓일 것이다. 그 접시 더미에서 갑자기 처음에 쌓은 접시를 빼고 싶다면? 그냥 뺄 수는 없고 위에서 부터 하나씩 빼서 접시를 꺼내야 할 것이다. 물론.. 그냥 위에 있던 접시 한바가지를 그냥 손으로 잡고 들 수도 있지만!! 그냥 이 자료구조 stack에서는..
JavaScript 자료 구조 (Data structure)의 간단한 기본 개념
What is data? 자료 (Data) "문자, 숫자, 소리, 그림, 영상, 단어 등의 형태로 된 의미 단위이다. 자료를 의미있게 정리하면 정보가 된다." 데이터 타입 (Data Type) - 컴퓨터에 0과 1로 저장되어 있는 데이터를 인간이 사용하는 여러가지 데이터들의 종류로 해석하기 위한 장치 - 같은 이진 데이터라도 인간의 해석에 따라 다른 데이터가 될 수 있음 데이터 타입 (Data Type)은 원시타입 (Primitive type)과 사용자 정의 타입 (Custom Type)으로 구분 할 수 있다. 원시타입 (Primitive Type)은 - 정수, 실수 / 문자 / 논리 (참, 거짓)이며, 자바스크립트의 원시타입은 아래와 같다. (MDN 참고) Boolean Null Undefined Nu..
TIL 2020.10.19
오늘은 코드스테이츠 IM 24기 첫날이었다. 간단하게 ot를 진행했고, 그전까지는 vscode와 cli를 통해 git hub에 clone하고 add, commit, push, PR을 했었다면 오늘은 Git remote를 이용해 협업하는 기술을 배웠다. 번갈아가며 커밋을 작성했고, 여러가지 충돌상황을 만들어 보았다. 신기했고, 먼저 알았다면 이전 페어 프로그래밍시 편리했을 것 같다는 생각이 들었다. 그래서 그런 지 페어분과 감탄사를 내뱉으며 테스트를 하고있었다. 내일부턴 koans과제가 진행되며, 내일을 위해 어서 잠을 자야겠다
JavaScript Rest 파라미터, Spread 연산자, arguments 정리 / 차이
rest 파라미터와 spread syntax는 '...'을 사용하기 때문에 명칭에 차이만 있을 뿐, 기능적 차이에 대해서 정확히 인지하지 못했던 부분이 있었다. 이를 정리해보고자 한다. 1. Rest 파라미터 (rest parameters) ES6 - 함수 실행 시, 전달인자 (arguments)를 함수에 함께 전달한 후, 함수 선언 시 확인 할 수 있는 매개변수 (parameters)에 전달 받은 인자를 사용할 수 있다. 만약, 전달인자(arguments)의 길이가 유동적이라면? 하드코딩으로 모두 적용을 할 순 없는 노릇일 것이다. 이를 보완하기 위해 rest parameters를 사용 할 수 있다. 함수 매개변수 앞에 '...'을 작성하여 매개변수 지정이 가능하다. 매개변수가 배열의 형태로 전달 되며..
![[회고록] 코딩을 접하고 난 뒤, 코드스테이츠 pre course](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdu16Mi%2FbtqK4JgmNTV%2FipWS6syBBhICuxRed76vk1%2Fimg.jpg)
[회고록] 코딩을 접하고 난 뒤, 코드스테이츠 pre course
2020.09.07 ~ 2020.10.06 코딩을 접한 계기 누군가 나에게 코딩을 어떻게 접해서 시작하게 되신 건가요? 라고 묻는다면 자서전이나 성공기에 적혀있는 것처럼 멋있는 말로 답변하기는 좀 어렵다. 우연 속에서의 선택이었기 때문이다. 20살 이후로 내 인생엔 항상 변곡점이 있었다. 이것저것 시도해보기를 좋아했고, 공부를 하기위해 돈을 벌어야만 했다. 큰 기대를 하지 않고 들어간 회사에서 막내로 시작해서 어느덧 CS관리자로 민원 고객 처리, 팀원 관리를 진행하고 있었다. 회사 특성상 처음엔 또래를 만나기가 매우 힘들었고, 연장자 2~30명을 관리하는 것은 역시나 쉽지 않았다. 그래도..현실적인 문제가 있기에 버텨냈다. 여기서 무너지면 다른 도전에 있어서도 무너질 것만 같았기때문이었다. 꾸준히 그렇게..
JavaScript 호이스팅 (Hoisting), let 과 var를 통한 예제
호이스팅이란? ( Hoisting ) 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다. -출처 MDN mdn에 의하면 호이스팅이란 위 내용과 같다. 간단하게 말하자면, 어디에 선언했는 지에 상관없이 선언을 제일 위로 끌어 올려주는 것처럼 실행된다는 의미로 해석할 수 있을 것 같다. 예제로 이해를 도와보자면, var 키워드를 사용할 수 있다. // var (don't ever use this!) // let 추가 전까지는 var가 사용 되었음 // var hoisting (move declaration from bottom ..
TIL 09.24
오늘 한 것 Html과 css릉 통해 트위터 목업구현을 진행한 것을 바탕으로 오늘은 dom을 이용해서 기능 구현을 했다. 버튼을 누르면 랜덤 트윗이 노출되고, 트윗을 작성하면 댓글 리스트에 추가된다. 그리고 기능 중에 작성자 이름을 누르면 페이지 이동 없이 해당 페이지 내에서 바로 해당 작성자가 작성한 댓글리스트를 불러온 뒤 버튼을 누르면 다시 이전 목록을 그대로 불러와야 하는 것이었는데....8시간 가까이 파트너분과 구현을 시도했으나 결국 구현하지 못하고 정리했다. 이정도로 고민했다면 풀려야 한다 생각했는데 오늘은 끝내 성공하지 못해 너무 아쉽다. 느낀 것 오랜 시간 붙잡고 있었음에도 해결하지 못해서 조금 속상한 맘이 든다. 언젠간 꼭 구현해서 응어리를 없앨 것이다.
TIL 09.21
오늘 한 일 html과 css를 배워 나만의 프로필 웹사이트를 만들었다. 예전에 잠깐 얕게 인강으로 배웠던 적이 있는데 그 사이에 다 잊어버렸는지 버벅거렸다. mdn을 참고해서 개념정리를 다시 한 번 했고, 인강 내에서 제공했던 과제 4개 정도를 다시 한 번 풀었다. 자바스크립트를 얕게 배우고 html로 들어왔기때문인지는 모르겠지만...자바스크립트와 html을 어떻게 통합해서 사용할 수 있는 건지 궁금하다. 느낀 것 제대로 코딩을 배우기 시작한 건 이제 겨우 2주하고 하루가 지났다. 실력이 많이 부족하기 때문에 항상 수업이 끝난 후에도 개인 공부에 시간을 많이 투자하고 있는데 요즘 체력이 좀 떨어지는 것 같다. 오늘 코스 매니저님께서 말씀하시길 긴 레이스이기 때문에 멀리보고 가야한다고 말씀하셨다. 아무래..
CLI (Command Line Interface) 개념 및 주요 명령어
Command Line Interface(이하 CLI)는 Graphic User Interface(이하 GUI)와는 다르게 마우스와 각종 UI 컴포넌트 대신, 표준 입출력 시스템(Standard I/O)을 통한 입력과 그에 따른 결과를 출력하는 형태로 나타낸다. 컴퓨터의 시작은 GUI가 아닌 CLI였으며, 시대를 거쳐서 우리는 마우스나, 터치를 이용한 직관적인 프로그램의 형태를 만날 수 있었다. 그러나 여전히 CLI는 여러가지 측면에서 유리하고, 개발자라면 반드시 배워야 할 주요 스킬이다. 강력하고 빠른 배치 작업들을 수행할 수 있으며, 컴퓨터, 특히 Unix/Linux 시스템을 깊이 알기 위해서는 많은 부분을 CLI를 이용해야만한다. 왜 Command Line interface인가? 빠르고, 강력하고,..
Javascript 클로저(Closure)의 개념 및 유용한 사용 예
클로저 (Closure) : 외부함수의 변수에 접근할 수 있는 내부 함수 또는, 이러한 작동원리를 일컫는 용어 정확한 정의는, 함수와 함수를 둘러싼 어휘적 환경의 조합 function outerFn() { let outerVar = 'outer'; console.log(outerVar); function innerFn() { let innerVar = 'inner'; console.log(innerVar); } } let globarVar = 'golbal'f; outerFn(); 위 코드에서 inner 함수에서 접근 할 수 있는 Scope는 총 3개이다. 함수의 리턴 function outerFn() { let outerVar = 'outer'; console.log(outerVar); function..
Javascript 스코프(Scope)의 개념 / var, let, const 키워드, window 객체
Scope : 변수 접근 규칙에 따른 유효 범위 변수는 어떠한 환경 내에서만 사용 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 갖고 있다. 변수와 그 값이, 어디서부터 어디까지 유효한 지를 판단하는 범위이다. Javascirpt는 기본적으로, 함수가 선언되는(lexical) 동시에 자신만의 Scope를 가진다. let greeting = 'Hello'; function greetSomeone() { let firstName = 'Josh'; return greeting + ' ' + firstName; } greetSomeone(); // 'Hello Josh' firstName; // ReferenceError 함수 내에 선언된 firstName 변수를 함수 밖에서 호출을 시도했더니 참조 에러..
Javascript 객체(Object) 값 추가, 삭제 및 키 찾기 방법
우리는 앞서 Dot notation과 Bracket notation의 차이와 작성법에 대해 알아 보았다. let user = { firstName: 'Steve', lastName: 'Lee', email: 'steve@abcdefg.com', city: 'Seoul' } user.firstName === user['firstName']; // true 위와 같이 표현할 수 있음을 알 수 있었다. 그럼 객체(Object)에 값을 추가, 삭제 및 키를 찾는 방법은 무엇일까? dot notation, bracket notation 를 모두 사용하여 활용해보겠다. 객체 값 추가 let user = { firstName: 'deemmun', } user['city'] = 'Seoul'; user.age = 10..
Javascript 객체(object) 사용법, Dot notation, Bracket notation
객체를 사용하는 이유 let userFirstName = 'Steve'; let userLastName = 'Lee'; let userEmail = 'steve@abcdefg.com'; let userCity = 'Seoul'; let userFirstName = 'Jason'; let userLastName = 'Jeong'; let userEmail = 'jason@abcdefg.com'; let userCity = 'Busan'; 개인 주소록을 만든다고 했을 때, 매번 이런 방식으로 여러 개의 변수를 선언해야한다면 상당히 불편할 것이다. let user = [ 'Steve', 'Lee', 'steve@abcdefg.com', 'Seoul' ] let user2 = [ 'Jason', 'Jeong',..
Javascript 배열의 타입, Array.isArray(), 배열의 시각화
우리는 이전에 typeof를 통해 타입 확인하는 방법을 익혔다. 그럼 배열에 typeof를 사용해보자. 콘솔을 통해 배열의 타입을 검사할 경우 "object" 값이 확인되기 때문에 typeof로는 배열 여부를 정확히 확인할 수 없다. 배열 여부를 정확하게 알 수 있는 방법은, 불린 타입의 함수 또는 콘솔 내 시각화를 통해 알 수 있다. Array.isArray() 값을 불린타입으로 반환하여, true 또는 false로 배열 여부를 확인 할 수 있다. console.table(arr) 배열을 시각화하여 파악하고 싶다면, 콘솔 내에서 확인 또한 가능하다
Javascript 배열 (Array)의 기본 개념, 인덱스(index)와 메소드(method)
일단 배열은 순서가 있는 값이라고 생각하면 된다. 배열 내에서의 순서는 인덱스라고 칭하며, 1이 아닌 0부터 시작한다. [0] [1] [2] [3] [4] [5] [6] 84 49 34 45 43 39 94 위의 표에서 인덱스(Index)는 검정 박스이고, 그 밑은 요소(element)이다. 배열은 대괄호(square bracket)을 통해 만들 수 있으며, 각각의 원소(element)는 쉼표(comma)로 구분이 가능하다. let number = [84, 49, 34, 45, 43, 39, 94] 위의 코드에서 대괄호 안에 있는 45는 number라는 배열의 3번째 인덱스 값은 45라고 표현할 수 있다. let number = [84, 49, 34, 45, 43, 39, 94] number[3]; //..
Javascript 탬플릿 리터럴(Template literals), 내장 표현식 허용
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다. 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) 을 이용하며, 중괄호를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있다. 중괄호 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달된다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜준다. 표현식 삽입법 (Expression interpolation) 표현식(expression)을 일반 문자열(normal strings)에 삽입할 경우에는 아래와 같은 코드를 작성하게 된다. var a = 5; var b = 10; console.log("Fifteen ..
Javascript 스트링 메소드(String Method)와 문자열 기본 사용법
자바스크립트 내의 모든 string method는 immutable 이다. 즉, 원본이 변하지 않는다. 문자열 기본 사용법 str[index] car str = 'mouse'; cosole.log(str[0]); // 'm' cosole.log(str[2]); // 'u' cosole.log(str[10]); // undefined index로 접근은 가능하지만 쓸 수는 없다. (read-only) str[0] = 'G'; console.log(str); // 'mouse' not 'Gouse'; 문자열 연결 ( Concatenating Strings ) + 연산자 사용이 가능하다. string 타입과 다른 타입 사이에 + 연산자를 사용하면, string 형식으로 변환 (toString) var str1..
Javascript 조건문 if, 비교 연산자, 논리 연산자
우선, 조건문을 사용하려면 boolean 타입에 대한 이해가 필요하다. let isAdult = true; // 또는 false; let isStudent = false; // 또는 true; 조건문은 어떠한 조건을 판별하는 기준을 만드는 것이며, 조건문에는 반드시 비교 연산자(comparison operator)가 필요하다. 비교 연산자 (comparison operator) 3 > 5; // false; 9 < 10; // true; 'hello' === 'world'; // false; 비교의 결과는 늘 Boolean, 즉 true 혹은 false이다. 자바스크립트(JavaScript)는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있다. 엄격(일치) 비교(===)는 두 피연산자가..