2022.11.14 - 22.11.25

프로젝트 명:

술담화

술담화란? 전국 각지의 전통주를 구독하여 배송하는 웹 서비스이다.

프로젝트 팀 구성 :

Front-end 4명 Back-end 3명

사용 스택 :

React.Js HTML&CSS

Git & GitHub Trello Notion

프로젝트에서 내가 맡은 부분

나는 이번 프로젝트에서 제품 리스트 페이지를 맡았다.

제품 리스트 페이지는 수익을 창출해 내는 가장 첫 번째 부분이다.

고객에게 가장 인기 있는 제품을 보여주거나,

기업 입장에서 가장 자신 있는 제품을 보여주는 페이지라고 생각한다.

이렇게 중대한 부분을 맡게 되어 기뻤다.

부담의 크기가 클수록 더 자극이 되었던 것 같다.

프로젝트에서 내가 구현한 부분

//구현 부분 동영상 첨부 할것

제품 리스트 & 동적 라우팅

우선 React를 활용하여 제품을 Component 화 시켰다.

Back-end 팀원들로부터 제공받은 API를 통하여 리스트 페이지에 제품들의 정보가 페이지에 구현될 수 있었다.

또한 구현된 제품을 선택할 경우 동적으로 라우팅 시켜 선택된 제품의 상세페이지로 이동될 수 있도록 useParams hook을 사용하는 법을 익혔다.

현업에서도 굉장히 많이 사용되는 기능일 것이라 생각된다.

필터 기능 & useSearchParams

현시점의 지구는 개인의 취향이 가장 우선시되는 시대라고 생각한다.

그래서 고객 각각의 취향에 맞는 제품을 선택할 수 있도록 제품 filtering 기능을 추가적으로 구현하였다.

고객이 좋아하는 것들만 필터링하여 나타내주는 기능은 분명 결제로 이루어질 가능성이 높다고 생각된다.

이러한 부분을 구현하는 데 있어서 기능적으로 많은 것을 배웠다.

제품 리스트에서 선택된 필터 내용을 useSearchParams hook을 통하여 Data Server로 보내주고 선택된 내용에 부합한 정보를 Query String으로 전달받아 화면에 표출해 주는 방식이다.

분명 쉬운 내용이 아니었다.

어려운 내용일수록 천천히 하나하나 짚어가며 이해하면 된다.

로직을 이해하고 머릿속으로 그려보는 것이 정말 중요하다는 것을 느꼈다.

(사용한 코드)

프로젝트를 통하여 내가 얻은 것들

처음 다른 개발자들과 팀을 이루어서 프로젝트를 진행하였다.

타인은 내가 아니기에 팀원들을 이해하는데 조심스러웠던 부분이 많았다.

특히 2주 차에는 누적된 피로가 스트레스로 이어지는 상황을 자주 접하게 되었다.

그러나 팀원 모두가 매 순간 이성적으로 프로젝트에 임하여 큰 마찰 없이 잘 지나갔다.

프로젝트 동안 팀원 간 소통하는 방식을 배우게 되었다.

분명 유익한 시간이었다.

인스타그램 클론 코딩 중 핵심요소 2가지 중 하나는 바로 로그인 기능이다.

오늘은 React를 사용하여 현재 클론 코딩 중인 인스타그램 페이지에서 로그인 버튼에 기능을 부여하고 활성화시키는 작업을 해볼까 한다.

우선 주요 키워드부터 알아보자.

useState, indexOf, 삼항연산자, e, disabled, Link

머릿속으로 로직 그려보기.

로그인 버튼이 활성화가 된다는 것 :

** -> 아이디 값 & 비밀번호 값을 입력받는다. -> input으로 값을 입력받는다. -> 입력받을 값(ID&PW)은 유저마다 다르다.(값이 유동적이다.) -> 변수(유동적인 값)를 담아주는 그릇(함수)이 필요하다. -> 함수(그릇)에 담긴 내용(값)을 유동적으로 사용하고 관리할 수 있는 직원 = 함수(useState)를 만들어준다. -> 직원은 전달받은 유동적인 값을 지정된 특정 값과 비교하여 일치 여부를 판단한다. **

코드 구성

HTML

// input 아이디 값
<input
    className="signUpBox"
    type="text"
    placeholder="전화번호,사용자 이름 또는 이메일"
    onChange={idValue}
/>

// input 비밀번호 값
    <input
    className="signUpBox"
    type="password"
    placeholder="비밀번호"
    onChange={pwValue}
/>

우선 아이디와 비밀번호를 입력받을 input 창을 만들어준다.

그다음 onChange라는 이벤트를 사용하여 유동적인 값을 받아내는 그릇을 만들어준다.

*onChange 이벤트(Event)는 input 창에 값을 입력받았을 때 {}안의 함수가 작동하는 이벤트(Event)이다.

id 값을 입력받을 때는 idValue라는 함수가 실행되고 pw 값을 입력받을 때는 pwValue라는 함수가 실행된다.

REACT

// (2) input에 값을 입력받고 함수가 실행되면 값을 입력받게되는 함수 
const [id, getId] = useState('');
const [pw, getPw] = useState('');


// (1) input에 id값을 입력받으면 실행되는 함수
const idValue = (e) => {
getId(e.target.value);
};

// (1) input에 pw값을 입력받으면 실행되는 함수
const pwValue = (e) => {
getPw(e.target.value);
};

이제 리액트로 넘어와서 유동적인 값 을 담아내주자.

처음 리액트를 접하고 이 부분에서 이해하는데 조금 애를 먹었다.

작동원리나 과정을 한번 이해하면 그 후로는 외우지 않아도 머릿속에서 쉽게 그려지니 천천히 한번 짚어보자.

위에서부터 읽게 되면 순서가 다소 헷갈릴 수 있다.

순서는 (1) 번부터 (2) 번 순으로 진행된다.

const idValue = (e) => {
getId(e.target.value);
};

위 코드를 해석해 보면

** "cosnt idValue라는 함수는 이벤트(e)가 실행됐을 때, getId라는 변수가 '이벤트(e)를 타겟(target)으로 한 값(value)'을 전달받게 된다." **

로 해석할 수 있다.

그다음

// (2) input에 값을 입력받고 함수가 실행되면 값을 입력받게되는 함수 
const [id, getId] = useState('');
const [pw, getPw] = useState('');

위 useState('')는 함수이므로 이 함수를 호출하게 되면 반환 값으로 두 가지 값이 담긴 배열을 반환하게 된다.

이 두 가지 값이 담긴 배열 중,

** 첫 번째 "id"는 동적으로 관리할 상태 값을 나타내고, 두 번째 "getId"는 첫 번째 요소를 초기값에서 다른 값으로 변경해 주는 값이다. 즉, 두 번째 getId에 특정 값을 입력받게 되면 첫 번째 id 값이 입력받은 값으로 변경된다. **

이러한 이유로 (1) 번에서 이벤트(e)가 실행되면, 실행된 이벤트(e)를 타겟(target)으로 입력받은 값(value)을 두 번째 요소인 "getId"에 전달해 주고, 전달받은 getId의 값에 의하여 첫 번째 요소인 "id" 역시 getId와 동일한 값을 가지게 된다.

이는 곧 우리가 찾던 유저들의 각기 다른 id와 pw의 값을 담아줄 유동적인 자료가 된다. 이 자료들을 조합하고 구성하여 정보를 만들고 그 정보가 최초 입력받은 정보와 일치하게 되면 로그인 버튼에 불이 들어오게 하여 로그인을 허가하는 것이다.

자, 그렇다면 이제 로그인 버튼을 활성화시켜보자.

머리속으로 로직 그려보기.

로그인 버튼이 작동한다는 것 :

** -> 입력받은 값이 특정 값과 일치하다면 버튼에 불이 들어온다는 것.(if 문) -> 버튼에 불이 들어온다는 것은 정상적으로 작동한다는 뜻이고, 반대로 불이 들어오지 않아서 정상적으로 작동하지 않는 상황도 있다는 것.(두 가지 상황) -> 버튼에 불이 들어온다는 것은 색상이 변경된다는 것.(scss 부분) -> 버튼에 불이 들어와서 정상작동할 경우에 "클릭"이라는 특정 행동을 하면 페이지가 이동된다는 것.(Link) **

코드 구성

REACT

let loginIdPw = id.indexOf('@') !== -1 && pw.length >= '5';

우선 앞서 변수로 불특정한 값을 입력받을 수 있는 id 와 pw를 이용하여 변수를 하나 만들어주자.

loginIdPw라는 변수는 "id로 입력받은 값에 @가 "포함되지 않는 경우가 아니다 = 포함한다" 그리고 pw의 길이(length)는 5보다 길거나 같다." 라는 조건을 갖고 있다.

이러한 조건을 활용하여 버튼 활성화 기능에 적용시켜보자.

HTML

//(3)
<Link to="mainPage">  
    <button
    className={loginIdPw ? 'rightValue' : 'wrongValue'}
    disabled={loginIdPw !== true}
    >
    로그인
    </button>
</Link>

우선 먼저 봐야할 부분은

className={loginIdPw ? 'rightValue' : 'wrongValue'}

이 부분이다.

앞서 변수로 선언하였던 loginIdPw를 삼 항 연산자로 계산하였다.

만약 loginIdPw의 조건이 참(true)일 경우에 버튼은 'rightValue'라는 className을 가지게 되고 거짓(false)일 경우 'wrongValue'라는 이름을 갖게 된다는 뜻이다.

scss

.rightValue {
    background-color: #0096f6;
}

.wrongValue {
    background-color: #c3dffd;
}

그리하여 만약 버튼이 className으로 rightValue라는 이름을 갖게 되면 배경 색상이 ** "background-color: #0096f6;" ** 이 색상으로 변경될 것이고 wrongValue라는 이름을 갖게 되면 ** "background-color: #c3dffd;" ** 이 색상(기존 색)을 나타내게 된다.

그다음으로 넘어가면,

disabled={loginIdPw !== true}

위에 보이는 코드는 button 태그에 disabled라는 속성을 적용시켜 만약 loginIdPW가 참(true)이 아닐 경우에 비활성화 시켜주는 장치이다.

이러한 장치를 만든 이유는 특정 로그인 정보에 대한 값을 정확히 입력받지 않았을 때, 버튼이 정상적으로 작동하여 페이지 이동하는 것을 막기 위하여 만들었다.

마지막으로 이 모든 조건이 성립되면 버튼이 활성화되고, 활성화된 버튼들 클릭하면 메인 페이지로 이동하게 된다.

-후기 로그인 끝. 2022.11.06 (일) 16:02 Dave Ahn

React의 탄생

현재의 웹 애플리케이션(Web Application) 은 지난 과거의 웹 페이지와 차원이 다르다.

오늘날 웹 애플리케이션의 가장 큰 발전은 단연 I&UX의 발전 이 아닐까 싶다.

지난 과거를 회상해 보자,

인터넷이 가장 뜨겁고 활발하게 활용되던 시기가 언제였던가?

나는 "버디버디 - 네이트온 & 싸이월드 - 카카오톡 - 페이스북 & 인스타그램" 모두 겪은 시대를 거쳐왔다.

분명 2000년대 초 버디버디 & 네이트온의 시절의 pc 통신 열기는 뜨거웠다.

그러던 2010년 페이스북의 등장은 국내외 시장을 크게 흔들었다.

나는 이때가 진정 인터넷의 세계화된 시절이라 생각한다.

국내를 비롯하여 세계 모든 곳에서 같은 웹 애플리케이션을 사용한다는 것은 굉장히 이례적인 일이었다.

이에 따라 2011년 페이스북에서 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위하여 React를 만들었다.

상호작용

과거의 웹 페이지는 단순한 UI 단순한 기능들을 갖추고 유저와 상호작용을 하였다.

예를 들어 검색어 회원정보 항목 클릭

그러나 현재의 웹 애플리케이션은 동적이고 다양한 UI를 가지며 카테고리 Hover 이벤트, 좋아요 장바구니 등등 유저와의 상호작용이 많아졌다. 이에 따라서 다루어야 할 데이터와 코드가 증가하게 되었다.

데이터와 코드의 증가에 따라 규모가 커지고 복잡해진 웹 애플리케이션을 개발하며 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프런트엔드 Framework 와 Library 가 등장하게 되었다.

Framework & Library

프레임워크는 정해진 틀(Frame) 속에서 수동적으로 작업해야 한다.

반면 라이브러리는 개발자의 필요에 따라 여러 가지 기능들을 찾고 그 기능들을 능동적으로 가져와서 사용할 수 있다.

프레임워크를 사용한다는 것은 틀이 짜인 작업환경에 들어가 작업을 하는 것이고, 라이브러리를 사용한다는 것은 만들어진 도구를 작업할 때 가져와서 사용한다는 것이다.

우리가 사용하는 React(리액트)는 라이브러리지만 프레임워크적인 특징 을 일부 가지고 있다.

왜 리액트인가?

리액트는 페이스북의 지속적인 관리와 함게 생태계가 화성화되어 있다.

따라서 사용자가 많고 커뮤니티가 발달해 있다.

커뮤니티가 활발하다는 뜻은 리액트를 사용하는 동안 발생하는 문제들에 대한 해결 방안을 쉽게 찾을 수 있다는 뜻이고,

이는 곧 개발자의 생산성을 향상시키는 중요한 결과물을 가져온다.

또한 리액트는 리액트 기반의 React Native 라는 기술을 통하여 웹뿐만 아니라 ios, 안드로이드 기반의 모바일 애플리케이션도 개발할 수 있다.

이러한 이유로 리액트의 사용자는 꾸준히 증가하고 있으며 프론트엔드에서 가장 많이 사용되고 있는 라이브러리이다.

2022.10.31 10:06 (월) Dave Ahn

오늘은 addEventListener(이벤트 리스너)라는 메서드에 대하여 알아보자.

이벤트 메서드는 자바 스크립트에서 굉장히 유용하게 사용된다.

콜백 함수

자바 스크립트는 위에서 아래로 읽히는데 이 addEventListener 메서드를 사용하게 되면 메서드 내에서 특정 동작이 발생하였을 때 addEventListener가 가지고 있는 함수가 실행된다.

이를 "콜백 함수"라고 부른다.

콜백 함수 :

1. 다른 함수의 인자로써 이용되는 함수.

2. 어떤 이벤트에 의해 호출되는 함수.

그렇다면 이벤트 리스너는 무엇을 의미하는가?

말 그대로 Event가 발생하기 전까지 Listen 하고 있는다는 뜻으로 볼 수 있다.

특정 "이벤트 = 행동" 발생하는 것을 "리슨 = 듣고 있는다."

즉, 행동을 기다리고 있다는 뜻이다.

그럼 왜 이벤트 리스너를 사용하는가?

자바스크립트는 동적인 프로그래밍 언어이다.

가령 우리가 HTML 와 CSS로 만든 웹 페이지를 만들었다면,

그 웹 페이지에 특정 행동이 발생하는 장치를 만들고 그 특정 행동에 발생하였을 때 대한 다른 기능이 발생하는 것을 구현하려면 이벤트 리스너를 사용해 주어야한다.

이벤트 종류

eventlistener 메서드가 가지고 있는 다양한 이벤트 동작이 있다.

대표적으로 click, keyup, mouseover 등등이 있다.

click 이벤트 경우 onclick과 비슷한 기능이다.

아래는 click 이벤트를 활용한 예제이다.

<!-- 스타일 -->
<style>
/* 주축 가운데 정렬 */
#btnBox {
    display: flex;
    justify-content: center;
}

/* 가로 X 세로 100px 박스 */
#clickBtn {
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>

<!-- 버튼 -->
<div id="btnBox">
<input type="button" id="clickBtn" value="click">
</div>

<!-- 스크립트 -->
<script>
let buttonClick = document.getElementById("clickBtn");

buttonClick.addEventListener("click",function(){
    alert("Hello!");
})
</script>

우선 보기 편하게 가로 X 세로 100px 크기의 버튼을 하나 만들어 주었다.

그다음 "clickBtn" 이라는 아이디를 가진 요소(=button)를 HTML 문서에서 가지고 와서 "buttonClick" 이라는 함수를 선언해 주었다.

이 변수 buttonClick에 "addEventListener" 라는 메서드를 적용시켜 "click" 이라는 특정 행동이 발생하였을 때 function(){alert("Hello!");} 라는 함수가 실행 되도록 장치를 만들어 놓은 것이다.

