이번에 가운데에 선을 긋는 작업을 하던 중, CSS를 사용해 `position: absolute`와 `left: 50%`를 주어 가운데에 선을 그으려고 했다. 3개의 DIV 내부에 선을 긋기 위해 아래와 같이 작업을 했다. 결과는 처참했다. 부모 div의 가운데가 아니라 전체 화면의 가운데에 같은 줄이 3개가 겹쳐서 그려졌다. 각 div의 가운데에 그리려고 검색을 하던 중 absolute와 부모와의 관계에 대한 글을 보게 되었다. absolute의 위치 기준은 position이 relative, fixed, absolute인 가장 가까운 부모이다. 즉 위의 코드에서는 부모 div가 기준이 아니라, body가 기준이 된 것이다. 나는 아래와 같이 부모 div 태그에 position을 relative로 주고..
전체 글
25장 코드 튜닝 전략 목차 25.1 성능이랑? 25.2 코드 튜닝 소개 25.3 느리고 비대한 부분 25.4 측정 25.5 반복 25.6 코드 튜닝 단계 요약 코드 튜닝은 좋은 코드와는 거리가 멀 수도 있다. 하지만 성능을 개선하기 위해서 할 수 있는 여러 선택지 중 하나다. 25.1 성능이란? 좋은 코드와 사용자의 만족도는 상관 관계가 거의 없다. 사용자는 이 제품이 얼마나 좋은 코드 및 모듈화로 작성되었는지 궁금하지 않고, 원하는 동작이 깔끔하고 빠르게 작동하는지에 관심을 둔다. 사용자가 느끼는 성능은 개발자가 생각하는 품질과는 다른 경우가 많다. 25.2 코드 튜닝 소개 코드 튜닝은 성능을 향상시키는 가장 효과적인 방법이 아니다. 프로그램 아키텍처, 클래스 설계, 알고리즘 선택이 일반적으로 더 극..
24장 리팩터링 목차 24.1 소프트웨어 진화의 종류 24.2 리팩터링 소개 24.3 구체적인 리팩터링 24.4 안전한 리팩터링 24.5 리팩터링 전략 이번 장은 프로그래밍의 꽃(?)이라 할 수 있는 리팩터링에 대해 다룬다. 그동안 나는 기존 코드를 변경하고, 이를 리팩터링 했다고 생각해왔는데 해킹을 해왔었다는 것을 오늘 알았다... 24.1 소프트웨어 진화의 종류 코드 변경을 통해 소프트웨어는 진화할 수도 있고, 퇴보할 수도 있다. 어떻게 코드를 변경하는지가 소프트웨어의 품질을 크게 좌우한다. 코드를 작성할 때, 이후에 이를 쉽게 변경할 수 있도록 작성해야 한다. 일단 지금 동작하는 코드를 작성한 것이 아닌지 의심을 하는 습관을 갖고, 추후에 이 기능을 수정해야 할 때 이 부분만 수정하면 되는지에 대해..
body의 스크롤을 막을 방법 넷퍼넬3의 '보고서 > 넷퍼넬 ' 페이지에서 상단 오버뷰 클릭했을 때 해당 차트로 이동하는 기능을 구현하던 중 외부 페이지가 아래로 스크롤되는 문제가 발생했다. 보고서 내부가 스크롤 되기 전 외부 먼저 스크롤되어 발생하는 문제로 파악하고, 외부 스크롤을 막아 페이지가 변하는 것을 막아야 한다. body의 height, overflow 설정하기 첫 번째 방법은 아래와 같이 css에서 body의 height를 100%, overflow를 hidden으로 설정하는 방법이다. body { height: 100%; overflow: hidden; } 설정하려고 봤더니 이미 이렇게 되어 있었다. overflow를 scroll로 해두고 보았더니, 하단에 scroll 될 공간이 조금 남아..
Momentum을 만들던 도중 input 태그의 onChange 이벤트 핸들러에서 아래와 같은 에러 메시지를 출력했다. 문제가 컴포넌트의 코드는 아래와 같다. class SearchBar extends React.Component { constructor(props) { super(props); this.state = { inputValue: this.props.inputValue }; console.log(this.state.inputValue); this.handleSubmit = this.handleSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } handleSubmit(event) { event.preventDefault..
23장 디버깅 목차 23.1 디버깅 이슈 소개 23.2 결함 발견 23.3 결함 수정 23.4 디버깅에서 심리학적으로 고려해야 할 사항 23.5 디버깅 도구 - 분명한 도구와 그렇지 않은 도구 디버깅은 프로그램에서 발견한 오류의 근본적인 원인을 수정하는 과정이다. 대부분의 프로젝트에서 디버깅이 전체 개발 시간의 50%를 차지한다. 23.1 디버깅 이슈 소개 디버깅을 통해 배울 수 있는 점 개발 중인 프로그램에 관해 배울 수 있다. 자신이 저지른 실수에 관해 배울 수 있다. 자신의 코드를 읽어야 하는 사람의 관점으로부터 코드의 품질에 관해 배울 수 있다. 문제를 해결하는 방법을 배울 수 있다. 결함을 수정하는 방법을 배울 수 있다. 이 책에서는 비효과적인 디버깅 접근 방법에 대해서도 설명하는데 내 이야기를..
22장 개발자 테스트 목차 22.1 소프트웨어 품질에서 개발자 테스트의 역할 22.2 개발자 테스트에 대한 바람직한 접근 방법 22.3 여러 가지 교모한 테스트 방법 22.4 전형적인 오류 22.5 테스트 지원 도구 22.6 테스트를 향상시키는 방법 22.7 테스트 기록을 보존하는 방법 몇 가지 테스트의 종류에 대해 알아보고 이번 장을 시작하자. 단위 테스트: 한 명의 개발자나 팀이 작성한 루틴 또는 클래스를 실행하는 테스트 컴포넌트 테스트: 여러 명의 개발자나 팀이 만든 클래스, 피키지, 컴포넌트 등을 실행하는 테스트 통합 테스트: 두 개 이상의 루틴 또는 클래스, 패키지, 컴포넌트 등이 만들어졌을 때, 이를 결합해서 실행하는 테스트 회귀 테스트: 이전에 실행했던 테스트를 다시 실행하는 것(현재 프로그..
21장 협력 구현 목차 21.1 협력 개발 방법 개요 21.2 짝 프로그래밍 21.3 공식적인 정밀 검토 21.4 여러 가지 협력 개발 방법 소프트웨어의 크기가 커지면서 협력 및 커뮤니케이션의 중요성이 점점 커지고 있다. 소프트웨어의 품질을 향상시키기 위한 협력 프로세스는 어떤 것이 있는지 살펴보도록 하자. 21.1 협력 개발 방법 개요 "협력 구현"은 짝 프로그래밍, 형식적인 정밀 검토, 비형식적인 기술 검토, 문서 읽기와 더불어 개발자들이 코드 작성과 제품 개발에 관련된 다른 작업에 대한 책임을 공유하는 데 사용하는 기법을 가리킨다. 개발자가 자신의 코드의 문제점을 발견하지 못한 것을 다른 사람은 볼 수 있다는 점에서 협력 구현 기법이 생기게 되었다. 대표적인 협력 구현 기법에는 짝 프로그래밍, 정밀..
20장 소프트웨어 품질 목차 20.1 소프트웨어 품질의 특성 20.2 소프트웨어 품질을 향상시키기 위한 기법들 20.3 품질 향상 기법의 상대적 효과성 20.4 품질 보증 활동 시기 20.5 소프트웨어 품질의 일반적인 원칙 20.1 소프트웨어 품질의 특성 이 장을 읽으면서 내가 생각한 저자가 말하고자하는 바는 소프트웨어 품질의 모든 특성을 만족시킬 수는 없지만 품질을 높이는 것이 비용과 시간을 절약할 수 있는 방법은 확실하다는 것이다. 서로 상충하는 특성(대표적으로 정확성과 효율성)들이 존재하기 때문에 완벽한 소프트웨어를 만들 수는 없지만, 모든 품질을 고려해 코드를 구현하는 것이 나에게 훨씬 이득이 될 것이다. 20.2 소프트웨어 품질을 향상시키기 위한 기법들 소프트웨어 품질 향상 프로그램의 몇가지 요..
이번에는 리액트 공식 사이트의 튜토리얼의 추가 미션 진행해보도록 하자. 추가 미션의 목록은 아래와 같다. 이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시. 이동 목록에서 현재 선택된 아이템을 굵게 표시. 사각형을 만들 때 하드코딩 대신에 두 개의 반복문을 사용하도록 Board를 다시 작성. 오름차순이나 내림차순으로 이동을 정렬하도록 토글 버튼 추가. 승자가 정해지면 승부의 원인이 된 세 개의 사각형 강조. 승자가 없는 경우 무승부 메시지 표시. 이 미션을 모두 달성한 화면은 아래 사진과 같을 것이다. 빨간 상자는 1번, 주황색은 2번, 노란색은 4번, 초록색은 5번이다. 이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시 이동 기록 목록을 (행, 열) 형식으로 표현해보..