[데이터베이스] 데이터베이스 개념 총정리 [내부링크]

데이터베이스(Database, DB): 데이터를 저장해두는 곳, 즉 저장된 데이터의 집합 데이터베이스 관리 시스템(Database Management System, DBMS): 데이터베이스에 저장된 데이터가 일관되고 무결한 상태로 유지되도록 관리하는 시스템 데이터베이스 시스템(Database System) : 데이터베이스와 데이터베이스 관리 시스템을 이용해 조직에 필요한 정보를 제공해주는 전체 시스템. 스키마(Schema): 데이터베이스에 저장되는 데이터 구조와 제약 조건을 정의한 것 인스턴스(Instance): 정의된 스키마에 따라 데이터베이스에 실제로 저장된 값 (스키마는 한 번 정의되면 자주 변경되지 않지만, 인스턴스는 계속 변하는 특성) 사상(Mapping): 스키마 사이의 대응 관계 시스템 카탈..

파이썬 알고리즘 인터뷰 [내부링크]

https://github.com/YEOMJINSEOP/Algorithm GitHub - YEOMJINSEOP/Algorithm Contribute to YEOMJINSEOP/Algorithm development by creating an account on GitHub. github.com 해답 코드 정리 및 새로운 풀이 첨부

자바의 신 직접해봅시다 [내부링크]

https://github.com/YEOMJINSEOP/Java GitHub - YEOMJINSEOP/Java: godOfJava godOfJava. Contribute to YEOMJINSEOP/Java development by creating an account on GitHub. github.com 자바의 신 직접해봅시다 정리 및 실기 연습 코드 포함

What is Event Loop? [내부링크]

https://www.youtube.com/watch?v=8aGhZQkoFbQ&list=PLpjvGpURp3yjz_OYVkXdTq1TXX2P9SCbl&index=59&t=1416s

동적 타이핑(dynamic typing)이란? [내부링크]

변수의 메모리 공간을 확보하는 행위가 입력하는 시점이 아닌 실행하는 시점에 발생하는 것을 의미한다. 예를 들어, C나 Java는 int data = 10과 같이 data라는 변수가 정수형이라고 사전에 선언한다. 그에 비해 Python은 data = 10과 같은 형태로 선언한다. 즉, data라는 변수의 자료형이 정수(integer)인지 실수(float)인지를 프로그래머가 아닌 인터프리터가 스스로 판단하는 것이다. 그리고 그것을 실행 시점에 동적으로 판단하므로 python언어가 동적으로 자료형의 결정을 지원한다. 다른 언어들과 달리 python은 매우 유연한 언어로, 할당받는 메모리 공간도 저장되는 값의 크기에 따라 동적으로 다르게 할당받을 수 있다.

Terminal 명령어 [내부링크]

Shell command —— MANUAL man 명령어에 대한 설명. 어떤 옵션들을 함께 써야하는지 모르겠을 때 사용. clear 터미널을 깔끔하게 정리. —— NAVIGATING FILE SYSTEM pwd Print working directory 현재 내가 있는 곳의 전체 경로를 알 수 있다. ls (List) 현재 디렉토리에 있는 경로의 폴더, 경로들을 확인할 수 있다. ls + (file or directory name) ls -l 더 자세히. ls. -a. 숨겨진 파일, 경로까지 보고 싶다면. ls -la 두개 다 합쳐서 사용하고 싶다면. open . 터미널에 있는 현재 경로를 파일 탐색기에서 열고 싶을 때 사용. cd Change directory 현재 있는. 경로의 위치를 변경 cd + ..

[JavaScript] querySelectorAll()로 받아온 모든 Node 조작하기 [내부링크]

querySelectorAll() forEach() querySelectorAll()은 DOM API로, 매칭되는 웹페이지의 element를 모두 가져옵니다. tag name, atrritbutes, id, class 를 활용해 element를 가져올 수 있습니다. 여기서 중요한 사실은, querySelectorAll()는 nodeList를 return합니다. 그런데, NodeList는 array-like object입니다. 그렇기 때문에 forEach() method를 적용할 수 있어, 각각의 node들에 이벤트를 추가하거나 조작을 할 수 있습니다. 예) const trash_btns = document.querySelector('.trash') // class가 trash인 element를 모두 가져..

[JavaScript] Web form에 관하여 [내부링크]

Web Form 이란? Web Form은 사용자와 웹사이트( 또는 어플리케이션) 사이의 상호작용을 위한 메인 포인트 중 하나이다. Form은 user가 data를 입력할 수 있게 해주는데,(주로 input을 통해 받아온다) 1. 이 data들은 web server로 처리하거나 보관하기 위해 보내지거나 2. client-side에서 즉각적인 interface update를 위해 사용된다.(예를 들면, 특정 UI 요소를 보여주거나 가리거나 또는 새로운 아이템을 리스트에 새로 추가하거나 하는 등의 update) element 은 , 과 같은 container element이고, form들(input, button 등)을 contain 한다. 주로 사용되는 attribute로는 action, method가 있다..

[JavaScript] 기본적인 동작(default action)을 하지 않도록 해보자: preventDefault() [내부링크]

Event.preventDefault() 예를 들어, 체크 박스를 넣었다고 해보자. 체크박스를 클릭하면 v 체크 표시가 되는 등 기본적인 이벤트가 발생한다. 이러한 기본적인 동작을 막고 싶을 때 사용하는 것이 Event.preventDefault()이다. [MDN] The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. 출처: MDN https://developer.mozilla.org/en-US/docs/Web/API/Event..

[JavaScript] event.target과 event.currentTarget의 차이 [내부링크]

event.target은 이벤트가 Capturing 또는 Bubbling 될 때 target이 되는 모든 요소들을 가리킨다. 반면에, event.currentTarget은 실제로 이벤트가 발생한 타겟만 가리킨다. 관리자모드로 실행해 차이점을 확인해 볼 수 있고, 두 차이점을 통해 event를 handling함에 있어 조금 더 유연한 handling이 가능하다. ex) 당근 이미지를 클릭했을 때 지워지게 하고 싶다면 function removeCarrots(carrot){ carrot.addEventListener('click', (e) => { e.currentTarget.remove(); }) } const carrots = document.quesrySelecotrAll('.carrot') carro..

[JavaScript] 커서가 올라가 있는 상태를 만들자: focus() [내부링크]

HTMLElement.focus() ex) list를 enter 키를 눌러 추가한 후에, 다시 커서가 입력창으로 오도록 만들고 싶다면, 마지막에 input.focus() 를 추가한다,

[CSS] 애니메이션 효과를 주고 싶다면 : transition [내부링크]

버튼에 마우스를 올렸을 때 버튼의 크기가 커지고, 투명도가 바뀌는 애니메이션을 주고 싶다고 가정해보자. 변화하는 대상의 css property에 transition을 추가하고, transition이 될 대상, transition이 일어날 시간, 어떻게 transition이 될 것인지를 코드로 작성해 놓으면 된다. 예 1) .major__icon i { transition: all var(--animation-duration) ease-out; } .major__icon i:hover { color: var(--color-forestgreen); transform: scale(1.18); } 예 2) transition: all 300ms ease-in; transition: margin-right 2s ..

[CSS] 스크롤이 되게 하고 싶다면 : overflow-y [내부링크]

Shopping List를 만든다고 할 때, list가 추가되다보면 개수가 늘어나 더이상 정해진 height을 넘어간다. 이런 경우 overflow-y를 사용하지 않으면 전체적인 틀이 망가지는 경우가 발생할 수 있다( 예를 들어, list가 정해진 범위를 벗어나 튀어나오는 경우) 이럴 때 scroll이 될 수 있도록 만들어주는 CSS property가 존재하는데, 이는 바로 overflow-y이다. overflow-y: scroll; 또는 overflow-y: auto; 를 CSS property로 추가해주면, content를 감싸는 element의 bottom보다 밑으로 내려갈 때 scroll이 되게 할 수 있다. 사용 예) .main_items{ overflow-y: auto; } *추가적으로 lis..

[Javascript] 변수와 상수의 위치에 대하여(list를 여러개 반복적으로 만들고 싶다면) [내부링크]

JavaScirpt에서 querySelector를 이용해 HTML요소를 가져와 상수 또는 변수로 지정해 사용하게 된다. 무작정 script의 맨 윗 부분에 변수와 상수를 지정해 놓으면 원하는 방식으로 작동하지 못하는 경우를 발견하게 된다. 예를 들어, 버튼을 클릭할 때마다 새로운 list를 추가하는 Shopping List를 Javascript로 구현하려고 할 때, list를 querySelector를 이용해 변수 또는 상수로 선언하게 된다. 이 때, 함수 밖에서 general하게 선언하게 된다면, 버튼을 계속 클릭하더라고 하나의 list밖에 추가되지 않는 문제가 발생했다. 그런 경우에 변수와 상수의 위치를 (클릭 이벤트가 발생했을 때 실행되는)함수 안으로 위치시킨다면, 이벤트 실행할 때마다 반복적으로 ..

[Javascript] 자식 요소를 추가해보자 : append() [내부링크]

Element.append() [MDN] The Element.append() method inserts a set of Node objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes. **Node.appendchild()와 다른 점 1. append()는 DOMString을 추가할 수 있는 반면 appendChild는 오직 node objects만 추가할 수 있다. 2. append()는 return value가 없고, appendChild()는 추가된 node object를 returng한다. 3. append()는 여러개의 node나 s..

[JavaScript] 페이지 새로고침하기: location.reload() [내부링크]

location.reload() 이를 사용해 page를 reload할 수 있다. 사용 예) object.addEventListener('click', (e) => { location.reload(); })

[JavaScript] Window Scroll [내부링크]

scrollBy() ()안에 입력한 pixel 값 만큼 scroll한다. [MDN] window.scrollBy(x-coord, y-coord); *추가할 수 있는 option top, (숫자를 입력하면 pixel 값으로 처리되고, 해당 값만큼 y축으로 이동한다.) left, (top과 동일하지만, 해당 값만큼 x축으로 이동한다.) behavior (smooth - 부드럽게 scrolling | auto - 즉각적인 scrolling(default value) ex) window.scrollBy({ top: 100, left: 50, behavior: 'smooth' }); scrollTo(x, y) or scroll(x,y) ()안에 입력한 좌표로 scroll한다. [MDN] window.scrollT..

