Frontend

🐣 자료형 문자열 const name1 = "Mike"; const name2 = 'Mike'; const name3 = `Mike`; // 벡틱 const message = `My name is ${name}`; console.log(message); // My name is Mike cf. 템플릿 리터럴(ES6부터 도입된 문자열 표기법) : 벡틱, 달러 벡틱 내부에 변수 사용 시 ${} 사용(”, ‘ 사용시 변수 치환되지 않음) 숫자 const val = 0/2; console.log(val); // Infinity const name = "Mike"; const y = name/2; console.log(y); // NaN null & undefined null : 객체가 아님에 유의할 것. 존재하..

🐣 변수 유형 JavaScript에는 크게 세 가지 유형의 변수가 존재한다. var, let, const가 있다. let과 const는 ES6부터 사용되기 시작한 변수 타입으로, 기존의 var와는 성격을 달리한다. var ES5까지 변수를 선언할 때 사용하는 키워드로, 중복된 이름의 변수를 정의할 수 있으며, 함수 스코프(Function-level scope)를 가진다. let ES6부터 사용되기 시작한 키워드이다. let으로 변수를 선언할 경우 중복된 이름의 변수를 정의할 수 없으며, let 변수는 블록 스코프(Block-level Scope)를 가진다. const let과 함께 ES6부터 사용되기 시작한 키워드이다. 그 값이 변하지 않는 상수를 선언할 때 사용되어 중복된 이름의 변수를 선언할 수 없으..

Synchronous, Asynchronous JavaScript는 기본적으로는 Synchronous(동기)적이다. 즉, 호이스팅이 된 이후부터 작성된 코드가 동작된다. 하지만 Asynchronous하게 코드를 작성하는 방식들이 존재한다. 가장 익숙하고 대표적인 예로는 setTimeout(브라우저가 제공하는 api로, callback 함수를 전달해 특정 시간이 지난 후 callback 함수를 호출하는 형태)이 있다. Hoisting이란? var, function 정의가 자동으로 가장 최상단으로 올라가는 현상을 말한다. CallBack 함수 Callback 함수에는 Synchronous callback과 Asynchronous callback이 존재한다. function printImmediately(pr..

팝업에 보여질 html, js의 파일명이 아래와 같을 때, 다음과 같이 다이얼로그를 실행시킬 수 있다. sample.html resources/js/sample.js Open jQuery의 load() 함수를 통해 html을 로드해와서 이것을 dialog() 함수를 통해 다이얼로그로 열 수 있다. 이 때 관련 js 파일이 함께 로드되도록 하기 위해 해당 함수(openDial)가 실행될 때마다 requireJS의 undef() 함수로 js 파일을 초기화시켜준다. 팝업을 닫을 때 해당 js 파일을 초기화시켜주기 위해 jQuery Dialog에서 제공하는 beforeClose() 함수 내부에 초기화시켜주는 코드를 추가한다.

JSX 상에서 라우팅 함수를 잘못 쓰는 바람에 발생한 오류로, onClick={navigate(path)}을 onClick={()=>navigate(path)}으로 바꾸면서 해결되었다. 참고) 오류가 난 코드(예시) import {useNavigate} from "react-router-dom"; const ComponentEx () { const navigate = useNavigate(); return ( Go Main ); } 참고) 오류가 해결된 코드(예시) import {useNavigate} from "react-router-dom"; const ComponentEx () { const navigate = useNavigate(); return ( navigate("/")}>Go Main ); }

replace가 true인 경우, template 또는 templateUrl은 최상위 element를 반드시 가져야 한다. 즉, replace값이 true인데 directive의 옵션으로 template:"Hello AngularJS"과 같이 element가 없는 경우에는 위의 오류가 발생하는 것이다. 따라서 최소 하나의 element를 주거나 하나 이상의 element가 포함된 templateUrl을 부여하면 된다. angular .module("exApp", []) .controller("exCtrl", ["$rootScope", "$scope", ..., function ($rootScope, $scope, ...) { ... } ]) .directive('directiveEx', function(..

이후에 원인을 알아서 다시 작성하겠다. 오류가 나는 경우는 아래처럼 컴포넌트 내에 이벤트를 선언하면서 useNavigate를 바로 호출한 경우이다. import {useNavigate} from "react-router-dom"; const Comp = () => { const handleEvt = () => { useNavigate("/"); } } 오류가 해결된 방법은 useNavigate를 바로 호출하는 것이 아니라 한번 변수에 담아서 사용한 방법이다. import {useNavigate} from "react-router-dom"; const Comp = () => { const navigate = useNavigate(); const handleEvt = () => { navigate("/");..

리액트는 자체적으로 라우팅 기능을 제공하지 않기 때문에, 추가적인 모듈을 사용해야 하는데, 여기에는 대표적으로 react-router-dom이 있다. react-router-dom 모듈을 사용하는 방법은 간단하다. 먼저, 1) 전체 DOM을 렌더링하는 최상위 html을 'react-router-dom'에서 제공하는 BrowserRouter로 감싸준다. 예를 들어, 최상위 컴포넌트가 '#root'인 경우에는 아래와 같이 작성할 수 있다. (아래는 최상위 컴포넌트 js 파일이다.) import {BrowserRouter} from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ..

npm install이 안되었을 때 package.json을 읽지 못해 발생하는 문제다..! npm install을 해줌으로써 해결되었다.

useState() : state 사용 시 state의 값을 변경할 때 사용 가능 useEffect() : state 사용 시 state의 값이 변경됐음을 감지 가능 (예시) Buttons는 여러개의 버튼을 한번에 나타내는 상위 컴포넌트이다. 단일 버튼을 렌더링하는 컴포넌트 Button은 상위 컴포넌트 Buttons로부터 props인 array, count 등과 함께 이를 수정할 수 있는 setter를 함께 전달받아 그 값을 계속해서 변경될 수 있게 한다. Button 컴포넌트가 렌더링하는 button들을 클릭할 경우 발생하는 clickEvent 함수에서는 props들의 값을 변경시키는데, array의 경우에는 계속해서 새로운 배열을 만드는 것이 목표가 아니라 하나의 배열에 값을 쌓는 것이 목표였기 때문..