2023-06-13 퇴근 후 독서

OikimiO commented 1 year ago

독서 내용 간략 정리

OikimiO commented 1 year ago

주석

나쁜 주석

함수나 변수로 표현할 수 있는데도 불구하고 주석을 적은 것


// 전역 목록 <smodule>에 속하는 모듈이 우리가 속한 하위 시스템에 의존하는가?
if(smodule.getDependSubsystems().contains(subSysMod.getSubSystem()))

ArrayList moduleDependees = smodule.getDependSubsystems(); String ourSubSystem = subSysMod.getSubSystem(); if(moduleDependees.contains(ourSubSystem))

- 아래의 코드는 위의 주석 + 코드를 변수형태로 풀어 설명한 것입니다. 
- 변수 명과 함수를 읽더라도 "**모듈이 우리의 하위 시스템에 포함되는가?**"로 해석될 수 있습니다.

<br />

- 주석으로 처리한 코드 
```java
int number1 = 1;
int number2 = 2;
// int number2 = 3;
...

위의 코드는 짧은 코드이긴 하지만 저를 포함한 대부분의 프로그래머들이 실수하는 부분인 것 같습니다.
이제부턴 위와 같은 주석을 과감히 삭제하고 혹여나 헷갈리는 부분은 형상 관리 시스템을 통해 확인하면 좋을 것 같습니다.

형식 맞추기
- 독자들이 봤을 때 깔끔한 코드는 형식에 맞춰 코드를 만들었을 때 입니다.
- 코드 형식을 맞추는 목적은 미래의 저자와 독자간의 의사소통을 위해서이며, 이를 통해 좋고 확장성 있는 프로그램을 만들 수 있게 됩니다.

형식을 맞추는 법은 아래와 같은 방법이 있습니다.
신문 기사처럼 작성하기
우리는 신문을 읽을 때 기사의 요약본을 읽고 기사를 읽을지 말지 결정하게 됩니다.
그리곤 흥미로운 내용이 있다면 그 세부적인 내용을 읽게 됩니다.
코드도 마찬가지로 이름(메서드, 변수 등)은 간단하게 지어두고 점차 자세히 설명을 이어나간다면 좋은 형식을 갖출 수 있게 됩니다.

개념은 빈행으로 분리하고, 연관성이 있는 개념은 세로로 정리합니다.
말그대로 입니다. 각 의미 있는 메서드들의 이름을 빈행을 두지 않고 적어 둔다면 그 내용을 제대로 이해할 수 없게 될 것입니다.
또한 비슷한 개념인 메서드 등은 중구난방으로 선언하지 않고 그룹을 지어 연속적으로 표현하는 것이 좋습니다.
```
public class Test{
private int prime;
private int number;

public isPrime(int currentNumber){
... 
}

public printPirme(){
...
}
}
```
위의 코드를 보시면 변수와 메서드의 구분이 세로에서 연관성을 가집니다.
또한 각 개념(메서드)들을 개행으로 구분하여 가독성을 높여줍니다.

codeblue25 commented 1 year ago

[DOM을 깨우치다]

브라우저가 HTML 문서를 해석할 때 HTML 파일 내용을 기반으로 해서 노드와 트리를 구성하게 된다. 브라우저는 HTML 문서를 초기 로딩할 때 노드 생성을 처리한다. JavaScript를 사용해서 직접 노드를 생성하는 것도 가능하다.

JavaScript 메서드를 사용해서 Element노드, Text노드 생성하기
- createElement()
- createTextNode()
```
<script>
```
var elementNode = document.createElement('div') // 실행결과:
var textNode = document.createTextNode('Hi') // 실행결과: "Hi"


2. JavaScript 속성을 사용해서 DOM에 Element노드, Text노드 생성 및 추가하기
  * innerHTML()
  * textContext()
  * innerText()
```javascript
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

<script>

document.getElementById('a').innerHTML = '<p>Hi</p>'. // 실행결과: <div id="a"><p>Hi</p></div>
document.getElementById('b').textContent = 'Hello'.   // 실행결과: <div id="b">Hello</div>
document.getElementById('c').innerText = 'Hiroo'.     // 실행결과: Hiroo

</script>

innerHTML 속성은 요소내에 포함 된 HTML 또는 XML 마크업을 가져온다(text/html으로 파싱) textContent 속성은 와

techbook-study / reading-after-work

2023-06-13 퇴근 후 독서 #7