Web Programming

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보다 작으면 경고 문구를..

강사님께서 설명해주시면서 작성한 코드는 다음과 같았다. 코드는 동일한데 innerText 내용만 다르다. (Gameclear / Gameover의 경우) 중복 코드 좋지 않다는거 알고 있는데.. 바꾸다보니 자꾸 이상하게 꼬여서 일단은 냅뒀음 ㅜㅜ 1. doument.createElement('div')를 통해 새로운 element를 생성했고, 2. div.innerText를 통해 화면에 배치시킬 문구를 작성하였다. 3. js에서도 css처럼 style을 줄 수도 있다고 설명해주시면서 div를 화면에 적절하게 배치시켰다. (가능하긴 하지만, css에서 작성할 때처럼 자동완성이 되지도 않고, 오타 하나의 타격이 매우 크므로 사용을 지양하는게 좋음) 4. document의 body 파트에 appendChild..