디자이너 노트

공부 계기 📚- 지금까지 Netlify를 통해서만 프로젝트를 배포했는데, Vercel을 통해 배포할 수 있다고 하여 공부하게 되었다.- 니꼬쌤 수업 중 정리. 개념 📃  .module.css배포전, CSS를 만들어 보자.여기에서 중요한 건 .module.css를 붙이는 것이다.  그리고 이 파일을 import 해주고, 적용하고자하는 곳에 class이름을 적용한다.import styles from "../styles/navigation.module.css"   이렇게 하면 class간의 이름 겹침 충돌을 예방할 수 있다. css파일 내에서는 클래스나 id명이 반드시 들어가야만 적용이 된다.다른 configuration은 필요 없다. 단지 파일 명을 명확히 작성하고, 임포트 후 클래스명을 지정해주면..

사실 지금까지 잘 이용해왔는데 Next.js를 공부하기로 했다.   개념 📃Next.js는 프레임워크다. 프레임워크는 우리의 코드를 호출한다. 우리가 Next JS를 호출하는 것이 아니다. 우리가 올바른 폴더에 코드를 작성하면, 올바른 이름을 가진 폴더 안에 정확한 이름의 파일이 들어가 있으면, NextJs 우리의 코드를 사용해서 웹사이트를 만들어준다. Next js 사용 시 변화1. react-router를 사용하지 않는다. 내가 직접 url을 적지 않아도 된다.  Client Side Rendering의 문제점1. SEO에 적합하지 못하다.html에 웹사이트에 유용한 데이터가 들어있어야 한다.2. 사용자가 첫 화면을 보기까지 로딩이 오래 걸린다 Server Side Rendering의 재등장1. 자..

공부 계기 📚'카공여지도' 프로젝트에서 Styled-component를 사용했었다. 당시 기분 좋게 프로젝트 배포 후, 아이폰 사파리로 확인하는데 우리가 의도하지 않은 폰트 색상이 화면에 떴다. 알고보니 프로젝트 세팅 초반에 CSS reset을 하지 않아 생긴 문제였다. 개념 📃크로스 브라우징이란?브라우저마다 HTML 시멘틱 태그에 대한 기본값이 다르다. 크로스 브라우징은 이토록 다양한 웹 브라우저에서 웹 페이지가 일관되게 표시되고 기능하도록 만드는 기술이다. 이를 통해 크롬, 파이어폭스, 사파리 등 어떤 브라우저에서도 개발자가 의도한 대로 이용하게 만들 수 있다.  CSS Reset을 통해 브라우저간 스타일의 일관성을 확보할 수 있다. Styled-component은 기존에 있는 패키지를 통해 CS..

useCallback 또한 메모이제이션을 통해 컴포넌트의 성능을 최적화 시켜준다. 인자로 전달한 콜백 함수 자체를 메모이제이션 해주는 것. useMemo는 값을 메모이제이션 해주고, useCallback은 함수를 메모이제이션 해준다. 함수형 컴포넌트 렌더링 → Component 함수 호출 → 모든 내부 변수 초기화 함수형 컴포넌트 속 함수를 useCallback()으로 감싸주면? 렌더링 → Component 함수 호출 → Memoize 된 함수를 재사용 기본 API 함수도 매번 새로운 객체로 만들어진다. 컴포넌트 렌더링 사이에 값을 안정적으로 유지하는데 사용된다. useCallback(() => { return value; }, [item]) 첫번째 인자: 콜백함수 두번째 인자: 의존성 배열

메모이제이션이란? 💭 메모이제이션(memoization)이란 값비싼 함수 호출 결과를 캐싱한 후, 동일한 호출이 발생할때 다시 계산하는 대신, 캐싱된 결과를 반환하는 프로그래밍 기술이다. 여러번 호출되는 함수 또는 컴포넌트가 있을 때 유용하다. 메모이제이션은 메모리에 특정한 값을 저장하는 것이기 때문에 남용하면 오히려 성능을 저하시킬 수 있다. 현업에선 필수지만, 프로젝트 진행 시 성능은 마지막에 고려하는 것으로, 기능을 동작하게 한 후, 고도화 튜닝하고 싶을때 적용할 것을 권장한다. 메모이제이션은 순수 함수 호출을 최적화하고, 중복 계산을 줄이며 성능을 향상시키는 방법을 제공함으로써 함수형 프로그래밍 패러다임을 보완하는 강력한 기술. React에서는 useMemo와 useCallback와 같은 메모이제..

Array.prototype.reduce reduce() 함수는 배열의 모든 요소를 하나의 값으로 축소하는데 사용된다. reduce(콜백함수, 초기값) reduce 메서드의 동작 원리 reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백함수의 첫번째 인수로 전달하면서 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열은 변경되지 않는다. const num = [1, 2, 3, 4]; const sum = num.reduce((accumulator, currentValue) => acc + cur, 0); console.log(sum);// 10 accumulator = 현재까지 누적..

useEffect 컴포넌트 생명 주기 이벤트를 등록하기 위한 훅 Mount, Update, Unmount 되었을 때 특정 작업을 처리할 코드를 실행시키고 싶다면 useEffect()를 사용할 수 있다. 인자로는 콜백함수 또는 콜백함수와 배열을 받는다. API useEffect(()⇒{ // 작업… }); ⇒ 컴포넌트가 렌더링 될 때 마다 실행 useEffect(()⇒{ //작업… }, []); ⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행 useEffect(()⇒{ //작업… }, [value]); ⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행, value 값이 바뀔 때 실행 API: Clean Up - 정리 useEffect(() ⇒ { // 구독… return () ⇒ { //구독 해지… } },[]..

vite란 무엇인가? npm은 JS 라이브러리를 모아놓은 플랫폼 npm으로 JS 라이브러리를 전부 다운 받으면 생기는 문제 node_modules 폴더 용량이 매우 크다. import/require 문법은 브라우저 친화적이지 않음 해결책 모든 JS 파일을 하나로 합쳐(번들링) 사용하기 -> 실제 필요한 코드만 찝어서 합쳐줌 그래서 번들링 툴을 많이들 사용( 기본적으로 npm + Web pack 이 있다. ) 그런데 Web Pack의 경우, npm 라이브러리가 많아지면 번들링이 오래 걸린다. 요약 vite는 js 라이브러리 bundle을 빠르게 해주는 tool이다. 미리보기 띄우는 속도만 빠르다.

Why React? 리액트란 자바스크립트로 만든 SPA의 한계를 극복하기 위해 등장한 라이브러리다. SPA는 모든 페이지를 한 페이지에서 구현하기 때문에 상태 관리가 어려울 수 있다는 단점이 있다. 기존 프론트엔드 개발의 문제점 1. DOM 조작의 어려움 2. 코드 관리 어려움 3. 성능 저하 리액트의 장점 1. 인터페이스를 독립적인 컴포넌트로 구성하여 코드 재 사용성, 유지 보수성, 확장성을 향상 시킴. 2. 가상 DOM을 통해 실제 DOM을 추상화하여 UI 업데이트를 효율적으로 처리. 성능 저하 최소화. 3. 내장된 상태 관리 기능과 서드 파티 라이브러리가 많음 리액트 작성 예시 JSX 문법 import logo from "./logo.svg"; import "./App.css"; function A..