http://blog.hwahae.co.kr/all/tech/tech-tech/9507/ 참고자료

개발공부를 하면서 여러 github branch 나 pr , 등등 생소한 용어들을 많이 들었었는데 오늘 나라님께 git flow에 대해서 배웠다. 넘모 고맙다..

우선 현재 내가 클론코딩을 진행하고 있는 레파지토리를 기준으로 말하자면

이렇게 master, develop 브런치 (개발) develop에서 분기 이렇게 나와있다.

서비스는 master 브랜치에서 이루어질 것이고 개발은 develop 브랜치에서 그리고 여러 기능 구현은 그 용도에 따라 이름을 달리하여 진행될 예정이다.

develop 기준 좌측 최하단에서 분기를 만들고 관련 기능을 추가하여 push 하고 pull request를 하는 방식으로 진행하는 것을 git flow라고 하더라!

이번에 퍼블리셔로 부터 it 업계에 발을 들였는데 앞으로도 이러한 협업 능력을 길러 보탬이 되어야겠다!

생각보다 아주 많은 도움이 된 거 같아서 스스로 공부한 내용을 정리하고자 포스팅을 한다.

사진에는 스크롤이 안나왔지만 overflow-y auto 보다는 niceScroll 라이브러리를 활용하는 것이 훨씬 보기가 편했고, $.each를 사용해야되는 부분이 많아서 반복문에 대허서 다시 한번 복습하게 되는 좋은 계기였다.

메뉴를 호버했을때 jquery로 each 함수와 eq()를 활용해서 css를 조작하여 같은 eq일때만 visible을 하게 하여 만들어보았다.

또 메인메뉴의 경우 호버했을때 나타나고 서브메뉴는 setTimeout 을 걸어서 0.1초 마로 호버했을때, 호버하지않았을때로 구성했다.

생각보다 복잡했는데, 또 하고 나니 복잡하지 않았다? ㅋㅋ;

계속 작업 하자!!

태그를 이용해 문서 또는 데이터 구조를 명기하는 여러가지 언어

2. 웹표준

웹표준은 월드 와이드 웹 (Word Wide Web)의 측면을 서술하고 정의하는 공식 표준, 기술 규격을 가리키는 용어 -> 웹 표준의 장점 수정 및 운영관리 용이 접근성 향상 검색엔진 최적화 파일 사이즈 축소, 서버 저장 공간 절약 효율적인 마크업 호환성 가능

웹 접근성, 웹 표준, 웹 호환성 모두 조건과 환경에 상관없이 모든 브라우저 환경에서 똑같이 작동할 수 있도록 만드는 데에서 기반한 개념들

3. 웹접근성

웹 사이트에서 제공하는 정보를 신체적 차이, 장애 여부, 지식의 정도, 기술 등에 제한없이 사용자가 동등하게 이용할 수 있도록 보장하는 것을 의미

4. 웹 호환성 (Cross Browsing)

웹 브라우저 버전 및 종류와 관계없는 웹 사이트 접근할 수 있어야 한다는 개념이다.

vs code에서 <!DOCTYPE> 이 !DOCTYPE을 Document Type의 약자로, HTML이 어떤 버전으로 작성 되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해 주는 것

SEO Search Engine Optimization : 검색엔진 최적화

웹사이트가 검색엔진에 더욱 더 잘 보이게 하기 위한 작업

시멘틱 마크업

말그대로 의미를 담은 마크업 HTML5에서는 header, aside, nav, section, footer 등 이있다. 태그 자체로 의미 부여가 가능

UI란

User Interface, 모든 디자인의 요소를 통칭 눈으로 보이는 폰트, 레이아웃, 색상, 도형, 버튼 등 시각적인 디자인을 뜻하는 단어

UX란

'User Experience' 사용자가 어떤 서비스와 제품 등을 직간접적으로 사용 또는 이용하면서 느껴지는 경험, 만족도, 느낌, 행동, 태도

