export const Top = styled.div` ${Container} { border-bottom: 1px solid #d7d7d7; } `; Emotion으로 컴포넌트 스타일링 중 위와 같이 StyledComponent 코드 안에서 외부 컴포넌트를 참조하면 아래와 같은 에러가 뜬다. Component selectors c...
Rewrites는 들어오는 요청 경로를 다른 대상 경로에 매핑하는 프록시 역할을 한다. 로컬 서버에서 api 요청 시 CORS 오류가 나서 rewrites 속성을 설정하였다. // next.config.js module.exports = { async rewrites() { return [ { source: "/...
Next.js에는 환경 변수에 대한 지원이 내장되어 있어 dotenv 같은 모듈을 설치하지 않아도 된다. process.env로 .env.local 파일에 접근할 수 있다. DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword // pages/index.js export async function getS...
TypeScript 자바스크립트 Superset(확대집합) 컴파일 언어 정적 타입 언어 TypeScript의 장점 컴파일 시점에 타입을 체크하여 오류 확인 미리 타입을 결정하기 때문에 실행 속도가 빠르다. 코드 자동완성이나 실행 전 피드백을 제공하여 생산성이 높다. 특정 기능에만 타입스크립트를 도입함으로써 프로젝...
소스코드의 타입 타입 설명 전역 코드 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 ...
비동기 처리 일반 함수의 비동기 처리 const get = (url) => { const xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.send() xhr.onload = () => { if (xhr.status === 200) { console.log(JS...
CORS란? Cross-Origin Resource Sharing, 즉 교차 출처 리소스 공유이다. (잘 안 외워진다..) 결론부터 말하자면, CORS는 HTTP 헤더(Access-Control-Allow-Origin)를 사용하여 한 출처에서 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. CORS 정책을 ...
:nth-child 부모의 n번째 자식 요소 :nth-of-type 부모의 자식 요소 중 type 조건을 만족하는 n번째 자식 요소 무엇이 다른가? <div> <h1>Heading1</h1> <p>Lorem</p> <p>ipsum</p> <p...
block 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지 width와 height를 지정할 수 있다. padding, margin을 지정하면 공간을 점유한다. inline text 크기만큼만 점유한다. width와 height를 지정할 수 없다. padding, margin을 지정하면 좌...
CSS-in-JS CSS-in-JS는 단어 그대로 JavaScript 코드에서 CSS를 작성하는 방식이다. 런타임 환경에서 CSS와 컴포넌트를 이어주는 classname이 필요하기 때문에 각 컴포넌트를 hashing하여 동적인 classname을 만든다. 컴포넌트가 생성될 때 <head>에 <style>로 같이 생성되며 라이...