위에 보이는 gif 파일처럼 누를 때마다 "Hello!" 라는 알림창이 뜨는 것을 확인할 수 있다.

사용자의 어떠한 특정한 이벤트(행동)가 발생할 때 마다 함수가 호출되는 것이다.

-후기

이벤트 리스너는 정말 정말 정말 중요한 메서드이다. 모든 이벤트의 종류를 외울 필요는 없지만 필요한 순간에 바로바로 사용할 수 있도록 사용법은 꼭 익혀야 한다.

2022.10.27(목) 10:04 Dave Ahn

오늘은 css의 아주 중요한 기능인 Flex에 대하여 알아보려고 한다.

작성 개요

웹 페이지를 만들때 가장 많이 필요로 하는 기술이 무엇일까?

구글에 "css 가운데" 혹은 "css 중앙" 이라고만 입력해봐도 많은 사람들이 중앙 정렬과 가운데 정렬에 목말라있음을 알 수있다.

그렇다면 매번 이렇게 검색하여 입력할 것인가?

이런 유용한 기능은 검색보다는 직접 머리속에서 구상하여 구현하는것이 시간적으로도 유용할 것같아서 이렇게 작성을 해본다.

기본 HTML 세팅

우선 사용 전에 기본적인 세팅을 해주자

먼저 container 라는 박스를 만들고,

그 안에 작은 박스 3개를 만들어 주었다.

편리한 구별을 위하여 각자 색을 주었다.

사용법

자, 이제 컨테이너 안 미니 박스 3개를 정중앙으로 이동시켜보자.

주축 (x축:가로) 방향 나란히 정렬 = display: flex

우선 display: flex 를 사용하여 주축 방향으로 나란히 정렬을 해주자.

최초 div박스를 만들면 주축(주가 되는 축)은 왼쪽에서 오른쪽이 된다.

* 우리가 글씨를 작성할 때를 생각해보자. 왼쪽에서 오른쪽으로 글씨를 작성한다고 생각하면 이해하기 편하다.

박스가 세로에서 가로로 나란히 정렬 된 것을 확인 할 수 있다.

주축 (x축:가로) 방향 중앙(나란히) 정렬 = justify-content: center

교차축 (y축:세로) 방향 중앙 정렬 (세로 중앙 정렬) / align-items: center;

박스 content 정중앙 정렬

box 내부에 있는 글자들도 중앙 정렬이 필요하다면 똑같이 적용해주면 된다.

display: flex justfy-content: center; align-item: center;

를 사용하여 정렬 시켜주면 된다.

후기

-아주 유용한 기능이다. 디스플레이 관련 설정을 할 때 예컨데 프론트 엔드 개발자가 자주쓰는 기능 중 top5안에 들지 않을까 싶다. 머리로 이해하고 적용시켜야한다. 단순히 암기로는 한계가 있다. 이해하고 상상하고 그려보자. 이 기능은 분명 향후에 큰 도움이 될것이라 믿어 의심치 않는다.

2022.10.25(화) Dave Ahn

사건의 발단은 이렇다.

얼마 전 VS Code에서 md 파일을 만들어 글을 적고 있었는데 자꾸 버벅대면서 이상하게 입력되는 것이다.

나는 내가 오타를 낸 것인가 싶었는데 그게 아닌 입력되는 과정에서 뭔가 문제가 있는 것처럼 버벅대다가 오타가 발생하는 상황이 일어났다.

예를 들면

"사과"를 입력할 때 키보드로 ㅅ + ㅏ ㄱ+ㅗ+ㅏ 를 입력하여 "사과"라는 단어가 조합되어 출력되어야 하는데 "사 ㅗㅏ" 이런 식으로 한 글자 혹은 두 글자가 비어서 출력되는 것이다.

(그것도 굉장히 기분 나쁘게 버벅대면서)

그래서 구글링을 통하여 여러 가지 원인을 분석해 본 결과.

Canvas Render

캔버스 렌더링이라는 개념을 알게 되었고 이 렌더링 방식이 문제를 일으켰던 것이었다.

* *캔버스로 렌더링을 하는 과정에서 그래픽 카드에 부하 **를 주게 되고 이는 곧 입력에 오류를 일으키는 것이었다.

Solution

해결법은 간단하다.

우선 VS Code를 실행하고 "cmd + ," 버튼을 눌러서 설정 창을 키고 검색창에 "renderer" 라고 입력해 보자.

renderer를 입력하면 아마 아래 사진처럼 나올 것이다.

만약 첫 번째 체크 박스 칸에 체크가 되어있다면 클릭하여 체크를 해지해 주자.

이 체크박스를 선택해 주면 Renderer Auto 설정을 Dom으로 설정하게 되는 것이고, Dom으로 렌더링 하게 되면 Canvas로 렌더링 하여 그래픽 카드에 부하를 주지 않게 되어 더 이상 버벅대지 않게 된다.

-후기

짧지 않은 시간 동안 "대체 왜?"를 수십 번 되묻고, 프로그램 삭제와 설치를 반복하며 이유를 쫓았다.

문제의 원인을 찾게 되고 해결하게 되었을 때 그 희열은 정말 통쾌하다.

이제는 이런 문제가 발생하는 게 반가울 따름이다.

분명 나 말고 누군가도 충분히 겪을 수 있는 문제이다.

이렇게 포스팅을 함으로써 누군가에게 조금이라도 도움이 되기를 바라는 마음이다.

2022.10.23 (일) 16:19 Dave Ahn

문제

getData 함수를 구현해주세요!

• getData 함수는 세 개의 배열을 인자로 받습니다.

• salesArr : 날짜별 판매량 ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]]

• reviewArr : 날짜별 리뷰 수 ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]]

• likeArr : 날짜별 좋아요 수 ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]

• 다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.

• 리턴되는 객체는 아래와 같이 3개의 property를 가집니다.

• sumAmount : 총 판매량

• sumReview : 총 리뷰개수

• sumLike : 총 좋아요수

정답 :

saleArr = [["20190401", 34], ["20190402", 23], ["20190403", 29]]
reviewArr = [["20190328", 3], ["20190401", 0], ["20190403", 1]]
likeArr = [["20190328", 98], ["20190401", 102], ["20190403", 125]]

function getData(salesArr,reviewArr,likeArr){
  let obj ={};
    obj.sumAmount = salesArr[0][1] + salesArr[1][1] + salesArr[2][1];
    obj.sumReview = reviewArr[0][1] + reviewArr[1][1] + reviewArr[2][1];
    obj.sumLike = likeArr[0][1] + likeArr[1][1] + likeArr[2][1];
    return obj;
}

풀이 :

우선 getData라는 함수가 받은 세 개의 인자를 그대로 사용해주자

saleArr = [["20190401", 34], ["20190402", 23], ["20190403", 29]]
reviewArr = [["20190328", 3], ["20190401", 0], ["20190403", 1]]
likeArr = [["20190328", 98], ["20190401", 102], ["20190403", 125]]

그 다음 조건은 객체를 만들어서 리턴 해달라는 내용인데 이 리턴되는 객체는 "sumAmount/sumReview/sumLike 라는 property를 가진다."는 내용이 있다.

우선 빈 객체를 만들어주자

let obj = {} -> 빈 객체

그 다음 이 비어있는 객체 obj는 "sumAmount/sumReview/sumLike 라는 property를 가진다." 라고 하였으니 해당 객체에 property를 생성해주자.

객체이름.프로퍼티 이름 or 객체이름["프로퍼티이름"]

obj.sumAmount
obj.sumReview
obj.sumLike

이렇게 생성된 프로퍼티는 판매량 / 리뷰 개수 / 좋아요 수 를 입력받으니까

위에 있는 변수 saleArr / reviewArr / likeArr 에서 날짜를 제외한 정보만 받게되면 [0][1],[1][1],[2][1]...[n][1]번째 내용이다.

따라서 위의 변수는 3개의 배열이을 인자로 받았으니

obj.sumAmount = salesArr[0][1] + salesArr[1][1] + salesArr[2][1];
obj.sumReview = reviewArr[0][1] + reviewArr[1][1] + reviewArr[2][1];
obj.sumLike = likeArr[0][1] + likeArr[1][1] + likeArr[2][1];

를 입력해주면 된다.

그리고 마지막에 객체 obj를 리턴해주면 끝난다.