css Cascading style sheet

. 웹 퍼블리셔란? 디자이너가 구상한 웹 디자인을 구조화하여 웹상에서도 볼 수 있도록 코딩하고 관리하는 사람

정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요.

정수 배열의 원소 2개를 곱해서 최대값을 return 하는게 목적

function solution(numbers) {
    // numbers는 정수배열
    // numbers의 원소 중 두개 곱해서 만들 수 있는 최대값 
    const [first, second, ...rest] = numbers.sort((a, b) => b - a); // a - b는 내림차순
    console.log([first,second,...rest])
    return first * second;
}

numbers 가 정수 배열이라 스프레드 문법(...)을 통해 1번째 값과 2번째 값을 변수에 담아야된다. 따라서 [first, second, ...rest] 에 sort 메서드를 활용해서 오름차순으로 배열을 반환하고 first값과 second의 값을 곱해서 최대값을 도출한다.

입출력의 예제가 아래와 같아도 sort 메서드로 정렬이 가능해서 제일 높은 값인 first와 second를 뽑을 수 있다.

q2. 배열의 유사도

두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요.

s1,s2 모두 배열이 담겨있음. s1.filter로 모두 검사한 다음 includes로 s2랑 비교해서 length 출력

function solution(s1, s2) {
    return s1.filter((item)=>s2.includes(item)).length;
}

q3. 점의 위치 구하기

사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요.

내 지저분한 풀이코드 ;

function solution(dot) {
    let [first, second] = dot
    console.log(first,second)
    if(first>0 && second>0){
        return 1
    } else if(first<0 && second>0){
        return 2
    } else if(first>0 && second<0){
        return 4
    } else if(first<0 && second<0){
        return 3
    }
}

split 메서드는 문자열을 배열로 만드는 것이다!!!

q4. 인덱스 바꾸기

문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.

못풀었따. 답안을 보고 분석을 시작했따

function solution(my_string, num1, num2) {
  const str = [...my_string]; // 원본 데이터에 손상을 주지 않는 새로운 배열 생성

//num1,num2가 숫자 인덱스이기때문에

  [str[num1], str[num2]] = [str[num2], str[num1]]; // 서로 안에 있는 값 교체 
  console.log("1", [str[num1]]);
  console.log("2", [str[num2]]);

  return console.log(str.join("")); // 배열 붙여줌과 동시에 문자열로 반환
}

solution("I love you", 3, 6);

q5. 삼각형 완성조건 (1)

선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다. 가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다. 삼각형의 세 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 세 변으로 삼각형을 만들 수 있다면 1, 만들 수 없다면 2를 return하도록 solution 함수를 완성해주세요.

나의 코드

function solution(sides) {
   let sidesNum = sides.sort((a,b) => b - a)
   console.log(sidesNum);
    if(sidesNum[0] >= sidesNum[1]+sidesNum[2]){
        return 2
    } else {
        return 1
    }
}

q1.

문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요.

나는 split('letter') 사용하면 될 줄 알았는데, 먹히지 않더라 여기서 알아야되는 메서드가 replaceAll 이라는 건데, 문자 그대로 바꿔주는 메서드이다.

function solution(my_string, letter) {
    return my_string.replaceAll(letter, "");
}

replace의 경우에는 첫번째 하나만 바꾸기 때문에 replaceAll 로 사용하여야된다.

q2.

어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return하도록 solution 함수를 완성해주세요.

정수 판별하는 메서드 Number.isInteger(), 제곱근을 나타내는 메서드 Math.sqrt()를 활용해야된다.

 function solution(n) {
     if(Number.isInteger(Math.sqrt(n))){
        return 1;
    } else {
        return 2;        
    }
}

q3.

자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.

function solution(n) {
    return n.toString().split("").reverse().map((item) => parseInt(item) )
}

