티스토리

검색하기내 프로필

블로그 홈

프론트엔드 복습노트

구독자
3

그냥 잊어버리기 싫어서 적어놓은 블로그 이메일 <interarea@naver.com>

구독하기 방명록
신고

인기글

  • 브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 )공감수2댓글수0조회 13
  • [VueJS] Vue의 새로운 상태 관리 : Pinia (피니아 간단 사용법)공감수12댓글수3조회 12
  • [ReactJS] VUE개발자 REACT(함수형)에 빠르게 적응하기 ( 비교 개발 ) - 스크롤 압박 내용 매우 많음, 매우 유용공감수14댓글수4조회 4

주요 글 목록

  • [프로그래머스] 징검다리 (JS/javascript) - 매우쉬운풀이글 내용

    알고리즘 문제를 풀다 보면 "이건 무슨 소리야?" 싶은 설명을 자주 만나게 됩니다. 문제 자체보다 문제를 읽는 거 자체가 일인 경우가 종종 있습니다. 오늘은 "[징검다리]" 문제를 동네 옆집 아저씨도 이해할 수 있을 정도로 쉽게 풀어보겠습니다. 복잡한 용어는 빼고, 직관적인 예제로 천천히 설명해볼 테니 부담 없이 따라와 주세요! 🚀 어쩌면 세상에서 가장 쉬운 알고리즘 풀이 입니다. https://school.programmers.co.kr/learn/courses/30/lessons/43236 문제는 위와 같습니다. 그럼 이 문제에 대해서 아주 쉽게 설명해보겠습니다. 문제 파악 1. 강 건너기 게임 상상해보세요 강 건너편에 도착하려면 0 에서 시작해서 도착지(예를들어 25)까지 가야됩니다. 강 중간 중..

    좋아요1
    댓글0작성시간2025. 2. 24.
  • [Design Pattern] 자바스크립트 디자인 패턴 1편 - 모듈 그리고 싱글톤글 내용

    오늘은 자바스크립트 디자인 패턴에 대해서 이야기를 한번 해보려고 합니다. 우리는 때때로 개발을 진행할 수록 소스코드가 점점 더러워지고 가독성이 떨어지는 경우를 겪게 됩니다. 일을 하다보면 이러한 소스코드를 어떻게 깔끔하게 작성할 수 있을지 내 코드를 남이 보고 유지보수를 할때 어떻게 한눈에 알아볼 수 있을지에 대한 많은 고민을 하게 되었습니다. 이때 저는 디자인 패턴을 다시 한번 전체적으로 공부를 하였고, 이를 통해 실제 업무 속에서 더 나은 가독성과 유지보수성을 가진 소스코드를 작성할 수 있게 되었습니다. 제가 실제로 자주 사용하는 디자인 패턴들을 왜? 어떻게? 언제? 라는 내용으로 얘기해보겠습니다. 1. 모듈 패턴 모듈 패턴은 전역 네임스페이스를 오염시키지 않고, 변수와 함수를 캡슐화 하기 위해 자주..

    좋아요0
    댓글0작성시간2023. 9. 11.
    게시글 이미지
  • [Web] 순수 자바스크립트로 양방향 데이터 바인딩 구현(Pure Javascript Two-way Data binding) - 추가작업(이벤트 재할당)글 내용

    오늘은 지난번에 진행했던 양방향 데이터 바인딩 구현을 이어서 진행해보려고 합니다. 지난번의 작업중 이어서 할 작업은 DOM변경에 대한 이벤트 재할당 기능을 추가하려고 합니다. 이 작업은 아주 쉬운 방법으로 추가할 수 있습니다. 1. DOM 초기화 로직 세분화 아래는 기존의 initializeDOM 함수입니다. 해당 소스는 DOM을 최초로 초기화 하는 작업이 추가 되어 있습니다. 하지만 아래 작업의 내용을 DOM이 변경 된 이후 이벤트 재할당 과정이 필요하기 때문에 DOM초기화 로직을 분리 시켜야됩니다. initializeDOM() { const bindings = Array.from(this.$el.querySelectorAll("[b-model]")); bindings.forEach((element) ..

    좋아요0
    댓글0작성시간2023. 6. 13.
  • [Web] 순수 자바스크립트로 양방향 데이터 바인딩 구현(Pure Javascript Two-way Data binding)글 내용

    오늘은 순수 자바스크립트를 이용해 데이터 양방향 바인딩을 구현해 보도록 하겠습니다. 종종 레거시한 시스템에서 개발을 진행하다보면 최신 프레임워크의 편리함을 다시 깨닫게 되고, 사용하고 싶은 욕구가 엄청 커질때가 있습니다. 저는 금융권 IT 쪽에 종사하고 있고, 보수적인 개발성향과 분위기로 인해 레거시한 환경에서 개발하는 케이스가 상당히 많았습니다. 그렇다 보니 데이터 하나를 연결할 때에도 일일이 이벤트 처리를 해주는 케이스가 많았고, 이러한 개발 환경은 개발자의 퍼포먼스를 매우 떨어트린다고 생각했습니다. 그래서 전 순수 자바스크립트로 양방향 바인딩을 구현하려고 하였고, 얼추 비슷하게 이를 구현하여 진행과정에 대해 설명을 드리고자합니다. 가장 먼저 콘셉입니다. 정적 파일로 구현이 된 케이스가 많았기 때문에..

    좋아요0
    댓글0작성시간2023. 6. 12.
  • [Web Security] WEB/WAS 분리 환경에서 CSRF 취약점 대응 방안(CSRF TOKEN)글 내용

    오늘은 개발된 소스를 운영하기 위해서 보안취약점 점검등을 하게 되면 자주 발생하게 되는 CSRF 취약점에 대하여 대응 방안을 말씀드리겠습니다. CSRF가 무엇인지에 대해서는 수많은 공식문서와 블로그 등에 있으니 오늘은 대응방법에 대해 바로 말해보도록 하겠습니다. 이번에 설명 드릴 환경은 일반적인 환경이 아니라 하나의 세션에서 돌아가는 시스템이 아니라 WEB/WAS과 완벽히 분리되어 있는 환경에서의 대응 방안에 대해서 설명드리겠습니다. 1. 구성 제가 적용했엇던 시스템은 WAS와 WEB서버가 위와 같이 물리적으로 완전 분리되있는 구성으로 되어 있었습니다. 단순히 WAS는 API서버로의 의미를 가지고 있는 시스템 이였습니다. 일단, CSRF토큰을 공유하기 위해서는 대표적으로 세션을 통해 공유되고, 이를 통신..

    좋아요3
    댓글6작성시간2023. 3. 9.
    게시글 이미지
  • [VueJS] Vue2 watch를 통해 중첩 데이터 감지하고 변경된 데이터 확인하기글 내용

    오늘은 Vue를 개발할 때 자주 이용하셨던 watch에 대해서 알아보도록 합니다. vue에서 watch는 특정 데이터의 변화를 감지하여 특정 로직을 동작하게 할 때 주로 사용합니다. 성능을 위해서 자주 사용하는 건 권장드리지 않지만 꼭 사용해야될 상황이 있습니다. 오늘은 이러한 watch를 이용해 중첩 데이터를 감지하고 그 이상으로 변경된 데이터를 알 수 있는 방법을 알려드리도록 하겠습니다. 1. 기본 문법 watch: { //감지할데이터 : function(바뀐값,바뀌기전 값) obj: function (val, oldVal) { //로직 } } 기본적인 문법은 위와 같습니다. watch 내부에 감지할 데이터를 넣고 바뀐값과 바뀌기 전 값을 알고 있습니다. 하지만 이러한 구조에서는 중첩데이터를 감지할 ..

    좋아요0
    댓글0작성시간2023. 1. 18.
  • [사이드 프로젝트 회고] 코드 복붙 서비스 개발기 - 1(기획, 구현물)글 내용

    https://bokboot.net 오늘은 개인적으로 진행하였던 사이드 프로젝트 bokboot에 대해서 얘기해보려고 합니다. 최근 해당 프로젝트가 끝나고 블로그에 글을 쓰려다보니 상당히 글쓰는 주기가 길었던거 같습니다. 해당 서비스의 개발동기는 아주 간단합니다. 친구끼리 소스 코드를 주고 받을 때 주로 카카오톡으로 주고받곤 하였는데 해당 방법으로 주고받았을때 코드에 하이라이트가 입혀지지 않고 급하게 휴대폰으로 소스코드를 보아야 될때는 이런 불편한 소스코드를 계속 보아야되었습니다. 이런게 너무 싫어서 그냥 제가 쓸려고 개발했고 개발하면서는 올해는 DAU100을 목표로 하여 사람들과 같이 공유하고 기능을 붙여나가려고 합니다. 아래와 같은 화면으로 인해서 물론 아래의 화면이 보기 안좋은 것은 아니지만 소스 코..

    좋아요2
    댓글0작성시간2022. 11. 13.
    게시글 이미지
  • [Mocking] MSWjs를 이용한 API 모킹 쉽고 빠르게 활용하는 법(with React + Webpack)글 내용

    오늘은 많이들 사용하는 Mocking 라이브러리인 MSW에 대해서 빠르게 파악해볼까 합니다. 아직 모킹을 활용한 개발을 해보신 적이 없으신 분들은 이런 경험이 있을 겁니다. "요청 드린 API언제 나와요?" 이처럼 협업을 하는데 있어서 시간낭비가 발생하게 되는 경우가 많으실 겁니다. 이럴때 사용하는게 API목업 입니다. 개발 시작 전 서버개발자와의 협의를 통하여 통신에 대한 인터페이스를 정의하고, 이에 맞춰 미리 API목업을 하여 서버의 진척상황과 상관없이 프로젝트를 진행할 수 있습니다. 이런 API목업 라이브러리 중 MSW에 대해서 알아보도록 하겠습니다. MSW는 말 그대로 Mock Service Worker입니다. 그래서 아주 자연스럽게 기존의 API호출과 연동하여 개발환경에 따라 셋팅할 수 있습니다..

    좋아요0
    댓글0작성시간2022. 10. 27.
    게시글 이미지
  • MSWjs : Failed to register a Service Worker for scope () with script () Service Worker script does not exist at the given path.글 내용

    문제 : [MSW] Failed to register a Service Worker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): Service Worker script does not exist at the given path. Did you forget to run "npx msw init "? [MSW] Failed to register a Service Worker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): Service Worker scrip..

    좋아요0
    댓글0작성시간2022. 10. 12.
  • [Testing] React + Testing Library + Styled Components 환경에서 ThemeProvider 적용 방법글 내용

    오늘은 Styled Components + React 기반에서 testing-library/@react를 이용한 테스트 환경 구축 시 공통 theme 등의 사용으로 인한 에러 등을 피하기 위해서는 어떤 방식으로 셋팅 하여야 되는지 알아보도록 하겠습니다. 1. TestTemplate 작성 import { ThemeProvider } from "styled-components"; import useTheme from "@/libs/hooks/useTheme"; interface Props { children: JSX.Element | JSX.Element[]; } const TestTemplate = ({ children }: Props) => { const [theme] = useTheme(); retur..

    좋아요1
    댓글0작성시간2022. 10. 11.
  • [자바스크립트 꿀팁] 브라우저 다크모드 감지 (Detect DarkMode Using JavaScript)글 내용

    오늘은 다크모드를 지원하는 앱을 만들 때 자바스크립트를 활용하여 다크모드를 감지 하는 방법에 대해서 알아 보겠습니다. 다크모드 지원을 위한 글로벌 theme를 적용하려고 분기처리할 때 많이 사용하게 됩니다. JavaScript const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; 이렇게 간단한 방법으로 우리는 다크모드에 대해서 감지해볼 수 있습니다. 물론 CSS의 media query를 통한 분기 처리도 가능합니다. CSS @media (prefers-color-scheme: dark) { .scheme { background: #000; color: #fff; } } @media ..

    좋아요1
    댓글0작성시간2022. 10. 7.
  • [Testing] react + webpack + typescript 프로젝트 간단한 테스트 환경 구성 및 실습(feat. Jest , Testing-library, without CRA)글 내용

    오늘은 리액트 + 타입스크립트 + 웹팩 조합에서 테스트 환경을 구성하는 방법에 대해서 알아보도록 하겠습니다. 사실 CRA안에 이미 다 준비가 되어 있지만, CRA를 즐겨 사용하지 않는 저는 직접 구성을 하여야 되었습니다. 오늘은 간단하게 프로젝트에 테스트 환경을 부어보도록 하겠습니다. 선수 지식이 필요 합니다. 우측 링크를 확인해주세요. (https://ryuhojin.tistory.com/19) 1. 패키지 설치 //npm npm i -D jest jest-environment-jsdom ts-jest @testing-library/react @types/jest //yarn yarn add -D jest jest-environment-jsdom ts-jest @testing-library/react ..

    좋아요0
    댓글0작성시간2022. 10. 6.
  • [VS Code] 자주 쓰는 비주얼 스튜디오 코드(VS CODE) 확장 프로그램 모음글 내용

    오늘은 저가 프론트엔드 개발을 할 때 비주얼 스튜디오에 꼭 설치하여 사용하는 확장 프로그램들에 대해서 알아보도록 하겠습니다. 저가 개인적으로 사용하는 것이니 꼭 이것이 정답은 아닙니다. 1. ES-LINT & PRETTIER lint는 소스코드의 문제를 찾는 작업이고, 이러한 작업을 행하는 것이 linter입니다. 대표적으로 많이 사용하는 javascript linter는 eslint입니다. 해당 익스텐션을 깔아두면 밑줄 등을 통해 우리에게 에디터 내에서 잘못된 코드를 알려줍니다. 필수적으로 사용하는 확장프로그램입니다. code formatter는 개발자가 작성한 코드를 약속된 코딩 스타일로 변환해주는 도구 입니다. 이중 대표적으로 많이 사용되는게 prettier입니다. 대다수의 오픈소스(ex: reac..

    좋아요0
    댓글0작성시간2022. 10. 5.
    게시글 이미지
  • [DOM Hack] 특정 DOM element의 이벤트 모두 없애기(HTML Event remove)글 내용

    오늘은 이벤트 덮어 쓰기에 대해서 알아보려고 합니다. 가끔 웹사이트를 이용하다 보면 스크립트 공격과 다양한 취약점들을 해결하기 위해 브라우저에서부터 폼 내부에 특수문자가 들어오지 않게 막는 경우가 있습니다. 이럴때 우리는 한자키를 이용한 특수문자로 대체하거나 아니면 해당 돔의 keyup이벤트에 걸려 있는 치환 이벤트를 지우고 입력해야됩니다. //TAG let tagEle = document.getElementsByTagName('input'); for(let i = 0, len = tagEle.length i < tagEle ; i++){ tagEle[i].outerHTML = tagEle[i].outerHTML; } //ID let idEle = document.getElementById('test')..

    좋아요1
    댓글0작성시간2022. 9. 29.
  • [웹 최적화] 이미지 로딩 최적화(Image loading Optimzation)글 내용

    오늘은 웹 개발시에 자주 접하게 되는 이미지 로딩에 대해서 알아보겠습니다. 그 중에서도 이미지와 관련된 성능 최적화에 대해서 한번 알아보도록 하겠습니다. 우리는 개발을 하다 보면 이미지를 아주 많이 접하게 됩니다. 배경이 될 수 도 있고, 아이콘이 될 수도 있고, 사람의 프로필 등으로 다양한 모습으로 접하게 될 겁니다. 이렇게 자주 만나는 이미지는 웹 성능에 큰 영향을 미치는 요소 중 하나입니다. 실제로 lighthouse에서 검사 시에도 이와 관련된 작업을 따로 하지않는다면 매우 많이 검출되는 것을 볼 수 있습니다. 제가 아는 한도내에서 어떻게 이미지를 효율적으로 다뤄야 될지에 대해 알아보겠습니다. 1. preconnect 옵션 이 옵션은 말 그대로 사전연결 옵션입니다. 특정 주소에서 리소스들을 불러올..

    좋아요0
    댓글0작성시간2022. 9. 13.
  • [VueJS] 컴포넌트간 통신을 위한 이벤트 버스 개념과 활용글 내용

    오늘은 Vue 개발할 때 자주 사용되는 것 중 하나인 컴포넌트 간 통신을 위한 이벤트버스(EventBus)에 대해서 알아보도록 하겠습니다. 보통 컴포넌트간의 통신을 위해서는 refs를 이용하여 상위컴포넌트에서 하위컴포넌트를 호출하거나 내장 이벤트버스(this.$emit)를 이용하여 하위컴포넌트에서 상위컴포넌트를 호출합니다. 개발을 진행하다보면 상위 또는 하위로 드릴링하여 들어가여 호출하고 받는 것이 아니라 직접적으로 컴포넌트의 이벤트를 실행하고 싶은 경우가 있습니다. 이럴 경우 우리는 EventBus라는 것을 사용하게 됩니다. 자세한 내부 코드가 궁금하면 vue 공식 github 링크에 들어가셔서 확인하실 수 있습니다. github 코어 코드를 보다보면 배우는게 많으니 시간날때 core부터 찬찬히 보면 ..

    좋아요0
    댓글0작성시간2022. 9. 5.
  • [VueJS] Vue2 업데이트 시작 Vue2.7 Naruto 공식 릴리즈글 내용

    오늘은 멈춰있던 Vue2를 다시 움직이게 할 Vue 2.7 공식 릴리즈 Naruto에 대해서 알아보겠습니다. 기존의 Vue 2.6에서의 변경점과 Vue3와의 차이점에 대해서 알아 보겠습니다. Vue3로 넘어가기 위해서 파격적으로 공식적으로 Vue3를 지원하기도 하고 많은 변화들이 있었는데 Vue2에서도 Vue3의 기능을 사용할 수 있게 2.7 릴리즈가 된다고 알고 있었는데 드디어 되었습니다. 사내에선 Vue2 기반으로 프로젝트가 진행되었었는데 Vue3로 마이그레이션을 진행해야될지 고민하던 찰나에 2022 7월에 Naruto가 나와서 일단은 Vue2에서 최신버전으로 올리겠습니다. 올리면서 알게된 변경점들에 대해서 말씀드리겠습니다. 바뀐점(2.7 release) 어차피 vue3를 사용하신분이라면 다들 아실 ..

    좋아요1
    댓글0작성시간2022. 9. 2.
    게시글 이미지
  • NextJS + StyledComponents : Font Flickering Issue (최초 로딩 시 폰트 깜빡임 문제 해결)글 내용

    문제 : NextJS와 StyledComponents로 작업한 프로젝트에서 createGlobalStyle 이라는 StyledComponents의 함수를 사용하여 전역 폰트를 지정하였을 때 폰트 깜빡임 현상이 발생 - GlobalFonts.tsx import { createGlobalStyle } from "styled-components"; const GlobalFonts = createGlobalStyle` @font-face { font-family: 'NotoSansKR'; src:local('NotoSansKR'), url('/assets/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/assets/fonts/NotoSansKR-Black.woff..

    좋아요0
    댓글0작성시간2022. 8. 31.
  • html - DOCTYPE글 내용

    오늘은 프론트엔드 면접 기출 문제이자 아주 간단한 내용인 DOCTYPE에 대해서 알아보도록 하겠습니다. 우리가 보통 front end 개발을 할 때 HTML의 최상단에 작성하는 이 DOCTYPE의 용도는 아주 간단합니다. DOCTYPE 브라우저가 HTML문서를 렌더링 할 때 어떤 스펙으로 렌더링 할지 정의 하기 위함 브라우저는 렌더링을 하기위해 두가지 방식 중 하나의 방식을 선택하게 됩니다. W3C에서 정의한 standard mode ( 스탠다드 모드 )와 quirks mode ( 브라우저별 호환모드 ) 입니다. 기본적으로 을 지정하지 않으면 default로 quirks mode로 렌더링 하게 됩니다. 또한, 을 통해 html5 뿐만 아니라 과거의 html 표준으로도 선언할 수 있습니다. 최신 html5..

    좋아요0
    댓글0작성시간2022. 4. 21.
  • React18 + Recoil + TypeScript : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'.글 내용

    문제 : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. 리액트 18 버전 업데이트에 대응하여 recoil의 type대응이 제대로 되지 않아서 그렇다. 해결방법 : yarn upgrade --latest 0.7.0 이하의 버전을 사용하고 있으신분들은 0.7.1버전(4월13일 한국시간으로 낮에 release)이상으로 버전을 업데이트 시키자. (참고. 위의 방식으로 업그레이드 하면 원치않은 패키지까지 업그레이드 될..

    좋아요0
    댓글0작성시간2022. 4. 13.
문의안내
  • 티스토리
  • 로그인
  • 고객센터
© Kakao Corp.