자바스크립트 reduce 함수를 이용하여 배열 합계 구하기

자바스크립트에 reduce 함수가 있습니다. 자바스크립트 레퍼런스 문서에 reduce에 대해서 설명을 너무 어렵게 해놔서 무슨 말이지 하나도 모르겠네요. 좀 간단하계 합계를 구하는 함수를 만들어보면서 설명드리겠습니다. var arr = [1, 2, 3, 4, 5]; var sum1 = arr.reduce((a, b) => a + b)); // 15 reduce는 배열 함수입니다. 배열에서 사용할 수 있는 함수입니다. (a, b) => a + b) 이렇게 들어가 있는 부분이 reduce의 파라미터 입니다. reduce가 실행 될때, 해당 배열만큼 해당 callback이 타게 됩니다. a의 경우에는 이전 callback의 return 값입니다. b는 현재 배열의 값이 구요. 그렇게 되면서 이전 합계의 값을 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 20.
• textsms

나트랑 해산물 맛집 - BABA CIU

작년에 냐짱 다녀왔는데, 냐짱 시내 근처에 있는 해산물 맛집을 소개해드리려고 합니다. BABA CIU라는 가게입니다. 가성비 맛집이라고 이야기를 들어서 냐짱을 놀러 갔을 때 방문했습니다. 시내랑 살짝 떨어져 있긴 한데, 약 10분 정도 걸어서 갔었습니다. 검은색 간판에 BABA CIU라고 적혀있었습니다. 여유 있게 식사할 수 있었습니다. 영어를 할 수 있는 직원은 없어서, 다른 분이 오셔서 메뉴를 설명해 주시고 주문을 했습니다. 영어 메뉴판은 없고 베트남어 메뉴판이어서 다른 메뉴는 시킬 수가 없었습니다. 가운데에 있는 SET 메뉴를 시켰습니다. 설명해 주신 다른 분에게 어떤 차이가 있는 설명을 해주셨는데, 기억이 나지를 않네요 489만 동이면, 약 2만 5천 원 정도의 가격입니다. 이런 비주얼로 나옵니다..

• format_list_bulleted 일상/맛집
• · 2023. 1. 19.
• textsms

CSS 자주 사용하는 선택자 모음

자주 사용하는 CSS 선택자에 대해서 소개드리겠습니다. css를 작성하다 보면 어디에 스타일 주어야 할지 정해야 하는데요. 선택자를 이용하여 스타일을 적용할 요소를 정할 수 있습니다. 전체 선택자 모든 요소에 다 적용이 됩니다. * 를 이용해서 사용합니다. * { color: red; } 유형 선택자 특정 태그에 적용이 됩니다 div, span 태그 등을 이용합니다. 해당 태그에는 모두 적용이 됩니다. div { width: 200px; } span { display: inline-block; } ID 선택자 요소의 ID에 적용이 됩니다. ID 앞에 #을 적어서 사용합니다. CSS를 사용하는데 ID 선택자는 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋습니다. ID를 이용하게 되면 다른 요소에는 적용이..

• format_list_bulleted Develop/CSS
• · 2023. 1. 19.
• textsms

월급쟁이는 부자가 될 수 없다.

직장인들에게 연말연초에 연봉협상을 하게 된다. 한 해 동안 회사의 성과가 높으면 연봉 인상률이 높아지고 회사가 어렵거나 성과가 저조하다면 동결 또는 연봉 인상률이 낮을 수밖에 없다. 성과가 높아서 연봉이 많이 인상이 되면 부자가 될 수 있을까? 월급쟁이가 버는 돈은 ( 시급 x 시간 )이다. 이 두 가지 변수 중 하나는 크게 올릴 수 있어야 부자가 될 수 있다. 시간은 제한이 있다. 하루 24시간 특히 일을 할 수 있는 시간은 더욱 제한되어 있다. 52시간 퇴근하고 부업을 해도 12시간을 넘기기 힘들다. 연봉 인상률이 아무리 높아도 20%를 넘지 못한다. 일반 직장인들은 연봉이 높지 않아서 인상이 돼도 크게 오르지 않는다. 내 연봉이 2배가 될 때까지 10년 이상의 시간이 걸리게 된다. 운동선수, 연예인..

• format_list_bulleted 일상/재테크
• · 2023. 1. 18.
• textsms

자바스크립트 - 팩토리 패턴 사용하기

자바스크립트에서 팩토리패턴 사용하는 방법에 대해서 설명해드리려고 해요 팩토리 패턴은 디자인 패턴 중에 하나입니다. 디자인패턴이란? 옛날부터 개발자들이 포로그램을 만들 때, 생겼던 문제점들을 해결하기 위해 만들어낸 전형적인 패턴입니다. 그중 팩토리 패턴은 생성 패턴 중 하나입니다. 팩토리 패턴이란? 부모 클래스에서 자식 객체를 생성하는데, 그 객체의 유형을 다양하게 할 수 있는 패턴입니다. 이렇게 이야기하면 잘 이해가 안 가시죠? 실제 소스로 한번 볼까요? 예시 1 class Superman { name; constructor() { this.name = "Superman"; } } class Batman { name; constructor() { this.name = "Batman"; } } class ..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 18.
• textsms

