javascript69 [JS] Nested 객체 다루기 안녕하세요 :) 사이드 프로젝트로 간단한 캘린더 어플을 만들고 있는데요. 날짜 데이터가 은근히 다루기가 까다롭네요 ㅠㅠ 날짜(+ 약속) 데이터를 어떻게 하면 잘 정리된 상태로 보관하면 좋을지 생각을 해보다가 아무래도 중첩 객체 형태로 데이터를 다루는 게 좋겠다고 생각했습니다. {"year": { "month: { "date": [] } } } 이렇게 데이터를 보관하면 탐색과 저장 속도가 빠르고 서버와의 소통에도 장기적으로 용이하다고 생각했기 때문입니다. 문제는 배열의 경우 물음표 식별자를 통해 "undefined" 처리를 하기가 쉽지만 객체에서는 꽤나 까다로운 부분이 있었습니다. 키값이 있는지 없는지 확인을 해야하기 때문에 if문이 줄줄이 늘어나는 문제가 있었습니다. 그래서 객체의 중첩된 내부객체 값을 .. 2024. 2. 29. [Three.js] requestAnimationFrame 사용시 브라우저별 속도 일정하게 맞추기 안녕하세요 :) 개인 프로젝트로 블랙홀을 만들고 있는데요, 재미있는 gltf 오브젝트가 있어서 추가해 보았습니다. 저는 보통 작업할 때 크롬을 사용하기 때문에, 크롬 환경에서 시간에 따른 액션 변화를 설정했는데요, 이게 웬걸 사파리나 파이어폭스에서는 액션이 엉뚱한 타이밍에 트리거 되는 것이었습니다. 왜 이런 문제가 발생하는지 찾아보니 브라우저별 성능차이로 인한 문제였습니다. Three.js에서 움직임을 표현할 때 자바스크립트 내장 함수인 requestanimationFrame을 많이 이용합니다. 이 함수는 한 차례 랜더링이 끝나면 이어서 다음 랜더링이 시작되기 때문에 기기와 브라우저의 프레임 차이에도 최적화된 움직임을 표현할 수 있습니다. 문제는 저는 requestanimationFrame안에서 인스턴스.. 2023. 10. 6. [Three.js] renderer와 scene 백그라운드 차이 안녕하세요 :) 최근 유니티 게임과 더불어 3D 렌더링 공부에 푹 빠져 즐거운 나날을 보내고 있습니다. 오늘은 Three.js 공부 중에 canvas의 백그라운드를 설정할 수 있는 방법이 두 가지가 있다는 사실을 알고 그 차이가 무엇인지 공부해 보았습니다. Three.js에서는 아래와 같이 "scene"과 "renderer" 두가지 인스턴스의 백그라운드를 설정할 수 있도록 해놓았습니다. // Set the background of the scene to red. scene.background = new THREE.Color(0xff0000); // Set the background of the renderer to transparent. renderer.setClearColor(0, 0, 0, 0); 언.. 2023. 6. 7. [css] flex 아이템 스크롤 상단부분 가림 문제 안녕하세요, 오늘은 이런저런 라이브러리 테스트 도중 위와 같이 스크롤을 위 끝까지 올려도 상단의 텍스트가 잘리는 문제가 발생했습니다. 문제의 원인은 flex 속성 사용중에 아래 두 개의 스타일 때문입니다. align-items: center justify-content: center 위 스타일을 이용하면 flex item을 아주 쉽게 가운데 정렬 할 수 있습니다. 하지만 만약 item이 container의 크기를 벗어난다면 overflow 된 부분에 접근이 불가능 해지는 문제가 발생합니다. 이러한 문제를 해결하기 위해 "safe" 값을 추가할 수 있도록 했다고 하지만, 아직 여러 브라우저에서 지원을 하지 않는 모양입니다. justify-content: safe center align-self: safe .. 2023. 5. 24. [UI] Chakra와 Storybook 연동하기 안녕하세요 :) 개발자 Sean입니다. 이번주 새로운 프로젝트를 시작하며 아키텍쳐와 사용할 라이브러리에 대해 고민하고, 기본 틀을 세팅하는 시간을 가져보았습니다. 이번에는 ui 라이브러리로 chakra를 이용해 약간의 커스터마이징을 하고, storybook을 통해 컴포넌트 단위로 테스팅과 유지보수를 하도록 만들려고 합니다. 회사에서 기존에 만들었던 웹어플의 경우 잦은 디자인 변경과 담당자 교체로 인해 수많은 ui 파일들이 생겨나는 문제가 발생했습니다. 문제는 어떤 ui가 사용되고 있는지 모르기 때문에 좀비처럼 폴더안에 살아있는 문제가 발생했습니다. 이를 해결하기 위해 이번 프로젝트는 처음부터 디자인을 확실히하여 위의 문제가 발생하지 않도록 하려 합니다. # 1. "@chakra-ui/storybook-a.. 2023. 4. 17. [JS] JavaScript 객체 key 값 변수로 설정하기 안녕하세요 :) 개발자 Sean입니다. 객체 key 값을 변수로 설정하고 싶을 때는 어떻게 해야 할까요? 오늘 업무 중에 관련해서 코딩한 부분이 있어 잘라서 붙여봅니다. import { useState } from 'react'; const useFilters = (_filterList: {[key: string]: any}) => { const [filterList, setFilterList] = useState(_filterList); const updateFilterList = (target: string, value: any) => { if (filterList[target] in filterList){ setFilterList({ ...filterList, [target]: value, }) }.. 2023. 4. 17. [JS] 일정 값 사이의 랜덤 값 생성 함수 export const randomNumBetween = (min, max) => { return Math.random() * (max - min + 1) + min } 2023. 2. 28. [JS] Event Delegation 작동방식 안녕하세요, 개발자 Sean입니다. 오늘은 Event Delegation에 대한 좋은 글을 읽어 번역해 옮겨보려고 합니다. How JavaScript Event Delegation Works 자바스크립트 세계에서 가장 핫한 방법론 중 하나로 event delegation이 있습니다. Event delegation을 사용하면 특정 노드에 이벤트 리스너를 추가하지 않아도 되지요. 대신 부모 엘리먼트에 이벤트 리스터를 추가하면 됩니다. 그렇게 되면 해당 이벤트 리스너는 버블링 된 이벤트를 분석하여 하위 요소에서 일치하는 항목을 찾을 수 있죠. 기본 개념은 매우 간단하지만 많은 사람들이 event delegation이 작동하는 방식을 알지 못합니다. 이번 포스팅에서 event delegation이 작동하는 방식.. 2023. 2. 20. 웹앱에 슬랙 연동하기 안녕하세요, 개발자 Sean입니다. 오늘은 개발 중인 웹 어플에다가 슬랙을 연동하는 작업을 했는데요, 슬랙을 연동하게 된 이유는 신규 유저가 들어올 때마다 알림이 필요했는데 메일은 너무 식상하고(아재 냄새나요)... 모든 팀원들이 슬랙을 사용하니 슬랙으로 공유받으면 좋겠다는 이유에서 였습니다. 사실 slack이 굉장히 관련 블로그가 많은 편이라 따로 설명을 하지 않더라도 쉽게 연동방법을 찾을 수 있습니다. 따라서 대략적인 순서만 알려드리자면 아래와 같습니다. 그리고 기억을 더듬으며 작성해서 대략적인 느낌(?)에 의존해서 알려드립니다. 1. slack 어플 만들기 우선은 슬랙안에 어플을 생성해야 합니다. 뭐 거창 한 건 아니구 아래 링크로 가셔서 그냥 어플 만들기 버튼만 누르고 이름 설정하면 끝입니다. h.. 2022. 9. 28. [JS] 배열 데이터 순서가 갑자기 바뀔때는 mutation을 의심해보자 어제오늘 필자를 극한으로 괴롭히던 문제가 있었는데 오늘 동료 개발자와 열띤 논의 끝에 원인을 찾아냈다. 문제 서버로 부터 받아온 배열 데이터의 순서가 렌더링 과정에서 변경되는 문제가 발생했다. 서버로 받아온 데이터 렌더링 도중 변경되는 데이터 원인 자식 컴포넌트 중에 해당 데이터 배열에 .sort()를 사용한 코드가 있었다. 문제의 코드 {data && data ?.sort((a, b) => b.exposure - a.exposure) .map((el, i) => { return ( .sort()는 mutable 한 매서드로 원본 배열의 순서를 변경한다. 따라서 기존의 데이터 배열 원본을 변경시켰고 이에 따라 같은 배열을 사용하는 다른 컴포넌트에도 영향을 미쳤던 것이었다. 해결방법 문제의 코드를 깊은 복.. 2022. 9. 6. [JS] 주니어 레벨의 프론트엔드 개발자가 되려면? 신입 개발자로 일을 하면서 여러 가지 상황에 부딪힐 때마다 드는 생각은 '이게 최선인 걸까?' 하는 고민이다. 그만큼 아직은 배워야 할게 많다는 뜻일까. 성장에 대한 고민을 하면서 여러 블로그 글을 읽다가 재밌는 글이 있어 번역해 옮겨본다. 2022년에는 주니어 프론트엔드 개발자(리엑트)라고 불릴 수 있을까? 안녕하세요. 많은 사람들이 소프트웨어 엔지니어를 희망하고 발리에서 재택근무와 고소득의 라이프 스타일을 바라고 있습니다. 그렇지 않은 사람이 있을까요? 하지만 몸 값이 높은 주니어 프론트엔드 개발자가 되는 것은 그렇게 쉬운 일은 아닙니다. 해가 갈수록 채용 담당자는 주니어 레벨의 개발자에게 더 많은 요구와 엄격한 잣대를 요구하고 있습니다. 바로 지금 여기서 당신이 주니어 레벨의 FE로 불릴 수 있는지.. 2022. 8. 26. [React] Build 후에 CSS 사라짐 현상? 이번 주 가벼운 마음으로 개인 프로젝트를 진행하다가 배포 업데이트를 하려고 build를 하고 build 된 어플을 실행시켜 보았다. 그런데 이게 뭔 일인지.... 스타일이 몽땅 사라져 있는 것이었다. 이전에 똑같은 방식으로 build 해서 배포할 때는 아무런 문제가 없었는데 갑자기 지금에 와서야 이러는 이유를 모르겠다. 거기다 로컬에서 돌렸을 때는 스타일이 모두 잘 적용되어서 돌아가고 있었다. 무엇이 문제인지 한참을 헤메다가 원인을 찾게 되었다. 원인은 styled-components의 GlobalStyles 컴포넌트 때문이었다. 지금까지 index.js에 컴포넌트보다 상위의 위치에 컴포넌트를 위치시켰는데, 문서를 살펴본 결과 컴포넌트와 같은 위치 혹은 더 아래의 위치에 를 위치시켜야 한다고 한다. im.. 2022. 8. 14. 이전 1 2 3 4 ··· 6 다음
