티스토리

Do It

검색하기

블로그 홈

Do It

rladydqls99.tistory.com/m

@kkkk_biiin 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Vue의 전역 상태관리 라이브러리 VueX - 중앙 집중식 저장소를 두고 데이터 관리 및 상태 관리를 할 수 있도록 해주는 상태 관리 패턴 라이브러리 - store는 애플리케이션 상태를 저장하고 있는 컨테이너 주요 개념 Store 애플리케이션 상태를 저장하는 컨테이너로, src/store.js를 생성해서 스토어를 정의 정의한 store를 main.js에서 `app.use(store)`의 방식으로 등록 등록이 완료되면 스토어를 사용하고 싶은 컴포넌트에서 this.$store.state로 정의한 state에 접근 가능 getter store의 getter에 정의된 값에 접근할 수 있도록 해줌 사용하고자 하는 컴포넌트에서 `this.$store.getter.[접근하고자 하는 요소]`로 접근 가능 mutation state를 변경시키는 역할 컴포넌트에서.. 공감수 0 댓글수 1 2024. 2. 28.
Vue의 Mixins Mixins - 공통 모듈에 해당하는 파일을 만들어서 사용하는 방법 - 기능은 따로 구현하고, 필요할 때마다 mixins 파일을 컴포넌트에 결합해서 사용하는 방법 - main.js에서 전역으로 mixins 파일을 설정할 수 있음 - mixins는 기본적으로 메서드 앞에 $가 붙음 사용방법 1. 먼저 src/mixins.js 파일을 생성한 뒤, 사용할 메서드를 설정해야 한다. // scr/mixins.js import axios from "axios"; export default { methods: { async $callAPI(url, method, data) { return ( await axios({ method: method, url, data, }).catch((e) => { console.log.. 공감수 0 댓글수 0 2024. 2. 28.
Vue의 컴포넌트 심화2(이벤트/ 데이터 전달) 부모 컴포넌트에서 자식 컴포넌트의 이벤트 발생시키기 1. 자식 컴포넌트에서 사용할 메서드를 정의한다. 2. 자식 컴포넌트 태그에서 ref를 정의한다. 자식 컴포넌트의 태그에 ref를 정의해야 부모 컴포넌트에서 해당 태그에 접근이 가능하기 때문에 ref를 정의해야 한다. click 3. 부모 컴포넌트에서 자식 컴포넌트 전체의 ref를 정의한다. 자식 컴포넌트에서 ref를 정의한 것과 같은 이유이며, $ref를 통해 해당 ref에 접근할 수 있다. 해당 ref에 접근을 했다면 접근한 태그에 정해진 메서드를 .[메서드]로 접근을 해서 자식 컴포넌트 이벤트를 발생시킬 수 있다. 부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 직접 변경하기 1. 메서드가 아닌 데이터 값을 변경하는 것이기 때문에 자식 컴포넌트에.. 공감수 1 댓글수 1 2024. 2. 28.
Vue의 컴포넌트 심화(중첩 컴포넌트) 중첩 컴포넌트 사용 방법 자식 컴포넌트로 활용한 컴포넌트를 만들기 부모 컴포넌트에서 자식 컴포넌트 import // 부모 컴포넌트 부모 컴포넌트에서 자식 컴포넌트로 정적 데이터 전달하기 자식 컴포넌트에서 props를 지정해줘야 함(type, default 등) 아래의 코드는 title이라는 props를 부모 컴포넌트로부터 받겠다는 의미를 가짐 만약 props가 없을 경우 default를 title로 사용 // component/pageTitle.vue {{ title }} 부모 컴포넌트에서 데이터 넘겨주기(이 때 자식 컴포넌트의 title과 이름이 같아야 함) // views/NestedComponents.vue 부모 컴포넌트에서 자식 컴포넌트로 동적 데이터 전달하기 자식 컴포넌트는 정적 데이터 전달할 .. 공감수 0 댓글수 0 2024. 2. 28.
Vue의 렌더링 문법 v-for v-for은 data()의 return 값으로 내보내지는 리스트를 반복해서 렌더링을 하는 Vue의 디렉티브이다. v-for은 (값, 인덱스) 구조로 이루어져 있으며, 아래의 코드처럼 productList를 순회하면서 을 출력하는 방식을 지시한다. productList는 data()의 return 값이며 배열 형태를 가진다. v-for을 사용할 때 주의할 점은 v-bind를 통해 key값을 지정해줘야 한다는 점이다. 제품명 가격 카테고리 배송료 {{ product.product_name }} {{ product.price }} {{ product.category }} {{ product.delivery_price }} v-if 조건에 따라 태그를 출력해 주는 디렉티브이며, 조건이 true일 때만.. 공감수 0 댓글수 0 2024. 2. 28.
Vue의 컴포넌트와 데이터 바인딩 컴포넌트 Vue는 React와 유사한 폴더구조를 가진다. React에서 라우팅 되는 컴포넌트들을 src/page라는 폴더에 담아서 관리했다면, Vue는 src/views라는 폴더에 담아서 관리를 한다. 이외에 공통 컴포넌트는 React와 마찬가지로 src/components에 담아서 관리를 한다. 데이터 바인딩 Vue는 React와는 다르게 양방향 데이터 바인딩을 지원한다. 학습을 하면서, React와 크게 차이를 느끼지 못해서 이 부분에 대해서는 추가 학습이 필요하다는 생각이 든다. React에서 데이터 바인딩을 할 때 {}를 사용했다면, Vue에서는 {{}}를 사용한다. 아래의 코드는 {{}}를 사용해서 데이터를 바인딩 한 코드이다. htmlString의 값이 문자열이라면 세 번째 줄과 같이 바인딩을.. 공감수 0 댓글수 0 2024. 2. 27.
Vue의 Router 설정과 main.js Router 설정 Router 설치(프로젝트 폴더에서 진행) `vue add router` 수동으로 프로젝트를 생성하지 않고 default로 프로젝트를 생성하게 되면 Router를 따로 설치해 줘야 하며, 설치 방법은 아래와 같다. // Router 설치(프로젝트 폴더에서 진행) `vue add router` // 이후 src/router/index.js에서 라우트 설정할 수 있으며 객체는 path, name, component 등을 요소로 갖음 const routes = [ { path: "/", name: "home", component: HomeView, } ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL.. 공감수 0 댓글수 0 2024. 2. 27.
Vue로 프로젝트 생성하기 Vue.js란? Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework이다. Vue는 Model-View-ViewModel(MVVM) 패턴을 사용하는데, 이는 프로그래밍 로직과 UI를 분리해서 개발하는 패턴을 말한다. 이러한 개발 패턴은 ViewModel을 통해 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발 편의성을 제공하는데, 이는 Angular와 React의 장점을 모두 가진다고 볼 수 있다. Vue CLI로 프로젝트 생성하기 Vue CLI는 Vue 프로젝트 구성, 빌드 및 배포를 쉽게 해주는 플러그인이다. Vue CLI를 통해 프로젝트를 생성하는 방법은 크게 default option과 manually select option이 있으며, manually sel.. 공감수 0 댓글수 1 2024. 2. 27.
프레임워크와 라이브러리의 차이 프레임워크 정의 프레임워크는 어떤 목적을 달성하기 위한 기본 구조를 제공하는 도구와 라이브러리의 집합이다. 개발자들은 프레임워크를 사용하여 애플리케이션을 빠르게 개발할 수 있다. 프레임워크는 일반적으로 애플리케이션의 구조, 흐름, 규칙 등을 정의하며, 개발자는 이를 따르면서 자신의 코드를 작성하기만 하면 된다. 예시 Java --> Spring Python --> Django, Flask 웹 개발 --> Angular, Vue.js 앱 개발 --> React Native, Flutter 라이브러리 정의 라이브러리는 개발자가 특정 기능을 수행하기 위해 사용하는 도구의 집합이다. 라이브러리는 개발자가 필요에 따라 호출하여 사용할 수 있으며, 애플리케이션의 특정 부분에 대한 기능을 제공한다. 개발자는 라이브러.. 공감수 0 댓글수 0 2023. 12. 28.
일반함수 VS 화살표 함수 일반함수 함수 선언식 호이스팅이 됨: 따라서 함수 위에 main()을 호출해되 잘 작동이 됨 함수의 이름이 필수적이어야 해서 익명함수는 불가능 function main() { console.log('main') } 함수 표현식 익명함수로 사용 가능 호이스팅이 되지 않음 cosnt main = function() { console.log('main') } 화살표 함수 함수 표현식을 간결하게 만들어줌 const main = () => { console.log('main') } 일반함수와 화살표 함수의 차이점(arguments) 일반함수는 매개변수를 넘겨주지 않아도 arguments라는 변수에 매개변수들이 담김 화살표 함수는 arguments 변수를 사용하면 not defined가 나오기 때문에 () 안에 명.. 공감수 0 댓글수 0 2023. 12. 22.
자바스크립트 this가 뭐야? 자바스크립트에서 this는 인스턴스(객체) 자신을 가리키는 참조변수이다. 즉 this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 이러한 this는 함수가 호출될 때 결정이 되며, 이렇게 함수가 호출될 때마다 this가 동적으로 결정되는 것을 this가 그 객체에 바인딩된다고 한다. 프로퍼티: 어떠한 값이 다른 값과 연관되어 있을 때의 값을 property라고 하며, 점표기법(.length)와 같은 방식으로 호출 이러한 this는 누가 호출했느냐에 따라 값이 바뀐다는 특징을 가지고 있다. 아래의 코드는 그 예시인데, car라는 객체에서 정의된 getName을 어디서 호출했느냐에 따라 this가 달라지는 예시이다. globalCar처럼 전역에서 호출 주체 없이 호출이 될 경우 this는 전역 객체.. 공감수 0 댓글수 0 2023. 12. 12.
객체지향 프로그래밍이란 무엇인가? 객체지향 프로그래밍은 동일한 속성(이름, 가격 등)을 가진 각각의 객체들을 일일이 생성하지 말고 하나의 틀을 바탕으로 생성하는 것을 지향하는 것을 의미한다. 먼저 객체지향 하지 않은 프로그래밍의 예시는 아래와 같다. car1 = { name: 'S class', price: 8000, type: auto } car2 = { name: 'matiz', price: 1000, type: auto, } car2 = { name: 'sonata', price: 2000, type: manual, } 위와 같은 방법을 사용한다면 car가 100개가 있을 때 같은 코드를 백 번 쳐야하는 번거로운 상황이 발생하게 되며, 오타와 같이 휴먼 에러를 발생시킬 가능성이 크다. 이러한 문제를 해결하기 위한 코드 작성 방법이 .. 공감수 0 댓글수 0 2023. 12. 11.
Custom Hooks Custom Hooks 커스텀 훅은 react에서 제공하는 훅이 아닌 개발자가 직접 만들어서 사용하는 훅을 말한다. 이를 사용했을 때 input과 fetch와 같이 반복적으로 사용되는 메서드를 하나로 묶어서 사용할 수 있게 해주며, 이에 따라 코드 재사용성을 높여준다. useInput 만들기 input 태그를 생성하고 활용하려면 보통 input을 관리하는 state와 값의 변경을 다루는 Onchange 함수, 그리고 input에 입력된 값을 바탕으로 특정 동작을 수행하는 Onclick 함수를 생성해야 한다. 만약 Input을 여러개 사용해야 할 경우 코드가 매우 길어질 수 있으며, 동일한 코드를 사용하는 것이기 때문에 custom 훅을 만들어서 사용하면 재사용성을 높이고 가독성을 높일 수 있다. useI.. 공감수 0 댓글수 1 2023. 12. 7.
useReducer를 통한 상태관리(reducer, dispatch, action) useReducer state 관리를 위한 hook으로 여러 하위 값을 가지는 state와 같이 복잡한 state를 다뤄야 할 때 useState 대신 사용할 수 있는 hook이다. useReducer를 사용하기 위해선 먼저 reducer와 dispatch, action에 대해 알아야 한다. 은행을 예로 들었을 때 은행의 역할은 예금자에 요구에 의해 입금 혹은 출금을 해주는 역할을 한다. useReducer에서 reducer가 이러한 역할을 한다. 그리고 예금자가 은행에 입금 또는 출금을 요구해야 은행은 그 동작을 수행하는데, useReducer에서는 이 역할을 dispatch라고 한다. 그리고 요구의 내용을 action이라고 하며, 이러한 과정을 통해 잔고가 변화하게 되는데, 이때 잔고를 state라고.. 공감수 0 댓글수 1 2023. 12. 6.
Context API의 기초적인 사용방법(useContext) Context API 애플리케이션 안에서 전역으로 사용되는 데이터를 공유하는 방법을 제공하는 API이며, Context는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능이다. 이를 사용하면 자식 컴포넌트에게 지속적으로 props를 넘겨주지 않아도 되기 때문에 props drilling을 방지할 수 있다. 사용 방법 먼저 context를 정의할 새로운 파일을 만들고 아래와 같이 작성해 주면 된다. defaultValue는 Provider로 value를 제공해주지 않을 경우 사용되는 고정값을 의미하며, 컴포넌트를 독립적으로 테스트할 때 유용한 값이다. //context/ThemeComtext.js import { createContext } from 'react' export const Them.. 공감수 0 댓글수 0 2023. 12. 2.
useCallback을 활용한 성능 최적화 useCallback 메모이제이션 기법으로 컴포넌트의 성능을 최적화하는 데 사용하는 Hook이다. useMemo는 값을 메모이제이션 해주는 Hook이라면, useCallback은 콜백함수 자체를 메모이제이션 해준다. useCallback의 구조는 useMemo와 똑같으며, 메모이제이션 해줄 콜백함수와 의존성 배열을 포함해야 한다. const calculate = useCallback(num => { return num + 1 }, [item]) 사용방법 먼저 아래와 같이 useCallback을 사용하지 않았을 경우 number의 값이 바꿀 때나, isDark의 값이 바뀔 때 모두 렌더링이 발생하기 때문에 useEffect가 실행이 된다. 이유는 someFunction은 콜백함수를 저장하는 메모리의 주소값.. 공감수 0 댓글수 0 2023. 11. 29.
useMemo를 사용한 성능 최적화 useMemo 리액트에서 컴포넌트의 성능을 최적화하기 위해 사용하는 훅이다. Memo는 Memoization을 의미하며, 동일한 데이터를 반복적으로 요청을 할 때 맨 처음값을 메모리에 저장해서 필요할 때마다 값을 계산하지 않고 메모리에서 꺼내서 사용하는 기법이다. 즉, 컴포넌트가 리렌더링이 됐을 때 데이터를 다시 계산하지 않고 메모리에 저장된 것을 가져오는 것을 의미한다. useMemo의 구조는 메모이제이션 해줄 값을 계산해서 리턴해주는 콜백함수와, 배열의 값이 업데이트될 때만 실행할 수 있도록 해주는 의존성 배열로 구성되어 있으며, 아래와 같다.(밑에 실제 사용 코드 있음) const value = useMemo(() => { return calculate()// 콜백함수 }, [item])// 의존성.. 공감수 0 댓글수 1 2023. 11. 27.
SSE 실시간 알림 기능 구현 중고 의류 거래 플랫폼 프로젝트를 진행하면서 채팅 기능, 찜하기 기능, 상점 팔로우 기능이 있었고, 누군가가 나에게 채팅을 보내거나 내 상품을 찜하거나, 나의 상점을 팔로우했을 때 알림이 오는 기능을 구현해야 했다. 채팅을 웹소켓으로 구현을 했지만, 양방향 통신을 지원하는 웹소켓에 비해 단방향 통신을 지원하는 SSE를 사용하는 것이 서버 리소스와 네트워크 트래픽을 절약할 수 있다고 판단해 SSE를 활용해 알림 기능을 구현하기로 하였다. SSE(Server Sent Event) 단방향 데이터 흐름(서버 -> 클라이언트) 단순성: 표준 HTTP를 통해 작동하기 때문에 WebSocket에 비해 간단함(캐싱, 프록시, 방화벽과 같은 기존 웹 인프라와 쉽게 통합) 자동 재연결 메커니즘 내장 WebSocket 양방.. 공감수 0 댓글수 0 2023. 11. 20.
이미지 최적화(Browser image Compression) 중고 의류 거래 플랫폼 프로젝트를 진행할 때 상품 사진과 프로필 사진을 업로드하는 기능이 있었는데, Spring boot의 이미지 저장 용량의 기본값이 1MB여서 이보다 큰 이미지를 넣었을 때 500 에러가 발생하였다. 백엔드분들에게 요청을 해서 변경할 수 있기도 했지만, 프로필 이미지의 경우 매우 작은 사이즈였고, 상품 이미지의 용량도 너무 클 필요가 없다는 판단이 들어 최적화를 진행하게 되었다. Browser image Compression을 사용한 이유는 이후에 구현해야 할 기능들이 매우 많았고, 시간은 제한적이었기 때문에 학습시간이 비교적 적고 빠르게 적용할 수 있는 방법을 사용해야 했기 때문이다. Browser image Compression은 option 값과 이미지의 타입만 정해주면 됐기 때.. 공감수 0 댓글수 0 2023. 11. 20.
React lazy, Suspense React lazy React 컴포넌트를 동적으로 가져올 수 있는 함수로 dynamic import를 할 수 있게 해 준다. 이는 import()를 통해 불러오는 요소들을 무조건 불러오는 것이 아닌 사용자가 실제로 사용할 때만 로드될 수 있게 해주며, 초기 페이지 로딩 시간을 줄여준다. Suspense react lazy 함수를 통해 지연 로딩 된 컴포넌트를 래핑 할 수 있도록 React에서 제공하는 구성 요소로, react lazy를 통해 지연 로딩된 컴포넌트가 로드되는 동안 로드 상태를 처리하고, 대체 콘텐츠를 표시하기 위해 사용된다. 이는 지연 로딩된 컴포넌트가 로드되는 동안 표시할 내용을 지정하는 fallback Props가 필요하며, 기본적으로 로딩 중인 상태를 나타내는 내용을 넣는다. 사용 이.. 공감수 0 댓글수 2 2023. 11. 20.
React memo React memo 리액트에서 제공하는 고차 컴포넌트(Higher Order Component)이다. 고차 컴포넌트는 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수이며, React memo는 렌더링이 되어야 할 상황에 놓일 때마다 Props Check를 통해서 자신이 받는 Props에 변화가 있는지 확인을 하고 변화가 있다면 리렌더링을 하고, 변화가 없다면 기존에 렌더링이 된 내용을 재사용한다. React memo는 Props를 기반으로 구성요소만 memoization 하기 때문에 컴포넌트 내에서 useEffect, useState와 같은 훅을 사용하는 경우 변경 여부에 관계없이 컴포넌트가 리렌더링이 된다. 주의할 점은 부모 컴포넌트에서 객체를 자식 컴포넌트에게 Props로 전달할 때 R.. 공감수 0 댓글수 1 2023. 11. 20.
프로젝트 회고 항해99의 프로젝트가 어느덧 끝이 났다. 하루에 하나씩 글을 썼다면 오늘 글의 제목이 99일 차가 됐겠지만 그렇지 못한 부분에 대해 반성을 하며 이 글을 작성하고자 한다. 오늘 글의 주제는 최종 프로젝트에서 사용한 기술들이다. CS 지식이 거의 없다시피 한 상태로 프로젝트를 시작했기 때문에 항해99를 진행하면서 배웠던 기술 또는 프레임워크, 빌드 도구들 위주로 글이 작성되겠지만, 사용했던 것들의 특징과 장, 단점에 대해서 글을 작성할 것이다. 빌드(Vite) 최종 프로젝트의 빌드는 vite로 진행을 했다. 강의에서는 CRA를 활용해서 빌드를 했지만 최종 프로젝트에서는 vite를 통해 빌드를 했는데, 그 이유와 CRA, Vite의 차이점에 대해서 알아보자. CRA(Create React App) CRA는 .. 공감수 0 댓글수 1 2023. 11. 13.
62일차 (Array List와 Linked List) 어레이 리스트(Array List)와 링크드 리스트(Linked List)는 데이터를 저장하는 두 가지 기본적인 자료 구조이다. 어레이 리스트(Array List) 연속적인 메모리 할당: 어레이 리스트는 연속된 메모리 위치에 데이터를 저장한다. 이것은 인덱스를 통한 빠른 접근을 가능하게 해 준다. 인덱스를 통한 빠른 접근: 특정 인덱스의 요소에 대한 접근이 빠르며, 일반적으로 O(1)의 시간 복잡도를 가진다. 크기 조정의 어려움: 초기에 할당된 공간을 넘어서는 경우, 새로운 더 큰 어레이를 생성하고 기존의 데이터를 복사해야 한다. 이는 비용이 많이 드는 작업일 수 있다. 삽입과 삭제의 비효율성: 중간에 요소를 삽입하거나 삭제할 경우, 다른 모든 요소들을 이동해야 하므로 O(n)의 시간이 소요된다. 링크드.. 공감수 0 댓글수 1 2023. 11. 10.
61일차 (리액트에서 자주 쓰이는 이벤트의 타입) Button // onClick const handleClick = (event: React.MouseEvent) => {}; // onMouseDown const handleMouseDown = (event: React.MouseEvent) => {}; // onMouseUp(눌렀다 뗐을 때) const handleMouseUp = (event: React.MouseEvent) => {}; // onMouseEnter (마우스가 요소 위로 올라갔을 때) const handleMouseEnter = (event: React.MouseEvent) => {}; // onMouseLeave (마우스가 요소를 벗어났을 때) const handleMouseLeave = (event: React.MouseEvent.. 공감수 0 댓글수 0 2023. 11. 8.
60일차 (Recoil 사용방법 기초 2) Selector set 메서드 이전 글에서 Recoil의 atom과 Selector의 get 메서드를 알아보았다면, 이번 글에서는 set 메서드를 알아보고자 한다. set 메서드의 사용법은 get 메서드와 매우 유사하며, Selector 내부에서 선언한다. import { atom, selector } from 'recoil'; // atom export const textState = atom({ key: 'textState', // 고유한 ID default: '', // 기본값 }); // selector export const Selector = selector({ key: 'Selector', get: ({get}) => { // textState의 현재 값을 가져와서 대문자로 변환 const .. 공감수 0 댓글수 0 2023. 11. 4.
59일차 (Recoil 사용방법 기초) Recoil Recoil은 리액트용 전역 상태관리 라이브러리이다. Recoil에서 중요한 개념은 atom과 selector이다. 먼저 atom은 컴포넌트라는 대륙들의 공중에 떠있는 것과 같은 상태를 말하며 useState의 state와 같다고 볼 수 있다. Selector는 atom을 기반으로 파생된 데이터를 말하며, get 메서드를 통해 받아온 atom을 변형시키는 것을 말한다. 초기 설정 1. Recoil을 설치해야 한다 yarn add recoil npm i recoil 2. Recoil Root 컴포넌트를 프로젝트 최상단 컴포넌트 위에 감싸주면 된다. // app.js가 최상단일 때 function App() { return ( ) } 3. atom 파일 생성 Atom의 key는 유니크한 값을 가.. 공감수 0 댓글수 1 2023. 11. 3.
React-Query (Cache-time, Stale-time) Cache-time, Stale-time 나는 처음에 리액트 쿼리가 서버에 첫 번째 요청 이후 응답 값을 데이터를 캐시에 저장하는데, 만약 같은 요청을 다시 하고, 응답 값이 캐시에 저장되어 있다면 서버에 요청을 보내지 않고 캐시에 저장된 데이터를 불러오는 라이브러리인 줄 알았다. 근데 이 부분은 조금 틀렸다는 사실을 얼마 전에 알게 되었다. 리액트 쿼리의 Cache-time, Stale-time의 기본 설정은 Cache-time이 5분, Stale-time은 0초이다. 이는 캐시에 데이터가 5분간 저장된다는 것을 의미하는데, 저장된다고 해서 같은 데이터를 요청했을 때 서버에 요청을 보내지 않는 것은 아니었다. 이유는 Stale-time이 0초이기 때문인데, 이는 캐시에 저장된 데이터가 신선하다고 판단하.. 공감수 0 댓글수 1 2023. 11. 2.
57일차 (CS 39, 40, 41) Array, LinkedList에 대한 설명과 각각의 사용법 Array는 가장 기본적인 자료 구조로, 동일한 타입의 요소들을 연속적인 메모리 위치에 저장한다. 배열의 특징 중 첫 번째로는 고정된 크기를 가진다는 점이다. 두 번째는 배열의 요소에 접근할 때 인덱스를 사용해서 빠르게 접근할 수 있다는 점이다. 이는 O(1)의 시간 복잡도를 가진다. 마지막 특징은 배열의 요소들은 메모리 상에서 연속적으로 위치한다. 사용방법은 변수명 = [1, 2, 3, 4]와 같이 간단하게 사용할 수 있으며, 변수명[인덱스]를 활용해서 특정 값을 수정할 수 있다. 또한 push, pop 등을 활용해서 마지막 인덱스에 값을 추가하거나 삭제할 수 있다. LinkedList는 각 노드가 데이터와 다음 노드를 가리키는 참조(포인터).. 공감수 0 댓글수 0 2023. 11. 1.
56일차 (CS 37, 38) Javascript의 event loop란 이벤트 루프는 자바스크립트가 싱글 스레드(한 번에 하나의 작업만 처리할 수 있는 환경) 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 핵심 메커니즘이다. 이벤트 루프의 주요 구성 요소는 다음과 같다. 첫 번째는 Call Stack(호출 스택)이다. 이는 현재 실행 중인 함수의 목록을 추적하는 스택으로, 함수가 호출되면 스택의 맨 위에 추가되고, 완료되면 스택에서 제거된다. 두 번째는 Callback Queue이다. 비동기 작업이 완료되면 해당 콜백 함수가 이큐에 추가된다. 이후 호출 스택이 비어있을 때, 이벤트 루프는 콜백 큐에서 함수를 가져와 호출 스택에 넣는다. 마지막은 Web APIs이다. 이는 브라우저에서 제공하는 API들로, setTimeou.. 공감수 0 댓글수 0 2023. 10. 31.
55일차 (CS 35, 36) 프론트엔드 개발 시 개발자 도구를 활용한 경험 기본적으로 콘솔을 찍어서 오류를 확인하고, 데이터가 잘 들어오는지 확인을 하기 위해 개발자 도구를 주로 사용한다. 또한 디자이너와의 협업 과정에서 와이어프레임의 디자인과 실제로 내가 만든 웹 페이지를 비교하면서 CSS를 수정할 때 사용한다. 그리고 서버에 요청이 잘 전달되지 않을 때 네트워크 탭을 통해 어떤 부분이 문제인지 확인하고자 할 때 사용한다. 프론트엔드 성능최적화를 위한 방법과 프로젝트 경험 프론트엔드 성능최적화를 위한 방법 첫 번째는 이미지 최적화이다. 웹 페이지의 의도와는 다르게 이미지 용량이 큰 경우 사용할 수 있다. 두 번째 방법은 코드를 컴포넌트 기반으로 번들을 분할하여 필요한 시점에만 로드하는 방법이 있다. 세 번째는 브라우저 캐싱을 활용.. 공감수 0 댓글수 0 2023. 10. 28.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.