Web Programming

번들러(Bundler) 탄생 이전 초기의 웹 애플리케이션의 규모는 지금과 같이 크지 않았다. 그러나 기술의 발전으로 컴퓨터 성능이 좋아지고, 네트워크 속도도 빨라지면서 자연스럽게 웹 애플리케이션의 규모 또한 커져갔다. 이로 인해 파일의 양은 늘어났고, 그에 따라 다양한 문제를 야기했다. ​ 하나의 웹 서비스에서 수십 수백개의 자바스크립트 파일을 다루면서 하나 둘씩 문제들이 발생하기 시작했던 것! ​ 1) 중복된 이름으로 인한 에러 대규모의 웹 페이지의 경우 수백 수천개의 자바스크립트 파일이 있고, 여러 사람이 관리하다보니 함수명이나 변수명을 똑같이 짓는 일이 일어날 수 있다. 이때 예상치 못한 에러가 발생할 수 있다. ​ 2) 파일로 인한 문제 사용자가 요청을 보내면 서버는 웹 애플리케이션을 구성하는 파..

79요..? npm install react-icons를 했는데, 계속해서 이런 식으로 vulnerabilities 경고창이 떴다. 처음엔 6 vulnerabilities 였는데 어느 순간 79가 됐다.. ​ 역시 stack overflow 나랑 비슷한 오류가 나는 사람을 찾았다. https://stackoverflow.com/questions/72489256/6-high-severity-vulnerabilities-in-react-icons-4-4-0 6 high severity vulnerabilities in react-icons 4.4.0 # npm audit report nth-check

mdn 문서 참조 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_operator 조건 (삼항) 연산자 - JavaScript | MDN 조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 developer.mozilla.org mdn 문서를 참조하면, ​ 조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자이다. 물론 js 말고도 다른 언어에서도 삼항 연산자는 사용한다. 저번 학기에 내가 c로 과제를..

https://react.dev/learn/updating-objects-in-state Updating Objects in State – React The library for web and native user interfaces react.dev 리액트 공식 문서 참고! ! ​ 그냥 적으면서 공부하는 느낌으로 사이트 내용을 쭉 적어보겠다 ​ State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you nedd to create ..

Scope: 범위 변수에 접근할 수 있는 범위 / 식별자(변수)를 찾기 위한 규칙 자바스크립트에서 스코프는 2가지 타입이 있음 global과 local ​ 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다. ​ 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다. 함수 자신과 하위 함수에서만 참조할 수 있다. ​ 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데, 이걸 함수 스코프(function-scoped)라고 한다. ​ var x = 'global'; ​ function foo () { var x = 'function scope'; console.log(..

Truthy 자바스크립트에서 truthy인 값은 Boolean 문맥에서 true로 평가되는 값이다. (너무 당연한 얘기) falsy값으로 정의된 값이 아니면 모두 truthy값으로 평가된다. ​ Falsy Boolean 문맥에서 false로 평가되는 값이다. ​ Falsy 값: false: 직접적으로 false 값을 가지는 경우 0: 숫자 0 -0: 음의 숫자 0 NaN: 숫자가 아님(Not-a-Number) null: 값이 없음을 나타내는 값 undefined: 정의되지 않은 값 '' 또는 "": 빈 문자열 등 ​ 주의! 빈 배열 []나 객체 {}는 truthy한 값이다. falsy한 값 앞에 !를 붙여주면 truthy로 전환된다. (반대도 마찬가지) ​ 아래 코드는 지피티가 짜준 예시 let valu..

리액트 (React) UI를 만들기 위한 JavaScript 기반의 라이브러리 매번 서버로부터 html 파일을 받아오지 않더라도 js 조작함으로써 새롭게 페이지 조작 가능 ​ 리액트의 특징 선언형 필요한 컴포넌트만 렌더링 2. 컴포넌트 기반 컴포넌트에서 상태를 관리 재사용해서 생산성 향상 3. Virtual DOM 실제 DOM과 동일 리플로우/리페인트(브라우저 렌더링) 최소화 -> 절차 간소화 ​ 이때 DOM은 무엇일까? 먼저 내친구 지피티한테 물어봤다. ​ 지피티 says DOM은 "문서 객체 모델"의 약자로, 웹 페이지의 구조화된 내용을 프로그래밍적으로 조작할 수 있는 인터페이스를 제공하는 웹 기술입니다. HTML, XHTML 또는 XML 문서의 각 요소를 객체로 취급하여 스크립트 언어(주로 자바스크..

https://github.com/gusdk19/WordleGame GitHub - gusdk19/WordleGame: 워들 게임 만들기 워들 게임 만들기. Contribute to gusdk19/WordleGame development by creating an account on GitHub. github.com 깃허브에 올린 나의 초라한 워들 게임.. ​ https://wordlegame-web.netlify.app/ Wordle TIME 00:00 Q W E R T Y U I O P A S D F G H J K L ENTER Z X C V B N M 화면 사이즈를 늘려주세요. wordlegame-web.netlify.app 요걸로 게임도 할 수 있는데 내가 화면이 500px보다 작으면 경고 문구를..