본문 바로가기
반응형

Programming30

[JS] 스코프란 무엇인가?(블록 스코프, 전역 스코프, 함수 스코프) 스코프(Scope)란? 변수가 어느 위치에서 접근 가능한 지를 결정하는 규칙을 말한다.(변수의 유효 범위)자바스크립트에는 크게 전역 스코프, 함수 스코프, 블록 스코프 세 가지 주요 스코프가 있다. 전역 스코프(Global Scope)전역 변수는 함수나 블록 밖에서 선언되며, 자바스크립트 코드 어디서든 접근 가능하다. 전역 변수는 프로그램 전체에 걸쳐 사용되므로 매우 신중하게 사용해야 한다.* 예시// 전역변수 설정let globalVariable = "global";function test(){ // 함수 내에서도 접근 가능 console.log(globalVariable); // 결과값 : global}// 함수 호출test(); // 전역.. 2024. 9. 18.
[JS] var, const, let 변수의 종류와 차이점을 알아보자 자바스크립트에서 변수를 선언하는 방법으로는 주로 var, let, const 세가지 키워드를 사용한다.그렇다면, 이 세가지 키워드에는 어떠한 특징이 있으며, 차이점을 무엇일까? var 변수var는 ES6 이전에 변수를 선언할 때 사용하던 방식으로 특징들은 다음과 같다.* 특징- 함수 스코프(Function Scope): var 변수는 함수 내에서만 유효하며, 함수 외부에서는 사용할 수 없다. 블록( { } ) 내에서 선언을 해도 블록 스코프가 적용되지 않는다. (스코프란? : 2024.09.18 - [Programming/Javascript] - [JS] 스코프란 무엇인가?(블록 스코프, 전역 스코프, 함수 스코프) )- 중복 선언 가능: 같은 이름의 변수를 다시 선언해도 에러가 발생하지 않고, 값이 덮.. 2024. 9. 18.
[React] npm이란?(npx와 간단 비교) npm(Node Package Manager)이란 ? node.js 기술을 이용해서 만들어진 여러 앱들을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 것이 npm이다.(node.js 계의 google play)npx(Node Package eXecute)란?npm의 5.2.0버전부터 추가된 도구로 간편하게 npm 패키지를 일회성으로 사용/실행하는 실행도구이다. 즉, 임시로 패키지를 설치하여 사용 후 제거된다고 생각하면 된다. npm과 npx를 비교?굳이 둘을 비교하자면npm은 전역으로 패키지를 설치하여 의존성 라이브러리들을 전체적으로 관리 또는 특정 프로젝트에만 의존성 라이브러리를 설치하여 사용한다.그러다 보니 업데이트가 있을 때 각 각 업데이트 관리를 해줘야 되는 번거로움이 있을 수 있다. npx.. 2024. 9. 12.
[생활코딩] React 06. state state란? 컴포넌트 함수를 다시 실행해서 새로운 return 값을 만드는 것을 state라 한다. * Prop과 State 차이점 - Prop은 컴포넌트를 사용하는 외부자를 위한 데이터 - State는 컴포넌트를 만드는 내부자를 위한 데이터 State의 값이 변경되면 새로운 리턴 값을 만들어서 UI가 업데이트되며, 새로운 리턴 값을 화면에 출력하게 된다. 즉, 동적인 페이지를 구성할 수 있는 것이다. 지금부터 만들 예제는 링크가 걸린 특정 단어를 클릭했을 때 화면 body에 특정 단어 안에 가지고 있는 문구들을 출력할 것이다. 코드 정리 화면 출력을 하는 app() 함수에서 작성을 해보겠다. 우선 태그를 클릭할 경우 body 영역에 Hello, WEB 이 생성되게 하고 태그를 클릭했을 시 body영역.. 2024. 1. 31.
[생활코딩] React 05. 이벤트 event html 에서는 이벤트를 발생시키는 onClick이 있다. React 컴포넌트에는 이러한 이벤트를 발생시킬 수 있는 방법이 뭐가 있을까? 우리는 컴포넌트 안에 이벤트를 설정하여 웹 화면에서 "WEB" 글자를 눌렀을 때 이벤트를 발생시켜보겠다. onChangeMode 위와 같이 props에 onChangeMode를 추가하여 해당 태그를 클릭할 때 alert 화면이 뜨도록 할 예정이다. 함수의 태그 안에 onClick 속성을 넣은 다음 리로드되는 것을 방지하는 event.preventDefault()를 호출 후 props에 onChangeMode()를 호출하도록 설정한다. 추가적으로 태그에 있는 html/css/js 내용도 클릭했을 시 각 각에 해당하는 id값이 뜨도록 설정해보자. 태그에 id값을 onCha.. 2024. 1. 23.
[생활코딩] React 04. 속성 props html 태그를 보자. 라는 태그 안에 사진파일 / 넓이 / 높이 등의 속성을 설정할 수 있도록 할 수 있다. React 에서도 이러한 속성을 "PROP"라고 한다. 아래의 소스를 기준으로 props를 React에서 어떻게 활용하는 지 알아보자 태그의 속성 처럼 우리도 , , 태그에 props을 부여하여 커스텀을 해보겠다. , , 태그의 정의 되어 있는 부분이 아닌 app()에서 본문을 출력하는 내용에서 글 내용을 변경하려고 하면 다음과 같다. function app()에서 어떤 내용을 넣고 싶은지 부터 살펴보면 이와 같이 title속성과 body속성을 추가하여 내용을 app() 출력 시 변경해보려고 한다. 단순히 이렇게만 하면 변경되지 않는다. 추가적으로 우리가 정의한 , 태그를 속성이 적용되도록 수정.. 2024. 1. 22.
반응형

티스토리툴바