[JavaScript] Window Coordinates [내부링크]

Window에서 coordinates(좌표)를 구하는 방법 크게 두 가지로 나눌 수 있다. clientX(or Y) 와 pageX(or Y) 1) client 좌표 MouseEvent.clientX MouseEvent.clientY client 좌표는 현재 보여지는 viewport에서의 좌표를 나타낸다. 2) page 좌표 MouseEvent.pageX MouseEvent.pageY page 좌표는 전체 창을 기준으로(스크롤이 되는 경우에, 가장 위의 스크롤이 된 상태에서 왼쪽 위의 코너를 (0,0)을 기준으로 한 좌표)한다.

[JavaScript] DOM 요소를 조작해보자 [내부링크]

document.createElement() HTML element를 만들어주는 method. In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized element.setAttribute(name, value) Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with th..

[JavaScript] 시간 간격을 두고 함수를 실행하자 : setInterval() [내부링크]

setInterval(func(){}, 1000) setInterval()은 괄호() 안의 함수를 몇 ms마다 실행할지 정해주는 method이다. 사용 Tip) 1000ms를 지정한 경우에, 1초마다 특정 함수가 반복 실행되므로 카운트 다운을 실행하거나 시간 관련해 함수를 실행하고 싶을 때 유용하게 사용할 수 있다. 사용 예) 타이머 bar 만들기 let timeleft = 3; const countdown = setInterval(() => {progressBar.value = 3 - timeleft; timeleft -= 1; }, 1000);

[JavaScript, HTML] 소리를 넣어보자: <audio></audio> [내부링크]

방법1) HTML에 tag를 추가하고, src="file 위치 또는 file명"을 입력한다. [MDN] Attributes autoplay A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. controls If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and paus..

[JavaScript] 랜덤으로 수를 받아오기: Math.random() [내부링크]

Math.random() 은 0~1 사이의 수를 랜덤하게 받아온다. 사용 방법) *500, *700 등 곱셈을 통해 랜덤하게 받아올 수의 범위를 지정할 수 있다. 활용) position에서 top, left 등에 활용하면 random positioning을 할 수 있다. 사용 예) let object_top = Math.random(); object_top = object_top * 600; let object_left = Math.random(); object_left = object_left * 600; object.style.top = `${object_top}` + "px" object.style.left = `${object_left}` + "px"

[JavaScript] Element.getBoundingClientRect() [내부링크]

[MDN] element.getBoundingClientRect() method는 DOMRect object를 반환합니다. DOMRect object는 'element의 size'와 'viewport로부터의 상대적인 위치' 정보를 포함하고 있습니다. domRect = element.getBoundingClientRect();

[JavaScript] Window Size [내부링크]

[JavaScript] Element.innerHTML [내부링크]

특정 element 안에 html markup을 추가하고 싶을 때 사용하는 property. console에 element.innerHTML을 출력하면 element 안에 포함되어 있는 html 요소들을 볼 수 있다. innerHTML을 활용해 이 요소들을 수정하거나 추가할 수 있다. 사용 예) class가 "size"인 div안에 window size와 관련된 내용을 추가하고 싶을 때, innerHTML을 이용할 수 있다. const size = document.querySelector('.size'); size.innerHTML = `window size: ${window.screen.width}, ${window.screen.height} window outer: ${window.outerWidth..

Advantages of Functional Programming [내부링크]

Advantages of Functional Programming 1. Easier Control As functions of websites or application has been diversed, Enormous amount of complex codes are activated in programs. Type codes with Function units makes easier to control stream of programs. 2. Efficient for Refactoring Codes When we copy codes for each sources, we have to edit each codes again and again. If we use functions, we can solve..

함수형 프로그래밍의 장점 [내부링크]

함수형 프로그래밍의 장점 1. 최근에는 기능이 다양해짐에 따라 코드의 복잡도가 높아짐. 그만큼 웹사이트에서도 제공하는 기능, 체크해야하는 권한 등 기타 값들이 많다. 어마어마한 코드의 양으로 프로그램이 동작하고 있으므로 복잡한 프로그램을 일괄 작성하려고 하면 난해하기에 함수 단위로 생각하면 프로그램의 흐름을 조금 더 쉽게 풀어갈 수 있다. 2. 코드의 재사용성 어떤 스텝에 따른 기능을 각 소스마다 중복해서 넣어준다면 수정할 때 같은 코드를 일일이 변경해줘야하는 불편함. 함수를 활용하면 비효율성을 해결할 수 있다. 3. 코드의 안정성이 좋아지고 하나의 관심사에 집중할 수 있다. 각각 함수 단위로 담당자가 지정되어서 개발한다면 코드의 안정성이 좋아지고, (하나에만 집중하기 때문에), 수정하기가 용이하다. 출..