from. programmers.com algorithm

sort

나누어 떨어지는 숫자 배열

문제 설명

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.
divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.

제한사항

• arr은 자연수를 담은 배열입니다.
• 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다.
• divisor는 자연수입니다.
• array는 길이 1 이상인 배열입니다.

입출력 예arrdivisorreturn[5, 9, 7, 10]5[5, 10][2, 36, 1, 3]1[1, 2, 3, 36][3,2,6]10[-1]입출력 예 설명

입출력 예#1
arr의 원소 중 5로 나누어 떨어지는 원소는 5와 10입니다. 따라서 [5, 10]을 리턴합니다.

입출력 예#2
arr의 모든 원소는 1으로 나누어 떨어집니다. 원소를 오름차순으로 정렬해 [1, 2, 3, 36]을 리턴합니다.

입출력 예#3
3, 2, 6은 10으로 나누어 떨어지지 않습니다. 나누어 떨어지는 원소가 없으므로 [-1]을 리턴합니다.

문자열 내림차순으로 배치하기

문제 설명

문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.
s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

제한 사항

• str은 길이 1 이상인 문자열입니다.

입출력 예sreturn

문자열 다루기 기본

문제 설명

문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 a234이면 False를 리턴하고 1234라면 True를 리턴하면 됩니다.

제한 사항

• s는 길이 1 이상, 길이 8 이하인 문자열입니다.

지수형식 = ‘1e22’를 전체로 숫자로 변환하면 숫자가 됨

그렇기에 isNaN을 사용해야 됨!!!!!!!!!

isNaN ()===Number.isNaN()

isNaN(NaN이 true일 때) => true

isNaN(NaN이 false일 때) => false

isNaN은 자동적으로 넘버 타입으로 변환해서 실행 됨!!

같은 숫자는 싫어!!

문제 설명

배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,

• arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.
• arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.

배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.

제한사항

• 배열 arr의 크기 : 1,000,000 이하의 자연수
• 배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수
•  

입출력 예arranswer[1,1,3,3,0,1,1][1,3,0,1][4,4,4,3,3][4,3]

map, forEach, filter는 (value, index, array) 3개의 인수를 받아옴.

value는 array의 요소이며, index는 array의 index이고, array는 배열 그 자체이름이다.

만약에 변수명이 길어지고 함수 안에 사용하고 싶으면, 간결하게 다른 이름으로 적기위해, 매개변수에 이름을 설정할 수 있다.

ex) const fjaiepfjwpifjwaefpwifj = [];

매개변수=함수 안에 들어와서 인수가 불릴 이름

인수= 함수 호출할 때 넣는 값

하샤드 수

문제 설명

양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

제한 조건

• x는 1 이상, 10000 이하인 정수입니다.

입출력 예arrreturn10true12true11false13false입출력 예 설명

입출력 예 #1
10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다.

입출력 예 #2
12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다.

입출력 예 #3
11의 모든 자릿수의 합은 2입니다. 11은 2로 나누어 떨어지지 않으므로 11는 하샤드 수가 아닙니다.

입출력 예 #4
13의 모든 자릿수의 합은 4입니다. 13은 4로 나누어 떨어지지 않으므로 13은 하샤드 수가 아닙니다.

Please write code simple!!!!!!!!!!!!

체육복

문제 설명

점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다.

전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 작성해주세요.

제한사항

• 전체 학생의 수는 2명 이상 30명 이하입니다.
• 체육복을 도난당한 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
• 여벌의 체육복을 가져온 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
• 여벌 체육복이 있는 학생만 다른 학생에게 체육복을 빌려줄 수 있습니다.
• 여벌 체육복을 가져온 학생이 체육복을 도난당했을 수 있습니다. 이때 이 학생은 체육복을 하나만 도난당했다고 가정하며, 남은 체육복이 하나이기에 다른 학생에게는 체육복을 빌려줄 수 없습니다.

입출력 예nlostreservereturn5[2, 4][1, 3, 5]55[2, 4][3]43[3][1]2입출력 예 설명

예제 #1
1번 학생이 2번 학생에게 체육복을 빌려주고, 3번 학생이나 5번 학생이 4번 학생에게 체육복을 빌려주면 학생 5명이 체육수업을 들을 수 있습니다.

