룹 이어플러그 | Loop KoreaLoop은 스타일리시한 디자인과 청력 보호 기능을 갖춘 벨기에 이어플러그 브랜드입니다. 룹 이어플러그로 세상을 듣는 나만의 방식을 선택하세요.loopearplugs.kr 필요한 사람이 생기면 선물해야지..!
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)생각의 흐름대로 코드를 구현했으나 리팩토링이 많이 많이 필요해 보여요2. 시도다른 분들이랑 코드 공유하는 게 도움이 많이 되었던 것 같아요3. 해결이번에는 해결은 못했지만 어떤식으로 해야겠다는 감이 잡혀서 좋았습니다4. 알게된 것jsx, jsxFactory가 뭔지 알게 됨..!matches()라는 DOM Element 메소드를 알게 됨..! 재밌다!Object.fromEntries(formData) 이것도 알게 됨..!Array.flat(Infinity) 이런 것도 알고 생각 없이 document 쓰고 있었는데 그래 document도 결국 객체구나라고 생각!Keep : 현재 만족하고 계속 유지할 부분리팩토링도 좀 더 손을 대면 좋겠고, 다른..
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)그으냥 혼란 그 자체..!주어진 요구사항과 테스트 코드를 그냥 하나하나 풀어가는 느낌으로 진행했더니 끝 쪽으로 가서 다 갈아엎어야 했다! 여러가지 문제가 있었지만 가장 컸던 건 라우터 구현 관련이었다!문제 상황라우터로 사용할 객체를 만들었음각 패스에 적절한 라우터 핸들러를 만들었음핸들러 안에 라우터.navigateTo가 있어서 순환 참조 해버림..!2. 시도main.js에서 router를 전역에 불러올 때 실행 순서가 지켜지도록 처리함3. 해결router.js routerSetup.js main.js 이런식으로 파일을 분리해서 실행 순서가 지켜지도록 처리하였음4. 알게된 것History API로 SPA 구현이 가능하구나Keep : 현재 만족..
JSDoc?JSDoc은 JavaScript 코드에 주석을 추가하여 코드의 구조와 기능을 문서화하는 도구입니다.JSDoc 주석은 코드의 가독성을 높이고, 자동으로 API 문서를 생성하는 데 유용합니다.JSDoc 주석은 일반적으로 /** ... */ 형식으로 작성됩니다. JSDoc 태그@param: 함수의 매개변수를 설명합니다.@returns: 함수의 반환 값을 설명합니다.@typedef: 사용자 정의 타입을 정의합니다.@property: 객체의 속성을 설명합니다.@class: 클래스를 설명합니다.@method: 클래스의 메서드를 설명합니다. 사용 예시함수 주석:/** * 두 수를 더합니다. * @param {number} a - 첫 번째 숫자. * @param {number} b - 두 번째 숫자. * @..
1. 웹에서 렌더링이란?웹 브라우저가 HTML, CSS, Javascript 등의 웹 자원을 해석해 사용자에게 시작적으로 표시하는 과정주요 단계HTML 파싱 -> DOM(Document Object Model) 트리 생성DOM: 문서 구조를 나타내는 트리 형태의 데이터 구조, 각 요소는 노드로 표현CSS 파싱 -> CSSOM(CSS Object Model) 트리 생성스타일 규칙을 기반으로 각 요소에 적용될 스타일 정보 포함Render 트리 생성DOM + CSSOM = Render 트리화면에 실제로 표시될 요소만 포함, 각 요소 스타일 포함(display: none 이면 포함 안됨)Layout (Reflow)각 요소 위치와 크기를 계산하는 과정, 화면 배치 결정(DOM, CSSOM이 변경되면 다시 수행됨)..
-
DDD(Domain Driven Design): "기획자 🤝 개발자" 말 통하게 하는 법
전략적 설계 비즈니스의 상황(Context : 대상자, 상황)에 맞게 설계 모든 Context를 이벤트 스토밍을 통해 공유 각 Context를 그룹핑(Bounded Context) 컨텍스트 매핑을 통해 Bounded context 간의 관계를 정의 👉 전략적 설계의 결과물 : 도메인 모델(서비스를 추상화한 설계도, 분리 & 연결 전술적 설계 더 상세한 부분(Bounded Context 내부) 모델링 Model driven design Aggregate pattern 계층형 아케텍처를 통한 도메인 모델 분리 도메인 이벤트를 통해 도메인을 보다 명확히 모델링 어플리케이션 이벤트스토밍 7단계 Domain Event 정의 이벤트는 Actor가 Action을 해서 발생한 결과입니다. 각자 생각나는 Event를 적..
-
모놀리식 아키텍처 vs 마이크로 서비스 아키텍처
마이크로서비스와 모놀리식 아키텍처 비교 | Atlassian 모놀리식 애플리케이션은 하나의 통합된 유닛인 반면, 마이크로서비스 아키텍처는 독립적으로 배포할 수 있는 소규모 서비스의 모음입니다. www.atlassian.com 모놀리스가 너무 커졌다면 마이크로서비스로 전환해야 할 시기일 수 있습니다 - Chandler Harris 마케팅 전략가 겸 작가 - 모놀리식 아키텍처 소프트웨어 프로그램의 전통적 모델 모든 비즈니스 관련 사항을 함께 결합하는 하나의 코드 베이스를 갖춘 대규모 단일 컴퓨팅 네트워크 장점 손쉬운 배포: 실행 파일 또는 디렉토리가 하나임 개발 쉬움: 하나의 코드 베이스로 어플리케이션을 구축함 성능: 하나의 API로 마이크로서비스에서 여러 API 수행하는 것과 동일 기능 테스트 간소화: 엔..
-
항해 플러스 프론트엔드 3기 2주차 회고
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)생각의 흐름대로 코드를 구현했으나 리팩토링이 많이 많이 필요해 보여요2. 시도다른 분들이랑 코드 공유하는 게 도움이 많이 되었던 것 같아요3. 해결이번에는 해결은 못했지만 어떤식으로 해야겠다는 감이 잡혀서 좋았습니다4. 알게된 것jsx, jsxFactory가 뭔지 알게 됨..!matches()라는 DOM Element 메소드를 알게 됨..! 재밌다!Object.fromEntries(formData) 이것도 알게 됨..!Array.flat(Infinity) 이런 것도 알고 생각 없이 document 쓰고 있었는데 그래 document도 결국 객체구나라고 생각!Keep : 현재 만족하고 계속 유지할 부분리팩토링도 좀 더 손을 대면 좋겠고, 다른..
-
항해 플러스 프론트엔드 3기 1주차 회고
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)그으냥 혼란 그 자체..!주어진 요구사항과 테스트 코드를 그냥 하나하나 풀어가는 느낌으로 진행했더니 끝 쪽으로 가서 다 갈아엎어야 했다! 여러가지 문제가 있었지만 가장 컸던 건 라우터 구현 관련이었다!문제 상황라우터로 사용할 객체를 만들었음각 패스에 적절한 라우터 핸들러를 만들었음핸들러 안에 라우터.navigateTo가 있어서 순환 참조 해버림..!2. 시도main.js에서 router를 전역에 불러올 때 실행 순서가 지켜지도록 처리함3. 해결router.js routerSetup.js main.js 이런식으로 파일을 분리해서 실행 순서가 지켜지도록 처리하였음4. 알게된 것History API로 SPA 구현이 가능하구나Keep : 현재 만족..
-
JSDoc
JSDoc?JSDoc은 JavaScript 코드에 주석을 추가하여 코드의 구조와 기능을 문서화하는 도구입니다.JSDoc 주석은 코드의 가독성을 높이고, 자동으로 API 문서를 생성하는 데 유용합니다.JSDoc 주석은 일반적으로 /** ... */ 형식으로 작성됩니다. JSDoc 태그@param: 함수의 매개변수를 설명합니다.@returns: 함수의 반환 값을 설명합니다.@typedef: 사용자 정의 타입을 정의합니다.@property: 객체의 속성을 설명합니다.@class: 클래스를 설명합니다.@method: 클래스의 메서드를 설명합니다. 사용 예시함수 주석:/** * 두 수를 더합니다. * @param {number} a - 첫 번째 숫자. * @param {number} b - 두 번째 숫자. * @..