LIKELION🦁 TIL(2022-06-22)

C언어

발전

💡 1세대 : 하드코딩 → 2세대 : while 문 → 2.5세대 : for 문 → `3세대 : 함수` → 3.2세대 : 함수 유연화(매개변수)

함수

• main() 함수 위에 만들기.
  함수 실행 시 → 위쪽으로 이동해 함수 실행하고, 다시 원래 코드로 이동한다.
• 자주 쓰이는 pattern 을 별도의 블록에 넣어놓고, 이름을 붙이는 것.
• 함수 이름만 보았을 때, 무슨 기능을 하는 것인지 직관적으로 이해할 수 있어야 함. (매우 중요)
• 자바 : testPrint(); Camel Case
  C언어 : test_print(); Snake

지역변수

• 해당 지역에서만 사용이 가능한 변수.
• 일반 지역변수 (함수 내에서 사용한 변수)
• 매개변수 void hello(int limit) { }

증감연산자

int main() {
	int b = 10;
	int a = 10 + (b++);  // a = 20;
  printf("%d", b);   // b = 11;
  return 0;

return

• return 의 의미는 변신이라고 생각하면 쉽다.
  즉, 함수에서 값을 return 하면서 그 값으로 변신하는 것.
• return 만나면 무조건 함수 종료.
• void functionName() { } → return 사용해도 됨.
  → return 10; 과 같이 값 return 이 안되는 것.
  → void 에서 return 은 함수 종료를 의미한다.
• 함수에 int, char 과 같이 데이터 타입을 써야 한다.

🐤 return 의 종류

1. return 0; // 0 이라는 인자 return. 문제가 없었다.
2. return 1; // 1 이라는 인자 return. 문제가 있었다.
3. return; // 그냥 함수 종료를 의미한다.

문제풀이

소수 체크 문제.

// 문제 : 소수인지 아닌지 체크하는 함수 구현

#include <stdio.h>

#pragma warning (disable: 4996)

int isPrime(int number) {
  if (number <= 1) {
    return 0;  // 소수가 아니다! 
  }
  for(int i=2; i*i<=number; i++){
    if(number % i == 0) {
      return 0;
    }
  }  
  return 1;   // 소수임!
}

int main(void) {
  printf("%d\n", isPrime(7));
  return 0;
}

아스키 코드

char a; // 1byte. 문자가 아니라 사실상 ‘정수’가 저장되는 것.
char c = ‘a’; → a는 아스키 코드표 상 정수 97이다.
char c = 97; → 차이가 전혀 없다. 아스키 코드 상 ‘a’ == 97 은 true다.

printf(”%c”, 97); → a가 출력.

---

HTML, CSS

이번에도, 메뉴 아이템 시간 재보기.

• 3차 메뉴까지 구현할 수 있어야 함

Flex

→ 참고 링크 여기

flex-container

• flex-direction (default 는 row)
• flex-wrap
  • nowrap : 줄바꿈 허용 절대 안함.
  • wrap : 줄바꿈 허용함
• align-items (column 설정 없으면, 수직 정렬)
• align-content → 두 줄부터 사용하는데 의미가 있다.
  • 즉, flex-wrap : wrap; 인 상태에서 사용.
    nowrap 이면 한 줄이기 때문에 적용 안됨.
• align-self → 개별 정렬.
• justify-content (column 설정 없으면, 수평 정렬)
• order → 순서 값을 줘서, 높으면 맨 뒤로 배치.
  (처음에는 0 이 default 값이다.)

space-between, space-around 의 차이점.

• space-between
  → 오직 사이에만 생김.
• space-around
  → 양 옆 주변에 다 생김.

inline vs css

• 무조건 inline 속성이 이긴다(우선한다).
• 그러나 예외적으로 !important 가 붙으면 css 가 우선한다.
  → inline에도 !important 가 붙는다면 역시나 무조건 inline 속성이 우선한다.

Javascript

DOM 으로 event 추가하기

console.clear();
const button = document.querySelector("button:nth-child(2)");

button.addEventListener("click", function() {
  conosole.log("Hello World");
});

BOM : Browser Object Model

• alert('hi');
• window.close(); 와 window.open('');
  DOM : Document Object Model
• querySelector();

JQeury

❓ 제이쿼리가 구식이고 왠만하면 쓰지 말아야 한다 ? 💡 결론 : 제이쿼리는 `SPA에서만 나쁜 선택`이다. 즉, 제이쿼리는 사용해야 한다.

🐤 왜 SPA 를 쓰지 않을까 ?

1. 개발속도가 느림.
2. 난이도 상.
3. 과한 고퀄리티 제공. 단순한 정보, 회사 소개는 굳이 그렇게 할 필요 없다.

예전 방식과 JQuery 비교

// 예전 방식
var div = document.getElementsByTagName('div');
for(var i = 0; i < div.length; i++) {
	div[i].style.backgroundColor = 'beige';
}
// JQuery
$('div').css('background-color', 'beige');
// 기타 (JQuery 쓰지 않을 때)
document.querySelectorAll('div').forEach(e => e.style.backgroundColor = 'red'); 

jquery 사용하기.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

함수의 형태

// 모두 다 함수!!
function plus(a,b) { return a + b; }
const plus = function(a, b) { return a + b; }
const plus = (a, b) => {return a + b; }
const plus = (a, b) => a + b;

Javascript 로는 CSS를 수정하지 말자.

→ .css 사용 지양. (반드시 각 기능에 충실해야 함)

// 잘못된 사용.
console.clear();

$("button").click(function () {
  console.log($("body").css("background-color"));

  if ($("body").css("background-color") == "") {
    $("body").css("background-color", "#afafaf");
  } else {
    $("body").css("background-color", "");
  }
});

즉, 다음과 같이 사용해야 한다.

// 올바른 사용.
console.clear();

$("button").click(function () {
  if ($("body").hasClass("bg-afafaf")) {
    // 가지고 있다면
    $("body").removeClass("bg-afafaf");
  } else {
    $("body").addClass("bg-afafaf");
  }
});
		

// 함수를 따로 빼서 작성해도 된다.
console.clear();

const a = function(){
  if($('body').hasClass('bg-afafaf')){
    $('body').removeClass('bg-afafaf');
  }
  else {
    $('body').addClass('bg-afafaf');
  }
}
$('button').click(a);

💡 hasClass(), removeClass(), addClass() 는 **.bg-afafaf 라고 쓰지 않는다**. 그냥 bg-afafaf .

• $(’body’).addClass(”a b c”); → 한 번에 3개 class 넣어줄 수 있음.

.popup.active

• .popup.active 의 의미는 ?

  • 2개의 class 를 동시게 갖고 있는 요소.
  • 팝업창에서는 .active를 넣고 빼고 하는 것으로 팝업창 on/off .
  • .popup .active → .popup 안에 있는 .active 임.

• z-index : 1000; → 유령 간 경쟁에서 이김. 우선순위를 줘서 맨 앞으로.
  즉, absolute; 속성끼리 경쟁할 때 주로 사용한다.

• BEM : 표준 CSS 명명법, 마크업 방법
  header__box

preventDefault (BOM)

💡 default event 를 막아준다. `return false;` 라고 해도 똑같다. `event.preventDefault();` → a 태그 링크 이동 막아줌, 폼에서 submit 버튼 제출 막아줌… 등

alert 와 confirm (BOM)

• window.alert(’hi’); 의 줄임 표현. alert(’hi’);
• confirm(’정말 삭제하시겠습니까?’); → true or false 를 return.

이벤트 전파

span → nav 한테 보고 → article 한테 보고 → …

e.stopPropagation(); → 전파를 멈춘다!

return false; → e.preventDefault(); 와 e.stopPropagation(); 을 합쳐놓음.