개발 기록기록📝

1. 웹팩의 등장 배경 import/export 구문이 없었던 모듈 이전의 상황을 살펴보자. math.js: function sum(a, b) { return a + b } // 전역 공간에 sum이 노출 app.js: sum(1, 2) // 3 위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.js가 로딩되면 app.js는 이름 공간에서 'sum'을 찾은 뒤 이 함수를 실행한다. 문제는 'sum'이 전역 공간에 노출된다는 것. 다른 파일에서도 'sum'이란 이름을 사용한다면 충돌한다. 1.1 IIFE IIFE(Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 Javascript Function 을 말한다. 전역 스코프가 오염되..

1. Node.js 란 무엇일까 기존 웹에서는 정적인 html 파일에 다이나믹한 변화를 주기 위해 JavaScript가 쓰이고 있었다. 이 언어를 해석하는 주체는 브라우저로 각 브라우저 마다 JS 해석 엔진이 있다. 예로 크롬은 V8, 익스플로러는 Chakra 등. 브라우저에서만 동작하던 JS를 V8엔진에 살을 붙여서 브라우저가 아닌 다른 환경에서도 쓸 수 있게 만든 것이 Node.js이다. 쉽게 말해 자바스크립트 실행 환경이라고 볼 수 있다. 따라서 Node.js만 있으면 브라우저 없이도 자바스크립트 문법을 실행할 수 있다. 2. 프론트엔드 개발시 Node.js가 필요한 이유 최신 스펙으로 개발 가능 빌드 자동화 개발 환경 커스터마이징 3. Node의 REPL 기능 REPL(read-eval-print..

리액트에서 문자열에 '\n'이 있는데도 개행이 제대로 되지 않는 경우, 일반적으로 HTML에서는 공백과 개행을 무시하기 때문에 이러한 동작이 발생할 수 있습니다. 이를 해결하기 위해서는 다음과 같은 방법들을 시도해 볼 수 있습니다. 1) 태그 사용 태그는 내부의 텍스트를 그대로 표시하고 개행을 유지하는 태그입니다. 문자열을 태그로 감싸서 렌더링하면 개행이 제대로 표시될 수 있습니다. {yourString} 2) CSS 속성 사용 CSS의 white-space 속성을 이용하여 개행을 유지하도록 설정할 수 있습니다. white-space: pre-line;을 적용하면 개행이 있는 부분에서 개행이 유지됩니다. {yourString} 3) 개행 문자를 태그로 변환 문자열 내의 '\n'을 태그로 변환하여 개행을 ..

useState가 필요하지 않은 경우 컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야하는 경우 => 특정 플래그 값 혹은 한 번 고정된 값을 컴포넌트에서 계속해서 사용하는 경우 isMount 변수는 본인이 속한 컴포넌트와 수명을 같이한다. 불필요한 리렌더링을 방지하고, 렌더링 프로세스와 관계없이 값을 가변적으로 저장하고 싶은 경우 useRef를 고려해 볼 수 있다.

1) 상태를 플래그로 바꾸기 a조건과 b조건에 따라 로그인여부를 관리하는 상태는 굳이 필요없다. 매 렌더링때마다 컴포넌트 안의 isLogin 플래그가 다시 계산 되게 할 수 있다! 위와 같은 방식으로 활용 가능하다! 2) 불필요한 상태 제거하기 특정 값을 만족하는 리스트만 따로 저장하고 싶을 때 useState를 사용할 때가 있는데 비추천된다. 업데이트 되는 값이고, 렌더링마다 고유의 값을 가질 수 있다고 가정할 수 있을 때 상태를 만들지 않고, 내부의 변수로 사용할 수 있다. 리액트 내부의 변수는 렌더링마다 고유의 계산된 값을 가진다.

스타일링 일관성에 대한 고민 중간에 프로젝트에 투입되고 보니, 현재 css, scss, stlyed-component, tailwind css가 혼합되어 사용되고 있다.. SE 각자 입맞에 맞게 쓴 것 같은데 다양한 선택지가 제공되는 만큼 유연성을 가져갈 수 있지만, 이는 여러가지 스타일링 방법이 혼합됨에 따라 복잡성을 증가시키고, 코드의 일관성을 유지하기가 어렵다. 스타일링 가이드를 어떻게 가져가면 좋을지 고민하다가 내린 결론은 scss를 기본으로 필요에 따라 styled-component를 활용하면 될 것 같다고 생각했다. 현재 퍼블리싱 코드를 보면 페이지별로 html 파일로 주고 있고, html 파일을 보면 외부에 정의한 css 파일의 클래스를 가져다가 쓰고 있다. 이러한 구조라면 이를 다시 tai..

리액트 컴포넌트 내부에 변하지 않는 싱글 리터럴 객체가 있는 코드 INFO 객체는 어디에서도 업데이트 되고 있지 않다. 가장 큰 문제점은 INFO 를 의 children으로 내리고 있고, ShowCount 컴포넌트의 props로 내리고 있다. INFO가 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될 때마다 같은 값이라도 또 다시 참조해서 트리거하고 계산해야 될 시기, 기억해야 될 시기에 대한 로직이 전혀 없으므로 불필요하게 참조하고 있다. 컴포넌트 내에서 useState로 관리할 수도 있지만 어쩌피 상태가 변하지 않기 때문에 NotUpdateValue 컴포넌트 외부로 INFO를 옮겨준다. JSX 내부에서 참조하고 있더라도 같은 파일 내에 있으므로 참조가 가능하다. 이 컴포넌트가 다시 트리거, 마운트..

vite.config.ts 파일수정 yarn add vite-plugin-mkcert -D import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; import mkcert from 'vite-plugin-mkcert'; // https://vitejs.dev/config/ export default defineConfig({ server: { https: { key: './yourKey.key', cert: './yourCert.crt' } }, plugins: [ react({ jsxImportSource: '@emotion/rea..

원본에 비해 훨씬 더 작은 용량으로 이미지를 사용할 수 있음 webp형식 서버에서 자동으로 이미지 최적화 quality 속성으로 얼마나 최적화할지 정의 기본 75 loading="lazy" 자동으로 적용됨 placeholder="blur" 사진이 다운로드 되는 동안 블러 이미지 적용됨, 블러 이미지는 next가 자동으로 만들어 제공함 -> layout shift 방지 소스파일을 스태틱하게 임포트 했기 때문에 위와 같은 최적화가 가능함 빌드타임에 이미 이미지의 너비, 높이 알 수 있음 import example from '/public/example.jpg'; v13 image 외부 이미지를 가지고올 때는 외부 이미지의 크기를 빌드 타임에 알 수 없으므로 반드시 크기를 명시해야함(width, height)..

SSR 완성된 html이 서버에서 만들어진 뒤 브라우저에 전송됨 페이지 이동시마다 새로 html을 내려줘야 해서 화면 깜박임, 초기 용량 작음 사용자가 많을 때 서버 부하 위험, 보안 유리 SEO에 좋음 CSR 빈 html 나머지는 자바스크립트로 동적으로 그림 화면 깜박임이 없음, 초기 용량 큼 js 캐시 가능, 서버 데이터가 필요할 경우 계속해서 서버와 통신해야 하므로 보안 취약 SEO에 저약 SSG(Static Site Generation) pre rendering : Static한 HTML을 빌드 타임에 미리 만들어 둠(SSR은 request time에) 서버 부하 없음, HTML 캐시 가능, SEO에 좋음 정적인 사이트에 사용 Next.js SSR, CSR, SSG의 장점을 제공 SSR/SSG의 ..