이 문제같은 경우 ex)에 작성된 내용을 가져와서 그대로 사용하여 풀었지만

만약에 ex) 정보를 사용하지 않고 풀어본다면 반복문을 사용하여 풀어야 한다.

또 다른 답 :

function getData(salesArr,reviewArr,likeArr){
  let amountNum = 0; 
  let reviewNum = 0;
  let likeNum = 0;

  for (i=0; i<salesArr.length; i++){
    amountNum += salesArr[i][1];
  }
  for (i=0; i<reviewArr.length; i++){
    reviewNum += reviewArr[i][1];
  }
  for (i=0; i<likeArr.length; i++){
    likeNum += likeArr[i][1];
  }
  let obj = {
    sumAmount: amountNum,
    sumReview: reviewNum,
    sumLike: likeNum
  };
  return obj
}

let testSaleArr = [["20190401", 34], ["20190402", 23], ["20190403", 29]]
let testReviewArr = [["20190328", 3], ["20190401", 0], ["20190403", 1]]
let testLikeArr = [["20190328", 98], ["20190401", 102], ["20190403", 125]]

let test = getData(testSaleArr,testReviewArr,testLikeArr)

console.log(test)
console.log(testSaleArr)
console.log(testReviewArr)
console.log(testLikeArr)

풀이 :

우선 amountNum / reviewNum / likeNum 이라는 변수를 선언해주고 이들의 값을 0으로 맞춰준다.

그 다음 반복문을 사용하여 주어진 배열(salesArr / reviewArr / likeArr)에 길이 만큼 증가시켜주자.

  for (i=0; i<salesArr.length; i++){
    amountNum += salesArr[i][1];
  }

-> i는 0부터 시작하고 i는 salesArr라는 배열의 길이보다 작고 i는 1씩 증가된다.

-> 지문에서 우리가 구해야 할 것은 "총 판매량 / 리뷰 개수 / 좋아요 수" 이니까 모든 값을 더하여 할당 받은 값을 구해야한다.

-> 앞서 선언해주었던 변수들을 (값=0) "+=" (더하기 할당 : 오른쪽 피연산자의 값을 변수에 더한 결과를 다시 변수에 할당) 을 사용하여 배열 salesArr의 [i][1] (i번째 판매량)번째 요소를 더하여 할당 해준다.

  for (i=0; i<reviewArr.length; i++){
    reviewNum += reviewArr[i][1];
  }
  for (i=0; i<likeArr.length; i++){
    likeNum += likeArr[i][1];
  }

이렇게 각 변수들은 배열의 길이만큼 반복된 [i]번째 판매량[1]을 더하여 할당받게되고.(+=)

그 후 obj라는 객체를 만들어주고 이 객체에 지문에서 요구하였던 key에

(Key) sumAmount : 총 판매량 = amountNum (Property) (Key) sumReview : 총 리뷰 개수 = reviewNum (Property) (Key) sumLike : 총 좋아요 수 = likeNum (Property)

위와 같은 property가 할당된다.

그 후 obj라는 객체를 리턴 해주면 끝난다.

확실한 마무리를 위하여 테스트를 해보자,

우선 테스트로 사용될 변수(testSaleArr / testReviewArr / testLikeArr)들을 선언하고 변수에대한 날짜별 데이터를 임의로 입력해주고,

test라는 변수를 선언한 뒤 그 값으로 앞서 선언했던 변수(testSaleArr/testReviewArr/testLikeArr)의 데이터를 getDeta 메서드를 사용하여 받아준 뒤

console.log로 테스트 하나 하나 찍어보면 정상적으로 출력되는것을 볼 수 있다.

{ sumAmount: 86, sumReview: 4, sumLike: 325 } -> 총 판매량 / 총 리뷰 수 / 총 좋아요 수

2022.10.23(일) 12:57 Dave Ahn

문제

nationalPensionRemainingYearCount 함수를 구현해주세요.

• 우리나라는 국민연금을 만 65세 부터 받을 수 있습니다.

• nationalPensionRemainingYearCount 는 age_string 이라는 input을 받습니다.

• age_string 은 나이 값인데 string형 값으로 되어 있습니다.

• 주어진 나이부터 몇년이 지나야 국민연금을 받을수 있는지 리턴 해주세요.

• 리턴 값은 다음과 같습니다.

"앞으로 20년 남으셨습니다"

• 예를 들어, age_string 값이 다음과 같다면:

"35"

리턴 값은 다음과 같아야 합니다.

"앞으로 30년 남으셨습니다"

정답 :

//Assignment - 다음 함수 안에 코드를 구현하세요

 function nationalPensionRemainingYearCount(age_string) {
   // Your code   
   let age = Number(age_string)
   let yourAge = 65-age
   if(age <= 65){
   return "앞으로 "+ yourAge + "년 남으셨습니다"
   } else {
     return "연금 지급 대상자입니다."
   }
 }

풀이 :

지문에 보면 "age_string"이라는 문구가 있다.

1. 문제에서 나이로 계산을 해야하기 때문에 우선 string형식으로 되어있는 age_string을 Number() 메서드를 사용하여 숫자형으로 바꿔주자.

let age = Number(age_string)

2. 그 다음 연금을 받는 나이를 기준으로 "입력받은 나이와 연금 지급 기준 나이"(65-입력받은 나이)의 차이를 구하자

let yourAge = 65-age

3. 이제 if 문을 사용하여 조건을 완성시켜보자
   
   만약 입력받은 나이(age)가 65세보다 작거나 같으면 앞으로 몇년이 남았는지(65-age = let yourAge)를 리턴해주고,
   
   입력받은 나이가 65세 보다 많다면 (else) "연금 지급 대상자입니다."를 리턴해주자.

* 마지막 else {return "연금 지급 대상자입니다."}는 입력 안해도 run tests에서 통과하지만 확실하게 써주는게 맞다고 생각해서 작성한 것임.

2022.10.22(토) 11:36 Dave Ahn

브라우저 저장소의 기능을 담당. 즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널.

프로그레시브 웹 앱 디버그

스토리지, DB 및 캐시 검사 및 관리

쿠키 검사 및 삭제

리소스 검사

2. Local Storage, Session Storage, Cookie 차이점은?

위 세가지의 차이점을 비교 하기전에 탄생의 기원을 알아볼 필요가 있다.

우선 HTML5 이전에는 모두 "Cookie"를 사용했다.

그러나 쿠키를 사용하다가 HTML5 이후에 "(Web Storage)웹 스토리지" 라는 기술이 탄생 한 것이고, 이 웹 스토리지라는 것이 "로컬 스토리지와 세션 스토리지"를 뜻하는 것이다.

(과제x) 그렇다면 왜 쿠키를 사용하다가 웹 스토리지를 만든것일까?

(사진 첨부 : 쿠키)

쿠키의 단점

Cookie라는 저장소를 사용하면서 겪는 여러 단점들을 보완하기 위하여 웹 스토리지를 만든것이다.

쿠키의 단점이 무엇이었을까?

(사진 첨부 : 쿠키의 흐름)

쿠키의 첫번째 단점 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.

세번째 단점과 이어짐. 두번째 부터 볼 것.

-

쿠키의 두번째 단점 : 용량이 작다. (약 4Kb)

쿠키 : 4kb까지만 저장이 가능하다. 지속 시간을 설정할 수 있다(만료 기간 설정 가능). 직접적이지 않는 데이터를 저장할 때 사용된다. 쿠키는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등, 다양한 방법으로 사용이 되지만 문자열만 저장할 수 있다는 제한 이 있다. 스토리지 개념 도입 이전 저장소로 사용이 되던 것이어서 여러 가지 성격이 섞여 있는 것으로 생각이 된다.

로컬&세션 스토리지 보완 : 약 5Mb (브라우저 마다 차이는 있음.)

-

(사진 첨부 : 세션 작동 원리)

쿠키의 세번째 단점 : 암호화 존재 x -> 사용자 정보 도난 위험.

세션 스토리지 보완 : 세션의 경우, Session ID를 식별자로 데이터를 사용자 브라우저의 쿠키가 아닌 접속한 서버의 DB에 정보를 저장한다. 클라이언트는 HTTP Session ID를 쿠키로 가지고 있다. 세션의 경우 메모리에 저장하기 때문에 브라우저가 종료되면 사라진다. 쿠키의 트래픽 문제와 보안상 취약점을 해결하기 위해 사용되었다.

