리액트 혼란중... 알고리즘 공부 첫걸음, 꿈노트 작성 시작

감사

8월 말에 도움을 받은 사람이 많다.
이력서를 피드백 해주시고 좋은 기업을 함께 찾아주셨던 취업지원제도 상담사님,
공부 해야하는 분량이 많아져서 혼란스러울때 깔끔하게 계획 가이드를 잡아준 친구,
개발 시장과 취업 시장 그리고 경험을 토대로 신입을 시작할 때 많은 조언을 해주신 친구 지인 카카오 개발자님,
리액트를 공부하며 전체적인 흐름과 느낌을 알 수 있도록 도와주신 당근마켓 재능교환으로 만난 개발자님,
더 큰 도전을 할 수 있도록 용기가 되어주는 캘리최 회장님과 북콘서트 그리고 꿈노트,
실제로 비슷한 환경에서 무던한 노력으로 좋은 결과를 내 닮고 싶은 개발 유튜버 님들이나 멘토와 같던 인터뷰들,
내가 어려워서 허덕이고 힘들어 할 때 마다 의지를 다질 수 있게 해주는 것 같다.

 

 

---

리액트 공부

수업명 : 드림코딩 리액트
진도율 : 28%
진도 : 4-6 ~ 4-9 (6개)

Habit Tracker라는 프로젝트를 하며 리액트의 작동방식에 대해 배우고 있다.
컴포넌트 하나로 map 함수를 이용하여 List를 만든게 신기하고 재밌었던 것 같다.
컴포넌트의 재사용을 높이기 위해서 state에 필요한 데이터를 모두 정의한 후, map으로 List를 만들고
컴포넌트 안에서 버튼마다 onClick 으로 콜백함수 참조값을 정의했다.
컴포넌트 안에서도 props를 이용해 속성값을 전달 받아 onClick과 연결하고
List에서도 컴포넌트를 재사용할때 state로 인자를 전달 받아서 한 번 더 콜백함수와 연결한게
많이 혼란스러웠고 어려웠지만 굉장히 흥미로웠던 거 같다.

---

오늘 배웠던 점에서 중요하거나 새로 배운점

✨리액트는 state를 직접 조정하면 안된다!✨
강사님 말로는 state를 직접 조정할 경우 나중에 버그가 생기면서 수정할때 🐶고생을 할 수도 있다고한다.
명심해둬야지.. 👀

✨배열의 index는 key로 사용하면 안되고 key는 고유한 번호로 정의한다.(id)✨
console에서 계속 key를 정의하라는 오류가 있었는데 state에서 각각 id로 정의하였다.
배열에서 index로 정의할 경우 데이터가 수정되어 배열이 바뀌었을때 고유의 값이 달라지기 때문에 문제가 생길 수 있다고 한다. 왜 꼭 id로 정의하는지 궁금했는데 해결되었다.

const {name, count} = this.props.habit;
props로 데이터를 받아올때 변수에 저렇게 정의해서 jsx에 {name}, {count} 로 출력이 가능하였다.
당연하지만 배열안에서 사용한 것과 동일한 이름을 적어야 한다.

리액트가 낯선건지 JS가 낯선건지 모를 정도로 둘 다 부족함이 느껴진다.
꾸준히 열심히 수수하게 한걸음씩 차근차근 공부해야지.

해서 JS를 복습했다.

---

JS복습

삼항연산자, 콜백함수 를 복습하였다.

삼항연산자 : 조건문을 간단하게 연산자로 표시하는 방법이다.

조건식 ? 참인경우 : 거짓인 경우

let animal = 'dog';
animal === 'dog' ?  console.log('🐶') : console.log('😺')

// animal이 dog면 강아지 이모지를 콘솔에 출력하고 그게 아니라면 고양이를 출력

 

콜백함수 : 인자(매개변수)로 함수를 받거나 다시 호출하는 함수, 고차함수에 속해 있음

전달할 당시에 바로 호출하는게 아니라 함수의 레퍼런스(참조값)만 외부로부터 전달받아서 그 액션을 함수 안에서 호출해서 동작하는 함수이다.
함수를 정의할 시점에는 어떤 함수인지 모른다.

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

function calc (x, y, calculator){
let result = calculator(x,y);
return result;
}

calc(1,2, add); //3
calc(1,2, multiply); //2

*추가 개념
일급함수 : 함수가 일반 객체처럼 모든 연산이 가능한 것

• 함수를 매개변수로 전달
• 함수 안에서 반환하거나 함수를 반환
• 함수의 표현식을 변수에 할당
• 동일비교가 가능한 함수

---

알고리즘 공부