CSS - border-style 테두리 스타일 주기

CSS 테두리 스타일 주는 방법에 대해서 알아보겠습니다. border-style 속성이 있는데 테두리에 스타일을 적용할 수 있습니다. 4가지 속성을 소개 시켜드리겠습니다. solid : 일반적인 기본 선입니다. dotted : 점선입니다. dased : 직사각형 선입니다. double : 두줄 선입니다. 아래 처럼 적용할 수도 있습니다. .border { border-style: solid; } 아래와 같이 css border 속성 두 번째에 스타일 적용할 수 있습니다. border 속성은 [두께, 스타일, 색상]입니다. .border { border: 1px solid black; } 아래 border-style을 적용한 예시입니다. See the Pen Untitled by Young Jun Koo ..

• format_list_bulleted Develop/CSS
• · 2023. 1. 17.
• textsms

이직하고 퇴사해야 하는 이유

퇴사를 생각할때, 감정적으로 바로 퇴사를 하는 경우가 있습니다 에이, 어디든 일할때가 있겠지 나, 하나 일할 곳 없겠어? 라는 생각으로 퇴사하는 경우가 있는데 이직할 곳을 확실히 정해놓고 퇴사 해야 하는 이유에 대해서 알아보겠습니다. 1. 경력 공백이 오래 될 수 있다. "누구나 쳐맞기전까지는 그럴싸한 계획이 있다" 이런 말이 있습니다. 퇴직을 하게 되고 이직을 하려고 하다보면 자칫 계획이 틀어지는 경우가 생기고, 그럴 경우에 그 기간이 예상보다 길어질 수 있습니다. 공백 기간이 길어지다보면 또 추후 이직 할때도 문제가 생길 수도 있습니다. 2. 이직할 회사와의 협상에서 불리하다. 모아둔 돈이나, 퇴직금이 넉넉해도 다니고 있는 회사가 없으면 조급함이 생길 수도 있습니다. 그러다보면 이직할 회사와 연봉 협..

• format_list_bulleted 일상/이야기
• · 2023. 1. 17.
• textsms

퇴사 하고 이직 해야 하는 이유

보통 퇴사를 결심할 때, 주위 사람들이 이야기하는 것들이 갈 곳을 정해놓고 퇴사하라고 합니다. 갈 곳을 정해놓고 퇴사를 하면 갑자기 만일의 사태는 발생되지 않고 안정적으로 이직할 수 있고, 공백기도 최소한을 가질 수 있습니다. 하지만 퇴사하고 이직을 하면 얻을 수 있는 장점들에 대해서 적어보겠습니다. 1. 퇴사 후 여유 있게 다음 직장을 구할 수 있다 퇴사 후 여행을 간다거나, 커리어 향상을 위해 개인적인 공부를 하거나 개인적인 시간을 가질 수 있습니다. 2. 많은 회사에 면접을 볼 수 있다. 재직 중에 면접을 보려고 하면 눈치도 보이고 많은 회사에 면접을 볼 수가 없습니다. 퇴사를 하고 이직 준비를 하면 많은 회사에 면접을 볼 수 있습니다. 이런 장점들이 있네요 퇴사 후 이직 vs 이직 후 퇴사 여러분..

• format_list_bulleted 일상/이야기
• · 2023. 1. 17.
• textsms

자바스크립트 - element 찾기 querySelector, querySelctorAll

자바스크립트에서 element를 찾을 때,가장 많이 사용하는 함수들 입니다. querySelector와 querySelectorAll 입니다. querySelector(selector) selector를 선택자로 전달해서 일치하는 하나의 element를 return 합니다. 없으면 null을 반환합니다. document.querySelector('p'); querySelectorAll(selector) selector와 일치하는 모든 element의 배열을 반환 합니다. document.querySelectorAll('p'); 아래 예제에서 확인 할 수 있습니다. See the Pen Untitled by Young Jun Koo (@YoungJu-Ku) on CodePen.

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 14.
• textsms

React - 버튼 클릭 이벤트 등록하기

리액트 컴포넌트에 이벤트 등록을 하는 방법에 대하여 알아보겠습니다. 일반적인 HTML에서 이벤트 등록하는 방법과 비슷하지만 몇가지 차이가 있습니다. 리액트에서는 camelCase를 사용합니다. onClick, onKeyup 이렇게 말이죠 이벤트 위와 같이 이벤트를 등록할 수 있습니다. function clickHandler(e) { alert('click') } 이렇게 clickHandler에 e 파라미터가 넘어오는데 e 매개변수로 preventDefault()와 stopPropagation() 을 사용할 수 있습니다. preventDefault는 이벤트의 기본 동작을 방지하고, stopPropagation은 이벤트가 상위 컴포넌트로 버블링 되는 것을 방지 할 수 있습니다 See the Pen Untit..

• format_list_bulleted Develop/React
• · 2023. 1. 14.
• textsms