위처럼 세션 스토리를 사용하게 되면서 더이상 서버에 불필요하게 데이터를 저장하지 않는다.

3. Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?

로컬 스토리지 : 저장하려는 데이터의 성격이 브라우저를 사용하면서 지속적으로 사용해야 하는 종류라면 로컬 스토리지에 저장해야 한다.

예 : 자동 로그인 정보

세션 스토리지 : 일회성 로그인 / 잠깐 동안 필요한 정보

예 : 입력 폼 정보 저장 (회원가입), 보안이 중요한 정보 (ex. 은행 사이트), 구체적인 유저 정보, 언어 선택

쿠키 : 다시 보지 않음 팝업 창, 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등

• 이처럼 쿠키를 완전 100% 사용하지 않는 것은 아니다. 필요에 따라서 적절하게 사용하지만 HTML5 이전 만큼 많이 사용하지 않는 것일 뿐이다.

4. Local Storage에 특정 데이터를 저장하고 가져오는 방법

로컬 스토리지는 window.localStorage에 위치한다.

키 밸류 저장소이기 때문에 키와 밸류를 순서대로 저장하면 된다.

값으로는 문자열,불린,숫자,null,undefined등을 저장 할 수 있지만, 모두 문자열로 변환된다.

입력 방법

​ (1) 로컬 스토리지

데이터 세팅 : localStorage.setItem("key", "value") 데이터 호출 : localStorage.getItem("key") 데이터 조회 : localStorage.setItem("key")

(2) 세션 스토리지

데이터 세팅 : sessionStorage.setItem("key", "value") 데이터 호출 : sessionStorage.getItem("key") 데이터 조회 : sessionStorage.setItem("key")

(3) 쿠키

데이터 세팅 : setcookie("key", "value", "지속시간 (초단위)") 데이터 호출 : document.cookie

이 외에도 removeItem, clear 등등의 공통 메소드 존재

예 : localStorage.removeItem("key") 로 입력하면 해당 키가 지워지고, localStorage.clear()로 입력하면 스토리지 전체가 비워진다.

문제

1. 아래 조건을 읽고 이행해주세요.

getElement 함수안에 arr 변수를 선언했습니다. arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요! 배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 return 할 수 있도록 해주세요.

// Assignment1 - 다음 함수 안에 코드를 구현하세요

function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];

}

답 :

return arr[1][1][0]

풀이 :

배열의 요소 순서의 시작은 0부터이다.

우리가 반환 하고자 하는 "array" 라는 문자열은 변수 arr의 배열 속 2번째 대괄호[4, ["array", 9], 2+3] 속에 두번째 요소인 작은 배열["array", 9] 속에 첫번째"array" 요소로서 자리하고 있다.

앞서 설명하였듯 배열의 요소 순서의 시작은 0부터 이다.

따라서 변수 arr의 배열 속 2번째 대괄호는 "1번째" (0번째는 3)가 될 것 이고,

2번째 대괄호 속 "두번째 요소" = "1번째" 속에 첫번째 "0번째" 에 위치한다

따라서 정답은

arr[1][1][0]

이 된다.

// Assignment2 - 다음 함수 안에 코드를 구현하세요
// ex) myArray = [3, 2, 5];
function addFirstAndLast(myArray) {

}

2. addFirstAndLast 함수를 작성해주세요.

addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다. addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요. 만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.

답 :

// Assignment2 - 다음 함수 안에 코드를 구현하세요
// ex) myArray = [3, 2, 5];
function addFirstAndLast(myArray) {
    if(myArray.length === 1){
        return myArray[0]
    } else if(myArray.length === 0){
        return 0
    } else {
        return myArray[0] + myArray[myArray.length -1]
    }
}

풀이 :

위 문제에 주어진 조건을 보면

1. myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴

2. 만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴

3. 요소가 없는 비어있는 array라면 0을 리턴

"만일, ...라면, ...일때" 이런것들은 if문을 이야기 하는 것이다.

그럼 위 답변에서 보면

2. "만일 myArray에 한 개의 요소만 있다면" = if(myArray.length === 1)

배열의 길이는 배열 뒤에 .length를 붙혀서 구할 수 있다. 따라서 myArray.length === 1 이라는 뜻은 배열 myArray에 한 개의 요소만 있다는 뜻이고 한 개의 요소만 있다면 return myArray[0] 이다.

배열 요소의 첫번째 순서는 "0부터" 이기 때문에 myArray의 첫번째 요소[0]를 반환해준다.

3. "요소가 없는 비어있는 array라면 0을 리턴"

= if (myArray === 0) { return 0 }

1. "myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴"

앞서 2번과 3번이 전제 조건을 작성 하였으니, 2번과 3번이 아닐경우 = else return myArray[0] + myArray[myArray.length - 1] 로 작성해준다. 첫번째 element는 [0]번째 이고, 마지만 element는 뒤에 "-1" 붙혀주면 구할 수 있기때문에, myArray[myArray -1] 가 된다.

-후기

항상 느끼는 것이지만 문제를 풀 때 지문이 주는 압박감이 상당하다.

쉽게 생각하자.

누구나 풀 수 있다.

특히 출제자가 제시한 순서대로 문제를 꼭 풀 필요는 없다.

결국 답이 맞게 나오고 정상적으로 작동 한다면 일단은 틀리지 않았다는 뜻이다.

2022.10.21 (금) 10:39 Dave Ahn

웹이란 무엇인가.

웹을 알아보기 전 우리는 인터넷(Internet) 을 먼저 알아볼 필요가 있다.

우리 인간의 삶 속에서 의식주 다음으로 가장 중요한 요소가 인터넷이 아닐까 생각해 본다.

인터넷은 통신 프로토콜을 이용하여 정보를 주고받는 컴퓨터 네트워크이다.

그럼 웹은 무엇인가?

웹은 인터넷 속에서 운용되는 하나의 서비스 이다.

간편한 이해를 돕기 위하여 예를 들면,

인터넷이 바다로 뒤덮인 지구라는 행성이면, 웹은 수면 위로 올라온 육지라고 생각한다.

이렇듯 웹은 인터넷의 부분집합이다.

이렇듯 웹은 인터넷의 부분집합이다.

World Wide Web : 정보창고

웹(WEB)의 본 명칭은 월드 와이드 웹(World Wide Web, WWW, W3) 이다.

보통 줄여서 웹이라고 부르며, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 창고 이다.

Web Application : 정보

웹 애플리케이션(web application) 은 웹이라는 정보창고 속에서 운용되는 하나의 소프트웨어 를 말한다.

앞서 예를 들었던 지구와 육지를 상상해 보자,

웹 애플리케이션은 웹이라는 육지 위에 존재하는 국가 라고 생각할 수 있다.

가령 아시아라는 대륙에는 한국, 일본, 중국 등등 각기 다른 국가들이 존재한다.

각 국가들은 비슷하면서도 다른 문화와 언어를 가지고 있듯이 웹 애플리케이션은 물질적으로 보이지는 않지만 국가별로 가지고 있는 정체성을 가지고 운용되는 하나의 소프트웨어 이다.

(국경을 두루고 존재하는 땅을 하드웨어쯤으로 보면 맞지 않을까 싶다.)

이렇듯 웹 애플리케이션은 다양한 기능을 구현하고 있는 클라이언트(서버로부터 정보를 제공받는 컴퓨터)로서 웹 브라우저를 사용하는 사람이 많기 때문에 큰 인기를 누리고 있다.

웹 애플리케이션의 가장 큰 장점 중 하나는 세상에 존재하는 수천만대의 PC에 소프트웨어를 설치하지 않아도 웹 애플리케이션을 유지 관리할 수 있다는 점이다.

Web Developer : 웹 개발자

보통 주변에서 웹 개발자라고 하는 사람들이 바로 앞서 설명했던 웹 애플리케이션을 개발하는 사람들을 뜻한다.

후기

앞에서 지구와 육지, 그리고 국가와 인종으로 예를 들었는데, 웹 개발자라는 직업은 신대륙의 개척자 혹은 관리자 즈음 되지 않을까 싶다. 새로운 땅을 발견하고 세상을 만들어나가는 멋진 직업이다.

가끔 그런 순간이 있다.

매번 다니던 길이 갑작스럽게 낯설게 느껴지는 그런 기분.

