본문 바로가기

2022/075

운동하면서 느낀점 요즘 MMA 도장에서 복싱을 배우면서 느낀 것들을 조금 정리 해본다. 특정 무술이나 운동은 각자 독자적인 환경에 맞춰서 목적을 수행하기 위해서 발전했다. 복싱의 경우 스텝이 낮으면서 가볍고 경쾌하다. 굳이 분류 짓자면 퀵스텝 류로 분류 할 수 있을거 같다. 장점은 단거리의 무게중심 전환이나 스탠스 전환이 용이하다는 점 단점은 체력소모가 상대적으로 심하고 바닥이 깔끔해야한다는 점 정도 있고 어느 무술이나 동일하지만 하체에 데미지가 쌓이면 스텝이 망가진다. 개인적으로 기존에는 삼재보(삼각형으로 좌우를 전환하는) 계통의 무술을 주로 수련해서 그런지 적응하는데 조금 힘들었는데 기존과 다르게 낮게뛰는거랑 무게 중심이 좌우로 이동하지 않고 좌우 스탠스를 계속 전환하면서 측면을 사용하지 않는게 많이 낯설었다. 이게 .. 2022. 7. 30.
[프론트엔드] 코드 스플릿에 대한 정리 벡엔드뿐 아니라 프론트엔드 개발에서 성능 최적화를 위해서 고려해야 할 요소는 상당히 많다. 디테일한 부분을 제외하고 큼직만 한 요소들을 축약해서 꼽자면 리소스 용량을 줄이는 것(압축 및 캐시와 분할), 렌더링 비용을 줄이는 것(DOM, CSSOM, VDOM), 네트워크 비용을 줄이는 것(커넥션 릴리즈) 정도로 분류할 수 있을 거 같다. 그중 리소스 용량 즉 js나 html, css, image등의 파일의 용량을 관리하는 방식으로 웹을 최적화할 수 있는데 단순히 압축(webp, gzip 등)을 통해서 해당 리소스들의 용량을 줄이는 방향과 cache를 통해서 중복 요청을 줄이는 방법 등이 존재한다. 그리고 단순히 용량을 줄인다는 측면이 아닌 꼭 필요한 부분만을 미리 가져다 쓴다는 측면의 분할을 적용하기도 하.. 2022. 7. 20.
[React]React-dom 과 render 리액트 18기준 레거시가 된 render 함수의 구조를 간단히 들여다 보자 render함수는 react-dom 패키지의 ReactDomLegacy로 분류 되어 있다. export function render( element: React$Element, container: Container, callback: ?Function, ) { if (__DEV__) { console.error( 'ReactDOM.render is no longer supported in React 18. Use createRoot ' + 'instead. Until you switch to the new API, your app will behave as ' + "if it's running React 17. Learn " + .. 2022. 7. 17.
프론트엔드 설계 고민 -5- 큰틀은 대략적으로 잡았으니 조금 더 작은 부분들을 고민해보자. SPA 개발 즉, 모던 웹개발로 들어오면서부터 웹프론트의 UI의 경우 기본적으로 기존의 페이지 단위나 템플릿 단위의 개발에서 컴포넌트 단위의 개발로 개념이 조금 변경 되었다. 기존에는 마크업이나 스타일링을 HTML과 CSS로 그리고 JS로 필요한 동적인 조작을 하는 정도 였다면 모던 웹개발에서는 JS를 기반으로 HTML(마크업)과 CSS(스타일링)등을 모두 관리한다. (예: JSX) 그러다보니 기존 HTML, CSS와 많은 부분 같으면서도 다른 특징을 가지는데 HTML,CSS와 JS로 된 DOM, CSSOM의 차이점에서 오는 부분이라고 볼 수 있다. HTML과 CSS, JS로 개발을 진행할때는 각 영역이 독립적이고 서로 침범하지 않는게 미덕이.. 2022. 7. 10.