728x90 반응형 분류 전체보기362 직접 두드려본 cjs esm 모듈 시스템 2023. 11. 30. 23.11.19~23.11.26 업무 1. component update module 개발 extension에서 생성된 template의 component들을 수정할 수 있는 모듈을 작성했다. component 속성 중 content, image, url, action에 대한 수정 액션을 제공해, 사용처에서 해당 값들을 입력받아 업데이트가 이뤄질 수 있도록 했다. 2. UI styling 각 template sub category마다, 해당 UI별 고유한 frame이 존재한다. 현재 협업 중인 회사의 frame 2개가 존재하는데, 이에 대한 UI 작업을 마무리했다. 추가적으로 좌우측 패널이 사용자 액션에 따라 위치가 변경되기도, 사라지기도 하는데 이를 context로 분리해 panel의 style값의 변경사항을 하위 컴포넌트에 전파해 .. 2023. 11. 26. 프로그래머스 - 폰켓몬, 최소직사각형 다리를 다쳐 꼼짝없이 집에만 있다 보니... 문득 회사에 다니기 전 풀었던 알고리즘 문제가 생각나 프로그래머스에 들어갔다. (심심해서 알고리즘을 풀다니! 대학생 시절 나였으면 상상도 못 했을 텐데) 이전 풀이를 보니... 귀엽기도 하고, 답답하기도 하고. 하하. 그때 풀던 level 1 문제 중 안 푼 게 있어서, 재미 삼아 풀어보았다. 언어는 JS로! 폰켓몬 https://school.programmers.co.kr/learn/courses/30/lessons/1845 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(num.. 2023. 11. 25. 23.11.12~23.11.19 업무 공유 1. Step 제어 모듈 작성 현재 온보딩 빌더는 tree 구조 형태로, 각 node가 자신의 다음 node에 대한 정보를 알고 있다. 이때 각 간선을 action이라는 속성으로 저장하는데, 해당 데이터를 어떻게 바라볼 것인가! 의 정의가 변경되어, 이를 반영했다. 처음에는 UI 로직을 따라 각 action이 '다음', '이전', '특정 node로 이동', 'url이동' 등으로 구성되어 있게 설계했는데, 의미를 따지고 보니 '다음'과 '이전'이 결국 '특정 node로 이동'함과 동일하다고 판단되었다. 물론 이 경우... 각 node들의 순서가 변경될 때 action 역시 변경해야 한다는 불편함이 있었지만, 이렇게 하지 않을 경우 각 node들이 자신의 순서(order개념)를 갖고 있어야 하고 .. 2023. 11. 19. "'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다" 에러 해결 typescript로 React 애플리케이션을 작성하고 있는데 다음과 같은 타입 에러와 마주쳤다. react component 내에 작성된 JSX 표현식에서 에러가 발생했는데... 해결 방안 해결 방법 자체는 단순하다. 아래의 두 해결책 중 하나를 사용하면 된다! 1. 해당 tsx 파일 내 React import import React from "react"; React를 import 해주면 된다. 2. tsconfig compilerOptions 변경 { "compilerOptions": { // ... "jsx": "react-jsx", // react-jsx 또는 react-jsxdev로 설정 } } tsconfig의 compilerOptions 중 jsx 속성을 변경해 주면 된다. 원인 그런데 영.. 2023. 11. 18. getElementsByClassName에 for each 사용해 HTMLElement 접근하기 같은 className의 요소들을 순회하며 특정 동작을 수행해야 할 때가 있다. const balls = document.getElementsByClassName("ball"); balls.forEach((element) => {}); // Error! 위와 같이 작성하면 될 것 같지만... HTMLCollectionOf 에는 forEach가 없단다. 왜? https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection HTMLCollection - Web API | MDN HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합.. 2023. 11. 16. 23.11.05~23.11.12 업무 1. 변경된 DB 구조 반영 지난주. 다른 기업과 협업을 진행하면서, 기존의 DB 구조로는 앞으로의 요구 사항을 반영하지 못하겠다는 판단을 내렸다. 이로 인해 협업 이전 진행하던 개발 사항들을 모조리 수정해야 했는데... 해당 작업에 4일 정도를 투자했다. 물론 단순히 DB 측 interface만 변경하는 것이라면 (이것보다는) 간단했을 테다. 하지만 협업을 진행하며 package 쪽 아키텍처도 개선이 가능하겠다는 생각이 들었어서, 이를 반영해 새로운 모듈들을 추가적으로 작성했다. 그 과정에서 특히 FE 개발에서는 1) 무엇을 추상화할 것인가 와 2) 관심사를 어떻게 분리할 것인가 를 계속해서 고민해야 함을 느꼈다. 물론 소프트웨어 개발에서 적절한 추상화와 관심사 분리의 중요성은 말해 입 아프겠지만.. 2023. 11. 12. 추상 팩토리(Abstract Factory) 패턴 추상 팩토리 패턴이란? 추상 팩토리는 객체의 인스턴스 생성에 관여하며, 클래스 정의와 객체 생성 방식을 구조화/캡슐화하는 생성 패턴의 한 종류이다. 서로 연관되거나 의존적인 객체의 집합을 생성하기 위한 인터페이스를 제공해 구체적 클래스에 의존하지 않음으로써, 새로운 객체 생성 로직의 추가나 변경 사항에 쉽게 대응할 수 있다. 사용 예제 다음과 같은 요구 사항이 있었다. 1. DB에 Template이라는 table이 존재한다. (사용자가 입력한 여러 데이터로 구성) 2. 각 Template은 type이라는 속성을 갖는다. 해당 속성을 통해 Template의 종류를 구분한다. ex) modal, tool-tip... 3. 각 Template은 type에 따라 각기 다른 형태의 HTMLElement를 갖는다 .. 2023. 11. 8. 23.10.22~23.11.05 업무 1. first customer용 프로덕트 개발 0번째 고객을 모으는 건 언제나 어렵다. 하지만 반대로 말하자면, 모든 프로덕트는 0번째 고객부터 시작한다. no-code onboarding builder라는 콘셉트만 존재하는 현 상황에서 정말 감사하게도, 한 스타트업과 협업을 진행하게 되었다. 월요일에 최종 디자인을 전달받았고... 무엇보다 속도가 중요하다는 판단이 들어, 단 삼일 만에 모든 개발을 완료했다! (정말 홀린 듯 일했다...) 2. DB 구조 전체 변경 협업이 진행되기 약 한 달 여 전부터, 전체적인 설계 및 api 개발, 패키지와 extension 개발이 진행되고 있었다. 하지만 협업을 진행하는 삼 일 간... 해당 기업의 요구 사항을 현재 DB 구조로는 구현하기 힘들겠단 생각이 들.. 2023. 11. 5. 이전 1 ··· 11 12 13 14 15 16 17 ··· 41 다음 728x90 반응형