Parameter 와 Argument 라는 두 단어가 오늘 나에게 낯설게 기분을 느끼게 해줬다.

그래서 오늘은 자바 스크립트에서 굉장히 자주 불려지는 parameter(파라미터) 와 argument(아규먼트) 이 두 단어에 대해서 알아보려고 한다.

자, 우선 빠른 이해를 위하여 예제 코드를 살펴보자.

funtion test(a,b){
    return a+b
}

>>> test(10,20)
30

위 함수에서 a와b가 함수 test()의 "매개변수" 이기에 "파라미터(parameter)" 이고, 10과 20은 파라미터에 입력하는 "값" 이기에 "아규먼트(argument)" = "전달인자" = "인자" 라고 부른다.

정확한 사전적 정의를 풀어보자면

파라미터(parameter)는 함수와 메서드에 입력되는 "변수(Variable)"를 부르는 명칭이다.

아규먼트(argument)는 함수와 메서드의 입력된 "값(Value)" = "전달인자" = "인자" 를 부르는 명칭이다.

-후기 무언가 당연하게 여겨진다면 한번쯤 다시 되돌아볼 필요가 있다. 때때로 그것들은 내가 알고있던 모습과 다른 형태를 하고 있기 때문이다.

2022.10.19 (수) 23:53 DaveAhn

Display 속성

display는 css에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티이다.

display 속성은 요소를 어떻게 보여줄지를 결정한다.

none : 보이지 않음

요소를 렌더링하지 않도록 설정한다.

block : 블록 박스

div 태그, p태그, h태그#, li태그 등이 block에 해당된다.

block은 기본적으로 가로 영역을 모두 채우며, block요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보여진다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락이다.

inline :인라인 박스

span 태그 / b 태그 / i 태그 / a 태그 등이 inline에 해당된다.

block과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 bold italic 등등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다.

inline-block : block과 inline의 중간형태

block과 inline의 중간 형태라고 볼 수 있다. 줄 바꿈이 일어나지 않지만 크기를 지정 할 수 있다.

Position 속성

css에서 position속성은 문서 상에 요소를 배치할 최종 위치를 결정한다.

position 속성은 요소의 정확한 위치 지정을 위하여 top,left,bottom,right 속성과 함께 사용된다.

position:static

position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다.

속성이 static인 요소는 html 문서 상에서 원래 있어야 하는 위치에 배치된다.

속성이 static일때는 top,left,bottom,right 속성값은 무시된다.

position:relative

position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치 할 수 있게된다.

요소를 "원래 위치"를 기준으로 상대적(relative)으로 배치해준다.

요소의 위치 지정은 top,left,bottom,right 속성을 이용해서, 요소가 원래 위치에 있을때 상하좌우로부터 얼마나 떨어지게 할 지를 지정 할 수있다.

position:absolute

position 속성 값중 가장 난해한 속성값이다.

속성을 absolute로 지정하면

position:fixed

position 속성을 fixed로 설정하게 되면 브라우저 화면에서 고정되어 스크롤하더라도 화면의 특정 부분에 고정되어 움직이지 않는 UI를 구현 할 수있다.

이는 fixed속성 값의 배치 기준이 자신이나 부모 요소가 아닌 브라우저 전체 화면이기 때문이다.

-후기 css는 배울수록 더 어려워지는 것 같다. 2022.10.18 23:31 Dave Ahn

요즘 세상은 밥 한 끼를 먹을 때에도 구글링을 하거나 네이버에 검색을 한다.

그만큼 검색엔진은 우리 삶 속에 가장 중요하게 위치해있다.

검색엔진은 "로봇(Robot)" 이라는 프로그램을 이용해 매일 전 세계 웹사이트의 정보를 수집한다.

우리가 웹 사이트를 만들 때 시맨틱 태그(의미 있는 태그)를 사용해야 하는 이유가 바로 여기에 있다.

검색엔진 로봇에게 우리가 만드는 웹사이트에 대한 "정확한 의미가 담긴 정보" 를 제공해 주어야 한다.

Semantic

웹 사이트를 구축할 때 개발자는 스스로가 의도한 요소를 담고 있는 태그를 명확하게 사용하여야 한다.

이는 결과적으로 코드의 가독성을 높이고 유지 보수에 긍정적인 영향을 준다.

• nonsemantic 요소 : div, span 등이 있으며 content에 대한 어떠한 설명도 하지 않는다.

• semantic 요소 : form, img, table 등이 있으며 content에 대한 의미를 명확히 설명한다.

예를 들어

위 사진을 보면 동일한 내용의 사진처럼 보인다.

하지만

위 사진에서 보이는 것처럼 전혀 다른 내용의 태그를 사용하여 작성된 것이다.

첫 번째 Hello! 같은 경우 h1 태그로 작성되어 있기에 검색엔진은 Hello!를 웹 페이지에서 중요한 제목으로 인식한다.

그러나 두 번째 Hello! 같은 경우는 의미 없는 태그에 사이즈만 h1 태그와 동일한 크기로 키운 것이다.

이는 그 어떠한 명확한 의미를 포함하고 있지 않다는 뜻이다.

검색엔진은 정확한 의미의 태그를 사용하여 작성된 내용을 인덱스에 포함 시킬 확률이 높다.

검색엔진의 인덱스에 포함된다는 것은 결과적으로 검색엔진에서의 노출과 연관을 짓게 되고 검색엔진에서의 노출은 방문자를 증가시키며 이는 곧 경제적 혹은 사회적인 영향력으로 이어진다.

이렇게 의미 있는 태그들로 작성된 웹 페이지를 Semantic Web (시맨틱 웹)이라고 한다.

-후기

나는 웹 개발자가 단순히 클라이언트에 보여주는 것만을 위해 일하는 직업은 아니라고 생각한다.

브라우저와 검색엔진의 로봇 그리고 나를 포함한 다른 모두에게 정확한 의미를 담고 있는 웹사이트를 제공해 주는 것이야말로 웹 개발자가 가져야 할 소양이 아닐까 싶다.

따라서 웹 개발자라면 보다 정확한 정보를 입력하여 웹 사이트를 구축하는 데 의미를 두어야 한다고 생각한다.

2022.10.17 (월) 21:34 Dave Ahn

이젠 저 글귀만 봐도 멀미가 날 지경이다.

최근 VS Code와 Git을 연동시키는 과정 중에 VS Code의 소스 제어 부분에서 계속 등록된 소스 제어 공급자가 없다고 나왔다.

문제 해결을 위하여 구글링을 하며 여러 가지 방법을 찾아보고 시도해 봤지만 실패의 연속이었고 끝내 오늘 결국 해결해냈다.

원인은 간단하였다.

바로

위 사진에서 보이는 것처럼 "확장" 부분에서

"@builtin git"

이럴 수가.. 하하;;

위 사진처럼 "사용"에 체크를 하니 소스 제어 부분에 정상적으로 공급자가 나타나는것을 볼 수 있다.

-후기-

때때로 생각보다 원초적이고 기본적인 문제가 발목을 잡는다.

알고 보니 작은 문제였지만 요 며칠 답답함에 꽤나 속이 상했다.

누군가도 나처럼 헤매지 않기를 바라는 마음이다.

낯선 길을 헤매는것은 당연한 것이다.

그럴 수 있다.

하지만 다음번에는 절대 같은 실수를 하지 않을 것.

2022.10.09(일) 19:42 Dave Ahn

]]> https://velog.io/@dave_ahn93/JavaScript-Return%EB%AC%B8 https://velog.io/@dave_ahn93/JavaScript-Return%EB%AC%B8 Sat, 08 Oct 2022 16:36:27 GMT Return

return의 주요기능

1. 함수로부터 하나의 데이터를 반환한다.
2. 함수를 끝낸다.

return 키워드는 함수안에서만 사용이 가능하며 함수를 호출한 부분으로 데이터를 전달해주기 위해서 사용한다.

인수와 매개변수에서 함수를 호출하는 시점에 함수가 선언된것으로 데이터를 전달한다.

함수를 호출할때 함수로 데이터를 전달하는 방법이 인수와 매개변수를 활용한 것이었으면

함수 안에서 함수를 호출한 쪽으로 데이터를 전달하는 방법이 return 키워드를 이용한 방법인 return문이다.

함수 호출 -> 함수 선언 (인수,매개변수 활용) 함수 선언 -> 함수 호출 (return 키워드 이용)