자연수를 n으로 받는거라 string으로, 하나씩 쪼개서 다시 배열로 담아 숫자로 반환하는 과정을 거쳐야된다.

q4.

머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요.

논리적인 사고? 가 필요한 문제인 거 같다. 그래서 당연히 못풀었다ㅎ..

function solution(n) {
    // 피자를 나눠먹을 사람의 수 n
    // 피자는 일곱 조각으로 잘라줌
    // 모든 사람이 한 조각 이상 먹고 싶어, 필요한 피자 수 return 
    return Math.floor((n - 1) / 7) + 1;
}

q1.

정수 n이 매개변수로 주어질 때, n의 약수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요.

약수를 구하는 문제 내가 짠 코드

function solution(n) {
    let answer=[] 
    for(let i = 0; i <= n; i++){
        if(n%i === 0){
            answer.push(i)
        }
    }
    // 약수를 구하는 공식 같은거라 딱히 부가 설명할 게 없다.
    return answer
}

q2.

머쓱이는 학교에서 키 순으로 줄을 설 때 몇 번째로 서야 하는지 궁금해졌습니다. 머쓱이네 반 친구들의 키가 담긴 정수 배열 array와 머쓱이의 키 height가 매개변수로 주어질 때, 머쓱이보다 키 큰 사람 수를 return 하도록 solution 함수를 완성해보세요.

내가 처음 짠 코드

function solution(array, height) {
    var answer = [];
    // 반 친구들의 키 배열(정수) array
    // 머쓰기의 키 height 
    // 머쓰기보다 키 큰 사람 수! return
    answer = array.filter((n) => if(n>height)answer.push(n)).length

    return answer;
}

아직 개념이 조금 부족 한거 같다. filter 함수 안에 if문을 또 사용하였다.

if문에서 오류가 나서 다시 손 본 코드는 아래와 같다.

 function solution(array, height) {
    var answer = [];
    // 반 친구들의 키 배열(정수) array
    // 머쓰기의 키 height 
    // 머쓰기보다 키 큰 사람 수! return
    answer = array.filter((n) => n>height).length

    return answer;
}

filter은 배열을 반환하기 때문에 위와 같이 간단하게 코드를 짤 수 있었다.

q3.

정수가 들어 있는 배열 num_list가 매개변수로 주어집니다. num_list의 원소의 순서를 거꾸로 뒤집은 배열을 return하도록 solution 함수를 완성해주세요.

reverse메서드를 모를 때 1차 도전 split 을 이용하려했으나, 정수가 들어 있는 배열이라 돌아가지 않음

2차 도전 for문으로

function solution(num_list) {
    var answer = [];
    for(let i=num_list.length-1;// 배열의 마지막 i >= 0; i-- // 뒤집기) {
      answer.push(num_list[i]);
    }
    return answer;
}

reverse메서드를 알고 난 후

function solution(num_list) {
    var answer = [];
    answer = num_list.reverse()
    return answer;
}

메서드 하나로 훨씬 간단하게 출력할 수 있었다.

q4.

머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요.

내가 구성한 코드

function solution(n, k) {
    var answer = 0;
    // n = 양꼬치 인분
    // k = 음료수 개수
    return n * 12000 + (k - Math.floor(n / 10)) * 2000;
}

결국 답은 찾았지만, 뭔가 계속 문제 자체를 어렵게 접근하는 거 같다. 음 계속 하는 수 밖에 없을거같다

q5. 문자열 뒤집기

문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요.

문자열을 받으면 우선 뒤집기위해 배열로 변환, 스프레드 ... 활용 -> ... reverse, 문자열로 반환하는 join 활용

function solution(my_string) {
    var answer = '';
    answer = [...my_string].reverse().join("");
    return answer;
}

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (이전값, 현재값) => 이전값 + 현재값,
  설정값//생략가능
);

console.log(sumWithInitial);
// expected output: 10

