본문 바로가기
반응형

FrontEnd89

JS(자바스크립트)의 객체에 관해 알아보자 객체는 개인적으로 무언갈 표현하기 위해 존재한다고 생각한다. 자동차로 생각한다면 문의 자재, 엔진, 연료종류, 타이어 종류 등 그 모든 것들이 합쳐져자동차라는 것을 만드는 것이다. 그걸 표현하는게 객체이지 않을까 하는 근본적인 생각 후에 자바스크립트의 객체를 공부하자!객체는 배열처럼 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.배열 파트 처럼 코드로 알아보자! 객체 생성 // 객체 리터럴 방식 {}로 객체를 생성// 속성과 값을 콜론(:)으로 구분하고. 각 속성과 값은 쉼표(,)로 구분// 프로퍼티로 이루어진 객체는 name(키), name의 값(value)은 SAHA로 // 키와 밸류를 합쳐서 프로퍼티라 부른다. let person = { name: "SAHA", age: 30, gend.. 2024. 6. 14.
next/dynamic과 Lazy Loading을 알아보자 서버사이드 렌더링을 하는데 클라이언트사이드 렌더링 환경에서만 돌아가는 코드를 실행해보려고 한 적 있으신가요?!오류를 만납니다 빨강빨강!!!! 이런 경우에 next/dynamic 패키지를 사용해 레이지 로딩 처리하면 간단하게 해결 가능해요!!! 알아보죠!Lazy Loading리소스를 필요한 경우에만 불러오는 전략필요한 경우에만 불러오기 때문에 초기 로딩 속도를 향상시킬 수 있다.!ex) 이미지가 100장 있다고 친다면 100장을 다 불러오려고 하는데 사용자 경험이 매우 나빠질 것이다.하지만 사용자가 보는 가시영역만 불러온다면? 속도가 빠를 수 있을 것이다.이런식으로 필요할 때 불러오는게 Lazy Loading 이미지나 라이브러리 컴포넌트 단위로도 Lazy Loading이 가능하다.필요 시 로드사용자가 특정.. 2024. 6. 13.
JS(자바스크립트)의 배열에 관해 학습하자! 변수는 한개의 값을 저장해놓기 위해 사용하는데 여러개의 값을 저장해놓으려면 어떻게 해야할까?배열을 사용하면 여러 개의 값을 저장하고 관리할 수 있는데, 자바스크립트의 배열과 배열 메소드에 대해서 알아보자!Array// 배열 생성// 대괄호에 값을 넣어주면 할당 끝// 각 요소는 쉼표로 구분하자let fruits = ["사과", "바나나", "오렌지"];// 배열의 크기 지정// 크기가 5인 배열을 생성자함수로 생성하기let numbers = new Array(5);// 배열 요소 접근// 인덱스는 0부터 시작한다// 크기가 4라면 인덱스는 0 1 2 3let fruits = ["사과", "바나나", "오렌지"];console.log(fruits[0]); // "사과"console.log(fruits[.. 2024. 6. 13.
Next의 Link 컴포넌트에 대해 알아보자 넥스트의 링크 컴포넌트는 html의 a태그와 같은 역할을 한다.(페이지 이동이나 새창 열기 등)12에서는 링크안에 a태그를 감싸야 했지만 13부터는 필요 없음~원리나 내용은 밑에서 설명 해보자!Link옵션들로 href, scroll, replace, prefetch가 있다.href해당 링크가 연결될 주소(required)replace링크로 이동시 history.replace를 사용할지 여부(기본값 flase)scroll링크로 이동 후 페이지 스크롤 초기화 여부(기본값 true )prefetch링크컴포넌트가 뷰포트에 표시될 경우 프리패치 해놓을지 말지(ux향상)import Link from 'next/link';function MyPage() { return ( My Page H.. 2024. 6. 12.
JS(자바스크립트)의 함수에 대해서 학습하자 어느 언어든 함수는 중요하다고 생각합니다. 여러 줄 작성해야할 코드를 많이 줄일 수 있고 어느 역할을 하는지 이름만 잘 부여한다면,가독성도 좋다고 생각하니까요! 그러면 자바스크립트 함수를 알아보겠습니다!Function(함수)함수정의함수 선언문함수 선언문은 가장 일반적인 함수 정의 방식함수 선언문으로 정의된 함수는 함수 호이스팅에 의해 코드 어디에서든 호출 가능 greet('SAHA') // 가능 function greet(name) { console.log(`Hello, ${name}!`); } 함수 표현식함수 표현식은 함수를 변수에 할당하는 방식으로 정의함수 이름은 생략이 가능하다.함수 표현식으로 정의된 함수는 변수 호이스팅에 의해 변수 선언 이전에는 사용할 수 없다.const gr.. 2024. 6. 11.
JS(자바스크립트)의 반복문에 대해 알아보자! 자바스크립트는 다양한 반복문이 있다. 그 중에 기본적인 반복문에 대해 정리하려고 한다.다양한 메서드들은 일단 뒤로하고 기본적인 반복문부터 학습하자! for 문가장 일반적인, 기본적인 반복문 구조for (초기화;, 조건식;, 증감식;) {}으로 구성for (let i = 0; i  기본적인 예시! 한번만 돌려보면 이해가 갑니다!while 문조건식이 참인 동안 반복(계속 참이면 무한루프에 빠집니다!)let i = 0;while (i  do-while 문최소 한 번은 실행되는 반복문let i = 0;do { console.log(i); i++;} while (i  자바스크립트에서 반복할 수 있는 메서드는 많다 하지만 오늘은 기본 반복문만 알아보고 객체나 배열의 반복에 대해서는 관련 있는 장에서 알아보자! 2024. 6. 10.
반응형

티스토리툴바