1. 데이터를 반환.

function sum(number1,number2){
    return number1 + number2;
}

const sum_result_1 = sum(10, 20); //30
const sum_result_2 = sum(20, 30); //50

const sum_result = sum_result_1 + sum_result_2; //80

console.log("총 합은 " + sum_result + "입니다.");

위의 코드를 해석하면

함수 sum()은 인자 값으로 number1과 number2를 가지고 있으며, number1와 number2를 더하는 식을 함수 sum()에 반환(return) 한다.

따라서 const sum_result_1 = sum(10,20)는 함수 sum()에 인자 값으로 10과 20을 가진상태로 함수sum()을 호출하였으므로 앞서 함수 sum(number1,number2)이 호출될 때마다 return 뒤의 데이터(+)로 반환되기로 하였으니 sum(10+20)로 계산되어 sum_result_1의 값은 30으로 나온다.

sum_result_2역시 마찬가지고 인자 값으로 들어있는 20과 30이 더해져서 50이 나오는 것이다.

따라서 결과적으로 해당 코드를 실행해 보면

"총 합은 80입니다." 가 출력된다.

이처럼 return을 이용하여 함수안의 인자 값을 리턴으로 계산을 하고

2. 함수를 끝낸다.

function sayHi(){
    console.log("Hi")
    console.log("Hello")
    return;
    console.log("안녕") //리턴 뒤에서
}
sayHi() //함수 호출

//결과

//Hi
//Hello

단순히 return을 써두기만 하여도 함수를 끝낸다.

따라서 return뒤에있는 데이터 console.log("안녕")은 출력되지 않는다.

-후기 간단해보이지만 생각보다 복잡한 내용이다. 하지만 이런 간단한 내용들이 가끔 중요한 순간에 혼선을 주기 십상이다. 그러니 평소 기본적인 지식을 잘 다듬어야한다.

2022.10.09(일) 01:36 Dave Ahn

우선 자바 스크립트에서 날짜를 구하려면 Date 객체를 활용해야한다.

그 중 해당 달(月)을 구하려면

getMonth() 메서드를 사용해야한다.

자바스크립트로 코드를 작성하면

function setDate(){
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth()+1;
const day = today.getDate();

document.getElementById("date").innerHTML = year + "." + month + "." + day //2022.10.5
}

위 처럼 간단하게 표기했을때는 위처럼 작성하여 표기할 수있다.

그런데 의문이었던것은 왜 "getMonth()" 메소드만 뒤에 +1이 붙는것일까?

처음 날짜 표기 기능을 찾아보며 이해했던바로는 "컴퓨터는 0부터 시작되니까 1월은 0월이 되는건가?" 였지만 이건 틀린 생각인것 같다.

왜냐하면 위와같은 논리라면 일(日)을 나타내는 getDate()메서드 역시 "0일" 부터 시작해야되는것 아닌가?

이에 대한 간단한 답 :

getMonth()메서드는 Zero-base 로 설정되어있기 때문에 +1을 해줘야 정상적인 해당 달이 출력된다.

그럼 대체 왜 Zero-base로 설정되어있는거지?

만약 getFullYear()이나 getDate()역시 Zero base (0 base)로 설정되어있었다면 납득했을 것이다. 하지만 뭔가 이상하지 않은가?

다른것도 아니고 왜 꼭 getMonth()메서드만 Zero base (0 base)로 되어있는거지?

JavaScript와 JAVA

JavaScript의 날짜 표기는 Java JDK1.0(1995) 버전을 카피했다고 한다.

*JDK=Java Development Kit(자바 개발 키트)

Java에서 날짜와 시간을 다루려면 java.util.Date 클래스와 java.util.Calendar 클래스를 사용해야 하는데 JDK 8 (2014) 이전에 버전은 여러 가지 문제점이 있었다.

특히 본 문에서 다루고 있는 "Zero-base month" 문제가 JDK 8버전 이전까지 계속 사용되어온 것으로 보인다.

이에 불만을 품은 유저들은 _Joda-Time_와 같은 오픈소스 라이브러리를 만들어 사용했으나 결국 JDK 8 이후에 날짜와 시간 API가 개선되었다.

따라서 JavaScript의 날짜와 시간 표기 방식은 JDK 8 이전의 방식을 채택하고 있으므로 발생하는 작은 문제 라고 한다.

이에 JavaScript 창조자인 브렌던 아이크(Brendan Eich)는 트위터에

"I had ten days to demo. No time to invent our own date API or even fix Java's"

라고 답변하였다.

10일 만에 JavaScript 데모를 만들어낼 정도의 능력자이니 이정도 작은 실수는 살짝 눈 감아주는것이 좋을듯 싶다.

😉

결론

JavaScript가 채택한 날짜와 시간 표기법은 JDK 8 이전 버전에서 설정 되어있는 "Zero-base month" 기능의 영향으로 getMonth() 뒤에 +1을 추가로 입력해줘야하는 것이다.

-후기

"대체 왜?" 라는 질문은 언제나 가치있는 답을 해준다.

"그냥"이라는 말을 좋아하지 않기에 불편했고, 불편했기에 답을 찾으려 노력하고있다.

오늘은 조금 편하게 잠들수 있을듯.

2022.10.05 17:59

Dave Ahn

]]> https://velog.io/@dave_ahn93/JavaScript-Object-%EA%B0%9D%EC%B2%B4 https://velog.io/@dave_ahn93/JavaScript-Object-%EA%B0%9D%EC%B2%B4 Mon, 03 Oct 2022 09:25:45 GMT Object 객체

Object 는 객체이다.

객체는 여러종류의 데이터를 묶음으로 관리하는 데이터 타입이다

array는 대괄호로 시작한 반면 object는 중괄호로 시작하고 key들이있고 그 key 들에 해당하는 데이터가 있다.

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    }

myself라는 변수에 다음과 같은 객체가 할당되어있다.

name 이라는 "key" 에 Code Kim이라는 데이터가 매치되어있고 location이라는 key에는 또 다른 객체가 매치가 되어있다.

그 location 이라는 key안에 country 라는 key 안에 South Korea라는 데이터가 매치되어있고 city 라는 key 안에 Seoul이라는 데이터가 매치되어있다.

그다음은 age라는 key에는 30이라는 데이터가 매치되어있고 그리고 마지막으로 color라는 key에는 array (배열)이 데이터로 묶여있다.

Property 프로퍼티

array에 포함되어있던 데이터 하나하나는 "요소"라고 불렀다.

객체에 포함되어있는 데이터는 "property" 라고 부른다.

위 myself라는 변수에는 'name' , 'location' , 'age' , 'cat' 이 4개의 property(프로퍼티) 가 있는것이고

이 property는 key와 value로 이루어져있다. 'name' , 'location' , 'age' , 'cat' 객체에 프로퍼티가 가지고있는 key라고 부른다.

그리고 key에 하나하나 대응하는 데이터를 "value"라고 부른다.

let myself = {
    name: 'Dave Ahn'
    }

위의 변수 myself의 객체를 읽을때는

변수 myself의 객체 중 name 이라는 key의 value는 'Dave Ahn'

출력과 순서

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    }

console.log(myself)

위 변수 myself를 출력해보면

{name: 'Dave Ahn', location: {…}, age: 30, color: Array(2)}
age: 30color: (2) ['blue', 'red']
location: {country: 'South Kore', city: 'Seoul'}
name: "Dave Ahn"
[[Prototype]]: Object

위 처럼 표시된다.

각각의 프로퍼티가 출력되었는데, 객체에 넣은 순서대로 출력되지 않은것을 확인 할 수있다.

자바스크립트 내부적으로 object를 저장할때 property의 순서까지 같이 저장하지는 않는다.

그래서 객체에 넣은 순서대로 property가 출력되는게 아니다.

순서가 없다.

index가 없다.

0번째 1번째 이런 순서가 없어서 순서가 뒤죽박죽 나오게된다.

객체에 저장된 데이터에는 어떻게 접근을 하는가?

array같은 경우는 index번호로 접근이 가능했다.

(예 : myarray 0번째 index)

객체에서는 key를 이용해서 value에 접근하는 방식으로 object를 이용한다.

크게 두가지 방법이 있다.

1. Dot Notation

