분류 전체보기53 css의 position 이번 글에서는 CSS의 position 속성에 대해서 알아보겠습니다. position position 속성은 HTML에서 요소가 배치되는 방식을 결정합니다. 모든 경우는 아니지만, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 많이 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. static은 요소들이 HTML에 작성된 순서대로 브라우저 화면에 표시가 됩니다. top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. position: relative relative는 요소를 원래 위치를 기준으로 상대적(rel.. 2022. 4. 22. [React] 렌더링 성능 개선하기 먼저, 컴포넌트가 리렌더링되는 경우는 다음과 같습니다. 컴포넌트의 state가 변경되었을 때 부모 컴포넌트에서 받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 위와 같은 특성은 필요없는 렌더링을 일으키기도 합니다. 부모 컴포넌트의 state가 바뀌면 props를 받은 자식 컴포넌트와 변경된 state를 받지 않은 자식 컴포넌트 모두 렌더링 됩니다. 이러한 불필요한 렌더링을 줄이고 성능을 높이는 방법을 설명하겠습니다. useMemo useMemo는 React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용됩니다. useMemo를 사용하면 복잡한 계산식의 계산한 값을 재사용할 수 있습니다. 만약, 컴포넌트의 어떤 함수가 값을 리턴하는데 하나의 변화에도 많은 시간을 소요한다면, 리렌더링될 때마.. 2022. 4. 19. async/await은 왜 쓰는가? 이번 글에서는 Promise와 async/await의 차이에 대해서 공부해보겠습니다! 동기 / 비동기 특징 동기의 (대략적인) 특징 동시에 여러 작업을 수행할 수 없다. 흐름을 예측하기 쉽다. 먼저 수행되고 나중에 수행되는 것들이 명확하다. 비동기의 (대략적인) 특징 동시에 여러 작업을 수행할 수 있다. 흐름을 예측하기 어렵다. (무엇이 먼저 완료될 지 보장할 수 없다.) Promise Promise는 자바스크립트에서 비동기 처리에 사용되는 객체입니다. 코드는 실행 되었지만 결과를 아직 반환하지 않은 객체라고 설명할 수 있습니다. Promise는 3가지 상태가 있습니다. Pending(대기) Fulfilled(이행) Rejected(실패) 비동기 처리를 아직 수행하는 단계인 Pending, 비동기 처리가.. 2022. 4. 18. [Back&Stock] 피드백 반영하기 이 글은 항해99 마지막 실전 프로젝트를 끝내면서 정리하는 글입니다. 이번에는 실제 서비스를 하면서 설문조사 피드백을 받고 반영했던 경험에 대해서 작성하려고 한다. 긍정적 피드백 먼저, 설문에서 프로젝트에 대해 긍정적인 부분이라고 답해주셨던 부분은 UI 였다. 무엇보다 깔끔한 UI가 보기 편하고 필요한 요소들만 있는 것 같다는 피드백이 있었다. 긍정적 피드백은 짧게 정리하고 부족했던 부분과 어떻게 해결했는지 써보려고한다. 처음 접하는 사람에게 설명하기 설문 피드백을 보았을 때, 위의 긍정적 피드백과 상반되게 첫 접속에는 어떤 것을 해야 실험을 할 수 있는지 잘모른다고 답변이 왔다. 프로젝트의 주제가 주식의 백테스팅인 만큼 주식을 해보지 않았던 사람들, 백테스팅이 무엇인지 모르는 사람들에게 이 사이트를 사.. 2022. 4. 10. 이전 1 2 3 4 5 ··· 14 다음
