본문 바로가기
관리자

Programming-[Frontend]

(62)
Javascript / Closure Function (Currying, Closure module pattern) 1. Closure 함수의 정의 함수 자체를 어떤 함수의 parameter로 받아오면, 받아온 함수 내에서 부모 함수에 대한 변수를 사용할 수 있는 것을 Closure라고 한다. 또는, 자식함수 자체를 Closure라고도 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 // Sourcecode function parentFn() { let parentVar = 'Burger'; console.log(parentVar); function childFn(){ let childVar = 'Chee..
JavaScript / Rest Parameter, Spread Operator Rest Parameter Rest Parameter는 함수를 선언할 때, 여러 개의 Parameter 중에 남은(rest) Parameter들은 '배열'의 형태로 지정하는 것을 말한다. parameter의 이름 앞에 '...' 을 써주면 된다. 1 2 3 4 5 6 7 8 9 10 11 function egg1(spam, ...rest){ return rest } egg1(1, 2, 3, 4, 5); // 결과 : [2, 3, 4, 5] function egg2(spam, mayo, joa, ...rest){ return rest } egg2(1, 2, 3, 4, 5); // 결과 : [4, 5] cs >> Rest Parameter는 함수 선언 시에, Parameter 목록의 맨 마지막에만 써야한다...
Javascript / 기초 / 알고리즘, Code 작성 팁 알고리즘 코딩 문제를 풀어나가는 방식의 핵심은 '문제를 분해하는 것'에 있다. 보통 어떤 자료구조에 새로운 요소를 추가하거나, 삭제, 변경, 접근 하는 등의 문제들이 복합화되어 있는데, 이를 적절히 분해하고 순서대로 작동되도록 해야한다. 이를 위해 필요한 논리를 '의사코드(pseudocode)로 적어보는 것'은 생각의 정리에 도움이 된다. 그 다음으로 필요한 것은 '알고 있는 개념으로 pseudocode를 실현할 수 있는지 구체화하는 것' 이다. -문제 분해, 의사코드 작성 예를 들어서, 어떤 문자열 에서 'a'라는 단어를 찾아서 'b'라고 전부 바꿔주고 싶다면, 1. 'a'라는 문자의 입력을 받아온다. 2. 'a'라는 문자가 문자열에 있는지 확인한다. 3. 'a'를 'b'로 바꾼다. 이다. -실현 가능..
Javascript / 기초 / 객체(Object) 객체(Object) 1. 객체가 필요한 이유 객체는 같은 카테고리의 정보를 여러 개 만들어 줘야할 때, 간결하고 명확하게 표현하기 위해 만든다. User에 대한 'name, email, address' 가 있고, User2에 대한 'name, email, address'가 있을 때, 각 값들을 지정하기 위해서는 변수를 총 6개 만들어 주거나, 배열을 2개 만들어서 각 요소들을 index화 해야하는 불편함이 있다. 그래서 객체를 생성해준다. ex) 변수 6개 : user1_name, user1_email, user1_address, user2_name, user2_email, user2_address 객체 2개: user1 = {name : 'steve', email: '...', address: '.....
Javascript / 기초 / 배열, 반복문 1. 반복문 1-1. for문 if문과 같은 형태로 사용하면 되는데, 대신 조건문에 차례대로 '초기화; 조건식; 증감문'을 작성해주어야 한다. >> 초기화, 조건식 다음에 ';(세미콜론)'을 써야함을 기억하자. ',(comma)'가 아님. for(초기화; 조건식; 증감문){ 조건식을 만족하기 전까지 반복적으로 실행하고 싶은 문구; } ex) let sum = 1; for(let n = 1; n 만약 초기화문에서 let을 안쓰면, 자동적으로 변수 n을 var n 으로 잡아준다. js에서는 let, var, const 등이 있는데, 지정하는 것에 따라 사용하는 범위가 달라진다. 추후에 자세히 배울 수 있다. >> 반복문에서 continue를 쓰면, 다음 if문을 무시하고 다음 증감문으로 넘어가라는 뜻이 되고..
Javascript / 기초 / 변수, 자료형, 조건문, 연산자, 문자열 변수와 자료형, 함수 1. 코드 입력 및 변수 선언 한 줄의 코드를 입력하고 나면, ';(세미콜론') 으로 줄이 끝났음을 표기해주어야 한다. 따로 변수 선언을 해주어 메모리를 할당해야 한다. let 변수명 추후에는 var, const 등으로 변수 선언을 하지만, 일단은 모두 let으로 처리하도록 한다. 정확한 차이는 다음 글에서 확인 가능하다. Javascript / 기초 / Scope 2. 변수의 종류 및 확인 방법 변수의 종류는 "문자열(String), 숫자(number), 불린(boolean), undefined, 함수 BigInt, Symbol 등"이 있다. 자세한 내용: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operato..
HTML,CSS / Checkbox Customizing 하기 1. 필요성 html 에서 를 생성하면, 아래 그림과 같은 가장 기본적인 checkbox만 만들어진다. 해당 checkbox는 background color와 check-mark의 색깔 및 크기, text와의 위치 배열 등이 모두 정해져 있기 때문에, 각종 웹서비스에서 활용하기에 제한이 많다. 그래서 customizing을 해야하는데, customizing에 들어가는 요소들이 html/css 초보가 알기에는 어려운 요소들이 많아서 각 요소들을 하나하나 분해해서 공부해보고자 한다. 2. 구성요소 2-1. Label tag label tag는 input 과 관련된 checkbox, radio 등 사용자가 선택하여 입력을 넣는 요소가 있을 경우, 그 요소에 내용을 달아주고, 요소 뿐만 아니라 요소에 달린 내용..
HTML,CSS / Cursor Style, inherit, input Tag Style="Cursor:attribute" Cursor는 해당하는 위치에 마우스를 갖다댔을 때, 마우스의 모양을 변화시킬 수 있다. 대표 속성은 다음과 같으며, 수많은 속성들이 있다. -default: 화살표 -auto: 자동 -pointer: 손가락모양(클릭가능 대상 선택시 나타나는) -wait: 로딩 -move: 손가락모양(drag시 나타나는) ex) Pointer 속성 : inherit 속성에 inherit을 입력해주면, parent element의 속성과 같은 속성을 같게 된다. ex) color:inherit; -- parent element의 글자와 같은 색깔의 글자가 됨. Tag: input 사용자에게 입력을 받을 수 있는 입력창을 만들어 준다. ex) input창의 placeholder의..