보통 array.length 를 활용해서 평균 값을 구하는 데 많이 사용된다. 코딩테스트를 공부하고 있는데 많이 나오는 메서드니까 잘 공부하자.

q1.

어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n과 경과한 시간 t가 매개변수로 주어질 때 t시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요.

function solution(n, t) {
    var answer = 0;
    // 세균 마리수 n
    // 경과 시간 t 
    // n * 2 ** t
    answer = n * 2 ** t
    return answer;
}

거듭제곱을 모른다면 사실 풀기 어려운 문제 였던거 같다. 수포자였던 나는 t * (n * 2) 로 생각했는데 내가 풀었어도 아닌거 같다 라는 생각이 많이 들었는데 거듭제곱을 알게 되니 아주 쉽게 풀렸다. ** 에 대해서 배울 수 있는 좋은 기회였던거 같다!

q2

정수가 담긴 리스트 num_list가 주어질 때, num_list의 원소 중 짝수와 홀수의 개수를 담은 배열을 return 하도록 solution 함수를 완성해보세요.

알아야되는 메서드 filter (주관적임)

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

filter 메서드는 array 안에서 조건에 맞는 거만 걸러서 반환해주는 메서드이다.

문제의 num_list 의 배열에 짝수와 홀수의 개수를 담은 배열을 return 하여야되기떄문에 num_list.filter(number => number%2 === 0).length로 짝수,홀수의 개수를 구하고 리턴한다.

function solution(num_list) {
    const evenLength = num_list.filter(n => n % 2 === 0).length;
    console.log(evenLength)
    return console.log([evenLength, num_list.length - evenLength]);
  }

q3.

자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수

사용되어야되는 메서드 (내수준) split로 다 쪼개고 reduce로 다 더하기. 위한 과정으로 문자열로 변환 후 다 쪼갠다음, map으로 모두 숫자로 변환

function solution(n){
    return n.toString().split("").map((n)=>parsInt(n)).reduce((a,b)=>(a+b),0)
}

영어 대소문자로 이루어진 문자열 my_string이 매개변수로 주어질 때, my_string을 모두 소문자로 바꾸고 알파벳 순서대로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요.

소문자 toLowerCase 로 바꾸고, split("") 메서드를 통해 배열에 하나씩 차곡 차곡 담는다. 다음 sort 메서드를 활용하여 순서대로 나열하고 join 을 활용해서 다시 string으로 바꾼다!

function solution(my_string) {
    return my_string.toLowerCase().split('').sort().join('');
}

Q2. 각도기

각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.

내가 생각한 코드

function solution(angle) {
    if(0 < angle < 90 ){
        return 1;
    } else if(angle === 90 ){
        return 2;
    } else if(90 < angle < 180){
        return 3 
    } else {
        return 4
    }
}

정답이 아니였다. 여기서 논리연산자에대해서 다시 생각해 볼 수 있었는데, 좀 더 정확한 조건을 주기위해서 && // 모두가 true인 경우에만 true 반환 || // 둘 중 하나가 true 라도 true 반환 을 이용해서 풀어볼 수 있었다 .

function solution(angle) {
    if( 0 < angle && angle < 90){
        return 1
    } else if(angle === 90){
        return 2
    } else if (90 < angle && angle < 180){
        return 3
    } else if (angle === 180){
        return 4
    }
}

위와 같은 코드로 진행 할 수 있었다.

Q3. 다시 또 한번 filter 메서드에 대해서 공부해보자

정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요.

나의 코드 function solution(array, n){ retrun array.filter(item => item === n).length }

Q4.
정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 return하도록 solution 함수를 완성해주세요

나의 코드

function solution(n) {
    var answer = 0;
    let string = n.toString();
    let string_split = string.split("");
    for(let i = 0; i < string_split.length; i++){
        answer += parsInt(string_split[i])
    }
       return answer;
}

정답이 아니더라..ㅎ