예제 #2
3번 학생이 2번 학생이나 4번 학생에게 체육복을 빌려주면 학생 4명이 체육수업을 들을 수 있습니다.

Eventhandlers

onsubmit

• fires when the user submits a form

onmouseover

• fires when the user moves the mouse over a particular element

event.preventDefault()

• if the event does not get explicitly handled, its default action should not be taken as it normally would be

<textarea></textarea>

• can assign how many rows and width

• allows user not to change size of textarea

Local Storage

• get items: brings string out from local storage
• set items: save string inside local storage

reference: https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

DOM

• html을 object관점에서 보는 방법
• DOM !== html
• DOM !==JavaScript
• document.body.(property)

String.prototype.trim()

• removes whitespace from both ends of a string

arrayLike

• An array-like or iterable object to convert to an array
• can get index key and length but cannot use array property like forEach method
• ex. string, object

Spread Syntax

• to combine into array when the type is not an array
• has to be iterable like array or arrayLike

QuerySelectorAll

• cannot put eventlistener together
• has to be per tag

tag.textContent or input.value

• remembers when event happens and where to call that values
• if you call in wrong spot, it will not show

Where to add script in html

• Once browser meets <script>tag, it stops interpreting html tag and operates JavaScript file first

1. Add in <head>

• If I put console.log in JavaScript file by using querySelector, I receive null
• JavaScript file needs to bring info from html first in order to operate, but browser runs console log first before browser finishes reading html tags

2. Add in <body> right before it closes its tag

• console.log gives what I am looking for so always put it this way!

Form Validation

Step 1. Compose UI

• necessary step when we cooperate
• shows all different status

:root

• 1 2 3 4 5 6 7

  :root {   --invalid-text-color: rgb(177, 59, 69);   --invalid-border-color: rgba(177, 59, 69, .2);   --invalid-background-color: rgba(255, 192, 203, 0.493);   --valid-text-color: rgb(51, 173, 51);   --minimum-width: 600px; } Colored by Color Scripter

  cs

• allows you to set variable that you will use often so that you can save time to type continuously

display: none / display: block

• allows you to set up css that will show up on certain time

Step 2. Create Function for form validation

• return as Boolean since this function is only for valid/invalid

• 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  // [유효성 검증 함수]: n개의 글자 이상 function moreThanLength(str, n) {   return str.length >= n; }   // [유효성 검증 함수]: 영어 또는 숫자만 가능 function onlyNumberAndEnglish(str) {   return /^[A-Za-z][A-Za-z0-9]*$/.test(str); } // ^ beginning of string //[A-Za-z] from a-z capital or not //[A-Za-z0-9]* sequence with alphabet and number and sequence ends with * // $ end of string // / close expression   // [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함 function strongPassword(str) {   return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str); } // (?= ) matches a group after main expression w/o including in the result // . matches any character except line break // * quantifier, match 0 or more of preceding token // \d digit, matches  any digit from 0 to 9 // {8,} match 8 or more of the precedig token Colored by Color Scripter

  cs

reference: https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a

Check phone number

