본문 바로가기

분류 전체보기406

Next.JS 알아보기 최종 수정 : 2024-06-21Next.js'리액트를 위해 만든' 오픈소스 자바스크립트 웹 프레임워크로, SSR, SSG, ISR과 같은 다양하고 풍부한 기능을 제공한다. 수많은 내장 컴포넌트와 플러그인이 있다. Q. 왜 등장했는가?리액트가 기본적으로 클라이언트 사이드(CSR)에서만 작동하기 때문에 검색 엔진 최적화(SEO, search engine optimization)의 효과를 거의 볼 수 없었다. 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 실행 초기에 성능 부담이 생기는 문제가 있다. 웹 앱을 완전히 표시하려면 브라우저가 전체 웹 애플리케이션 번들을 다운로드한 다음 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 하기 때문이다. 이런 문제를 해결하기 위해 서버에서 미리 렌더링(Pre-r.. 2023. 7. 1.
ㄱㄷㅁㅊㅅ JSX 문법 JSX는 자바스크립트로 HTML과 비슷한 문법을 사용할 수 있도록 만들어주는 자바스크립트의 확장 문법 JSX는 화면과 동작을 좀 더 직관적으로 개발할 수 있는 편리한 문법이지만 그만큼 꼭 지켜야 할 규칙들도 있습니다. HTML과 다른 속성명 1. 속성명은 카멜 케이스로 작성하기! JSX 문법에서도 태그에 속성을 지정해 줄 수 있습니다. 단, 여러 단어가 조합된 몇몇 속성들을 사용할 때는 반드시 카멜 케이스(Camel Case)로 작성해야 합니다. 2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다! JSX 문법도 결국은 자바스크립트 문법이기 때문에, for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없습니다. 그래서 HTML의 for의 경우.. 2023. 6. 20.
ㅓㄴ 유사 배열(Array-Like Object)이란? 배열과 유사(類似)한 객체 배열과 모양은 같지만, 완벽히 배열은 아닌 유사 배열에도 최소한 갖춰야 할 조건과 특징 1. 숫자 형태의 indexing이 가능하다. 2. length 프로퍼티가 있다. 3. 배열의 기본 메소드를 사용할 수 없다. 4. Array.isArray(유사배열)은 false다. 주의사항: 유사 배열은 다양하다! 유사 배열은 위의 특징들을 가진 대부분의 형태를 가리키는 포괄적인 개념이기 때문에 정말 다양한 형태로 존재할 수 있습니다. 하지만 직접 유사 배열을 만드는 게 아니라 이미 만들어진 유사 배열에 접근하는 경우에는 대부분 위 4가지 특징을 모두 가지고 있으니깐 잘 기억해 두시면 좋을 것 같습니다! 3. 이벤트와 이벤트 핸들링, 그리.. 2023. 6. 20.
ㅊㄴㄴ 레이이ㅏ웃 앞에서 z-index에 대해서 간단하게 배워 봤습니다. 사용법은 어렵지 않지만 실제로 z-index를 쓰다 보면 종종 마음대로 동작하지 않을 때가 있는데요. 이럴 때 도움이 되는 쌓임 맥락(Stacking Context)이라는 개념에 대해 알아보겠습니다. 처음에는 조금 복잡하게 느껴질 수도 있으니까, 일단 쌓임 맥락의 큰 개념만이라도 잡고 넘어가는 걸 목표로 해 봅시다. z-index: 9999로도 해결이 안 되는 이유 z-index 값은 단순히 서로 비교만 하는 게 아니라, 쌓임 맥락(Stacking Context) 안에서 비교하기 때문인데요. 쌓임 맥락 쌓임 맥락을 간단히 설명하자면, z-index를 묶어서 생각하는 범위라고 할 수 있는데요. 쌓임 맥락을 쓰면 좋은 점이 하나 있는데요, 쌓임 맥락 안.. 2023. 6. 19.
JS 자료형 숫자형 문자열 불린형 cf. 불 대수 - 일상적인 논리를 수학적으로 표현한 것 어떤 넓은 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 좀 더 효과적이고 특정한 값에 일치하는 조건을 만들 때는 switch문이 좀 더 효과적입니다. 그런데 switch문이 익숙하지 않으신 분은 이렇게 if else문으로도 대체가 가능하니깐 switch문의 구조가 너무 어려우신 분은 if else문을 활용하셔도 좋습니다. 한 가지 주의할 점은 조건식에서 등호를 반드시 3개를 입력해 주어야 한다는 점인데요. switch문은 암시적 형 변환을 허용하지 않기 때문입니다. switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다는 것과 if문으로 대체할 때는 반드시 등호 3개로 일치비교를 해야한다는 것. for문 1.. 2023. 6. 19.