전체 글

[DB] SQL과 NoSQL / 관계형 데이터베이스 vs 비관계형 데이터베이스

SQL이란? SQL = Structured Query Language SQL은 '구조적인 쿼리 언어'라는 뜻으로, 관계형 데이터베이스(RDBMS)를 제어하기 위해 사용하는 프로그래밍 언어이다. SQL은 데이터베이스가 아닌 언어를 지칭하지만, 통상적으로 관계형 데이터베이스까지 포함하여 SQL이라 부른다. 특징 - 엄격한 스키마(=structure)에 따라 데이터가 저장된다. - 관계를 통해 연결된 테이블에 데이터가 저장된다. - 표(Table)와 행(Row)으로 데이터를 구분한다. - MySQL, Oracle, postreSQL, msSQL 등이 많이 쓰인다. NoSQL이란? NoSQL = Not Only Structured Query Language SQL과 반대되는 접근방식이라 NoSQL이라 해석하기도..

보건교사 안은영 - 정세랑

- 주의 - 보건교사 안은영에 대한 직접적인 스포일러는 최대한 거른다고 걸렀다. 하지만 그럼에도 불구하고 간접적인 스포일러가 있을 수 있음. 스포일러에 예민하다면 주의. (소설/드라마 둘 다) 사실 난 새로운 한국 픽션을 읽은 지 정말 오래되었다. 보건교사 안은영도 계속 관심이 많았던 소설인데, 한국 소설은 늘 시작만 하고 완독에 실패했던 아픈 기억 탓에 손이 안 갔다. 그러다가 2020년에 넷플릭스 오리지널로 보.교.안 드라마가 제작되었다. https://youtu.be/wdKX_rhiAEU 솔직히 말하자면 드라마 자체는 기대 이하였다. 예고편을 보고 너무 큰 기대를 품었기 때문일까? 전체적인 비주얼과 캐릭터 하나하나는 정말 매력적이었지만, 서사 전개가 급박한데다 설정에 대한 설명이 충분하지 않아서 전..

[Javascript] 알파벳 대소문자 변환 - toUpperCase() / toLowerCare()

toUpperCase() toUpperCase는 문자열을 대문자로 변환해 반환한다. const sentence = 'The quick brown fox jumps over the lazy dog.'; console.log(sentence.toUpperCase()); // expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG." toLowerCase() toLowerCase는 문자열을 소문자로 변환해 반환한다. const sentence = 'The quick brown fox jumps over the lazy dog.'; console.log(sentence.toLowerCase()); // expected output: "the quick br..

[Javascript] forEach() 반복문

