룹 이어플러그 | 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이 변경되면 다시 수행됨)..
-
개발 모드에서 API 요청할 때 프록시 설정하기 Proxying API Requests in Development
Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev * 참고: 이 기능은 react-scripts@0.2.3 이상에서 사용할 수 있습니다. 사람들은 종종 백엔드 구현과 동일한 호스트 및 포트에서 프런트 엔드 React 앱을 제공합니다. 예를 들어 앱이 배포된 후 프로덕션 설정은 다음과 같을 수 있습니다. / - static server returns index.html with React app /todos - static server returns index.html with React app /..
-
Writing your first Django app, part 5 (장고 자습서 따라하기)
자동 테스트 자동 테스트란? 테스트는 코드의 작동을 점검하는 루틴입니다. 테스트는 서로 다른 수준에서 작동합니다. 일부 테스트는 작은 세부 사항(특정 모델 방법이 예상대로 값을 반환합니까?)에 적용되는 반면, 다른 테스트는 소프트웨어의 전반적인 작동(사이트에서 일련의 사용자 입력이 원하는 결과를 산출합니까?)을 검사합니다. 이는 앞서 튜토리얼 2에서 수행한 테스트, 셸을 사용하여 메서드의 동작을 검사하거나 응용 프로그램을 실행하고 데이터를 입력하여 메서드의 동작을 확인하는 것과 다르지 않습니다. 자동화된 테스트에서 다른 점은 테스트 작업이 시스템에 의해 수행된다는 것입니다. 테스트 집합을 한 번 만든 다음 앱을 변경할 때 시간이 많이 걸리는 수동 테스트를 수행할 필요 없이 코드가 원래 의도한 대로 작동하..
-
항해 플러스 프론트엔드 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 : 현재 만족..
-
각 기기 별 스크린 사이즈 확인하는 사이트(웹, 모바일, 테블릿)
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices screensiz.es 각 기기 별 스크린 사이즈 확인하는 사이트입니다. 기기별로 아래 정보도 확인 가능합니다. 운영체제 OPERATING SYSTEM 실제 물리적 크기(인치) PHYSICAL SIZE " 실제 물리적 크기(센치) PHYSICAL SIZE CM 가로 픽셀 WIDTH PX 세로 픽셀 HEIGHT PX 장치 폭 DEVICE WIDTH PPI (PX PER INCH) 픽셀 밀도 PX DENSITY 종횡비 ASPECT RATIO