소요유(逍遙遊)

1. 변수 변수는 값을 담는 컨테이너이며 모든 프로그래밍 언어의 중추입니다. JavaScript에서 변수는 var, let, const 키워드를 사용하여 선언되며 숫자, 문자열, 배열, 객체 등과 같은 모든 유형의 값을 할당할 수 있습니다. var myVariable = "Hello, World!"; 유의 : JavaScript에서 변수는 대소문자를 구분하며 문자, 숫자, 달러 기호( $) 또는 밑줄( _) 문자를 포함할 수 있다는 점에 유의해야 합니다. 2. 데이터 유형 JavaScript에는 여섯 가지 기본 데이터 유형이 있습니다. 유의 : JavaScript는 느슨하게 유형이 지정된 언어입니다. 즉, 변수에 고정된 데이터 유형이 없습니다. 대신 변수는 할당된 값에 따라 데이터 유형을 동적으로 변경할..

FrontEnd/Java Script 2023. 2. 16. 00:43

부모 컴포넌트로부터 전달받은 props의 이름이 자식 컴포넌트의 변수명과 같을 경우, 어떻게 중복을 피하는게 좋을까요? 혹은 부모 컴포넌트로부터 받은 props를 자식 컴포넌트에서 새로운 변수에 할당해서 사용하려고 할 때도 마찬가지로 변수명을 어떻게 지어야할지 고민이 됩니다. 참고 : 전달받은 props와 새로운 변수의 이름이 같을 경우, 코드를 읽기 어렵게 만들 수 있습니다. 이러한 경우, 새로운 변수의 이름을 지을 때 props 이름을 참고하면서, 더 구체적으로 나타낼 수 있는 이름을 사용하는 것이 좋습니다. 💄 변수명 중복을 피하기 위한 규칙 일반적으로, 다음과 같은 규칙을 따르면 좋습니다: props 이름과 유사한 이름을 사용합니다. 예를 들어, props로 전달된 데이터가 “title”인 경우,..

FrontEnd/React 2023. 2. 16. 00:17

1. Props란? 리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. 🤔 부모 컴포넌트로부터 전달받은 Props를 그대로 사용해도 될까? 이러한 props를 컴포넌트 내부에서 사용할 때, 새로운 변수에 할당하지 않고 그대로 사용하면 의도하지 않은 결과를 초래할 수 있습니다. 이는 일반적으로 props를 변경하거나 동일한 props를 여러 번 사용할 때 발생합니다. 2. Props 사용할 때 주의사항 props는 일반적으로 읽기 전용이며 컴포넌트 내부에서 수정되어서는 안 됩니다. 이를 위반하면 다음과 같은 문제가 발생할 수 있습니다. 부작용: props는 부모 컴포넌트에서 전달되는 값이므로, 부모 컴포넌트가 변경되면 props도 변경됩니다. 그러나 props를 직접 수정하면 ..

FrontEnd/React 2023. 2. 15. 23:53

1. 문 문(statement)은 프로그램이 특정 작업을 수행하도록 지시하는 단순 또는 복합 명령입니다. 다시 말해, 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다. 문은 자바스크립트 프로그램의 기본 빌딩 블록입니다. 프로그램 실행의 흐름을 제어하고 수행할 작업을 프로그램에 알려줍니다. 간단한 문은 변수에 값을 할당하거나 함수를 호출하는 것과 같은 단일 작업을 수행합니다. 예를 들어 : let x = 10; console.log("The value of x is " + x); 블록 문이라고도 하는 복합 문은 여러 문을 단일 엔티티로 그룹화합니다. 중괄호({})로 구분됩니다. 예를 들어: { let x = 10; let y = 20; console.l..

FrontEnd/Java Script 2023. 2. 13. 02:16

JavaScript에서 SHA-256 암호화를 구현하려면 crypto-js 라이브러리를 사용할 수 있습니다. 1. crypto-js 라이브러리 설치: npm install crypto-js 2. 비밀번호 인코딩: import { SHA256 } from 'crypto-js'; const password = 'mysecretpassword'; const hash = SHA256(password).toString(); console.log(hash); 3. 암호화 키를 설정하는 방법: import { HmacSHA256 } from 'crypto-js'; const password = 'mysecretpassword'; const key = 'mysecretkey'; const hash = HmacSHA25..

FrontEnd/React 2023. 2. 7. 01:06

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다. 1. Ajax 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능을 말한다. 이전의 웹 페이지는 HTML 태그로 시작해서 HTML 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다. 이러한 방식은 변경할 필요가 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송받기 때문에 불필요한..

FrontEnd/Java Script 2023. 1. 30. 03:42

1. 크로스 브라우징의 배경 1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러 3.0에 탑재했습니다. 그런데 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것입니다. 즉, 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작했다는 것입니다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고, 결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기가 무척 어려워졌습니다. 이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 ..

FrontEnd/Java Script 2023. 1. 17. 00:38

자바스크립트란? 객체 기반의 스크립트 프로그래밍 언어 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 웹 브라우저 내에서 주로 사용되며, 다른 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 자바스크립트의 특징 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다. 기본 문법은 C, 자바와 유사하고 셀프(Self)에서는 프로토타입 기반 상속을, 스킴(Scheme)에서는 일급 함수의 개념을 차용했다. 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다. ECMAScript란? 자바스크립트 표준 사양인 ECMA-262를 말한다. 프로그래밍 언어의 값과 타입, 객체와 프로퍼티,..

FrontEnd/Java Script 2023. 1. 16. 00:45