19장 제어와 관련된 일반적인 이슈 목차 19.1 불린 표현식 19.2 복합문(블록) 19.3 널(Null) 명령문 19.4 지나치게 깊은 중첩 구조 처리 19.5 프로그래밍의 기초: 구조적 프로그래밍 19.6 제어 구조와 복잡성 19.1 불린 표현식 복잡한 표현식을 단순하게 만들기 복잡한 테스트를 새로운 불린 변수를 사용해 부분적인 테스트로 나눠라. 복잡한 표현식을 불린 함수로 옮겨라. 의사결정 테이블을 사용해 복잡한 조건을 대체하라. 불린 표현식을 사용할 때는 최대한 긍정문을 사용하는 것이 이해하기 쉽고, 또한 드모르간의 법칙을 적용해 부정 불린 테스트를 단순화하는 것이 좋다. if (!displayOK || !printerOK) ... 위의 예제를 드모르간의 법칙을 적용하면 아래 코드처럼 바꿀 수 ..
분류 전체보기
18장 테이블 활용 기법 목차 18.1 테이블 활용 기법에서 일반적으로 고려해야 할 사항 18.2 직접 접근 방식 18.3 인덱스 접근 방식 18.4 단계적 접근 방식 테이블 활용 기법은 어떠한 정보를 이해하기 위해서 논리적인 명령문을 사용하지 않고 테이블에 있는 정보를 검색하는 방식이다. 조건이 간단할 때는 논리적인 명령문이 더 쉽고 직접적이다. 조건문이 복잡해질수록 점점 더 테이블 방식에 끌리게 될 것이다. 18.1 테이블 활용 기법에서 일반적으로 고려해야 할 사항 테이블 기법의 문제점 테이블에 있는 엔트리를 어떻게 참조할 것인가에 대한 질문에 대답할 수 있어야 한다. 직접 접근 인덱스 접근 단계적 접근 테이블에 무엇을 저장할지 설명해야 한다. 18.2 직접 접근 방식 직접 접근 방식은 값들을 배열이..
17장 특이한 제어 구조 목차 17.1 여러 곳에서 반환하는 루틴 17.2 재귀문 17.3 goto 문 17.4 특이한 제어 구조에 대한 관점 17.1 여러 곳에서 반환하는 루틴 return 문 사용 시 참고할 가이드 더 읽기 쉬운 코드를 만들기 위해서 return을 사용하라. 복잡한 오류 처리를 단순화하기 위해서 보호절(루틴 중간에 사용되는 return 이나 exit)을 사용하라. 한 루틴에 있는 리턴의 수를 최소화하라. 17.2 재귀문 재귀 호출 사용 팁 재귀 호출이 중단되는지 확인하라. 무한 재귀 호출을 막기 위해서 안전 카운터를 사용하라. 한 루틴으로 재귀 호출을 제한하라. 스택을 감시하라. 팩토리얼이나 피보나치 수열을 계산하기 위해서 재귀문을 사용하지 말라. 17.3 goto 문 goto 문 사..
Reat로 사고하기 React는 JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. React는 Facebook과 Instagram을 통해 확장성을 입증했습니다. React의 가장 쿨한 점은 앱을 설계하는 방식이다. 이번 섹션을 통해 React로 상품들을 검색할 수 있는 데이터 테이블을 만드는 과정을 진행해보자. 목업으로 시작하기 이 장에서 목업이라고 말하는 것은 나는 학부 과정 중 테스팅 과목을 들으면서 얼핏 배운적이 있다. mock 객체라고 해서 아직 완료하지 못한 경우 이를 테스트하기 위해 mock 객체를 붙여 테스트 한다고 알고 있는데 확실하진 않으니 따로 찾아보고 다시 글을 수정하도록 하겠다. 일단 JSON API와 목업을 디자이너로부터 받았다고 가정해보자. ..
합성 (Composition) vs 상속 (Inheritance) React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용해 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 이번 섹션에서 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제점과 합성을 사용해 이를 해결하는 방법을 살펴볼 것이다. 컴포넌트에서 다른 컴포넌트를 담기 Sidebar나 Dialog를 생각해보자. 우리는 이 안에 어떤 자식 엘리먼트가 들어와야할지 모든 것을 예상할 수 없다. 이러한 컴포넌트에는 children prop을 사용해 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다. 화면에 출력할 내용을 prop으로 받는 것이다. 아래 코드를 보자. function FancyBorder(props)..
State 끌어올리기 종종 동일한 데이터에 대한 변경 사항을 여러 컴포넌트에 반영해야 할 필요가 있습니다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 이런 일을 어떻게 할 수 있을지 지금부터 살펴봅시다. 이번 섹션에서는 주어진 온도에서 물의 끓는 여부를 판단하는 온도 계산기를 만들 것이다. 먼저 BoilingVerdict라는 이름의 컴포넌트부터 만들어보자. 이 컴포넌트는 섭씨 온도를 의미하는 celsius prop을 받아서 이 온도가 물이 끓는지 아닌지를 출력한다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would ..
폼 제어 컴포넌트 (Controlled Componenet) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 여기서 눈치챈 사람들도 많을 것이다. 자신의 state를 관리하면 되므로 클래스형 컴포넌트를 사용해 setState()로 상태를 업데이트 하면 된다. "제어 컴포넌트 (controlled component)"는 React에 의해 값이 제어되는 입력 폼 엘리먼트를 말한다. 아래 코드를 보며 제어 컴포넌트를 알아보자. class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange..
리스트와 Key 아래 코드는 JS에서 map() 함수를 사용해 numbers 배열의 값을 두배로 만들어 doubled 변수에 할당하는 코드이다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number * 2); React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일하다. 여러개의 컴포넌트 렌더링 하기 이전에 사용한 numbers 배열을 사용해 모든 값은 2배로 변환하여 리스트를 만들어보자. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map(number => { return ( {number * 2} ); }); ReactDOM.render({li..
조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있습니다. React에서 조건부 렌더링은 JS에서의 조건 처리와 같다. if나 switch 같은 조건 연산자를 사용해 조건에 맞는 컴포넌트를 렌더링 하면 된다. 아래 두 컴포넌트가 있다고 가정해보자. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up. } 이제 사용자의 로그인 상태에 맞게 위의 두 컴포넌트 중 하나를 보여주는 Greeting 컴포넌트를 만들자. function Greeting(prop..
16장 반복문 제어 목차 16.1 반복문 종류 선택 16.2 반복문 제어 16.3 반복문을 쉽게 작성하는 법 - 안에서부터 밖으로 16.4 반복문과 배열의 연관성 16.1 반복문의 종류 선택 while 반복문을 사용하는 시기 시작 부분에서 반복의 여부를 판단하는 경우는 우리가 알고 있는 while 반복문을 사용하면 된다. 끝 부분에서 반복의 여부를 판단하는 경우는 do-while 반복문을 사용하면 된다. for 반복문을 사용하는 시기 for 반복문은 비교적 간단한 반복문이 필요할 때 사용한다. for 반복문의 핵심은 반복문의 맨위에서 설정하고 잊어버리면 된다는 점이다. 반복문을 제어하는 부분을 반복문 내부에서 작성할 필요가 없기 때문에 쉽게 사용할 수 있지만 작업 실행 중 반복문을빠져나가야 하는 상황이 ..