• 1 2 3

  function checkPhoneNumber(str) {   return /^\(?([0-9]{3})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/; } Colored by Color Scripter

  cs

• reference: https://www.w3resource.com/javascript/form/phone-no-validation.php

Check identification number

• 1 2 3

  function checkIdentificationNumber(str){   return /^\(?([0-9]{6})\)?[-. ]?([0-9]{6})$/; } Colored by Color Scripter

  cs

Check visa or master card

• 1 2 3 4 5 6 7

  function visaCard(str) {   return /^(?:4[0-9]{12}(?:[0-9]{3})?)$/; }   function masterCard(str) {   return /^(?:5[1-5][0-9]{14})$/; } Colored by Color Scripter

  cs

reference: https://www.w3resource.com/javascript/form/credit-card-validation.php

Step 3. Connect Ul elements to event

• use querySelector to call element form html and connect with eventhandler

onkeydown

• fires when the user presses a keyboard key
• onkeydown (버튼이 내려갈 때)-> onkeypress(눌렸을 때)-> onkeyup(땠을 때)

onkeyup

• fires when the user releases a key that was previously pressed

onkeypress

• should fire when the user presses a key on the keyboard. However, in practice browsers do not fire for certain keys, such as command keys.

onchange

• fire when the user commits a value change to a form control
• maybe good for password form validation…?

onclick

• raised when the user clicks on an element

onmousedown

• fires when the user depresses the mouse button

onmouseup

• fires when the user releases the mouse button

Step 4. Create function for visual feedback

• after form validation, you need to provide proper feedback to users

forEach

• executes a provided function once for each array element.
• returns undefined because action happens while it iterates
• 함수 리턴 값은 하나의 값이지만, 순회를 돌면 절대 하나의 값이 나오지 않음. 나온다면 Map이랑 동일함. forEach를 사용하므로, 원하는 기능을 각각의 배열에 적용시킴. 리턴값은 undefined이므로, 만약 forEach로 return값을 구하려고 하면 실행 안됨!!!!!!!!

EventTarget.addEventListener()

• with this method, it creates event object
• when you want to do something once clicked
• when you want to use several functions with one button

Rule of 72 Definition

• to find how many years will take to make money double
• reference: https://www.investopedia.com/terms/r/ruleof72.asp

JavaScript decimal places limit

toFixed( )

var num = 5.56789;
var n = num.toFixed(2); // 5.57

Recurrence Relation

• allows you to find square root over Math.sqrt()

• reference: https://suhak.tistory.com/228

DOM(Document Object Model)

• programming interface that can modify and manipulate html document like JavaScript Object
• other languages has DOM as well
• html code itself is not DOM but html code that you can open and manipulate in console log on browser is DOM
• represents HTML as a tree structure of tags.
• use ‘console.dir’ to show DOM

Node

• the generic name for any type of object in the DOM hierarch

Element

• one specific type of node and can be directly specified in the HTML with an HTML tag and can have properties like an id or class
• node > element

Method

ParentNode.append()

• inserts after the last child of the ParentNode.
• append DOMString objects
• has no return value
• can append several nodes and strings

ParentNode.appendChild()

• put tag inside tag and tag will be moved with its node well, not clone. Only accepts Node objects
• only accepts Node objects.
• returns the appended Node object.
• can only append one node.

ParentNode.prepend():

• similar to append but it will insert before the first child node

QuerySelectorAll()

• returns all the elements
• parentNode can be document and other tag as well as long as you call from html

QuerySelector()

• returns the first element

ChildNode.remove()

• only needs a reference to the child so making simpler to remove an element without having to look for the parent node

removeChild()

• needs a reference both to the parent and the child

• 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  Remove Everything const container = document.querySelector('#container'); while (container.firstChild) {   container.removeChild(container.firstChild); }   Remove with Restriction const container = document.querySelector('#container'); while (container.children.length > 1) {   container.removeChild(container.lastChild); } const tweets = document.querySelectorAll('.tweet') tweets.forEach(function(tweet){     tweet.remove(); }) // or for (let tweet of tweets){     tweet.remove() } Colored by Color Scripter

  cs

Properties

classList

• add class

oneDiv.classList.add('tweet')

textContent

oneDiv.textContent = 'dev'

innerHTML

• has security issue so better to use textContent
• reference: https://medium.com/@jenlindner22/the-risk-of-innerhtml-3981253fe217#:~:text=innerHTML%20today%20is%20cross%2Dsite,cookies%20and%20other%20personal%20information.

How to convert nodelist into javascript array

reference: https://gomakethings.com/converting-a-nodelist-to-an-array-with-vanilla-javascript/

First-class citizen(일급 객체)

• Function (함수)
  1. can assign into variable
  2. can refer to argument(인자) of other function
  3. can return as the result of other function
• function expression(함수 표현식)
  • can not use before assignment(할당)
  • hoisting is not happening unlike 'function declaration'(함수 선언식)

Higher order function(고차 함수)

함수 = 값을 전달 받아 값을 리턴한다 = 값에 대한 복잡한 로직은 감추어져 있다 = 값 수준에서의 추상화

값 수준의 추상화: 단순히 값(value)을 전달 받아 처리하는 수준

사고의 추상화: 함수(사고의 묶음)를 전달 받아 처리하는 수준

고차함수 = 함수를 전달 받거나 함수를 리턴한다 = 사고(함수)에 대한 복잡한 로직은 감추어져 있다 = 사고 수준에서의 추상화

• a function that takes as a argument or returns a function
• Callback function
  • a function passed into caller(another function) as an argument, which is then invoked(호출)
  • depends on caller's condition, can decide callback function to be executed or executed even several times
  • mostly invoked when certain work is done so called as callback
• Curry function
  • specifically for a function that returns function
  • part of higher order function

1. When it takes caller(other function) as an argument

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   function triple(num) {   return num * 3; }   function doubleNum(func, num) {   return func(num); }   // 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다. // 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우 // 함수 func는 함수 doubleNum의 콜백 함수입니다. // 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다. let output = doubleNum(triple, 4); console.log(output); // -> 12

   cs

2. When it returns function

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   function adder(added) {   return function (num) {     return num + added;   }; }   // 함수 adder는 다른 함수를 리턴하는 고차 함수입니다. // adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다. // 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다.   // adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다. let output = adder(5)(3); // -> 8 console.log(output); // -> 8   // adder가 리턴하는 함수를 변수에 저장할 수 있습니다. // javascript에서 함수는 일급 객체이기 때문입니다. const add3 = adder(3); output = add3(2); console.log(output); // -> 5

   cs

3. When it takes function as argument and returns function

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   function double(num) {   return num * 2; }   function doubleAdder(added, func) {   const doubled = func(added);   return function (num) {     return num + doubled;   }; }   // 함수 doubleAdder는 고차 함수입니다. // 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수 입니다. // 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.   // doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다. doubleAdder(5, double)(3); // -> 13   // doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체) const addTwice3 = doubleAdder(3, double); addTwice3(2); // --> 8 Colored by Color Scripter

   cs

Built-in higher order functions(내장 고차 함수)

• Array.prototype.filter() 분류해서 거르기!!
  • filter out with elements that satisfy certain condition from array
  • condition has to be delivered in function form as an argument of filter method
  • part of higher order function since function takes as an argument
  • returns back as an 'ARRAY' to callback function that takes argument
  • 'CALLBACK' function will return a Boolean value
    • If result is 'TRUE', it will create an array with that element, if not, NO

  • 1 2 3 4 5 6 7 8 9 10 11

    function getIndex(arr, num) {   return arr.filter(function (el) {     return el < num;   }).length; // make an array with true value and get the length of that array }   function filterOddLengthWords(words) {   return words.filter(function (word) {     return word.length % 2 !== 0; // create an array that is true    }); }  Colored by Color Scripter

    cs

• Array.prototype.map() 대응, 갯수를 맞춰줘야 됨 배열자체의 수정용!!
  • creates a 'NEW ARRAY' populated with result of calling a provided function on every element in the calling array
  • can extract values from list of objects

    1 2 3 4 5

    function getOnlyNames(arr) {   return arr.map(function (el){     return el.name; // extract value of name through map filter   }) } Colored by Color Scripter

    cs

• Array.protoype.reduce() 변환이 되어 응축, 연산용!!
  •  executes a reducer function(that you provide) on each element of the array, resulting in 'SINGLE OUTPUT VALUE'
  • can make various type
  • arr.reduce(callback[, initialValue])
    • 초기값 설정 중요!
      • if they want empty array, put [] like this
    • if there is initial value, it becomes first value to calculate(A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue.)

      1 2 3 4 5

      function computeProductOfAllElements(arr) {   return arr.reduce(function(acc, cur){     return acc * cur   }, 1) //1 is initial value } Colored by Color Scripter

      cs

  • use when you want to merge arrays by using concat

    • 1 2 3 4 5

      function joinArrayOfArrays(arr){   return arr.reduce(function(acc, cur){     return acc.concat(cur)   }) } Colored by Color Scripter

      cs

  • If array is empty and there is no initial value, it will return 'typeerror'
  • If array is empty and there is inital value, it will return initial value

• Array.prototype.sort()
  
  • sorts the elements of an array in place and returns the 'SORTED ARRAY'
  • default sort order is ascending, built upon converting elements into string then comparing their sequences of UTF-16  code units values
  • a[key] > b[key]=> a-b=positive(3-1=2)
    • if it is true, return 1 which makes A to go to back
  • a[key] < b[key] => a-b=negative(1-3=-2)
    • if it is true, return -1, which makes B to go to back
  • a[key] = b[key] 
    • return 0, leave as it is

      1 2 3 4 5 6 7 8 9 10

      items.sort(function (a, b) {   if (a.value > b.value) {     return 1;   }   if (a.value < b.value) {     return -1;   }   // a must be equal to b   return 0; });

      cs

• Array.prototype.some()
  • tests whether 'AT LEAST ONE ELEMENT' in the array 'PASSES' the test implemented by the provided function
  • returns a Boolean Value
• Array.prototype.every()
  
  • tests whether 'ALL ELEMENTS' in the array 'PASS' the test implemented by the provided function
  • returns a Boolean value

• Array.prototype.forEach()
  • executes a provided function 'ONCE FOR EACH ARRAY ELEMENT'
• Array.prototype.find()
  • returns the value of the 'FIRST ELEMENT' in the provided array that satisfies the provided testing function

Spread syntax

• if you want to add array inside middle of array

  1 2

  const spread = [1, 2, 3]; const arr = [0, ...spread, 4]; // [0, 1, 2, 3, 4])

  cs

• if it is empty array, it will return nothing

  1 2

  const spread = []; const arr = [0, ...spread, 4]; // [0, 4]

  cs

• can merge arrays same as concat method

  1 2 3 4

  const arr1 =[1, 2, 3]; const arr2 = [3, 4, 5]; const concatenated = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5] arr1.concat(arr2); // [0, 1, 2, 3, 4, 5]

  cs

• can merge objects as well

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  const paige = {     firstName: 'Paige',     LastName: 'Kim', }; const me = {     hobby: 'piltaes',     todos: ['coplit', 'koans'], };   const merged = {...paige, ...me}; /* const merged = {     firstName: 'Paige',     LastName: 'Kim',     hobby: 'piltaes',     todos: ['coplit', 'koans'], }; */ Colored by Color Scripter

  cs

• if spread syntax goes inside parameter, it become 'rest parameter(rest syntax)'
  • useful when numbers of parameters were not set
  • returns arguments with 'ARRAY'

    1 2 3 4

    function pintMaxNums(...args) {      console.log(args); //[10, 30, 40] } pintMaxNums(10, 30, 40);

    cs

Object

• === 
  • To compare 'REFERENCE' only in object!!
    

    1 2 3 4 5 6 7 8 9 10 11 12

    const person = {       son: {         age: 9,       },     };      const boy = person.son; boy.age = 20; expect(person.son.age).toBe(20); expect(person.son === boy).toBe(true); expect(person.son === { age: 9 }).toBe(false); expect(person.son === { age: 20 }).toBe(false);

    cs

Today, I reviewed all of the pair programming questions and the making of the calculator app with html, css, and JavaScript. My understanding is better compared to before when I first did it. I now have a better understanding of how I should write codes. And, also, with the help of my peers from last night, my terminal set up is done and super pretty!! 🥰

HTML & CSS

1. To RESET html

2. FLEX: grow(팽창 지수), shrink(수축 지수), basis(기본 크기) 🤯

• apply to children but does not give any property
• decide how much you want to expand the children
• flexbox can extend with need

  1

  flex: 0 1 auto;

  cs

• grow
  • represents ratio
  • grow 1: expands equally
  • grow 0: only upto its content's size

    1 2 3

    .left {   flex: 0 1 70px; }

• shrink
  
  • leave as 1 most of times
  • need to study more how to count 🤯
• basis
  • if you give exact px, it will not grow more than that
  • if you put as '0%' over 'auto', each div will get exact same width regardless of length of each contents in div
• if you put width and flex-basis together, flex-basis gets priority. If contents inside box overload, width does not guarantee exact size. In order to prevent that, it is better to use 'max-width' over 'width' if you do not use flex-basis.
• In order to apply vertically, need to use as below,
  • put display:flex and flex-direction:column to parent and put flex on child

    1 2 3 4 5

    <div htmlclhtmlass="col w20">     <div class="row h40">영역1</div>     <div class="row h40">영역2</div>     <div class="row h20">영역3</div> </div>

    cs

    1 2 3 4 5 6 7 8

    .col{     display: flex;     flex-direction: column; }   .h40{     flex: 4 1 auto; }

    c

reference:

https://heropy.blog/2018/11/24/css-flexible-box/

https://studiomeal.com/archives/197

3. WIREFRAME

• design layout to show how the final will be
• first time making wireframe in order to start twittler with pair but not sure whether I did it correctly or not but it definitely helps me to brainstorm first before I write codes

• Result with HTML & CSS:

Arguments

• an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
• In order to change it to array
  • Array.from(arguments)
• has length property that can count from index #0 but does not have other methods like array
• 내장객체 함수에 전달 된 인수에 해당하는 배열 형태의 객체
• 함수를 선언한 순간, arguments 객체를 가지고 있음
• 함수가 호출되는 시점에, 그 때 전달 된 파라미터를 저장한 곳
• 파라미터 숫자를 정해놓더라도, 제한하지는 않기에, 적게 넣게 되면 undefined가 되고 갯수가 상관없음
• 내장 메서드를 포함하고 있지 않음

CSS Selector

• Grandchildren Selector(후손 셀렉터)

  • header h1 {}

• Child Selector(자식 셀렉터)

  • header > p { }

• Adjacent Sibiling Selector(인접 형제 셀렉터)

  • section + p { }

• Sibiling Selector(형제 셀렉터)

  • section ~ p { }

• ul > li:nth-child(2n) { }
  • Inside unordered list and list, choose child who is even
• section > p:nth-child(2n+1) { }
  • Among child elements of section, choose child element p who is odd
• section > p:nth-last-child(2n + 1) { }
  • Among child elements of section, choose child element p who is odd from the back
• p:first-of-type { }
  • Choose first p element among its sibiling elements of p
• div:last-of-type { }
  • choose last div element among its sibiling elements of div
•  p:nth-of-type(2) { }
  • choose second p element from sibiling elements of p
• p:nth-last-of-type(2) { }
  • choose second last p element from sibiling elemetns of p

• p:not(#only) {}
  • choose all except id is only from p elements

• Closure
  
  • closure function can access
    • innver variable
    • outer variable
    • global variable

      1 2 3 4 5 6 7 8 9

      function outerFn() {     let outerVar = 'outer';          function innerFn(){              let innerVar = 'inner';              console.log(outerVar);         console.log(globalVar);     }return innerFn; } let globalVar='global';

      cs

  • Currying
    
    • a process of taking function with multiple arguments into a sequence of nesting function
    • parameter will be fixed

      1 2 3 4 5 6 7 8

      function multiply(x) {     return function(y) {         return x * y;     } } multiply(3)(4); // 12 let multiply10 = multiply(10); multiply(7); // 70

      cs

      1 2 3 4 5 6 7 8 9 10 11 12 13

      function htmlMaker(tag) {     let startTag = '<' + tag + '>';     let endTag = '</' + tag + '>';     return function(content) {         return startTag + content + endTag;     }     }   let divMaker = htmlMaker('div'); divMaker('Paige'); // <div>Paige</div>   let spanMaker = htmlMaker('span'); spanMaker('Paige'); // <span>Paige</span>

      cs

  • Module Pattern
    • assign variable inside closure not to be changed
    • each function will not affect each other 

      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

      function calculate() {     let insideCalculate = 0;       let obj = {         increment: function() {             insideCalculate ++;         },         decrement: function() {         },         getValue: function() {             return insideCalculate;         }     };     return obj; } let one = calculate(); one.increment(); one.increment()l one.getValue(); // 2 insideCalculate; // reference error let two = calculate(); two.increment(); two.increment(); two.increment(); two.increment(); two.increment(); two.decrement(); two.getValue(); // 5

      cs

COMMAND LINE INTERFACE(CLI)

• Pros
  • fast and powerful
  • good for accesibility
• command

• What you do @ GUI === What you do @ CLI

GIT

Version control system

• Strong versions
• Restoring prvious versions
• Understanding what happened
• Collaboration
• Backup

Features

• Branching and merging
• Distributed

• Data assurance

• Staging area

DISTRIBUTED

• Local Repository: in my own computer
  • fork: copy from Git remote repository
  • clone: bring into local repository
  • if something changes at local repository,
    • use 'git push origin master'(my repository)
  • if something changes at origin or remote repository
    • origin: use 'git pull origin master'
    • upstream: use 'git pull upstream master'
  • Staging Area
    • working directory --(git add index.html)-->staging area--(git commit)-->repository
  • Commit
    
    • use 'git commit -m "Add headline to index page"'
      • always need to add message to identify what has been chaged
  • Branching & Merging
    • Branching: allow each developers to work seperately
    • Merging: allow each developers to merge what they make
    • Master branch: code that will released to users(no bug)
    • Develop branch: includes codes that is middle of development and need to go through test and bug fix
    • feature branch: includes each function