[TIL] 내일배움캠프 React 과정 2022.11.13

Today I Learned

• 알고리즘 강의 3주차 수강
• 웹 퍼블리싱 강의 1주차 수강

 

알고리즘 강의 3주차 내용(정렬)

*python에서 두 변수의 값 바꾸기 (swap)

a = 3
b = 4
a, b = b, a
print(a)
>>>4
print(b)
>>>3

 

*정렬이란? 데이터를 순서대로 나열하는 방법

 

*정렬의 유형

  :버블 정렬, 선택 정렬, 삽입 정렬, 병합 정렬

 

 

웹 퍼블리싱 1주차 강의 내용

*퍼블리싱: Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것.

• 마크업 : HTML을 통해 기본 뼈대를 만듭니다.
• 스타일링 : CSS로 마크업에 색상 등의 속성을 입혀 스타일을 지정합니다.
• 부가 기능 : Javascript로 특정 요소에 기능을 만들어 부여합니다.

 

 

해결하는 경험

버블 정렬과 선택 정렬

좌-버블정렬 / 우-선택정렬

버블 정렬은 for j in range(n - i - 1):

선택 정렬은 for j in range(n - i): 로 range 안에 담기는 값이 어떻게 달라지는 건지 잘 이해가 되지 않았다.

 

결과적으로 버블 정렬에서는 j값을 구해서 뒤에서부터 인덱스 값이 줄어드는 결과를 출력한 것이었고, 선택 정렬에서는 i+j 값을 구해서 앞에서부터 인덱스 값을 줄여가는 결과를 출력한 것이었다.

 

 

분할 정복(Divide and Conque)과 재귀 함수

def merge_sort(array):
    if len(array) <= 1:
        return array
    mid = (0 + len(array)) // 2
    left_array = merge_sort(array[:mid])   # 왼쪽 부분을 정렬하고
    right_array = merge_sort(array[mid:])  # 오른쪽 부분을 정렬한 다음에
    merge(left_array, right_array)         # 합치면서 정렬하면 된다.

위 함수가 재귀 함수의 형태를 띠고 있다는 것이 처음에는 이해가 안 갔었는데 강의를 듣다 보니 이해가 되었다. merge_sort 함수 안에서 정렬을 반으로 쪼개고, 그 반으로 쪼갠 것을 또 반으로 쪼개는 과정이 반복된다는 뜻으로 이해했다. 예를 들면 길이가 4인 정렬을 2,2로 쪼개고 그다음에는 1,1,1,1로 쪼개는 것이다.

 

 

CSS Flex 공부하기

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

웹개발 기초 강의를 들을 때 이 네 줄의 css 코드를 처음 만났다. 그때 강사님이 이 코드는 계속 복붙 해서 쓰면 된다고 하셨다. 그래서 나도 무슨 기능이 있는지 잘 모르면서 정렬 기능이 필요할 때마다 복붙 해서 쓰고 있었는데  오늘 웹퍼블리싱 강의를 들으면서 이 네 줄의 코드가 또다시 만나니 이번에는 이 코드 한 줄 한 줄이 어떤 의미인지가 궁금해졌다. 특히 align-items와 justify-content에 대해서!

 

기초 개념만 설명하자면 다음과 같다.

justify-content: 가로 축을 기준으로 좌우 정렬을 설정

align-items: 세로 축을 기준으로 상하 정렬을 설정

 

더욱 자세한 내용은 아래 링크의 블로그가 도움이 되었다.

https://babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-Flexbox-justify-content-align-items

https://studiomeal.com/archives/197

 

 

 

느낀 점

며칠 동안 알고리즘 강의만 듣다가 주말에  웹 퍼블리싱이랑 git 강의가 새로 생겨서 오늘은 알고리즘 3주차 정렬 부분만 듣고 나머지는 웹 퍼블리싱 강의를 들었다. 너무 머리 아팠던 알고리즘을 듣고 나서 웹 퍼블리싱 강의를 들으려니 갑자기 너무 재밌게 느껴진다ㅋㅋ

 

웹 퍼블리싱 강의의 최종 목표가 네이버를 클론 코딩하는 것인데 문득 첫 프로젝트 끝나고 의욕이 넘치는데 할 건 없어서 클론 코딩해볼까 생각했던 내가 떠오른다..(실제로 html 파일 만들고 코드 몇 줄 쓰다가 포기함ㅎㅎ) 근데 지금은 강의 듣기만 해도 시간이 부족해서 다른 걸 시도해 볼 시간이 없다ㅠㅠ

 

그리고 웹 퍼블리싱 강의 들으면서 Figma에 처음 가입해서 이용해 봤는데 피그마에서 디자인한 버튼 css 코드 복사해서 바로 사용할 수 있다니 이런 신세계가..!

 

+)

버블 정렬 문제 풀면서 나름 코드 적어 봤는데 array에 인덱스 설정을 안 해줘서  '명령문이 아무 영향을 미치지 않는 것으로 보입니다' 라는... 지나치게 단호한 주의 문구가 떴다.... 공부 더 열심히 해야겠다😂