티스토리

hani

검색하기

블로그 홈

hani

hani-develop-history.tistory.com/m

hani:) 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

자바스크립트에서 this 자바스크립트에서 this는 다른 언어나 객체 지향 프로그래밍에서 사용하는 this와 다소 다르게 동작할 수 있습니다. 특히, this는 함수가 호출되는 방식에 따라 다르게 동작합니다. 오늘은 자바스크립트에서 this가 어떻게 동작하는지, 화살표 함수에서 this는 어떤 특징을 가지는지, 그리고 이를 어떻게 잘 활용할 수 있는지 알아보겠습니다. 목차this의 개념this의 동적 바인딩this의 활용 this의 개념자바스크립트에서 this는 함수가 호출될 때 this가 바인딩된 객체를 참조합니다. 이때 this가 참조하는 객체는 함수가 어떻게 호출되었는지에 따라 달라집니다. 전역 컨텍스트에서의 this환경참조전역전역 객체브라우저 환경window 객체Node.jsglobal 객체 함수 내부에서의 this함수.. 공감수 1 댓글수 0 2025. 3. 11.
[TS] type과 interface의 차이 TypeScript에서 타입을 정의할 때 type과 interface 두 가지 방법이 있습니다. 겉보기에는 비슷해 보이지만, 몇 가지 중요한 차이점이 존재합니다. 이번 글에서는 type과 interface의 차이점과 각각의 적절한 사용법을 설명하겠습니다.목차type과 interface의 기본 개념type과 interface의 차이점어떤 경우에 무엇을 사용할까? type과 interface의 개본 개념type타입 별칭(Type Alias)을 정의할 때 사용간단한 원시 타입부터 복잡한 객체 타입까지 다양하게 활용 가능 interface객체의 구조를 정의하는 데 사용, 주로 클래스와 함께 사용하지만 함수 타입과 함께 사용 가능 type과 interface의 차이점확장 방식type은 &(Intersection.. 공감수 0 댓글수 0 2025. 2. 28.
[Next.js] useSWR + axios로 비동기로 데이터 가져오기 본 글은 Next.js에서 useSWR와 axios를 사용해 서버에 비동기로 데이터를 가져오는 방법을 다룬 내용입니다. 목차useSWRaxios사용해보기 useSWR데이터 페칭을 위한 Hook으로 데이터 요청과 캐싱을 쉽게 관리할 수 있도록 해준다. 이전 데이터를 유지하면서 백그라운드에서 새로운 데이터를 가져와 업데이트 하는 방식이다. 기본 형태는 아래와 같다. // 0. 설치yarn add swr// 1. import import useSWR from 'swr'; // 2. 선언 (key: '/api/user', 데이터 가져오는 함수: fetcher)const { data, error, isLoading } = useSWR('/api/user', fetcher); (필수 값은 색깔로 표시)파라미터k.. 공감수 0 댓글수 0 2024. 5. 26.
[Next.js] 커서 기반 무한 스크롤 구현 (useSWRInfinite) 본 글은 Next.js에서 useSWRInfinite를 사용해 커서 기반 무한 스크롤을 구현한 내용입니다. 목차페이지네이션: 커서 기반 VS 페이지 기반무한 스크롤 구현 (useSWRInfinite) 페이지네이션: 커서 기반 VS 페이지 기반우선 페이지 기반과 커서 기반의 차이점 및 장, 단점에 대해 정리했다. 페이지 기반 (Page-based Pagination)페이지 번호와 오프셋(offset)을 사용해 특정 페이지의 데이터를 가져오는 방식장점구현이 간단 (페이지 번호와 오프셋을 사용해)특정 페이지 번호로 이동하기 때문에 직관적으로 사용 가능많은 라이브러리와 프레임워크에서 기본적으로 지원하는 페이지네이션 방식단점데이터가 많을 수록 비효율적데이터가 빈번하게 변경되는 경우, 데이터가 중복되거나 누락될 수.. 공감수 1 댓글수 0 2024. 5. 18.
[Next.js] Zod + React Hook Form 사용해 회원가입 페이지 만들기 본 글은 Next.js에서 Zod + React Hook Form을 사용해 회원가입 페이지를 만든 방법을 다룬 내용입니다. 다양한 프로젝트 진행하면서 항상 회원가입 페이지는 직접 구현했었는데, 주변에서 간편한데 성능 좋은 라이브러리 조합이 있다고 추천해줘서 사용해봤다. 사용해보니 정말 간편하게 회원가입 기능을 만들 수 있어서 다른 사람들과 함께 공유하면 좋을 거 같아서 글을 쓰게 되었다. 목차 Zod React Hook Form 실제로 적용해보기 Zod TypeScript를 우선으로 하는 스키마 선언 및 유효성 검증 라이브러리이다. 스키마 검증에 사용하며, 사용자 등록 양식을 캡슐화하여 관리한다. 장점으로는 강력한 유효성 검사 → 유효성 검증 후 값을 리턴, 타입을 자연스럽게 추론 가능 쉬운 사용 → 직.. 공감수 0 댓글수 2 2024. 4. 3.
[React] fetch와 axios 본 글은 리액트에서 네트워크 통신을 가능하게 해주는 fetch와 axios에 대해 다룬 내용입니다 목차 fetch axios fetch JS 내장 라이브러리 Promise 기반의 인터페이스를 사용해 비동기적으로 요청을 처리 try { let response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } let data = await response.json(); console.log(data); } catch (error) { console.error('Fetch error:', error); } axios Promise 기반의 API를 사용해 비동기 요청 처리 HTTP 요청과 응답을 쉽게 .. 공감수 0 댓글수 0 2024. 3. 25.
[React] useState, useReducer hook 본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다. 목차 차이점 useState란? useReducer란? 차이점 useState useReducer 용도 단순한 상태관리 복잡한 상태관리 인터페이스 하나의 상태 값, 그 값을 변경하는 함수 반환 리듀서와 디스패치 함수 반환 가독성과 유지 보수성 직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상 복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우 간단히 정리하면, useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용, useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능.. 공감수 0 댓글수 0 2024. 3. 2.
[Next.js, Node.js] 토큰 암호화 (crypto-js) 본 글은 Next.js에서 crypto-js 사용해 AccessToken, Refreshoken을 암호화 및 복호화 하는 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. crypto-js란? 3. 사용 방법 1. 도입 이유 SessionStorage에 AccessToken, Refreshoken을 저장했던 이유는 Cookie에 비해 보안성이 높았기 때문이다. 하지만, 탭별로 데이터가 관리되다 보니 사용자가 매번 새로운 로그인을 해야 하는 번거로움이 발생했다. 보안도 중요하지만 사용자 경험 개선이 우선이라 판단되어 AccessToken, Refreshoken을 Cookie에 저장하기로 했다. 이때, 그냥 저장하는 게 아닌 crypto-js를 활용해 암호화해 사용자 정보가 직접적으로 노출되지 않도록.. 공감수 0 댓글수 0 2024. 2. 22.
[Next.js] NextAuth 사용해 카카오톡 로그인 구현 본 글은 Next.js에서 NextAuth 사용해 카카오톡 로그인 구현했던 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. NextAuth란? 3. 사용 방법 1. 도입 이유 최근에 진행한 프로젝트에서 보안성 때문에 Token을 SessionStorage에 저장했었다. SessionStorage의 경우 Cookie에 비해 보안성이 좋지만, 브라우저 탭 별로 로그인을 해야한다는 점이 굉장히 불편했다. 팀원들과 논의한 결과, Token 저장하는 방법을 바꾸기로 결정했고, 이후 다양한 방법에 대해 찾아봤다. 쿠키에 저장 후 암호화하여 보안성 높이기 NextAuth 사용해서 관리하기 우리는 2번 방법을 채택했고, 그 이유는 아래와 같다. NextAuth는 다양한 인증 및 식별 공급자를 지원해 인증 흐름.. 공감수 1 댓글수 0 2024. 2. 21.
[Next.js] Hydration failed 에러 해결 (Unhandled Runtime Error) 본 글은 Next.js로 프로젝트를 진행하면서 발생했던 Hydration failed 에러를 해결한 방법에 대해 다룬 내용입니다. 목차 1. 에러 발생 2. 원인 3. 해결 방법 1. 에러 발생 소개 페이지에서 로그인 유무에 따라 버튼을 다르게 보이도록 처리하는 과정중에 아래 에러가 발생했다. 2. 원인 에러 원인을 한 줄로 간단하게 정리하자면, 서버와 클라이언트에서 렌더링된 HTML이 일치하지 않아서이다! 위의 내용을 이해하기 위해서는 Next.js가 서버 사이드 렌더링(SSR)이라는 것을 잊지 말아야 한다. SSR은 클라이언트와 서버의 렌더링 사이의 일관성을 유지하기 위해 hydrate 과정을 사용한다. hydrate 서버에서 생성된 HTML과 클라이언트 측 JS 코드 간의 일치 여부를 확인 후, 그.. 공감수 0 댓글수 0 2024. 2. 17.
이벤트 전파 본 글을 자바스크립트의 이벤트 전파에 대해 다룬 내용입니다. 목차 1. 이벤트 전파(Event Propagation)란? 2. 이벤트 전파의 종류 (버블링, 캡처링) 프론트엔드 개발자가 이벤트 전파에 대해 이해하면 사용자와의 상호작용을 관리하고, 효율적으로 이벤트를 처리할 수 있다. 1. 이벤트 전파(Event Propagation)란? 이벤트 전파에 대해 간단하게 정리하면 아래와 같다. HTML 문서 내에서 이벤트가 발생하면, 해당 이벤트가 어떻게 처리되는지를 설명하는 개념 위에 내용만 읽어봤을 때는 무슨 말인지 이해 못할 수도 있다. 아래 과정을 통해 이벤트 전파가 어떻게 일어나는지 알아보자! 이벤트 처리 과정 사용자의 상호작용(예: 클릭, 마우스 오버 등)으로 인해 이벤트 발생 → 이벤트 타깃(Ev.. 공감수 0 댓글수 0 2024. 2. 8.
[자바스크립트] 자료형 변경하기 본 글을 자바스크립트에서 자료형 변경하는 방법에 대해 다룬 내용입니다. 목차 1. 정수 2. 실수 3. 문자 (문자열) 4. 논리 1. 정수 // 1. Number // 주어진 값을 숫자로 변환, 부동 소수점 숫자로 인식 console.log(Number("123")); // 123 console.log(Number("123.45")); // 123.45 console.log(Number(true)); // 1 console.log(Number("123")); // NaN (숫자로 변환할 수 없는 경우) // 2. parseInt // 주어진 값 하나하나를 정수로 추출, 부동 소수점 이후 숫자는 무시 // 두 번째 매개변수로 기수(진수)를 지정, 생략 시에는 10진수 console.log(parseInt.. 공감수 0 댓글수 0 2024. 2. 5.
[자바스크립트] 배열과 집합 ([], set()) 본 글은 배열과 집합을 다룬 내용입니다. 목차 1. 배열과 집합을 차이점 2. 성능 3. 배열 4. 집합 1. 배열과 집합의 차이점 개발자는 데이터를 효율적으로 다루고 관리하기 위해 다양한 상황에 적절한 자료구조를 선택하고 활용할 수 있어야 한다. 데이터를 어떻게 관리하는지에 따라 프로그램의 성능이 달라진다. 그래서 우리는 늘 적절한 선택을 해야한다. 데이터 구조의 특징을 잘 기억해야지 적절한 선택을 할 수 있다는 점을 잊지 말고 공부하면 좋겠다! 이제 본론으로 돌아와 배열과 집합의 차이점을 정리하면 아래와 같다. 집합은 중복을 허용하지 않는 고유 값들의 모임 배열은 중복을 허용하고, 순서를 갖는 값들의 모임 여기서 기억해야 할 키워는 중복과 순서이다. 집합은 중복 X, 순서 X 배열은 중복 O, 순서 .. 공감수 0 댓글수 0 2024. 1. 31.
Next.js에서 카카오 지도 사용하기 본 글을 Next.js에서 카카오 지도 오픈 API를 사용법을 다룬 내용입니다. 지도 만들기 순서를 간단하게 요약하면 아래와 같다. 카카오 지도 Key 발급 Next.tsx 파일 초기 설정 지도 그리기 카카오 지도 Key 발급 순서: 카카오 지도 페이지 접속 > 카카오로 로그인 > 내 애플리케이션 선택 > 애플르케이션 추가 및 선택 > JavaScript 키 복사 (꼭 JavaScript 키 복사해두기!) Next.tsx 파일 초기 설정 _document.tsx에서 카카오 지도 API 스크립트를 로드해야 한다! (해당 파일에서 스크립트를 로드하면 모든 페이지에 해당 스크립트가 포함되어 초기 로딩 시간 개선, 필요한 경우에만 API 활성화 가능) JavaScript 키는 아까 사이트에서 복사한 값 넣어주.. 공감수 0 댓글수 0 2024. 1. 25.
실시간 채팅 구현 본 글은 React에서 Websocket & STOMP 를 사용해 실시간 채팅을 구현한 내용입니다. Websocket, STOMP 모두 프로토콜이다. (자세히 알고 싶다면 링크를 타고 들어가서 확인해보면 될 거 같다.) 두 가지 프로토콜이 어떤 특징을 가지고 있어서 실시간 채팅을 구현할 수 있는지 간단하게 정리해봤다. Websocket 양방향 통신을 지원하며, 지속적인 연결을 통해 실시간 데이터 전송을 가능하게 해줌 STOMP 메시지 기반의 프로토콜로 쉬운 구현과 클라이언트-서버 간의 효과적인 양방향 통신을 제공 실시간 채팅 구현 두 프로토콜의 특징을 알아봤으니 이제 실제로 활용해서 기능을 구현해보려고 한다. 먼저 단계를 설명하자면 아래와 같다. SockJS 객체를 생성합니다. (웹소켁 연결을 위한 객체.. 공감수 0 댓글수 0 2024. 1. 24.
상태 관리 여러 가지 프로젝트를 진행하면서 내가 제일 많이 했던 고민이 바로 "상태 관리"이다. 상태 관리를 신경써야 하는 이유는 다양하지만 내가 중요하게 받아드리는 이유는 아래와 같다. 중앙 상태 관리를 통해 컴포넌트 간의 데이터 흐름을 쉽게 관리 가능 코드 유지 보수성 향상 상태의 불변성을 유지함으로서 예측 가능하고 안정적인 어플리케이션 구현 가능 어떻게 상태를 관리하는지에 따라 프로젝트의 성능이 달라진다. 위와 같은 이유로 프론트엔드 개발자는 특히 상태 관리를 잘해야 한다고 생각한다. (직접적인 영향이 있기 때문에) 그래서 오늘은 상태 관리가 뭔지, 어떤 방법으로 하는지에 대해 자세히 알아보려고 한다. 상태란? 우선 상태에 대해 찾아봤다. 어플리케이션 내에서 변경 가능한 데이터 리액트에서는 컴포넌트 내에서 관.. 공감수 0 댓글수 0 2024. 1. 16.
ContextAPI와 Recoil 지금 지인들과 진행하고 있는 사이드 프로젝트가 하나있다. 처음에는 관리해야 할 데이터가 별로 없어서 ContextAPI를 사용했는데, 시간이 지날수록 불편한 점들이 있어서 팀원들과 논의한 결과 Recoil을 사용하기로 결정했다! :) 변경한 이유는? ContextAPI를 불편하게 생각했던 이유는 아래와 같다. 코드 간결성 및 가독성 불필요한 리렌더링 발생 코드 간결성 및 가독성 ContextAPI에 로그인 유무를 저장한 변수가 있었는데 분명 boolean으로 저장했는데 console에 찍으면 int이 찍혀있는 것이었다. 디버깅을 통해 원인을 파악해보니 팀원 중 한명이 코드를 잘못 작성해서 int형으로 데이터가 잘못들어갔던 것이다. (주석 참고) export const AuthProvider = ({ ch.. 공감수 0 댓글수 0 2024. 1. 15.
Styled Components와 Tailwind CSS 최근에 진행했던 프로젝트 2가지가 있는데 하나는 스타일드 컴포넌트로, 하나는 테일윈드 CSS로 작업했었다. 이 내용들을 포트폴리오에 녹여내던 중 '내가 이 두 가지를 정확히 이해하고 사용하고 있는가..?' 라는 생각이 문뜩 들었다. 둘 다 처음에 배워두면 좋다고 해서 사용하는 방식만 공부했지, 이해하고 사용하고 있지 않다는 사실을 깨닫게 되었다. 그래서 오늘은 Styled Components와 Tailwind CSS에 대해 자세히 알아보고자 한다! CSS란? 우선 두 가지를 공부하기 전 가장 기초인 CSS가 뭔지부터 찾아봤다. 웹 페이지의 레이아웃 및 스타일을 정의하는 스타일 시트 언어 즉, 웹 페이지의 시각적 요소를 담당 위 내용을 읽어보면 CSS는 웹 페이지에서 굉장히 중요한 부분이라는 것을 알 수 .. 공감수 2 댓글수 0 2024. 1. 10.
[JavaScript]리프레시 토큰(Refresh Token) 오늘은 토큰 관련된 내용을 다뤄보고자 한다. (Access Token, Refresh Token)최근에 진행하고 있는 프로젝트에서 토큰 관련 작업을 담당하게 되었는데 기록한 후 다른 사람들과 공유하면 좋을 거 같아서 글을 쓰게 되었다! 우선 토큰 개념을 알아야 하는 이유부터 찾아봤다.권한과 보안사용자가 로그인 상태에서 특정 서비스, 앱에 대한 권한을 부여받은 것을 의미 (사용자가 특정 리소스 접근할 권한)이를 통제하여 개인 정보 접근에 제한을 둘 수 있어 보안을 강화할 수 있음인증과 인가 분리사용자의 인증은 Access Token을 받는 단계에서 이루어지는데, 이를 통해 리소스에 대한 인가를 받을 수 있음사용자 경험 향상Access Token 정보로 여러 서비스나 앱에 접근할 수 있음API 보호클라이언.. 공감수 0 댓글수 2 2024. 1. 9.
세션 스토리지 에러 (ReferenceError: sessionStorage is not defined) export function getSession(key: string) { // Next.js는 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문에 window 객체의 존재 여부 확인 후 접근할 수 있도록 함. const token = typeof window !== "undefined" ? sessionStorage.getItem(key) : null; return token && token.trim() !== "" ? token : ""; } 요즘 지인들과 Next.js 사용해서 프로젝트 진행중인데, 발생했던 문제를 기록해두면 좋을 거 같아 글을 쓴다. 문제 발생 초반에는 Cookie에 토큰 정보를 저장했었는데 팀원들과 논의한 결과 보안측에서 장점이 있는 세션 스토리지(Session St.. 공감수 0 댓글수 2 2024. 1. 8.
HTTP 에러 오늘은 HTTP 에러에 대해 공부하고자 한다. 요즘 지인들과 프로젝트 진행중인데 HTTP 에러의 원인이 헷갈리는 경우가 있어 한번 정리해보면 좋을 거 같아 이렇게 글을 쓴다. 다른 사람들도 같이 숙지해서 프로젝트를 원활하게 진행했으면 좋겠다! :) HTTP 에러 클라이언트와 서버 간 통신 중에 발생하는 문제를 나타낸다. 이제 종류 별로 하나씩 정리해보자! 100번대 요청이 받아들여졌거나 진행중 100 (Continue): 클라이언트가 요청 본문을 계속 전송해도 좋음을 나타냄 200번대 요청이 성공적으로 처리됨 (Success) 200 (OK): 요청이 성공적으로 처리 201 (Created): 새로운 리소스가 성공적으로 생성 204 (No Content): 요청은 성공적으로 처리되었지만 응답 본문이 없음.. 공감수 0 댓글수 2 2024. 1. 5.
수학 함수 (abs, ceil, floor, round, sort) 평소에 프로그래머스 통해서 코딩 테스트 준비하고 있는데 가끔 헷갈리는 함수들이 있어 종류 별로 정리해보려고 한다. 먼저 수학 관련된 함수에 대해 알아보자. (문제에서 자주 사용했던 함수들 위주 정리) abs() 절대값 반환 (숫자의 부호를 무시하고, 크기만 나타내는 값) Math.abs(number); let num1 = 2; let num2 = -2; let num3 = 2.5; Math.abs(num1); // 2 Math.abs(num2); // 2 Math.abs(num3); // 2.5 ceil() 주어진 숫자 x 이상의 최소 정수를 반환 (정수로 올림하는 함수) Math.ceil(number); let num1 = 2; let num2 = -2; let num3 = 2.5; let num4 .. 공감수 0 댓글수 2 2024. 1. 4.
빈 값 (null, undefined, undeclared, NaN) 오늘은 자바스크립트에서 빈 값을 표현하는 null, undefined, undeclared, NaN에 대해 자세히 알아보고자 한다. 모두 빈 값은 표현하지만 각각 다른 의미를 가지고 있어 사용할 때 주의해야 한다. null 명시적으로 값이 없음을 나타내는 값 (= 빈 값을 의미) 변수가 존재하지만 값이 지정되지 않았거나 비어 있는 경우에 사용 undefined 값이 할당되지 않은 변수 또는 객체의 속성에 접근 했을 때 나타는 값 (= 정의되지 않음) 변수가 선언되었지만 초기화 되지 않은 경우 또는 함수에서 값을 반환하지 않은 경우 등에서 발생 undeclared 자바스크립트에서 사용되지 않음 선언되지 않은 변수를 나타내는 맥락에서 사용 됨. 즉, 변수를 선언하지 않고 사용하면 해당 변수는 undeclar.. 공감수 0 댓글수 1 2023. 12. 27.
JS에서 비동기적으로 코딩하기 오늘은 JS에서 비동기 처리하는 방식에 대해 한번 더 정리하고자 한다. 이전에 프로젝트 때문에 비동기 공부를 했었는데.. 내용이 많다.. 그래서 면접 공부할 때 찾아보기가 힘들어서 핵심만 간단하게 정리하려고 한다. 비동기가 필요한 이유 자바스크립트는 싱글 스레드이기 때문에 한번에 하나의 작업만 수행 가능! 즉, 이전 것이 완료되지 않으면 다른 업무 수행 불가 (대기시간이 길어짐 = 작업 시간 길어짐 = 성능 문제 발생) 비동기는 이전 것이 완료되지 않아도 다른 업무 수행 가능! 단, 로직이 끝났을 때 원하는 동작 수행을 위해 콜백 함수를 사용하면서 콜백 지옥이 발생할 수 있음. (가독성 떨어짐, 로직 변경 어려움 등 문제 발생) https://hani-develop-history.tistory.com/4.. 공감수 0 댓글수 0 2023. 12. 21.
apply https://hani-develop-history.tistory.com/59 색깔 적용 안됨 최근에 지인들과 새로운 프로젝트를 진행하기로 했다. (Next.js와 Tailwind css를 사용) 오늘은 프로젝트에서 발생했던 문제와 내가 시도 했던 방법들을 공유하고자 한다. 문제 발생 Tailwind css를 사용 hani-develop-history.tistory.com 오늘의 위의 글에 이어서 프로젝트에서 tailwindcss를 사용하면서 발생했던 문제에 대해 다뤄보고자 한다. 문제 발생 페이지 이동할 때 초기화면에 로딩되는데 오랜 시간이 걸린다. 문제 원인 코드를 깔끔하게 만들기 위해 css 파일을 분리하기로 결정했었다. 그 방법으로 폴더별로 {페이지 이름}.modules.css 파일을 만든 후, .. 공감수 0 댓글수 0 2023. 12. 13.
색깔 적용 안됨 최근에 지인들과 새로운 프로젝트를 진행하기로 했다. (Next.js와 Tailwind css를 사용) 오늘은 프로젝트에서 발생했던 문제와 내가 시도 했던 방법들을 공유하고자 한다. 문제 발생 Tailwind css를 사용했는데 다른 거 다 되는데 색깔만 적용되지 않는 문제가 발생했다. (폰트, 배경 등) 1차 해결 방법 구글의 도움 받아 1차 해결 방법을 찾았다. 바로 @layer를 사용해 색깔을 정의하는 방법이다. @layer { .text-white { color: white; } } .title_section { @apply flex flex-col p-[30px] font-bold text-5xl text-white; } 하지만 이 방법을 적용한 뒤에 글자 색깔을 바꿀 수 있었지만, 혼자 생각해봤.. 공감수 1 댓글수 2 2023. 12. 12.
SPA, CSR, SSR 오늘은 렌더링 방식에 대해 공부하고자 한다. 왜냐하면 프론트엔드 개발자는 각 렌더링 방식의 장단점을 이해하고, 웹 어플리케이션의 특성에 맞는 렌더링 방식을 선택할 줄 알아야 하기 때문이다! 렌더링 종류 렌더링 종류는 아래와 같다. 싱글 페이지 어플리케이션 (Single Page Application) 클라이언트 사이드 렌더링 (Client-Side Rendering) 서버 사이드 렌더링 (Server-Side Rendering) 이제 하나씩 자세히 알아보려고 한다. 싱글 페이지 어플리케이션 (Single Page Application) 모든 페이지가 단일 페이지로 구성되어 있는 방식 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션 예시로는 React, Vue.js.. 공감수 0 댓글수 1 2023. 12. 5.
Restful API 프론트엔드 개발자는 Restful API를 이해하고 활용하는 능력을 갖춰야 한다. Restful API를 통해 데이터를 조회, 생성, 업데이트, 삭제할 수 있고, 서버와 통신할 수 있기 때문이다. 그래서 오늘은 Restful API에 대해 공부하고자 한다. Restful API 종류 GET: 요청받은 URI의 정보를 검색하여 응답 POST: 요청된 자원을 생성 DELETE: 요청된 자원을 삭제할 것을 요청 PUT: 요청된 자원을 전체 수정 PATCH: 요청된 자원을 일부 수정 HEAD: GET 방식과 동일, 하지만 응답에 BODY가 존재 X, 응답코드와 HEAD만 응답 CONNECT: 동적으로 터널모드를 교환, 프록시 기능을 요청시 사용 터널모드: 헤더와 IP의 내용(payload) 모두 보호하는 모드 .. 공감수 0 댓글수 0 2023. 12. 1.
Next.js 오늘부터 Next.js를 공부하려고 한다. Next.js란? 리액트 문제 해결 도구 Next.js 관련해서 정말 많은 글들을 읽어봤는데 결국 간단하게 정리하면 리액트의 문제를 해결하기 위해 만들어진 JS 웹 프레임워크이다. 리액트의 어떤 문제를 해결해줄까? 느린 페이지 로딩 속도 리액트는 클라이언트 사이드 렌더링(CSR)을 기본으로 하기 때문에 페이지 로딩 속도가 느림 왜 느리지? CSR은 JS 파일을 먼저 다운로드한 후 데이터를 받아오기 때문 SEO 속도 느림 CSR이기 때문에 검색 엔진이 웹 페이지의 콘텐츠를 이해하는 어려움 발생 개발 편의성 리액트는 다양한 기능 제공을 하지 않아 개발자가 직접 설정하는 부분이 많음 Next.js의 장점 결국 Next.js는 리액트의 단점을 보완했기 때문에 위에 내용.. 공감수 0 댓글수 0 2023. 11. 30.
브라우저 저장소의 차이점 프론트엔드 개발자는 언제 어떤 저장소를 사용해야 하는지 판단 할 수 있어야 한다. 이를 위해서는 브라우저 저장소의 종류 및 특징을 정확하게 알고 있어야 해서 오늘은 이를 공부하고자 한다! 저장소 종류 저장소 종류는 아래와 같다. Local Storage Session Storage Cookie 간단하게 먼저 정리하자면 데이터 용량이 작고, 서버 전송이 필요한 경우 쿠키 더 큰 용량이 필요하거나, 서버 전송이 필요 없는 경우 로컬 스토리지 또는 세션 스토리지 이제 하나씩 자세하게 알아보자. 로컬 스토리지 (Local Storage) 저장한 데이터를 지우지 않는 이상 영구적으로 보관 가능 단순하면서도 효과적인 클라이언트 측 데이터 저장 방법 중 하나 최대 크기: 5MB 사용 예시: 사용자 설정과 같은 간단한.. 공감수 0 댓글수 0 2023. 11. 30.

728x90

문의안내

티스토리
로그인
고객센터

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