본문 바로가기

전체 글

[React] 훅(Hook) - useState 1. 정의 - 가장 대표적이고 많이 사용되는 훅 - 클래스 컴포넌트가 state를 사용하는 것처럼 함수 컴포넌트에서는 useState() 훅을 사용함 2. 사용방법 - useState()를 호출할 때 파라미터로 선언할 state의 초기값이 들어감 - useState(초기값)을 호출하면 배열을 리턴함 - 리턴한 배열에는 state로 선언된 변수, state의 set함수 두 가지 항목이 들어있음 const[변수명, set함수명] = useState(초기값); 3. useState 사용했을 때와 사용하지 않았을 때 비교 - useState를 사용하지 않은 코드 import React, { useState } from "react"; // Counter 함수 컴포넌트 function Counter(props) .. 더보기
[Java] 문자열 비교 == 과 equals() - 자바는 문자열 리터럴이 동일하면 String 객체를 공유하도록 설계되어 있음 public class EqualsEx { public static void main(String[] args) { // 동일한 String 객체의 번지가 저장됨 String name1 = "sky"; String name2 = "sky"; if(name1 == name2) { System.out.println("name1과 name2는 참조가 같음"); } else { System.out.println("name1과 name2는 참조가 다름"); } if(name1.equals(name2)) { System.out.println("name1과 name2는 문자열이 같음"); } // new 연산자로 String 객체를 생성.. 더보기
[HTML] <img> 태그에 alt 옵션 alt alternitives 대체, 대신 alt 옵션의 역할 1) 이미지 파일이 없는 경우 대체해서 보여줌 2) 검색 키워드가 됨 3) screen reader로 읽혀짐 -> 웹 접근성 더보기
[JavaScript] 템플릿 리터럴(Template literals), 태그드 리터럴(tagged literals) 1. 템플릿 리터럴(template literals) - 자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법 - 따옴표 대신 backquote, backtick 이라는 `백틱` 기호를 사용해서 문자를 만드는 형태 2. 템플릿 리터럴의 장점 1) 문자 중간 엔터키 입력 가능 - 자바스크립트 문자열은 문자 중간에 엔터키치면 안되는데 백틱으로 문자를 만들면 엔터키 자유롭게 가능 var 문자 = `안녕 하세요`; 2)문자 중간에 변수를 집어넣을 때 편리함 - 자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야 하는데 백틱으로 문자를 만들면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있음 var 이름 = '김하늘'; var 문자 = `안녕하세요 ${이름.. 더보기
[JavaScript ES6] 변수(variable) var let const 와 Hoisting, 전역변수, 참조 1. 변수(variable) - 변수: 자료를 임시로 저장하는 공간 - 오브젝트, 배열, 함수 등 모든 자료들을 담을 수 있음 - 자바 스크립트에서 변수를 만들 때 var, let, const라는 3개 키워드를 사용할 수 있음 var let const 재선언 O X X 재할당 O O X 범위 function {} {} 2. 변수의 선언 1) 선언 방법 var 이름; let 나이; const 성별; 2) 차이점: var는 재선언 가능 / let, const는 재선언 불가능 - let, const로 만들면 같은 이름의 변수 재선언 불가(에러 발생) - 변수 이름을 중복해서 만드는 실수를 방지해 줌 let 나이; let 나이; //에러 const 성별 = '여자'; const 성별 = '남자'; //에러 .. 더보기
[JavaScript] Arrow function 화살표 함수 1. Arrow function 문법 ES6 문법 이후 새롭게 등장한 함수를 만들 수 있는 문법 1) 자바스크립트에서 함수 만드는 기존 문법 (1) function 예쁜함수(){ //어쩌구 } (2) var 예쁜함수 = function(){ //어쩌구 } 함수 사용법 예쁜함수(); 2) ES6 신문법 Arrow function 으로 함수 만들기 - function이라는 길고 복잡한 키워드 대신에 () => {} 의 형태로 만드는 함수 var 예쁜함수 = () => { //어쩌구 } 2. Arrow function의 장점 1) 함수 본연의 입출력 기능을 직관적으로 표현하는 문법 cf) function 문법을 사용하는 이유 1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 .. 더보기
[JavaScript] this 키워드 this는 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있음 사용하는 환경(위치) this가 의미하는 것 태그 안 또는 일반 함수 내부 window{} 오브젝트 strict mode의 일반 함수 내부 undefined 오브젝트 내 함수(메서드) 내부 함수를 동작시키는(메서드를 가진) 오브젝트 생성자(constructor) 내부 생성자를 통해 새로 생성된 오브젝트 이벤트 리스너 내부 e.currentTarget 1. 그냥 쓰거나 함수 안에서 쓰면 this는 window{} 오브젝트를 뜻함 HTML 파일에 window {...생략...} 출력 됨 1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined IE 10버전 이상에서 'use strict'라는 키워드를 페이지 .. 더보기
[React] 라우팅, 라우터 1. 페이지를 분리하는 방법 1) 리액트를 사용하지 않고 페이지 나누는 법 ① html 파일 만들어서 상세페이지 내용 채움 ② 누가 /detail로 접속하면 html 파일 보내줌 2) 리액트를 사용해서 페이지 나누는 법 ① 컴포넌트 만들어서 상세페이지 내용 채움 ② 누가 /detail로 접속하면 그 컴포넌트를 보여줌 2. 리액트를 사용해서 페이지 나누는 방법 1) react-router-dom 라이브러리 사용 설치 npm install react-router-dom 2) index.js파일에 import하고 로 감싸기 import { BrowserRouter} from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById.. 더보기

티스토리툴바