티스토리

jayspod

검색하기

블로그 홈

jayspod

jayspod.tistory.com/m

jay-dev 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[TIL] pretendard next.js에 적용 tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: {}, }, plugins: [], }; globals.css @tailwind base; @tailwind components; @tailwind utilities; @layer base { @font-face { font-family: 'Pretendard'; src: url('/fonts/pretendard-regular.subset.woff2') format('woff2'); font-display: swap; } html { font-fami.. 공감수 0 댓글수 0 2023. 11. 3.
[알고리즘] 프로그래머스 푸드 파이트 대회 프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function solution(food) { let answer = ""; for (let i = 1; i 0을 중심으로 양쪽에 같은 음식의 갯수가 놓여야 하니 2로 나누고 버림 만들어진 문자.. 공감수 1 댓글수 1 2023. 10. 23.
[알고리즘] 프로그래머스 예상 대진표 프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function solution(n,a,b) { let round = 0; while (a !== b) { a = Math.ceil(a/2); b = Math.ceil(b/2); answer++; } return round; } a와 b는 2로 나누었을 때 올림한 만큼의 번호가 부여된다 -> 1과 2 중에 승리자는 다음 라운드에 1번이 되고 3,4는 2번이 된다 a와 b를 2로 나누었을 때 올림한 값이 같을 때의 라운드 값을 출력한다 공감수 0 댓글수 0 2023. 10. 18.
[알고리즘] 프로그래머스 구명보트 프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function solution(people, limit) { people.sort((a,b) => b-a); let answer = 0; let left = 0; let right = people.length -1; while(left limit){ left++; } else { left++; right--; } answer++; } if(left ==.. 공감수 0 댓글수 0 2023. 10. 17.
[알고리즘] 프로그래머스 점프와 순간 이동 프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function solution(n) { let battery = 0; while(n > 0) { if(n % 2 === 0) { n = n / 2; } else { n--; battery++; } } return battery; } 2배 이동하는 순간이동은 배터리가 줄지 않으므로 2로 나눌 수 있다면 나눈다 2로 나눌 수 없다면 1만큼의 배터리를 소모하여 n에서 1을 빼준 후 다시 나눈다 공감수 0 댓글수 0 2023. 10. 16.
[알고리즘] 프로그래머스 카펫 프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function solution(brown, yellow) { let area= brown + yellow; for (let y = 3; y 세로는 가로보다 같거나 작으니 가로까지 반복 가로 = 넓이 / 세로 (x-2) * (y-2) === yellow 라면 그 x,y 값 출력 공감수 0 댓글수 0 2023. 10. 13.
[알고리즘] 프로그래머스 다음 큰 숫자 프로그래머스 문제링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Try / Solution function countOne(n) { let count = 0 let binaryArr = n.toString(2).split(''); for(let i = 0; i < binaryArr.length; i++) { if (binaryArr[i] == 1) { count++; } } return count; } function solution(n) { let result = n; while(true) { result++; if(countOne(result) =.. 공감수 0 댓글수 0 2023. 10. 12.
[TIL] REST API, GraphQL REST API REST (Representational State Transfer) API는 웹 서비스와 클라이언트 간에 정보를 교환하기 위한 아키텍처 스타일 및 접근 방식입니다. REST는 웹의 기본 구조를 활용하여 자원에 대한 CRUD (Create, Read, Update, Delete) 작업을 수행하게 됩니다. 자원(Resource) 지향적: REST는 웹 상의 모든 것을 자원으로 간주합니다. 각 자원은 고유한 URI (Uniform Resource Identifier)를 가지며, 이 URI를 통해 해당 자원에 접근할 수 있습니다. 무상태성(Statelessness): 각 요청은 서버에 모든 필요한 정보를 포함해야 합니다. 서버는 클라이언트의 상태 정보를 저장하지 않으며, 이로 인해 각 요청은 .. 공감수 0 댓글수 0 2023. 10. 6.
[TIL] 프론트엔드 성능 최적화 성능 최적화 방법: 코드 스플리팅: 큰 자바스크립트 번들을 작은 청크로 분리하여 필요한 부분만 로드합니다 이미지 최적화: 이미지를 압축하거나 lazy loading을 사용하여 로딩 시간을 줄입니다 CDN 사용: 콘텐츠를 빠르게 전달하기 위해 콘텐츠 전송 네트워크(CDN)를 사용합니다 캐싱 전략: 브라우저 캐싱을 활용하여 재방문 시에 빠르게 페이지를 로드합니다 비동기 로딩: async나 defer 속성을 사용하여 비동기 스크립트 로딩을 가능하게 합니다 서버 사이드 렌더링 (SSR) 또는 사전 렌더링: 초기 페이지 로드 속도를 향상시키기 위해 사용합니다 웹 워커 사용: 복잡한 연산을 백그라운드에서 처리하여 메인 스레드를 블로킹하지 않습니다 프로젝트에서 활용한 경험: 이미지 최적화: imageCompressi.. 공감수 0 댓글수 0 2023. 10. 1.
[TIL] useEffect useEffect는 react hooks중 하나로 side effect를 수행하는 데 사용됩니다 1. 컴포넌트가 처음 렌더링되면, useEffect 내부 함수가 실행되고 2. 의존성 배열의 값이 바뀔 때 마다 useEffect 내부 함수가 실행됩니다 만약 빈배열이라면 컴포넌트가 마운트될 때 한번만 실행됩니다 매개변수 useEffect는 두 개의 매개변수를 받을 수 있습니다. Effect 함수: 이 함수는 컴포넌트가 렌더링된 후에 실행됩니다. 이 함수에서는 데이터 fetching, 구독 설정, 수동으로 변경되는 DOM 등 side effect를 수행할 수 있습니다. Dependency 배열: Dependency 배열은 effect 함수가 의존하는 state와 props를 명시합니다. 배열 내부의 어떤 값이.. 공감수 0 댓글수 1 2023. 9. 30.
[TIL] Event Loop JavaScript는 단일 스레드(single-threaded) 언어이며, 이는 JavaScript가 한 번에 하나의 작업만 처리할 수 있음을 의미합니다. 그러나, JavaScript 환경에서는 많은 비동기 작업들이 발생합니다. 예를 들어, 사용자의 입력을 기다리거나, 네트워크 요청의 완료를 기다릴 때입니다. 이러한 비동기 작업들을 관리하고 실행 순서를 조정하는 메커니즘을 Event Loop라고 합니다. Event Loop의 동작 Event Loop는 Call Stack, Callback Queue(Task Queue), 그리고 Web APIs 등으로 구성되며, 이들 간의 상호작용을 통해 비동기 작업을 처리합니다. Call Stack: JavaScript는 Call Stack을 사용하여 코드를 실행합니다.. 공감수 0 댓글수 0 2023. 9. 28.
[TIL] Promise 객체 Promise Promise 객체는 JavaScript에서 비동기 연산이 완료될 때까지 기다리지 않고, 그 연산이 완료된 후에 어떤 동작을 실행할지를 정의할 수 있게 해주는 객체입니다. Promise 객체는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다. 상태 Promise 객체는 3가지 상태를 가질 수 있습니다. Pending(대기 중): 초기 상태, 이행 또는 거부되지 않음. Fulfilled(이행): 연산이 성공적으로 완료됨. Rejected(거부): 연산이 실패함. 메서드 Promise 객체는 주로 다음과 같은 메서드를 사용합니다. then(): Promise가 이행될 때 호출할 함수를 등록합니다. catch(): Promise가 거부될 때 호출할 함수를 등록합니다. finall.. 공감수 0 댓글수 0 2023. 9. 28.
[회고] 항해99 부트캠프 후기 나는 흔한 비전공자, 광고학과를 나와 광고회사에서 기획, 제작 일을 했었다. 일의 특성상 많은 업무량, 야근에 시달렸고 업계의 비전은 불투명 했으며 인과관계가 분명하지 않은 과정에 항상 회의감을 가지고 있었다. 개발 관련 일이야 워낙 대우, 근무환경도 좋고 프로세스도 명확한 업무인 것을 익히 들어 알고 있었지만 뼛속까지 문과인 내가 개발 공부, 일을 시작할 엄두도 못냈었다. 그러다 한번 웹사이트를 만들어보는 무료 강의를 듣게 되었는데 생각보다 재밌었고 도전해보고싶다는 생각이 들어서 퇴사하고 공부를 시작하게 됐다. 부트캠프 선택 잘 모르는 분야이기도 하고 혼자 공부하기에는 이래저래 어려움이 있을 것 같아 부트캠프를 다니기로 하였다. 선택기준은 딱 두가지 비전공자가 다닐 수 있는곳 / 일 12시간 이상, 주.. 공감수 1 댓글수 5 2023. 9. 18.
[WIL] 행동대장 프로젝트 5주차 회고 프로젝트 강점 정리 Refresh Token 적용 AWS CloudFront 배포 github-action을 활용해 배포 자동화 구축 Cloudinary로 이미지 등의 asset 관리 ReactQuery InvalidateQueries를 활용해 무효화 적용(필요한 곳에 항상 최신 상태 유지) FormData로 서버에 이미지 전송 debounce를 이용한 최적화된 검색기능 구현 infinity-query를 이용한 인피니트 스크롤 react-hook-form으로 효율적으로 form을 관리 react-toastify로 토스트 알람 구현 Styled-components에서 제공하는 Global Style을 활용해 global theme, media query 구현 범용적으로 사용되는 Button, modal 등.. 공감수 0 댓글수 0 2023. 9. 17.
[TIL] React Compound Components Pattern (design pettern) 컴파운드 컴포넌트 패턴 간단하게 말하면 내부 상태를 공유하는 컴포넌트 코드 import { useState, useContext, createContext } from 'react'; const ToggleContext = createContext(); const Toggle = ({ children }) => { const [on, setOn] = useState(false); const toggle = () => setOn(!on); return {children}; }; const On = ({ children }) => { const { on } = useContext(ToggleContext); return on ? children : null; }; const Off = ({ children .. 공감수 1 댓글수 1 2023. 9. 14.
[WIL] 행동대장 프로젝트 4주차 회고 이번 주 한 일 게시글 작성, 수정 페이지 리팩토링 리코일을 사용한 상태관리 부모 컴포넌트로 props를 끌어올릴 필요 있는 곳에 리코일 적용 3개의 사진중 특정 사진 재 선택시 값이 유지되지 않는 문제 spread 연산자를 이용, 기존 이미지 파일 유지 프론트 배포 개선 (CloudFront) 코드 수정 후 배포 시 웹 페이지에 바로 적용이 되지 않는 문제 CloudFront 캐시 설정, 무효화 설정 유저 피드백 받기 위한 세팅 에러 핸들링 웹사이트 Example 데이터 세팅 구글폼 설문지 작성 상품 설정 다음 주 할 일 유저 피드백을 반영한 에러 핸들링, 리팩토링 필요한 기능 추가 공감수 0 댓글수 0 2023. 9. 13.
[WIL] 행동대장 프로젝트 3주차 회고 중간 점검 서비스 아키텍쳐 기술적 의사결정 Github Actions Github를 사용하기 때문에 효율적으로 관리할 수 있다. 초기 비용이 없다. CodeDeploy codedeploy는 AWS의 다양한 서비스와 연동되어 신속한 자동배포가 가능하다. 개발과 배포 속도가 높아져 안정적인 개발 환경을 유지할 수 있게한다. MySQL 사용하기 쉽고 오래되어서 버그가 적다. 안전하고 안정적인 트랜잭션 처리와 데이터 저장이 보장된다. S3 데이터 양에 따라 자동으로 확장되고 용량이 무제한이다. 데이터를 객체 형태로 저장하고 관리하기 때문에 서버의 부하를 줄이고 내구성이 좋다. recoil 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택 보일러 플레이트 코드를 줄일수 있음 .. 공감수 0 댓글수 0 2023. 9. 12.
[WIL] 행동대장 프로젝트 2주차 회고 기술적 의사결정 Recoil 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택 보일러 플레이트 코드를 줄일수 있음 사용법이 직관적이고 쉬워 협업에 유리 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함 TS 버그를 사전에 발견하고 코드의 안전성을 높임 런타임 에러를 줄임 TypeScript의 정적 타이핑이 코드 작성 시점에 오류를 캐치 ReactQuery v4 서버쪽의 데이터를 좀더 쉽게 관리쉬워 데이터 패칭, 캐싱, 동기적 서버의 상태의 업데이트에 용이 별도의 옵션을 지원하여 복잡한 코드를 reactQuery 로직을 통해 짧은 코드로 대체 프로젝트 구조가 기존보다 단순해져 유지보수하기 쉽고 새로운 기능을 쉽게 구축 최신 라이브러리를 도입해 봄으로써.. 공감수 0 댓글수 0 2023. 9. 9.
[TIL] AWS S3 사용하는 이유 정적 웹 호스팅: S3는 정적 웹사이트를 간단하게 호스팅할 수 있는 기능을 제공합니다 이는 프론트엔드 코드를 빠르고 안정적으로 배포할 수 있는 좋은 방법입니다 CDN 연동: S3는 AWS의 CloudFront와 같은 CDN 서비스와 쉽게 연동할 수 있어 전세계 어디서나 빠른 로딩 시간을 제공할 수 있습니다 저렴한 스토리지 비용: 사용자가 업로드한 이미지나 동영상과 같은 미디어 파일을 저장하기에 적합한 비용 구조를 가지고 있습니다 버전 관리: S3는 객체의 버전 관리를 지원합니다 이를 통해 파일이 변경되거나 삭제될 경우 이전 버전으로 쉽게 복구할 수 있습니다 보안: S3는 다양한 보안 옵션 (IAM, ACL, 서버 측 암호화 등)을 제공하여 데이터의 무단 접근을 방지할 수 있습니다 사용 경험.. 공감수 0 댓글수 0 2023. 9. 7.
[WIL] 행동대장 프로젝트 1주차 회고 아이디어 제안 및 선정 내가 낸 아이디어로 프로젝트 주제가 선정되어 조금 더 책임감을 가지고 임했다. 아래는 주제 선정당시 아이데이션 노트. 동네 사건 및 민원을 공유하고 개선해주는 웹사이트 동네 민원을 공유하고 개선 동네 민원이란 시설, 구조 문제 (ex) 놀이터에 발생한 크랙, 보도 깨짐, 장마 전 하수구 막힘 등)에 국한 메인 페이지는 동네 지도, 사진 및 게시글 바탕을로 보여짐 랭킹 시스템 > 작은 범위의 동네인원만 투표할 수 있게 지정(like 당근마켓) 선정 이유 공인인증서로 접근하기도 힘들고 웹사이트 내 다른 카테고리가 많아 번잡한 국민신고의 불편함을 해소 민원사항을 텍스트 보단 지도와 이미지 형식으로 한눈에 볼 수 있어 접근성과 사용성을 높임 시의성: 초등생 놀이터 사고, 장마철 하수구 막.. 공감수 0 댓글수 0 2023. 9. 5.
[TIL] SEO, Image Optimization SEO SEO(Search Engine Optimization)는 웹사이트나 웹페이지를 검색 엔진에서 더 잘 찾을 수 있도록 최적화하는 과정입니다 이는 웹사이트의 검색 엔진 순위를 향상시켜 더 많은 트래픽을 유도하는 것을 목표로 합니다 SEO를 진행하는 방법 적절한 메타 태그 사용: , 등의 HTML 메타 태그는 검색 엔진에 페이지의 내용을 알리는 중요한 요소입니다 정적 URL 사용: 검색 엔진은 정적 URL을 동적 URL보다 더 쉽게 이해하고 분석합니다 페이지 로딩 속도 개선: 이미지 최적화, 레이지 로딩, 비동기 스크립트 로딩 등을 통해 페이지 로딩 속도를 향상시킵니다 모바일 최적화: 반응형 디자인이나 별도의 모바일 페이지를 제공하여 모바일 사용자에게도 좋은 사용자 경험을 제공합니다 HTML 시맨틱 .. 공감수 0 댓글수 0 2023. 8. 30.
[TIL] queryClient.invalidateQueries Problem 파이널 프로젝트 댓글 CRUD시 바로 웹사이트에 적용되지 않는 문제 Solution react-query invalidateQuery로 캐시 무효화 하여 최신 값 갱신하기 const queryClient = useQueryClient(); const deleteCommentMutation = useMutation( deleteComment, { onSuccess: () => { queryClient?.invalidateQueries(['postDetail', postId]); }, }, ); const createCommentMutation = useMutation( createComment, { onSuccess: () => { queryClient?.invalidateQueries(['.. 공감수 0 댓글수 0 2023. 8. 26.
[TIL] 클래스형과 함수형 컴포넌트의 차이 문법과 구조 클래스형: class 키워드를 사용하며, render 메소드를 통해 UI를 반환합니다 함수형: 단순한 함수 또는 화살표 함수를 사용하며, 함수의 반환값이 UI입니다 State와 라이프사이클 메소드 클래스형: setState를 사용해 상태를 관리하고, 라이프사이클 메소드를 활용할 수 있습니다 함수형: useState, useEffect 등의 훅을 사용해 상태와 라이프사이클을 관리합니다 this 키워드 클래스형: this 키워드를 사용해 클래스 내부 메소드나 상태에 접근합니다 함수형: this 키워드가 필요 없습니다 코드의 간결성 클래스형: 상대적으로 코드가 길고, 설정해야 할 부분이 많습니다 함수형: 코드가 간결하고 가독성이 좋습니다 클래스형과 함수형 컴포넌트는 React에서 UI를 구성하는 .. 공감수 0 댓글수 0 2023. 8. 25.
[TIL] http, https의 차이 HTTP (HyperText Transfer Protocol)와 HTTPS (HyperText Transfer Protocol Secure)는 웹에서 데이터를 전송하는 두 가지 기본 프로토콜입니다 둘 다 웹 브라우저와 웹 서버 간에 정보를 교환하는 데 사용되지만, 주요한 차이점은 데이터의 보안성에 있습니다 HTTP 보안 레이어가 없음: HTTP는 암호화가 적용되지 않은 상태로 데이터를 전송합니다 이로 인해 중간자 공격(Man-in-the-Middle Attack)이나 데이터 탈취가 쉽게 발생할 수 있습니다 속도: 암호화와 복호화 과정이 없기 때문에 HTTPS에 비해 빠를 수 있습니다 사용 사례: 보안이 중요하지 않은 사이트나, 데이터의 민감성이 낮은 경우에 사용됩니다 HTTPS 보안 레이어 존재: HTT.. 공감수 0 댓글수 0 2023. 8. 23.
[TIL] 여러장의 이미지 POST 요청(FormData) Trouble 이미지를 서버에 전송하는 것에 대한 고민 형식(url, 파일)에 대한 고민 여러장의 이미지를 전달하는 방법에 대한 고민 이미지와 다른 post data를 함께 보내는 방법에 대한 고민 Solution 이미지 요청: url이 아닌 파일 자체를 배열로 FormData에 append 후 서버에 전송 하나의 FormData 키값 ‘images’에 반복문(forEach)를 활용하여 배열의 요소를 하나씩 할당 content-type은 ‘multipart/form-data' ↔︎ 함께 보내는 string, number 데이터는 'application/json’ (string, number)데이터 요청: JSON.stringyfy로 전송할 데이터들을 json문자열로 변환한 후 객체화이미지와 함께 전송하고.. 공감수 0 댓글수 1 2023. 8. 19.
[TIL] Cookie, Session, Web Storage 차이 쿠키, 세션, 웹 스토리지는 웹에서 사용자의 데이터를 저장하고 관리하기 위한 기술들 입니다 차이점은 1. 쿠키 개념: 클라이언트에 저장되는 작은 데이터 조각입니다 특징: 만료 기간이 있습니다. 설정하지 않으면 세션 쿠키가 되어 브라우저 종료 시 사라집니다 도메인과 경로에 연결되어 있습니다 이로 인해 쿠키는 해당 도메인 및 경로에서만 액세스 될 수 있습니다 용도: 사용자 세션을 관리하거나, 사용자의 환경설정, 로그인 상태 등을 기억하는 데 사용됩니다 2. 세션 개념: 서버 측에서 관리되는 사용자 정보나 상태입니다 각각의 사용자에 대해 고유한 세션 ID가 생성되며, 이 ID는 쿠키를 통해 사용자의 브라우저에 저장될 수 있습니다 특징: 쿠키와 달리 서버에서 관리되기 때문에 용량 제한이 쿠키보다 크거나 구체적으.. 공감수 0 댓글수 0 2023. 8. 16.
[TIL] CSR, SSR의 차이 1. 클라이언트 사이드 렌더링 개념: CSR은 브라우저에서 직접 페이지를 렌더링하는 방식입니다 초기 요청 시에는 HTML 구조나 내용을 포함하지 않는 최소한의 HTML 템플릿과 JavaScript 파일을 받아옵니다 JavaScript가 실행되면 필요한 데이터를 AJAX 요청으로 가져와서 페이지를 동적으로 생성하고 렌더링합니다 장점: 사용자 경험: 초기 로딩 후에는 필요한 부분만 변경하기 때문에 페이지 내의 동작이나 다른 뷰로의 이동이 매우 빠릅니다 서버 부하 감소: 서버는 주로 정적 자원을 제공하고 API 요청을 처리하기 때문에 렌더링 부담이 감소합니다 단점: 초기 로딩 속도: 초기 페이지 로드에 필요한 자원을 모두 다운로드 받아 실행해야 하기 때문에 첫 로딩이 느릴 수 있습니다 SEO: 검색 엔진이 J.. 공감수 0 댓글수 0 2023. 8. 15.
[TIL] Refactoring using Array.fill() and const.ts 1. Array.fill을 활용해 text slide animation refactoring before import { FlowText, FlowWrap } from './style'; export const TextSlideView = () => { const text = `행복한 동네를 위한 대화의 장소 `; return ( {text} {text} {text} {text} ); }; after import { FlowText, FlowWrap } from './style'; export const TextSlideView = () => { const text = `행복한 동네를 위한 대화의 장소 `; const texts = new Array(4).fill(text); return ( {texts.. 공감수 0 댓글수 0 2023. 8. 8.
[TIL] var, let, const / promiss, async&await 차이 var, let, const의 차이 var는 재선언, 재할당이 모두 가능하며 var로 선언된 변수는 호이스팅이 되어 스코프의 최상단으로 끌어올려집니다 let은 재선언은 불가하지만 재할당은 가능합니다 let과 const는 같은 블록 스코프를 가집니다 const는 재선언, 재할당이 불가해 한번 선언하면 그 값을 변경할 수 없습니다 호이스팅은 의도치 않은 에러를 발생시킬 수 있으므로 var사용은 지양하는 것이 좋습니다 promiss, async&await 차이 Promiss와 Async/Await은 모두 비동기 연산을 처리하기 위해 사용합니다 다만 Promiss는 연속직인 비동기 연산을 처리하기 위해 .then 체이닝을 반복적으로 사용해야하므로 코드가 복잡해질 수 있었습니다 Async/Await의 await을.. 공감수 0 댓글수 0 2023. 8. 6.
[TIL] 프론트에서 상태관리, Recoil을 사용하는 이유 상태 관리는 웹 애플리케이션이 복잡해짐에 따라 중요한 주제가 되었습니다. 단순히 useState, props drilling으로 상태를 관리한다면 depth가 깊은 하위 컴포넌트로 전달 과정이 번거로울 뿐만 아니라 의도치 않은 상태변화를 일으킬 수도 있습니다. 이를 방지하기 위해 상태는 중앙에서 관리하는 것이 효율적입니다. 중앙상태관리의 장점은 1. 웹애플리케이션의 동작을 예측 가능하게 만들어 버그를 줄이고 디버깅을 쉽게합니다 2. 변경사항에 쉽게 대응할 수 있어 유지보수성을 높입니다 3. 상태관리 로직을 분리하면 재사용성이 높아집니다 4. 코드의 일관성을 가져 팀원들과의 협업을 원활할게 합니다. Recoil을 사용하는 이유는 1. 간결한 코드로 보일러플레이트 코드를 줄일 수 있었습니다. 2. 무엇보다 .. 공감수 0 댓글수 0 2023. 8. 2.

문의안내

티스토리
로그인
고객센터

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