객체의 이름에다 . (점) 을 찍고 접근하고자 하는 key를 입력하면 value를 얻을 수 있다.

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    }

console.log(myself.name)

위 처럼 console.log(myself.name) 을 출력하면 key name 의 value인 Dave Ahn이 출력된다.

위 변수 myself의 key중 location은 객체 속의 객체이다.

location을 출력하면 어떻게 될까?

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    }

console.log(myself.location) //{country: 'South Kore', city: 'Seoul'}

{country: 'South Kore', city: 'Seoul'} 위처럼 객체 자체가 출력된다. (객체 속 Array도 마찬가지로 똑같이 출력된다.)

2. Bracket Notation

똑같은 객체가 있다고 가정했을때 괄호를 이용해서 접근하는 방법이다.

myself['name'] // Dave Ahn

위 처럼 객체 이름 뒤에 대괄호[]를 열어주고 접근하고자 하는 key를 따옴표'' 를 이용하여 접근하면 출력된다.

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    }

console.log(myself['name']) //Dave Ahn

위처럼 key에 접근하는 방법으로 변수에 할당 할 수도있다.

let myColor =  myself['color']
console.log(mycolor)

//출력 : ['blue', 'red']

Dot Notation과 Bracket Notation의 차이점

프로퍼티의 키에 변수가 포함되어있으면 Dot notation으로는 접근을 할 수가 없다.

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    }


let myKey = 'color'

console.log(myself['color']) //['blue', 'red']
console.log(myself[myKey]) //['blue', 'red']

위처럼 출력하면 똑같은 value가 두 번 출력된것이다.

color라는 텍스트가 myKey라는 변수에 담겨있기때문에 myKey를 출력하면 'color' 를 넣은것과 같아지기때문에 key 'color'의 value인 ['blue', 'red'] 가 출력된다.

이 방식은 Dot Notation으로 객체에 접근할때는 변수를 사용 할 수 없다.

console.log(myself.myKey) // undefined

위처럼 Dot Notaion으로 myKey라는 변수를 사용해서 접근하면 undefined가 나온다.

그렇다면 만약에 변수 myself의 객체 안에 myKey라는 Key자체가 있고 value값도 지정되어있으면 어떻게 될까?

아래 예제를 보자.

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    myKey: 'Hello Key'
    }


let myKey = 'color'

console.log(myself['color']) //['blue', 'red']
console.log(myself[myKey]) //['blue', 'red']

console.log(myself.myKey) //"Hello Key"

위처럼 Dot Notation은 변수를 사용 할 수없다. 그래서 " . " 뒤에 myKey라는 값이 왔을때 변수라고 생각하지 않고 object 안에 들어가있는 myKey라는 key를 찾아가서 그 key가 가르키고있는 value인 Hello Key를 출력하게 된다.

존재하지 않는 key

let myself = {
    name: 'Dave Ahn',
    location: {
        country: 'South Kore',
        city: 'Seoul'},
    age: 30,
    color: ['blue', 'red']
    myKey: 'Hello Key'
    }


let myKey = 'color'

console.log(myself['color']) //['blue', 'red']
console.log(myself[myKey]) //['blue', 'red']

console.log(myself.yourKey) //undefined

자바스크립트 object는 위처럼 존재하지 않는 키(yourKey)에 접근하면 undefined가 뜬다.

2022.10.03 18:23 Dave Ahn

오늘은 자기소개 웹 페이지에 자바스크립트 기능을 추가하는 작업을 하였다.

무슨 기능을 넣을까 고민이 많이 되었다.

왜냐하면 자기소개 웹에 많은 기능을 넣게되면 오히려 방문자에게 반감을 일으키지 않을까 생각이 들었다.

그래서 날짜와 현재시간 기능을 추가하려고한다.

(깔끔하고 심플하니까.)

우선 index.html 에 div 태그로 날짜와 시간을 넣어줄 공간을 만들어 주자

    <div id="date" class="date">date</div>
    <div id="time" class="time">time</div>

그다음 setClock이라는 함수를 선언하고 today라는 변수에 Date() 생성자를 할당해주고 이어서 year/month/day/hour/min/sec 순으로 변수를 선언해준다.

function setClock(){
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth()+1; 

/*
컴퓨터는 0부터 시작하기때문에 1월 부터 시작한 해당 월을 카운팅 하려면 +1해줘야한다.(그렇지 않으면 1월은 0월로 표시될 수 있다.)
*/


const day = today.getDate();
const hour = modifyNumber(today.getHours());
const min = modifyNumber(today.getMinutes());
const sec = modifyNumber(today.getSeconds());

그다음 변수중 시간 부분(hour/min/sec)은 modifyNumber()로 묶어주었다. 이유는 밑에서 설명 하겠다.

const formatDate = year+"."+(("00"+month.toString()).slice(-2))+"."+(("00"+day.toString()).slice(-2));

위의 변수 formatDate에 (("00"+month.toString()).slice(-2)) 와 (("00"+day.toString()).slice(-2))를 설정해주었다.

이렇게 설정해 놓으면 "10미만의 해당 월(month)" 과 "10미만의 해당 일(day)" 앞에 문자열 "00"이 붙게되고,

뒤에 slice(-2)를 통하여 뒤 두 글자만 가져오게 된다.

이는 9월 일경우 009로 표기되고 slice(-2)를 통하여 "09" 로 표시된다.

이렇게 표시 할 경우

2022."9".30

2022."09".30

document.getElementById("date").innerHTML = formatDate
document.getElementById("time").innerHTML = hour + ":" + min + ":" + sec;
}

function modifyNumber(time){
    if(parseInt(time)<10){
        return "0" + time;
    }
    else return time;
}

그 다음은 modifyNumber함수를 선언하고 input자리에 time을 넣어주므로써 앞서 선언한 변수 hour/min/sec 들이 time에 귀속하게 된다.

이 함수는 if문으로 parseInt()함수를 사용하여 time을 숫자로 변환했을때 값이 10보다 작으면 문자열 0과 숫자를 같이 출력되어 두자리 숫자인것처럼 보여지게 만드는 함수이다.

window.onload = function(){
    setClock();
    setInterval(setClock,1000); // 1초 간격으로 secClock 함수 실행.
}

마지막으로 매 1초마다 함수 setClock 이 작동될 수 있도록 setInterval함수안에 (setClock,1000ms)로 입력해주었다.

아래 보이는 사진처럼

빨간 네모안의 날짜와 시간이 나타난다.

심플하지만 꽤나 세련된 느낌이다.

일단 오늘은 이정도에서 만족하기로 하자.

-부록-

항상 느껴왔던것이지만 우리가 평소 당연하게 여겨온 것들 중 거의 대부분은 결코 당연하지 않은 것들이었다.

그 당연함의 이면에는 시간과 노력이 상당히 많이 녹아들었음을 다시금 깨닫는다.

(날짜와 시간에대한 디자인은 다음번 포스팅에 올리도록 하겠다.)

2022.09.30(금) 21:34 Dave Ahn

왜 변수인가?

우선 변수의 사전적 정의를 찾아보자. 변수(變數) : 변할 수 있는 수 그렇다면 왜 우리는 변수를 사용해야 할까?

1. 변수에 이름을 지정함으로써 '데이터 보관함'의 역할을 만들어준다.
2. 상황에 따라 바뀌는 값을 저장할때 필요하다.

어떻게 사용하는가?

변수를 선언할때는 주로 3가지 형식으로 선언한다. 1.var 2.let 3.const

우선 위 3가지 변수의 차이를 알아보자.

위 사진처럼 var 는 변수 color의 값을 다시 선언해도 출력하는데 문제가 없다. 그런데 var로 선언했던 변수 color를 let이나 const로 다시 선언하니까 color는 이미 선언되었다고 표시된다.

var 는 유연한 변수이다. 따라서 우리가 작성하는 코드량이 많을 경우 매번 var를 사용하면 매번 변수의 값이 변하게 되고 변수의 위치나 값을 제대로 파악하지 못하게 된다.

이는 _굉장히 불편한 상황을 만들어낼 것_이 분명하다.

그래서 ES6이후 let 과 const 라는 변수가 나왔다.

let 의 경우 변수에 재할당이 가능하지만const의 경우 재선언 & 재할당 모두 불가능하다.

*let 과 const 그리고 var의 심도깊은 차이점은 추후에 따로 다루도록 하겠다.