윤생's

자바스크립트 실행 환경 1. 브라우저 환경HTML, CSS, 자바스크립트를 실행하여 웹페이지를 브라우저 화면에 렌더링 → DOM API 제공 (HTML 요소를 선택하거나 조작해야 하기 때문)→ 파일 시스템 제공X (Web API FileReader를 사용하여 지정한 파일을 읽어 들이는 것은 가능)❗️브라우저를 통해 다운로드되어 실행되는 자바스크립트가 사용자 컴ㅍ터의 로컬 파일을 삭제하거나 수정하고 생성할 수 있으면 악성 코드에 그대로 노출된 것과 마찬가지이기 때문에 파일 시스템이 없다.ECMAScript와 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 같은 클..

모든 브라우저의 표준 프로그래밍 언어 1995년, 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정했고, 그것이 브랜던 아이크가 개발한 자바스크립트이다. 1996년 3월, 넷스케이프 커뮤니케이션즈의 웹 부라우저인 넷스케이프 내비게이터2에 탑재되었고 모카로 명명됬다. 1996년 8월, 마이크로소프트에서 자바스크립트 파생 버전인 JScript를 출시하고 인터넷 익스플로어 3.0에 탑재했다. 하지만 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작하여 JScript와 자바스크립트가 표준화되지 못하고 적당..

프로그래밍이란 일종의 컴퓨터와의 커뮤니케이션 컴퓨터는 0과 1밖에 알지 못한다. 따라서 우리는 컴퓨터가 실행할 수 있을 정도로 정확하고 상세한 요구사항을 설명해야 하는 작업이 필요하다. 이 작업이 컴퓨터와의 커뮤니케이션, 즉 프로그래밍이다. 프로그래밍을 하기 위해서는 컴퓨터의 입장에서 문제를 바라봐야 한다. 이 문제를 바라볼 때 필요한 사고가 Computational Thinking(컴퓨팅 사고)이다. 예를 들어, 우리는 "듣다" 또는 "크다"와 "작다"라는 행동이나 상대적인 비교를 당연하게 받아들인다. 하지만 컴퓨터는 받아들이지 못하여 "듣다" 또는 "크다"와 "작다"를 정확한 수치로 표현하고 알려줘야 한다. 다음 사진은 "걷다"라는 것을 프로그래밍 할 때 설계한 것이다. 즉, "걷다", "듣다", "..

React 상태관리 라이브러리상태(State) React에서 상태(State)는 컴포넌트 안에서 동적으로 변할 수 있는 데이터를 의미한다. 변수, 객체, 함수 등 이런 것들이 상태가 된다.예를 들어, 함수 같은 경우에는 사용자가 버튼을 클릭할 때마다 하나의 변수인 숫자를 증가시키는 기능이 담겨있는 함수가 있다면 그 함수는 상태가 된다. 상태관리 이유 작은 애플리케이션에서는 컴포넌트 내부에서 상태를 관리하는 것은 간단하다. 대표적으로 useState가 있다. 하지만 애플리케이션이 커지고 여러 컴포넌트가 상호작용할 때, 상태 관리는 점점 복잡해집니다. 모든 컴포넌트에 useState를 사용할 수도 없고 props로 전달하는 것에도 한계가 있기 때문이다. 예를 들어, 사용자 정보에 대한 데이터가 담겨있는 상태..

😉   타입스크립트타입스크립트는 왜 필요한가자바스크립트 코드가 너무 지저분하다코드의 스케일이 커지면서 코드 관리가 되지 않는다타입스크립트를 사용하면 좋은 점자바스크립트 기반보다 버그를 줄일 수 있다유지보수가 쉽다강력한 높은 퀄리티의 코드를 생산할 수 있다타입스크립트 = 자바스크립트 + 타입체크타입스크립트 환경에 자바스크립트를 코딩하면 동작함자바스크립트 환경에 타입스크립트를 코딩하면 동작안함 npm i -g typescript -> node.js 설치 후tsc 명령어 사용 가능tsc app.tstsc --init -> tsconfig.jsontsc -w app.ts (w : watch) 타입 추론(Type Inference) 기능타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다..

😄   연산자정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는 것ex. 학생들 과목당 성적 데이터는 그 자체로 의미가 없음총점 및 평균을 데이터화 해야 그 의미가 있음산술 연산자사칙 연산이 기본덧셈(+)뺄셈(-)곱셈(*)나눗셈(/)나머지(%)대입 연산자오른쪽에 있는 값을 왼쪽에 대입하는 역할대입 연산자와 산술 연산자를 혼용해서 사용하기도 함대입(=)덧셈 후 대입(+=)뺄셈 후 대입(-=)곱셈 후 대입(*=)나눗셈 후 대입(/=)나머지 대입(%=)증감 연산자증가 연산자와 감소 연산자의 줄임말a값 증가 후 연산(++a)연산 후 a값 증가(a++)a값 감소 후 연산(--a)연산 후 a값 감소(a--)관계 연산자두 개의 피연산자로 관계를 따지는 연산자로, 같은지 다른지 어느쪽이 큰지 작은..

🔒   예외 처리if / else → try / catch*JWT*1) TokenExpiredError: 유효기간이 지난 토큰 = 만료된 토큰2) JsonWebTokenError: 문제 있는 토큰try...catch수많은 (개발자가 예상하지 못한) 에러(실수, 사용자 입력을 잘못 한 것, DB가 응답을 잘못 ...)를 처리하는 문법정상적으로 실행되는 코드 A;if (A에서 발생한 실수1) {} else if (A에서 발생한 실수2) {} ...실수1, 실수2 ... 비슷한 분류들끼리 묶어서 누군가.. 따로 관리를 해주면 좋겠다..try{// A코드 실행} catch (err) {// 예외 처리}에러 객체자바스크립트가 고대 개발자분들의 노고를 보고, "내장" 에러 객체를 만들어뒀어요.JWT라는 ..

🧨 좋아요 개수 세서 books 테이블에 컬럼 추가해서 출력해주기 도서 테이블 전체 조회 - SELECT * FROM books; - SELECT 컬럼명1, 컬럼명2, ... FROM 테이블명; 도서 테이블 전체 조회 + 컬럼 1개 추가하기 SELECT*, 값 AS 새로 추가할 컬럼명 FROM 테이블명; SELECT*, (각 행마다 likes 테이블에 liked_book_id로 가지고 있는 행 수) AS likes FROM books; SELECT*, (SELECT count(*) FROM likes WHERE books.id=liked_book_id) AS likes FROM books; 🪭 서브(sub) 쿼리 : 쿼리 안에 쿼리 🪭 count() : 행 개수 🪭 AS : 컬럼 별칭 🧰 방금 INSER..