파이썬으로 코테를 준비할 생각이지만 자바스크립트 책도 구매했다.
내가 실무에서 쓰게 될 언어를 아예 배제하고 싶지 않았다. 합격도 중요하지만 무엇보다 실력이 바탕이 되어야 한다고 생각하기도 하고 파이썬과 비교하면서 자바스크립트로 알고리즘을 설계하는 방법도 익혀가고 싶었다.
열심히 들으며 적었던 유튜버 동빈나님의 추천 공부 방식

코드업 기초 100제
백준 코드포스 1번부터X

기초
그리디 알고리즘 부터 풀기 (쉽고 실질적임)
탐색문제 (완전탐색, BFS, DFS)

그리디 탐색 기본동적프로그램 > 그래프이론 중급 고급 동적프로그램, 문자열

고급 알고리즘 X

코드포스 블루목표 = 삼성 역량테스트 B형

삼성전자 역량 테스트 기출문제 ->백준 온라인 저지
카카오 코딩 -> 프로그래머스

유튜브 알고리즘강의 절반 > 백준 온라인에서 그리디, 기본동적프로그래밍, 완전탐색 50문제씩 풀기 > 삼성전자 소프트웨어 역량테스트 전부 풀어보기
> 문제집 반복 반복 반복

오늘은 생각보다 리액트에 시간을 많이 잡아먹어 알고리즘은 유튜브를 통해 간단하게 개요와 성능평가에 대해 알아봤다.

* 코딩테스트 개요 및 출제 경향

2022년도 카카오 문제를 봤지만 아직 내 수준에서는 제대로 읽기도 버거웠다.
2021년도에 올라온 유튜브를 통해 대략적인 개요를 살펴보았다.

출처 : 동빈나 유튜브 https://youtu.be/m-9pAwq1o3w

삼성 DFS/BFS를 활용한 탐색 > 완점탐색, 시뮬레이션 (모두맞춰야)
카카오 > 카카오 기술 블로그 (카카오, 라인 절반이상 맞춰야, 2차에서 개발형 코테 서버 API로 특정한 데이터 받아온 다음에 처리하고 다시 서버로 전달하는 문제

+참고
자신만의 소스코드 관리
자주 사용하는 알고리즘 코드를 라이브러리화
팀 노트 깃허브를 이용하여 팀노트
시간 2~5
그리디(쉬운)
구현

릿코드 해외 국내 코딩테스
백준 대기업
코드업 초보자 처음 알고리즘 풀때 추천 초급 문제들을 다양하게
프로그래머스도 다양한 코딩테스트 문제를 제공

- 파이썬 사이트
온라인: 리플릿, 파이썬튜터
오프라인 : 파이참

---

* 알고리즘 성능 평가

복잡도 (알고리즘의 성능을 나타내는 척도)

• 시간 복잡도 : 특정한 크기의 입력에 대하여 알고리즘의 수행 시간 분석
• 공간 복잡도 : 특정한 크기의 입력에 대하여 알고리즘의 메모리 사용량 분석

동일한 기능을 수행하는 알고리즘이 있다면 복잡도가 낮을 수록 좋은 알고리즘이다.
>>>성능적인 측면에서의 복잡도를 의미.

빅오 표기법 : 가장 빠르게 증가하는 항만을 고려하는 표기법, 함수의 상한만을 나타낸다.
>>> 극한의 개념으로 이해하는게 좋음

• 상수 시간 : 몇 번의 연산을 거쳐야 수행이 완료
• 로그 시간 : 로그N에 비례하는 만큼 수행
• 선형 시간 : 데이터 크기가 N이라고 할때 표시

---

모든 데이터를 하나씩 확인하며 합계를 계산하고 총 데이터 갯수 만큼 summary 수에 값이 더해지고 수행시간은 N에 비래하게 됨

---

설계 Tip

채점서버가 PyPy를 제공하는 경우 파이파이로 제출하는게 좋음
파이썬으로 제출해본다음에 알고리즘을 효율적으로 작성했음에도 시간초과 판정이라면 PyPy로 제출해보길 권장

N3의 알고리즘을 설계한 경우 N의 값이 5000을 넘는다면 간단하게 5000의 세제곱의 값인 1250억 연산횟수고 파이썬이 1초에 오천만번 연산을 수행할 수 있다면 약 2500초 1초에 약 2천만번으로 연산할 수 있다고 가정하고 실제 문제를 푸는 것을 추천

>>> 많은 문제를 접해보면서 설계하는 방법을 배워가야할듯

---

 

* 알고리즘 문제 해결 과정

1. 문제 잘게 분해해보면서 문제를 최대한 간결하게 정의
2. 어느정도 성능으로 동작해야 정답판정을 받을 수 있는지 고민해보는게 중요 > 수학개념
3. 핵심 아이디어를 찾고 아이디어 활용해서 소스코드 작성해 해결
4. 핵심 아이디어를 통해 간결하고 깔끔하게 작성 가능
알고리즘 성능평가