다른 사람들의 정답 코드를 구글링하여 보니

function solution(n){
    var answer = 0;    
    var m=String(n);    
    for(var i=0; i<m.length; i++){
        answer+=parseInt(m[i]);    
       }
    return answer;
   }

String 이나 toString 이나 똑같은 의미인줄 알고 있는데 계속 안되던데, vs code에서 보니 parsInt가 오타가 있었다..!! 다시 한번 오타를 잘 잡아보아야겠따!!

공식사이트 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); 
// {} return 생략 된 것.. word요소의 길이가 6개 이상인 것만 출력하는 조건이 걸려있음

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

다음 나의 공부하는 예제로 넘어가면

let names = [
  "Steven Paul Jobs",
  "Bill Gates",
  "Mark Elliot Zuckerberg",
  "Elon Musk",
  "Jeff Bezos",
  "Warren Edward Buffett",
  "Larry Page",
  "Larry Ellison",
  "Tim Cook",
  "Lloyd Blankfein",
];

q1. 이름에 a를 포함한 사람들을 출력하시오.

a. 이름에 포함된 a 니까 우선 filter와 includes 가 사용 될 거라고 생각했다.

let includeA = names.filter((item)=>{
    return item.includes("a")
})
console.log(includeA)

q2. 이름에 같은 글자가 연속해서 들어간 사람을 출력하시오. (예-tt,ff,ll 이런 글자들)

예)

let names = [
  "Steven Paul Jobs",
  "Bill Gates",
  "Mark Elliot Zuckerberg",
  "Elon Musk",
  "Jeff Bezos",
  "Warren Edward Buffett",
  "Larry Page",
  "Larry Ellison",
  "Tim Cook",
  "Lloyd Blankfein",
];

우선 map을 활용한 예 이다. q1. 모든 이름을 대문자로 바꾸어서 출력하시오. q2. 성을제외한 이름만 출력하시오. q3. 이름의 이니셜만 출력하시오.

a1. 대문자로 출력하는 것은 toUpperCase 활용.

let nameUpper = names.map((item) => {
  return item.toUpperCase();
});
console.log(nameUpper); {return} 생략 가능

a2. 먼저 이름만 출력하려면 split 메서드에 대해서도 알아야 되는데, 나는 split 메서드를 전혀 몰라서 공식 사이트를 참고하여 공부하였다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split

여기서의 예시는

const str = "The quick brown fox jumps over the lazy dog.";
let splitStr = str.split(""); // T,h,e,'','q','u' ~~ 공백도 나타냄 즉 글자하나 기준
console.log("splitStr", splitStr); 
let splitStr = str.split(" ") // The,quick  즉 띄어쓰기 기준
let splitStr = str.split(" ")[0] // The 즉 띄어쓰기를 하고 첫번째 인덱스 기준

따라서 이 문제의 경우 names를 map으로 전체를 한번 돌리고 split로 1번째 인덱스를 뽑으면 된다.

let nameValue = names.map((item) => {
    return item.split(" ")[0]
})
console.log(nameValue)

a3. 이니셜만 출력하려면 a2의 split와 forEach를 함께 사용해야 된다.

let nameNumber = names.map((item) => {   //전체를 돌리고
  let splitName = item.split(" "); // 띄어쓰기를 기준으로 짜른다
  // console.log(splitName); 
  let initial = ""; // 문자열이 들어갈 공백을 하나 만들고
  let split = splitName.forEach((item) => { 
  // forEach로 띄어쓰기를 기준으로 짜른것을 돌린다. 
    console.log("forEach item", item[0]);
    return (initial += item[0]); // 그리고 첫번째 글자를 문자열에 다 넣는다
  });
//   console.log(split);
  return initial;
});
console.log(nameNumber);

이쯤되면 map과 forEach의 차이에 대해서 의문점이 들기 시작했다. 모두 배열의 원소를 만지는 건 알겠는데 근본적으로 내가 아는게 맞나 싶은 생각이 들었다.

