공부 기록일지📚

Next.js에서의 환경 변수 raect.js 로 개발했을 때 환경 변수를 추가하기 위해서 .env 로 시작하는 파일을 만들어 선언하고 그 파일 안에 특정 네이밍 규칙(prefix)을 통해 환경 변수를 선언해서 사용했다. Next도 비슷하게 동작한다. 하지만 Next.js는 서버 사이드에서 동작하는 특징을 가지기 때문에 이를 고려하지 않고 아무런 네이밍을 통해 환경 변수를 선언하면 반응하지 않는다. Next.js에서 환경 변수를 설정하고 배포할 때에는 다음과 같은 주의사항이 있다. 환경 변수의 이름 환경 변수의 이름은 `NEXT_PUBLIC_` 접두어(prefix)를 붙여야 클라이언트 측에서 접근할 수 있다. 이 접두어가 붙은 환경 변수는 자동으로 노출이되며, 다른 변수들은 서버 측에서만 접근이 가능하다..

vercel에 넥스트 프로젝트를 배포하면서 환경 변수를 따로 넣어주지 않아 배포실패로 골머리를 썪다가 제대로 정리해야겠다는 생각이 들었습니다. 우선 우리가 통상적으로 react로 프로젝트를 만들 때에도 .env에 환경변수를 넣어서 관리했던 것을 기억할 것이다. 환경 변수란? environment variable 일반적으로 우리는 코드 베이스는 하나만 관리하고, 개발, 테스트 운영등 여러 환경에 어플리케이션을 배포한다. 어느 환경에 배포하느냐에 따라서 다르게 설정되어야 하는 값들은 보통 운영 체제 수준에서 환경 변수를 통해 관리하게 된다. 대표적으로 DB 설정을 들 수 있는데, 운영 환경에서는 데이터 센터나 클라우드 인프라 상의 상용DB를 사용하고, 개발 환경에서는 개발자의 PC상 로컬 DB를 사용하는 경..

CSS 전처리기가 태어난 배경 CSS의 불필요한 선택자의 과용과 연산 기능 한계, 구문의 부재 등의 고질적인 문제를 개선하기 위해 CSS 전처리기가 등작했습니다. 어찌됐든 웹 표준은 CSS만 이해할 수 있기 때문입니다. CSS Preprocessor(전처리기) 란? Sass(SCSS), Less, Stylus 를 들어보셨나요. 위 종류들은 CSS 전(예비)처리기 입니다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 CSS로 동작하지만 우리는 CSS의 불편함을 확장 기능으로 상쇄할 수 있습니다. (Sass는 CSS의 확장이라고 생각하면 됩니다.) 어떻게 사용할까? 전처리기로 직접 웹에서 동작시킬 수는 없습니다. 우선 전처리기로 코드를 작성합니다. 전처리기는 CSS문법과 굉장히 유사 선택자의 중첩(n..

리액트에서는 이벤트를 어떻게 처리할까요? -> 합성이벤트 객체로 래핑해서 사용합니다. 📌이벤트 핸들링에 관련된 자세한 내용은 리액트 데브 문서를 읽어보는 것을 추천합니다. 🔺우선 리액트의 컴포넌트에는 이벤트 설정을 할 수 없습니다. DOM요소(div, form, button 등..)에만 이벤트 설정이 가능하죠. React 합성 이벤트(Synthetic Event) 브라우저마다 이벤트 이름부터 시작하여 이벤트가 처리되는 방식이 다릅니다. 이를 동일하게 처리하기 위해 React는 Synthetic 이벤트로 브라우저마다 다른 native 이벤트를 묶어서 처리하는데 이를 통해 크로스 브라우징 문제를 해결하였죠. (리액트 합성 이벤트는 래퍼 이벤트 객체라고 생각하면 됩니다.) 자세한 내용은 최근에 개편된 리액트 ..

우선 버블링이란 한 요소에서 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것입니다. 가장 최상단의 조상요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트 버블링이란 간단히 말하면 이벤트가 제일 깊은 요소에서 시작해 부모 요소로 거슬러 올라가며 이벤트를 전파하는 것입니다. 그 모습이 물속 거품과 닮았기 때문에 버블링이라 합니다. 최근에 이 버블링이 적용되는 이벤트가 있고 아닌 이벤트가 있다는 것을 알게되어 정리하게 됐습니다. 알아보니, 거의 모든 이벤트는 버블링이 된다고 나와있습니다. 예를 들어 focus 이벤트는 버블링이 되지 않습니다. 🤍하단에 버블링이 발생하지 않는 이벤트들을 적어두었습니다. event.target..

FC를 쓰지 말아야 하는 이유 children을 암시적으로 가지고 있다. (원치않는 에러를 발생시킬 수 있음) 제네릭을 지원하지 않는다. 네임 스페이스 패턴을 이용할 때 더 불편하다 FC를 이용하면 코드가 더 길어진다. defaultProps와 정상적으로 동작하지 않는다. 결국 리액트 18 이상에서 없어졌다. 🤔 index.d.ts문서를 봐도 deprecated라고 명시되어 있다. 이 부분에 대해서 언급하기 이전에 함수 선언식과 함수 표현식(+화살표 함수) 복습 Function Declarations(함수 선언식) vs Function Expressions(함수 표현식) 우리가 기본적으로 함수를 작성할 때 사용하던 문법은 함수 선언식이다. function 키워드가 맨 앞에있는 친구 함수 표현식도 func..

i18n이란 internationalization(국제화) 라는 단어를 축약한 것이다. i부터 n까지 18개의 문자수를 축약해서 i18n으로 나타낸다. 국제화는 다양한 언어 및 지역에 적용할 수 있도록 프로그램을 설계하는 프로세스이다. 이상적으로는 국제화는 설계의 기본 단계 중 하나이다. 현지화, 국제적인 배포에 대한 장벽을 제거하는 방식으로 설계 및 개발 Unicode 사용 필요에 따라 적절하게 레거시한 문자 인코딩을 처리 문자열 연결에 신경쓰는 것 유저 인터페이스의 문자열 값에 의존하지 않는 것 현지화가 이루어질 때까지 사용할 수 없는 기능을 지원 양방향 텍스트를 지원 언어를 식별하기 위해 DTD(document type definition)에 마크업을 추가 세로 텍스트나 기타 라틴어 이외의 인쇄 기..

이 포스팅은 Learn with Eunjae 님의 시나브로 자바스크립트 강의를 기반으로 정리된 내용입니다. 로컬에 있는 내 html 파일을 localhost를 통해서 확인하게 되는데, nestify나 vercel(호스팅 플랫폼)을 통해 폴더 자체를 배포할 수 있다. vercel의 경우는 내 깃허브 리포를 연동하여 바로 배포할 수 있기 때문에 아주 간단하게 배포할 수 있다. vercel에서 배포를 할 때, 어떤 프레임워크를 사용할 지 결정하고 빌드 커맨드(빌드 명령어)와 output 디렉토리(어떤 폴더에 결과물을 둘 지)등을 직접 설정해 줄 수 있다. 번들러는 다양한 종류들이 있는데 Parcel("the zero configuration build tool for the web" -공식 홈페이지) Vite..