본문 바로가기

전체 글13

호이스팅(Hoisting) 정리해보기 호이스팅이란? 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다. 선언된 함수, var는 상단에서 참조, 호출이 가능하다. 선언된 const, let은 상단에서 참조, 호출이 불가능하다. Function Hoisting(함수 호이스팅) 함수 호이스팅은 가장 먼저 이루어지고 선언문만 해당된다. 함수 선언문은 해당 함수 참조에 대한 초기화까지 자동으로 이루어져서 선언된 함수는 상단에서 참조, 호출이 가능하다. Variable Hoisting(변수 호이스팅) 변수는 프로그램 내에서 3가지 단계를 거친다. 선언 : 파싱과정에서 변수 객체가 변수에 대한 식별자들을 수집한다. 초기화 : 식별자에 메모리를 할당하고 undifined 상태를 부여한다. myValue = undefined 할당 : 변.. 2023. 6. 14.
타입스크립트(typeScript) 제네릭, 유틸리티 타입 정리해보기 제네릭 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용한다 제네릭을 사용하는 이유 ex) 여기 text라는 파라미터에 어떤 값을 넘겨 받아도 그대로 text를 반환하는 함수가있다 function getText(text) { return text; } getText('hi'); // 'hi' getText(10); // 10 제네릭을 사용하면 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다 함수의 인자와 반환 값에 모두 T 라는 타입을 추가했다 function getText(text: T): T { return text; } // 이렇게 선언한 함수는 아래와 같이 2가지 방법으로 호출할 수 있다 1 getText('hi'); getText(10); 2 getText('hi'.. 2023. 6. 13.
타입스크립트(typeScript) 정의, 쓰는이유, 기본 타입들 정리해보기 타입스크립트란 타입스크립트는 자바스크립트에 타입을 부여한 언어이다 자바스크립트의 확장된 언어라고 볼 수 있다 왜 타입스크립트를 써야할까 1. 에러의 사전 방지 TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있다 아래와 같이 의도하지 않은 코드의 동작을 예방할수 있다 // math.js function sum(a, b) { return a + b; } sum(10, 20); // 30 sum('10', '20'); // 1020 // math.ts function sum(a: number, b: number) { return a + b; } sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다. 2. 코드 자동 완성과 가이.. 2023. 6. 13.
여러 렌더링 방식에 대해 정리해보기(CSR , SSR , SSG , ISR) 렌더링 방식들(CSR, SSR , SSG , ISR) CSR(Client Side Rendering) 유저와의 티키타가가 잦은 경우 적합하다 csr은 유저가 접속했을떄 로딩 과정을 거쳐 데이터를 불러온후 페이지를 보여주기 때문에 초기로딩속도는 느릴 수 있지만 렌더링 후에는 js 사용이 가능한 동적 html 을 생성해 보여주기 때문에 부드러운 사용자 경험을 제공할 수 있다 하지만 번들사이즈가 커지면 로딩속도가 현저히 느려질 수 있고 미리 html 을 만드는것이아니고 요청이 들어온 다음 html을 생성하는 방식이기 때문에 SEO 대응이 어렵다 CSR 확인할부분 검색엔진에 노출되지 않아도되는 페이지인가? 유저와의 인터렉션이 잦은가? 화면 업데이트/렌더링이 잦은가? 초기 로딩이 조금 느리더라도 부드러운 사용자 .. 2023. 6. 12.
자바스크립트(JavaScript ) Array Method 정리해보기 Javascript 배열함수 forEach 배열의 모든 요소 반복하는 메서드이다 모든 원소들을 모두 출력해야 할떄 for 문을 대체 시킬 수 있다 const a = [1,2,3,4,5]; for (let i = 0; i console.log(i)); map 배열의 모든 요소를 이용하여 새로운 배열을 반환하는 메서드이다 let a = [1, 2, 3, 4, 5]; let newNumbers = a.map((number) => console.log(number)); filter 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 반환하는 배서드이다 const a = [1,2,3,4,5]; con.. 2023. 6. 12.
React에서의 이벤트처리, 이벤트네이밍 정리해보기 React에서의 이벤트처리 html과 차이점 React 이벤트 이름은 소문자 대신 camelCase를 사용한다 (onclick -> onClick) JSX에 문자열 대신 함수를 전달한다 (onclick="activateButton()" -> onClick={activateButton)) 주의할점 DOM 요소에만 이벤트 설정이 가능하다 div, button, input, form, span 등의 DOM 요소에는 이벤트 설정이 가능하지만, 리액트의 컴포넌트에는 불가능하다 function App() { const sayHi = function () { alert('hello'); } return // 이벤트가 실행되지 않는다 } DOM 이벤트종류 onClick : Element를 클릭할떄 onChange : .. 2023. 6. 12.
React Router v6 정리해보기 React-Router 손쉽게 싱글 페이지 애플리케이션을 만들 수 있는 라이브러리이다 Route 특정 경로에 원하는 컴포넌트를 보여준다 Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되야한다 루트경로 접속시 (/) 상세 페이지 접속시 (/product/*) Link 다른 페이지로 이동하는 링크를 보여준다 링크 이름 useParams /product/:productId 와 같이 경로에 : 를 사용하여 설정한다 useParams를 통해 productId를 받아 활용 가능 const Product = () => { const { productId } = useParams(); return {productId}번 } useLocation hash : 주소의 #문자열 뒤의 값 pathname : 현재 주.. 2023. 6. 12.
React Hooks 총정리해보기(useState, useEffect, useCallback, useMemo, useRef, useReducer) useState 컴포넌트 안에서 변경될 값을 사용하기 위한 React Hook 이다 const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값); 사용법 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(preNum => preNum + 1); } const onDecrease = () => { setNumber(preNum => preNum - 1); } return ( {number} +1 -1 ); } export default Counter; setNumber( numb.. 2023. 6. 12.
DOTORI-V2 회고록 DOTORI 란? Dormitory(기숙사) 줄임말인 Dotori 프로젝트는 기숙사 자습신청 등 잡다한 것들이 모두 사감 선생님의 수기로 작성되어야 한다는 점에서 불편함을 느끼게 되어서 기숙사의 자습신청, 안마의자 사용, 규정 위반, 기상음악 신청 등을 웹사이트로 간편하게 관리 할 수 있도록 만든 웹사이트다. DOTORI-v2 ? 기존에 만들어진 도토리는 디자이너가 따로없어서 사용자가 디자인이 아쉽다는 평이 많았고 파일구조도 제대로 짜고 만든게 아니라 잘 구조화되지 않았고 인증로직도 재대로 짜여져 있지 않는등 여러가지 문제로 인해 도토리 v2 를 내기로 했다. 이번에 v2에는 디자인변경, 다크모드, Next.js 로 migration, 사감쌤과 1대1문의 기능등을 추가하기로 했다. 기간 2023년 2월 .. 2023. 6. 12.
SWR 이란? swr이란 데이터를 가져오기 위한 React Hooks이다 도중에 에러를 반환하더라도 캐시된 데이터를 활용할 수 있게 함으로써 불필요한 데이터 호출과 렌더링에 시간을 쓰지 않고 효율적으로 동작한다 const { data, error, isValidating, mutate } = useSWR(key, fetcher, options) 파라미터 - key : 요청을 위한 고유한 키 문자열(또는 함수 | 배열 | null) - fetcher : 데이터를 가져오기 위한 함수를 반환하는 Promise - options : SWR hook을 위한 옵션 객체 반환값 - data : fetcher가 이행한 주어진 키에 대한 데이터(로드되지 않았다면 undefined) - error : fetcher가 던진 에러 성공시에.. 2023. 6. 12.
반응형웹과 적응형웹에 대해서 반응형웹(Responsive Web) 디바이스의 종류에 따라 웹페이지의 크기가 자동적으로 재조명 되는 것을 말한다. 1. 미디어 쿼리(Media Query) 단말기 종류에 따라 각각 다른 스타일을 적용시키게해준다. 미디어 쿼리 문법 only | not only 키워드는 뒤에있는 조건만 , not 키워드는 뒤에 조건을 제외한 조건을 뜻한다. 미디어타입 all : 모든 미디어 타입 print : 프린터 기기 screen : 크린(screen)이 있는 매체 속성 width , height : 웹페이지 가로,세로 길이 min-width , min-height : 웹페이지 최소 가로,세로 길이 max-width , max-height : 웹페이지 최대 가로,세로 길이 2. 유동형 그리드(Fluid Grid) 그리.. 2023. 6. 12.
한번에 모아본 HTML 태그들 html 태그들을 정리해보았다 text 관련태그들 h1 ~ h6 굵게 표시됩니다. 기울임꼴로 표시됩니다. 강하게 강조합니다. 약하게 강조합니다. 밑줄이 표시됩니다. 취소선이 표시됩니다. 나도 취소선 부분밑줄 조그맣게 이 밑에 가로줄 이 위에 가로줄 h1 ~ h6 굵게 표시됩니다. 기울임꼴로 표시됩니다. 강하게 강조합니다. 약하게 강조합니다. 밑줄이 표시됩니다. 취소선이 표시됩니다. 나도 취소선 부분밑줄 조그맣게 밑에 가로줄 위에 가로줄 목록관련 태그들 순서가 없는 첫번째 항목 순서가 없는 두번째 항목 순서가 있는 첫번째 항목 순서가 있는 두번째 항목 // 테이블을 만드는 태그 // 행을 시작하는태그 A // 테이블의 행, 열의 머리말을 나타낸냄 B C A1 // 표의 내용(table data), 셀을 표.. 2023. 6. 12.

티스토리툴바