우선 정리하자면 forEach와 Map은 비슷한 역할을 하지만, 내가 생각하기에는 return의 여부가 가장 큰 차이인거 같다. forEach로 리턴을 했을때 외부에서는 그 값을 참조하지 못하지만 map에서 리턴을 했을때는 그 값을 외부에서 참조할 수 있다.

상황에 따라 사용하는 것이 좋아 보인다ㅎㅎ..

참조: https://dream-frontend.tistory.com/341

array의 평균값 구하기에서 막혔는데, 여기서 reduce method에 대해서 공부할 수 있었다.

//공식문서 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

즉 reduce 메서드는 배열.reduce((a,b) => a+b, 시작변수) 로 사용하면 된다.

내가 풀었던 문제는 평균 값을 구하는 문제였기에

function solution(numbers) {
    var answer = 0;
    answer = numbers.reduce((a,b) => a+b)/numbers.length;
    return answer;
}

reduce메서드로 배열의 값을 합치고, 배열의 길이로 나누면 평균값을 도출해낼수있다.

짝수의 합

문제

정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요.

function solution(n) {
    var answer = 0;
    if(n>0){
        for(let i = 1; i <= n; i++){
            if(i%2 == 0){
                answer += i
            }
        }
    }
    return answer;
}

우선 정수 n이 주어지고 n 이하의 짝수를 모두 더해야되는데, 그러기 위해서 먼저 if문을 활용하여 0보다 크고 n보다 작은 범위를 설정해준다. 다음 for문을 활용해서 n범위 안에 값을 반복 시키고 그 안에서 짝수를 뽑는다. 그 값이 true 이면 answer에 담아 그 값들을 모두 합칠 수 있게 += 로 값을 모두 더 해준다.

처음 봤을때는 if문 하나밖에 생각 나지 않았는데 결국 구글링을 통해서 해결했다. 다른 분들의 풀이를 보니 정말 잘하시는 분들이 많은거 같다..ㅠㅠ

정식 명칭은 애자일 소프트웨어 개발. 주로 애자일 방법론이라고 불린다.

즉, 애자일 방법론이란 개발을 하는 동시에, 사용자의 피드백을 받아서 고치고 좋게 만드는, 피드백을 바탕으로 유동적으로 개발하는 방법.

애자일 개발 방법론에서 중요한 점으로는 1. 공정 및 도구보다, 개인과 상호작용 중시 2. 포괄적인 문서보다 작동하는 소프트웨어 중시 3. 계약 협상보다 고객과의 협력중시 4. 계획을 따르기보단 변화에 대응을 중시 가 있다.

따라서 요즘 스타트업에서 애자일 개발 방법을 위해 jira, Confluence, Slack 툴을 많이 사용하며, 많은 회의를 거치면서 상호간의 피드백으로 애자일 방법론으로 개발을 진행한다.

html이 구성되는 시점을 파악하여서 요령껏 이것저것 넣어보면서 사용해야겠다.

onBeforeMount(() => {
  console.log("onBeforeMount");
  console.log(document.getElementById("test"));
});
// 화면에 보여지(등록)는 단계
onMounted(() => {
  console.log("onMounted");
  console.log(document.getElementById("test"));
});
// 화면이 갱신이 되기 전 단계
onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});
// 화면이 갱신이 되고 난 후 단계
onUpdated(() => {
  console.log("onUpdated");
});
// 컴포넌트가 화면에서 제거 되기 전 준비 단계
// : 메모리를 정리하는 곳
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});
//컴포넌트가 완전히 제거되었을 때
onUnmounted(() => {
  clearTimeout(toastTimer.value);
  console.log("onUnmounted");
});

참고문서

vue 공식문서 https://v3.ko.vuejs.org/api/composition-api.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%92%E1%85%AE%E1%86%A8-lifecycle-hooks