forEach() arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) forEach 반복문의 기본 형태는 위와 같다. currentvalue를 필수로 하는 콜백함수를 받는다. 이 때 index까지는 자주 사용하지만 세번째 매개변수까지 사용하는 경우는 드물다. (세번째 매개변수인 array의 경우 forEach를 호출한 배열을 반환한다.) 단, map과는 다르게 forEach()는 그 결과값을 반환하지 않는다. 또한 for문과는 다르게 break, continue 등으로 반복을 제어할 수 없다. 즉, 중간에 반복을 종료할 수 없다는 뜻. 사용 예시 const arr = [1, 2, 3, 4] arr.forEach((el, i) => { con..

[Javascript] sort() - 정렬 (오름차순/내림차순/문자열 등등)

sort() sort()는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 이 때 매개변수를 활용해 어떻게 정렬할 것인지 순서를 지정해줄 수 있다. // 기본 형태 arr.sort([compareFunction]) // compareFunction은 정렬 순서를 정의하는 함수 정렬하는 방법 compareFunction(a, b)가 생략된 경우, 배열들이 유니코드 값 순서대로 정렬된다. compareFunction(a, b)가 반환하는 값이 0보다 작은 경우에는 a가 b보다 먼저 온다. compareFunction(a, b)가 반환하는 값이 0보다 큰 경우에는 b가 a보다 먼저 온다. compareFunction(a, b)가 0을 반환할 경우 정렬 순서를 변경하지 않는다. compareFunc..

[Javascript] toString() - 문자열로 변환 +α

toString() obj.toString() // 기본 형태 객체를 문자열로 변환한다. String(obj)와 동일한 기능을 하지만, 주요한 차이가 몇 가지 있다. 객체에 변환할 숫자가 직접 들어가 있을 경우에는 오류가 발생한다. 해당 숫자가 상수 혹은 변수값에 할당되어있을 경우에만 기능한다. (하단의 예시 1, 예시 2 참고) 변환 시 매개변수에 2부터 36까지의 숫자가 들어가있을 경우, 10진수를 해당 진수로 변환할 수 있다. (예시 3) // 예시 1 1234.toString() // 오류 // 예시 2 const aaa = 1234 aaa.toString() // "1234" // 예시 3 aaa.toString(2) // "10011010010" aaa.toString(16) // "4d2" ..

[Javascript] 스코프와 스코프 체인 / Scope & Scope chain

스코프란? 특정 변수들이 선언되어있는 공간이나 환경. 각각의 변수, 매개변수, 함수 등이 유효한 영역을 뜻한다. 스코프에는 전역 스코프(Global scope), 지역 스코프(Local scope)가 있다. 전역 스코프 : 가장 최상위 스코프로, 해당 문서 내의 어디서든지 참조가 가능하다. 지역 스코프 : 해당 지역에서만 접근할 수 있는 스코프. 대표적인 예시로 함수 스코프(function scope)와 블록 스코프(block scope)가 있다. 함수 스코프 : 함수 몸체 내부에서만 유효한 스코프로, 자신이 선언된 스코프를 포함한 하위 스코프에서만 참조가 가능하다. 블록 스코프 : javascript 내에서 중괄호로 둘러싸인 영역을 블록이라고 한다. 이 블록 내에서만 유효한 스코프로, 선언된 스코프를 ..

[Javascript] 이벤트 버블링 / Event-Bubbling

이벤트 버블링이란? 특정 화면에서 JS의 이벤트가 발생했을 때 자식 요소에서 부모 요소에게로 이벤트가 전파되는 현상. 반대되는 현상으로는 이벤트 캡쳐링이 있다. 예시 P 위와 같은 코드가 있다고 가정했을 때, p를 클릭하면 p > div > form 순으로 경고창이 뜬다. p > div > form 순으로 클릭 이벤트가 전파되기에 발생하는 현상. 이러한 것을 이벤트 버블링이라고 한다. 이벤트 버블링 막기 이벤트 버블링은 많은 경우 유용하지만, 버블링을 막아야하는 상황이 종종 있다. 예를 들면 댓글 삭제를 구현하기 위해 특정 div의 id를 뽑아와야 하는 경우. event.target 의 id를 받아와서 API 요청을 보내야만 댓글 삭제가 이루어지는데, id가 들어가있지 않은 부모 요소로 이벤트가 전파되면..

[Git] Branch 브랜치

Branch란? Branch의 사전적 정의 : 나뭇가지 여러 개발자들이 한 프로젝트를 작업할 때, 동시에 다양한 작업을 할 수 있게 만들어주는 기능이다. 브랜치를 나누면 각자의 독립적인 작업 영역 안에서 마음대로 소스코드를 변경할 수 있다. 분리된 브랜치 안에서 변경된 내용은 나중에 원래의 버전과 비교 후 병합해서 하나의 새로운 버전으로 만들어 낼 수 있다. (이러한 병합 작업을 Merge라고 한다.) Branch 관련 Git 명령어 git checkout [이동할 브랜치명] : 해당 브랜치로 이동 git branch : 브랜치 목록 및 현재 위치 확인 기타 참고 사항 1. 참고 사이트 : https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html 누구나 쉽게..

[React] 자주 쓰는 React 기반 라이브러리, 프레임워크 모음

1. ant-design 알리바바에서 만든 UI 프레임워크. Button, Grid, Layout, Form 등 다양한 컴포넌트를 지원한다. 아이콘같은 디자인 요소도 지원하지만, 상대적으로 볼륨은 좀 작은 듯. https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design 2. material-ui 리액트 기반의 UI 프레임워크. Antd와 함께 현재 가장 많이 쓰이고 있는 리액트 UI 프레임워크 중 하나이다. https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, a..