본문 바로가기

Repository

 (40)
[React JS] 리액트 setState의 원리 리액트에서 리렌더링을 어떻게 하는지, render() 함수로 처리하지 않고 자동으로 렌더링하는 방법을 알아보자. 리액트의 useState()는 계속해서 업데이트할 데이터와 그 값을 바꾸는 함수를 배열로 갖는다. 즉, React.useState(0)은 자바스크립트에서 다음과 같은 역할을 한다. 변수 counter에 0으로 값을 초기화한다. countUp 함수는 해당 counter 변수를 증가시킬 것이다. let counter = 0; function countUp() {} useState()의 배열을 자바스크립트의 비구조화할당 문법을 통해 새로운 변수로 할당해보자. useState는 [0]인덱스의 값에 데이터를 저장하고 [1] 인덱스에 데이터를 업데이트하는 함수를 갖고 있다. 어떤 값을 부여하던, set..
[자바스크립트 문법] 객체와 배열의 구조분해할당 구조분해할당이란? 배열, 객체와 같이 구조화되어 있는 iterable한 데이터를 분해시켜서 각각의 변수에 담는 것을 의미한다. iterable한 데이터란, 배열과 객체처럼 순회 가능한 데이터를 의미한다. 배열과 구조분해할당 다음은 arr 이라는 배열이 있다. 배열의 각 요소를 변수로 선언하려면 하나씩 총 5개의 변수가 필요하다. let arr = [1, 2, 3, 4, 5]; let one = arr[0]; let two = arr[1]; ... console.log(one, two); // 1,2 출력 그런데 구조분해할당을 사용한다면, 한 줄로 코드를 줄일 수 있다. 좌측에는 let, const와 같은 변수 선언 키워드를 적고 대괄호 []안에 변수명을 작성한다. 이 대괄호는 배열이기 때문에 가능하다. ..
[자바스크립트 문법] 전역 스코프와 지역 스코프, 함수레벨 스코프와 블록레벨 스코프 전역 스코프(Global Scope)와 지역 스코프(Local Scope) Global scope, 전역 스코프란 변수에 접근 또는 참조할 수 있는 범위가 전역적으로 정의된 것이다. Local scope, 지역 스코프란 변수에 접근 또는 참조할 수 있는 범위가 함수 내부에만 정의된 것이다. 전역 스코프의 변수는 지역 스코프에서 사용이 가능하나, 그 반대의 경우는 사용이 불가하다. 지역 스코프에서 선언된 변수는 해당 범위 안에서만 사용가능하다. 지역 스코프의 종류 : 함수 레벨 스코프와 블록 레벨 스코프 함수 레벨 스코프란, 함수를 실행할 때 생겨나는 '지역 스코프'이다. 함수를 만들면, 함수마다 지역 스코프가 생겨나게 된다. var 키워드는 함수 레벨 스코프를 따른다. 블록 레벨 스코프를 따르지 않는다..
[자바스크립트 문법] 변수명과 함수, 조건문 활용팁 [변수명] String 문자열을 변수로 지정하는 이유 자바스크립트에서 변수명이 틀리면 에러처리가 된다. 하지만 문자열(string)에 오타가 발생하면 알려주지 않는다. 차라리 변수로 문자열을 지정해주고 변수를 사용하는 것이 안전하다. 그리고 문자열의 변수는 관습적으로 대문자로만 작성한다. const CLASSNAME_HIDDEN = "hidden"; const KEY_USERNAME = "username"; [함수] function에 () 괄호 차이 function에 () 괄호가 있으면 바로 실행되는 것이고, 없으면 바로 실행하지 않는 것이다. 괄호없이 바로 함수 형태로 사용하면 함수를 호출하는 것이 아니라 참조를 할당하는 것이다. 일반적인 예시로는 addEventListener가 있다. event 처리..
[자바스크립트 문법] 함수 표현식과 선언문, 화살표 함수 차이점 함수의 정의와 호출 함수는 기능을 만드는 것이다. 입력인 parameter(매개변수)와 결과값(return)이 있는 기능이다. 함수를 사용하려면 호출도 해주어야 한다. 이때, 아래 코드처럼 ()괄호를 바로 사용하면 DOM이 load되자마자 바로 실행된다. // 함수 선언 function sayHello(){ console.log("Hello"); } // 함수 호출 sayHello(); // 출력 Hello 함수의 표현식(익명 함수) 함수를 선언하는 방법에는 3가지가 있다. 표현식, 선언문, 화살표 함수가 있는데, 모두 필요에 따라서 또는 코드 스타일마다 사용여부를 결정하게 된다. 다음은 함수의 표현식이라고 부른다. 변수에 함수를 할당하는 형태이다. 익명함수의 경우, hoisting의 영향을 받지 않는..
프론트엔드 포트폴리오준비 전, 참고할 사항 프로그래밍 공부법에 대하여 프론트엔드 포트폴리오 예시를 찾다가 나의 퍼블리싱 독학 공부법과 맞는 블로거를 발견했다. (아래 출처 참고) 더 나아가 웹개발자로 성장하기 위해 그 공부법을 더 발전시키기 위해 해당 출처 내용을 요약한다. 1) 기초 강의 문법 빠르게 공부하기 : 즐겁게, 중요 개념만 주의깊게 보고 '아 그렇구나-' 하고 넘어가기. 2) 간단한 실습을 할 수 있는 강의로 문법 활용 : 깊은 이해말고, 코드의 흐름을 이해하기. 어떻게 만드는 지에 대한 이해도 높이기 3) 2번의 강의를 통해 활용할 수 있는 토이 프로젝트 진행 : 클론 코딩은 타자연습에 불과할 뿐. 내가 직접 얼마나 이해하고 활용할 수 있는지 확인하는 단계이다. 초보 단계로 만들어보고 빠르게 넘어가야 한다고 생각한다. 4) 3번의 ..
[자바스크립트 파일 링크] HTML script async와 defer 차이점 1. head 안에 js 파일 링크하기 요약 : 브라우저는 한줄씩 파싱하여 DOM 요소로 변경하는데, js 파일이 보이면 다운로드 받고 나서 다시 다음 줄을 파싱하게 됨 단점 : js 파일크기가 크다면 가져오고 실행하는데 오래걸림 순서 : html의 document에서 link:css, script:src 로 css와 js 파일을 연결한다. 이때 브라우저는 DOM을 한줄씩 parsing 한다. 그러다가 script 태그에 링크된 .js 파일이 있다면, 다운로드를 하려고 parsing한 html을 멈추고 필요한 자바스크립트 파일을 서버에서 받아온다. js파일을 실행한 후 html의 그 다음 줄을 parsing한다. 이러한 방식은 js 파일 크기가 클때는 사용자가 오랫동안 기다려야 하는 단점이 있어서 ht..
[자바스크립트 문법] addEventListener 이벤트 등록하기 addEventListener로 Event 등록하기 - addEventListener 메소드로 이벤트 타겟(target)의 이벤트(event)가 발생할 때 실행할 함수(callback 함수)를 등록할 수 있다. // 이벤트 등록시 target.addEventListener("event type", eventListener); title.addEventListener("click", titleClick); // 이벤트 제거시 title.removeEventListener("click", titleClick); // == addEventListener과 같은 기능이지만, remove로 이벤트 제거하는 편이 더 나음 title.onClick = titleClick; [ target ] document, ele..
[자바스크립트 문법] filter()메소드와 forEach() 반복문 filter() filter()는 콜백함수에서 리턴 값이 true인 것만 모아서 새 배열로 만드는 함수이다. 일반적으로 배열에서 특정 원소를 거를 때, 사용한다. 배열에서 조건에 맞는 원소만 제거하고 싶을 때 const numbers = [1, 2, 3, 4, 5]; function filterNumber(num){ return num !== 3; }; numbers.filter(filterNumber); // [1, 2, 4, 5] - filter()은 값이 true인 것만 새 배열로 만든다. 즉, 위 코드에서 배열에서 삭제하고 싶은 원소 '3'과 같지 않은 함수를 만들어서 filter에 콜백함수로 넣는다. 조건에 맞는 원소만 제거 후 새로운 배열 변수로 저장 const newArr = numbers...
[자바스크립트 문법] localStorage 웹 스토리지의 localStorage 클라이언트 단, 브라우저에서 데이터를 저장할 수 있는 기술을 웹 스토리지라고 한다. 브라우저에서 여러 탭이나 창을 닫으면 저장해 둔 데이터도 함께 소멸된다. 반면, 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유된다. 즉, 탭/창을 닫아도 데이터는 브라우저에 그대로 남아 있다. 이외에도 다음과 같은 특이점이 있다. - 동일한 컴퓨터의 동일한 브라우저에서만 데이터 영속성을 가진다. - 오직 string 데이터 타입만 지원한다. localStorage의 기본 API localStorage.setItem("key", "value") //키에 데이터 쓰기 localStorage.getItem("key") //키로부터 데이터 읽기 localStorage.removeI..

티스토리툴바