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..
웹은 안전한 통신을 위해 정보를 암호화한다. 암호화란 일반적인 평문을 알아볼 수 없도록 암호화하여 암호문으로 만드는 과정이다. 개인 정보가 담긴 평문을 암호화하고, 이렇게 만들어진 암호문을 상대방에게 전달하면, 상대방은 이를 다시 복호화하여 원래의 평문으로 열람할 수 있다. 이와 같은 과정을 웹 브라우저와 웹 서버에 사용하는 대표적인 기술이 바로 HTTPS(Hypertext Transfer Protocol Secure)이다. 인터넷 컨텐츠를 전달하는 TCP 프로토콜의 일종인 HTTP에 S(Secure) 기능을 추가한 것이다. HTTPS의 원천 기술로는 SSL 과 TLS 전송 기술이 있다. SSL(Secure Socket Layer) // 통상적으로 SSL 인증서라고 부르며 TLS도 포함 TLS(Trans..
Hyper Text Transfer Protocol 의 약자로, 인터넷에서 데이터를 주고받는 통신규약(프로토콜)이다. 이렇게 규칙을 정해두었기 때문에, 모든 프로그램이 서로 정보를 교환할 수 있게 된 것이다. 웹 개발자라면 HTTP 지식이 필수조건이다. FE개발자의 역할 중 하나가 서버로 데이터를 전송하는 것이기 때문에 HTTP를 모른다면 역할을 다하고 있다고 말할 수 없다. 데이터를 주고 받을 때 흔히 발생하는 CORS, CORB(?) 같은 에러들은 HTTP만 잘 알아도 쉽게 해결이 가능하다. (실제로 http 지식이 전무할 때, api호출을 하면서 엄청난 오류를 겪었고 해결하는데도 시간이 걸렸다.) 서버의 역할이 요청에 대한 응답을 보내준다는 것을 기억하자. HTTP/1.1을 기준으로 설명 요청과 응..
FC를 쓰지 말아야 하는 이유 children을 암시적으로 가지고 있다. (원치않는 에러를 발생시킬 수 있음) 제네릭을 지원하지 않는다. 네임 스페이스 패턴을 이용할 때 더 불편하다 FC를 이용하면 코드가 더 길어진다. defaultProps와 정상적으로 동작하지 않는다. 결국 리액트 18 이상에서 없어졌다. 🤔 index.d.ts문서를 봐도 deprecated라고 명시되어 있다. 이 부분에 대해서 언급하기 이전에 함수 선언식과 함수 표현식(+화살표 함수) 복습 Function Declarations(함수 선언식) vs Function Expressions(함수 표현식) 우리가 기본적으로 함수를 작성할 때 사용하던 문법은 함수 선언식이다. function 키워드가 맨 앞에있는 친구 함수 표현식도 func..
- Total
- Today
- Yesterday
- nvm 설치순서
- text input pattern
- Prittier
- aspect-ratio
- getServerSideProps
- && 셸 명령어
- nvm경로 오류
- fs모듈 넥스트
- 항해99프론트
- D 플래그
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 항해99프론트후기
- 타입스크립트 장점
- 프리온보딩 프론트엔드 챌린지 3월
- reactAPI
- tilde caret
- float 레이아웃
- 틸드와 캐럿
- 타입스크립트 DT
- 원티드 FE 프리온보딩 챌린지
- ~ ^
- grid flex
- 형제 요소 선택자
- 부트캠프항해
- is()
- 프리렌더링확인법
- 원티드 3월 프론트엔드 챌린지
- 원티드 프리온보딩 FE 챌린지
- getStaticPaths
- 항해99추천비추천
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |