공부/TIL (13) 썸네일형 리스트형 옵저버 패턴 알아보기 옵저버 패턴이란? 📖객체의 상태 변화를 관찰하는 옵저버(Observer)들이 있고, 관찰 대상이 되는 객체(Subject)가 상태 변화가 있을 때 옵저버들에게 알리는 디자인 패턴입니다. ❗간단하게 설명하면어떤 데이터나 상태의 변화가 일어났을 때, 실시간으로 구독자들에게 알려주는 방식 `Subject (주체)` : 상태를 보유하고 있고, 변화가 일어났을 때 옵저버들에게 알리는 역할`Observer (옵저버)` : 주체의 상태 변화를 감지하고 그에 따라 행동 옵저버 패턴 직접 만들어보기 📖subject.jsconst createSubject = () => { const observers = new Map(); const addObserver = (key, observer) => { if(!obs.. [TIL] 24.07.18 Swiper 슬라이드 Swiper ✨ 1. Swiper 란?Swiper는 하드웨어 가속 전환과 놀라운 네이티드 동작을 갖춘 무료 오픈 소스 슬라이더입니다. 사용 이유 ✨ 1. 간단한 사용법HTML, CSS, JS 코드로 반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있어서 사용하게 되었습니다! 2. 다양한 슬라이드 유형Swiper는 일반적인 이미지 슬라이드뿐만 아니라 텍스트, 비디오, 오디오 등 다양한 유형의 슬라이드를 지원합니다! 3. 반응형 디자인반응형을 지원하기 때문에 데스크탑, 태블릿, 모바일 기기에서 사용자 경험을 제공할 수 있습니다! 사용 방법 📖1. NPM에서 설치NPM에서 Swiper를 설치할 수 있습니다.$ npm install swiper 기본적으로 Swiper는 추가 모듈 없이 핵심 버전만 내보.. [TIL] 24.07.17 쓰로틀링(성능 측정) Throttling 이란? 📖짧은 시간 간격으로 연속해서 이벤트가 발생했을 때, 과도한 이벤트 핸들러 호출을 방지하는 기법입니다. 1. 쓰로틀링 (throttling)일정 주 동안 이벤트 핸들러를 한 번만 실행하도록 제어하는 것 일정한 간격으로 한 번만 실행하는 기법이기 때문에 이벤트 처리를 제어하고, 성능 향상을 할 수 있습니다.예를 들면 스크롤 이벤트가 발생할 때 이벤트가 너무 많이 발생하면 성능 저하 문제가 생길 수 있기 때문에 이때 쓰로틀링을 적용하면 일정 주기 동안 이벤트를 제어하기 때문에 성능을 개선할 수 있습니다. 그래서 팀 소개 프로젝트에 쓰로틀링을 적용해보려고 합니다. 사용 방법실제로 작성한 코드 입니다.const throttleCallback = () => { const scro.. [TIL] 24.07.16 코딩 컨벤션이란? 오늘 공부한 것 📖 1. 코딩 컨벤션코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(하나의 작성 표준)입니다. 대표적인 네이밍 컨벤션 소개 스네이크 케이스 (snake_case)더보기- 모든 철자를 소문자로 쓰고 단어 사이에 언더스코어(_)를 표기하는 방식입니다.ex) user_id, create_at 등등 카멜 케이스 (camelCase)더보기- 맨 앞 단어의 첫 철자를 소문자로 시작하되, 그 다음 이어지는 단어의 첫 철자를 대문자로 표기하기 방식입니다.- 자바, 자바스크립트, 타입스크립트 등에서 많이 쓰이며, 변수 메서드 함수 이름 등에 많이 사용 됩니다!ex) userId, createAt 등등 케밥 케이스 (kebab-case)더보기- 모든 철자를 소문자.. [TIL] 24.07.15 오늘 배운 것 📖1. 팀 소개 페이지 디자인1. 팀 소개 페이지 제작 과제 (7/19일까지) - 주제 선택 (심플한 게 최고!!) - 추가하고 싶은 기능 선택 (이미지 슬라이드, 댓글, 이모지 등등) - 역할 분담 - 와이어프레임 작성2. 맡은 역할 - 이미지 슬라이드 - 와이어프레임 제작 (Figma) 어려웠던 점 ❓1. 역할 분담지금까진 혼자서만 개발을 하다보니까 팀 단위로 프로젝트를 진행할 때 역할을 나누는 데 있어서 고민이 정말 많았다.한 페이지를 만드는 데 있어서 어디서부터 어디까지 나눠야 할 지도 고민이 정말 많이 됐다.그래서 서로 가장 잘 할 수 있는 부분들을 먼저 확인 후 역할을 조금씩 나누고 있는 중이다.아직 정확히 다 나누진 못했다,,,ㅜㅜㅜㅜ2. 와이어프레임 디자인피그마를 이용해 와.. [TIL] 24.07.09 백준 10844번 js 내가 푼 문제 📖 내가 작성한 코드 💻let input = require("fs") .readFileSync(process.platform === "linux" ? "/dev/stdin" : __dirname+"/input.txt") .toString() .trim()let number = +inputlet mod = 1000000000const memo = Array.from({length: 10}, () => 1 )memo[0] = 0for(let i=1; i (a + c) % mod, 0)); 어려웠던 점 ❓1. 점화식 이후 코드 작성까지 연결이 잘 안 된 것memo[n] = memo[n-1]+1, memo[n-1]-1 처음에 세운 점화식이다!! 그러나,, 이후 코딩까지 생각해내지는 못했다.. [TIL] 24.07.08 내가 푼 문제 📖내가 작성한 코드 💻let [buy, ...input] = require("fs") .readFileSync(process.platform === "linux" ? "/dev/stdin" : __dirname+"/input.txt") .toString() .trim() .split('\n')const N = +buyconst cardPacks = input[0].split(' ').map(Number)const memo = Array.from({length: N + 1}, () => 0)for(let i=1; i 어려웠던 점 ❓1. 최댓값 비교하기for(let i=1; i 최댓값 비교하는 부분이 생각해 내기가 정말로 어려웠다. 1시간을 넘게 고민해 봤지만 해결방법이 떠오르질 않.. [TIL] 24.06.17 백준 1373번 js 내가 푼 문제 📖 내가 작성한 코드 💻let input = require("fs") .readFileSync(process.platform === "linux" ? "/dev/stdin" : __dirname+"/input.txt") .toString() .trim() .split('')let results = ''while(input.length){ let ocl = input.splice(-3).join('') if(ocl.length !== 3) ocl = ocl.padStart(3, '0') results += parseInt(ocl, 2).toString(8)}console.log(results.split('').reverse().join('')) 어려웠던 점 ❓1. 기존 변환 .. 이전 1 2 다음
