룹 이어플러그 | 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이 변경되면 다시 수행됨)..
-
항해 플러스 프론트엔드 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 - 두 번째 숫자. * @..
-
React.memo, useMemo, useCallback 언제 써야 할까?
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이 변경되면 다시 수행됨)..
-
항해+ 시작하는 마음✍
지금까지의 회고94년생, 대구에서 개발자로 보낸지 어느새 3년이라는 시간이 흘렀습니다.3년 전의 저는 아주 기본적인 html, css, js만 알고 일을 시작했습니다.코딩 교육업을 하는 회사에서 처음으로 맡게 된 프로젝트는 블록 코딩 에디터를 만드는 일이었습니다.어떤 언어와 프레임워크를 사용할지 어떻게 구현할지 모든 것을 혼자 결정했습니다.주먹구구... 마음에 안드느 부분도 많고 확신을 가질 수 없는 부분도 많았지만 어떻게든 하다보니 매년 발전하는 것은 보였습니다.항해 플러스 참여 계기그래도 이제는... 뭐라도 제대로 빠르게 배워보고 싶습니다.다른 개발자 분들은 어떻게 일하시는지도 배우고 싶습니다.우리 회사에서 어떻게 더 좋은 환경을 만들어서 일 할 수 있을까도 알아가고 싶습니다.향후 5년 뒤 커리어 방..
-
(8월의 회고록) 2023년 8월 1일부터 2023년 8월 31일까지
😼 1주 : 2023년 8월 1일 → 2023년 8월 4일 🌝스토리보드 작성 2023년 8월 3일 완성됨, 2023년 8월 4일 회의 → 생각보다 할만했다. 피그마로 댓글 달면서 진행할 수 있었던 게 좋았던 거 같다. 물론 담부터 PPT로 만들 거다. 아마 거기서도 댓글이 됐던 거 같다. 생산성 💣개발팀 소개 페이지 다른 팀에서 노션으로 옮기게 되고 소개 페이지도 만들게 됐다. 기분이 좋다. 소개 페이지를 만들며 각 팀에 대한 소속감과 업무에 대한 자부심이 많이 생기고 정리도 되고 서로 어떤 일을 하는지 알아가면 좋겠다. 신뢰와 재미를 바탕으로 일 할 수 있다면 최고로 좋은 회사가 아닐까?ㅎㅎ😼 개발팀 팀스페이스 정리 언젠가 정리했어야 했는데 정리중.. 완벽한 정리는 없지만 다 같이 얘기하면서 이렇게 저..
-
(7월의 회고록) 2023년 7월 1일부터 2023년 7월 31일까지
한 일 b2 개발 프로세스 및 기간 설정 리액트&피그마 공부 스토리보드, 웹 기획서, 화면설계서 등 양식 레퍼런스 조사 스토리보드 작성 b1 인공지능 기능 관련 에러 패치 테스트 버전 배포 배포 버전 배포 미니 프로젝트 도서산간 도선료 계산 프로그램 제작 7월 6일 착수 → 25일 완료 → 26일 전달(전체 기간 3주, 실질적으로 내가 쓴 시간 일주일 정도 되는 것 같음) 챗봇 관련 정리 회의 개인 면담 점심 회식: 찜닭! 교육팀 분들이랑 같이ㅎㅎ 월간 회의 티타임 상시 회의 SW 개발팀 그라운드 룰 피드백 기타 개발팀 소개 페이지 생성 SW 개발팀 그라운드룰 설정 😼 7월 1주 : 2023년 7월 3일 → 2023년 7월 7일 6월 업무 회고 | 자세히 브로콜리1 배포 버전 업데이트 | 자세히 브로콜리..