전체 글
-
[JS]변수, 표현식과 문, 데이터타입, 타입 변환 - 타입 변환이 필요할 때Javascript 2024. 4. 14. 13:50
변수 메모리 공간에 값을 식별할 수 있는 고유한 이름을 '변수 이름' = 식별자 변수에 저장된 값을 변수 값 변수에 값을 저장하는 것을 할당 변수에 저장된 값을 읽어 들이는 것을 참조 console.log(score) // undefined var score; // 변수 선언문 첫 줄에서 참조에러가 발생해야 하는데 undefined가 발생하는 이유는 호이스팅 때문! 표현식과 문 **문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위 토큰이란 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 문에는 표현식인 문과 표현식이 아닌 문이 있다. 표현식인 문은 값으로 평가될 수 있는 문이고, 표현식이 아닌 문은 그렇지 않은 문이다. 예를 들어, 변수 선언문은 표현식이 아니다. 할당문은..
-
[SCSS] SCSS 도입기HTML & CSS 2024. 4. 5. 14:11
*SCSS란? 프로젝트의 규모가 커지거나 작업이 고도화 될 수록 가독성이 떨어질 수 밖에 없는 CSS의 단점을 보완하고, 개발의 효율성을 올리기 위해 등장한 것이다. *어쩌다 도입하게 되었나? SOPT 과제 중 하나이기 때문에 처음 도입하긴 했지만, 애초에 CSS의 불편함을 느끼고 있었다. **CSS 뭐가 불편함? 우리는 이런 코드를 자주 사용한다 display:flex; flex-direction:row justify-content:center; align-items:center; 위 코드를 반복적으로 사용해야만 하는 불편함을 느껴 분명 이를 해결해주는 무언가가 있을 것이라 생각했다. 저번 웹잼 프로젝트에서, 우리 팀 동료가 이와 관련해서 mixin 기법을 도입하자고 주장하였다. (물론 styled c..
-
모던 리액트 Deep dive - 렌더링은 어떻게 일어나는가? & 메모이제이션React 2024. 3. 19. 13:47
** "리액트에서" 렌더링이란? 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정. 렌더링 과정을 최소한으로 줄여야 유저에게 좋은 경험을 선사할 수 있음. * 리액트의 렌더링이 일어나는 이유 1. 최초 렌더링 2. 리렌더링 클래스형 컴포넌트의 setState가 실행되는 경우 클래스형 컴포넌트의 forceUpdate가 실행되는 경우 함수형 컴포넌트의 useState의 두 번째 배열 요소인 setter가 실행되는 경우 useReducer의 두 번째 배열 요소인 dispatch가 실행되는 경우 컴포넌트의 key props..
-
useContext (ContextAPI) 란?React 2024. 3. 12. 21:01
리액트의 기본적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트에 Props를 전달해주는 형식임. 프로젝트의 규모가 커지면 커질 수록 컴포넌트는 많아질 것이며, 이에 전부 props로 대처할 수는 없음. 또한 어디 한 군데에서 문제가 생긴다면 모든 부모 컴포넌트를 찾아다니며 수정해줄 수가 없음. 이를 해결하기 위해 Context를 제공해줌. 이는 props로 내려줄 필요가 없는 방법. props drilling이 일어나지 않는다는 장점이 있지만, 공식문서에는 props drilling을 피하기 위한 목적이라면 컴포넌트 합성을 먼저 고려하라는 이야기가 나옴 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있습니다. https://ko.lega..
-
언젠가는 쓸 useLayoutEffect... (useEffect vs useLayoutEffect)React 2024. 3. 3. 20:54
리액트에는 참 다양한 훅이 있습니다. 이번에 작성할 훅은 useLayoutEffect입니다. 저는 처음 뵙는 분이라서 많이 생소한데요, 형태가 useEffect와 비슷하니 비교하며 글을 작성하겠습니다. 사용법은 useEffect와 완전히 동일합니다. useEffect와 useLayoutEffect의 차이를 알기 위해서는 우선적으로 render와 paint에 대해서 알아야 합니다. render : DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 paint : 실제 스크린에 Layout을 표시하고 업데이트하는 과정 render는 paint전에 DOM Tree를 구성하고 계산하는 과정이니 결국 paint의 준비 과정으로 볼 수 있습니다. useEffect render -> pain..
-
[React] useRef는 왜 써야하는가?React 2024. 2. 25. 21:57
useState 장점과 변수의 장점을 합친 것. useRef란 레퍼런스를 사용하기 위한 훅. 그렇다면 레퍼런스란? 리액트에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체. 레퍼런스 객체에 current 객체가 있음. 이는 현재 참조하고 있는 element. useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다. 1. 사용법 const exampleRef = useRef(초기값); 2. useRef를 왜 사용해야 하는가? a. 저장공간으로서의 장점 값을 저장할 필요가 있는 변수가 있을 때 사용하면 좋음. 단, UI에 보일 필요가 없는 친구들을. 예시로, import { useState } from "react"; export default function Example1() { const [..
-
모던 리액트 Deep dive - 클래스, 클로져React 2024. 2. 18. 14:04
1. 클래스란? - 특정한 객체를 만들기 위한 일종의 템플릿. 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 바로 클래스. 다음은 클래스 예제이다. (우아한테크코스 로또 미션 중 일부) 1-1 정적 메서드(static)은 클래스에서 직접 호출 할 수 있다. const { ErrorMessage } = require("./Error"); class Validate { static purchase(callback) { return (amount) => { if (Number(amount) % 1000 !== 0) { throw new Error(ErrorMessage.IS_CORRECT_AMOUNT); } if (isNaN(amount)) { throw new Error(ErrorMessage...
-
모던 리액트 Deep Dive - 리액트 개발을 위해 꼭 알아야 할 JSReact 2024. 2. 12. 18:32
1. 자바스크립트의 데이터 타입 1) 원시 타입 - boolean 0, -0, 0n, 0x0n은 부호나 소수점 유무에 상관없이 falsy한 값 NaN은 Number타입 - null type of null === 'object' // true? typeof로 null을 확인했을 때 해당 타입이 아닌 object가 반환. 명시적으로 비어 있음을 나타내는 값 - undefined 선언됐지만 할당되지 않은 값. - number - string 백틱을 사용해서 표현한 문자열을 템플릿 리터럴이라고 함. 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있음. - symbol 심볼은 심볼함수를 이용해서만 만들 수 있음. - bigint number가 다룰 수 있는 숫자 크기의 제한을 극복하기..