[TIL] 2023.04.06 기술면접 스터디, Programmers 문제 풀기

Today I Learned

• Programmers 문제 풀기
• 기술면접 스터디

 

---

Programmers 문제 풀기

등수 매기기

나의 풀이

function solution(score) {
    const average_array = score.map((item) => (item[0] + item[1]) / 2);
    const sorted_array = [...average_array].sort((a,b) => b-a);
    return average_array.map((v) => sorted_array.indexOf(v)+1);
}

두 과목의 점수를 평균내서 average_array를 만들고 이 배열을 내림차순으로 sort 해서 sorted_array를 생성한다. 그리고 average_array를 map을 돌려서 sorted_array에서 해당 요소의 index를 찾아서 +1을 return 하는 배열을 출력한다. 다른 사람들도 다들 비슷하게 푼 거 같다!

 

---

기술면접 스터디 CS 지식

Semantic HTML의 필요성을 예시를 들어 설명해 주세요.

시맨틱 태그의 필요성

1. 코드 가독성 향상
   • HTML의 소스 코드만 보고도 웹 사이트의 구조를 파악하고 이해할 수 있다.
   • 여러 사람과 함께 작업을 할 때, 굳이 클래스를 지정하지 않아도 쉽게 어느 부분이 헤더 영역이고, 본문 영역인지 쉽게 알 수 있다. 그래서 유지보수를 하기도 쉬워진다.
2. 쉬운 소스코드 구조화
   • 브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있다. 웹 문서를 분석하는 서비스 (ex. 스크린 리더) 같은 것들이 있을 때 분석하기 용이해진다.
3. 검색엔진 최적화(SEO)
   • 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 예를 들면 제목을 의미하는 <h> 태그가 <div> 태그보다 우선순위가 높아, 검색이 더 잘 된다.
   • 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 때, 의미있는 태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있다.

 

시맨틱 태그 종류

출처 https://coding-factory.tistory.com/883

• 헤더 영역을 나타내는 <header> 태그
• SP비게이션 영역을 나타내는 <nav> 태그
• 핵심 콘텐츠를 담는 <main> 태그
• 독립적인 콘텐츠를 담는 <article> 태그
• 콘텐츠 영역을 나타내는 <section> 태그
• 사이드바 영역을 나타내는 <aside> 태그
• 푸터 영역을 나타내는 <footer> 태그

 

참고 

https://velog.io/@sean2337/Front-End-시맨틱-태그를-왜-사용하는가

https://velog.io/@cse_pebb/HTML-시맨틱semantic-태그에-대해-알아보자#🥀-헤더-영역을-나타내는-header-태그

 

 

Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 

• Redux는 전역 상태관리 라이브러리

• Store 중앙 State 관리소
• Modules State의 그룹
• Reducer state가 관리되는 곳에서 직접 state를 변경 혹은 추가 시키는 함수
  • 디스패치를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 “변화를 만들어내는" 함수
  • 첫 번째 매개변수로 현재 state값을 받고 두 번째 매개변수로 action이라는 객체를 받음
  • 전달받은 action에 따라 state 값을 변경시킴
• Action 객체 리듀서로 보낼 “명령"으로서 반드시 type이란 key를 가져야 하는 객체이다.

// payload가 필요 없는 경우
const action = {
	type : "INCREASE"
 }
// payload가 필요한 경우
const action = {
	type : "INCREASE",
  payload : 10;
}

• Dispatch reducer로 action 객체를 전달하는 역할을 하는 함수
  • useDispatch() Hook 사용
• Action Creator 액션객체를 만드는 함수
  • 휴먼에러 방지
  • 유지보수의 효율성 증가
  • 코드 가독
• useSelector 컴포넌트에서 스토어를 조회할 때 사용하는 hook

 

 

Redux의 흐름

Action → Dispatch → Reducer → Store 순서의 단방향 흐름

1. View에서 액션이 일어난다.
2. dispatch에서 action이 일어나게 된다.
3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.
4. middleware에서 명령 내린 일을 수행하고 난 뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!)
5. reducer의 실행결과 store에 새로운 값을 저장한다.
6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

 

---

회고

[Skrr] 출시 3일만에 카카오톡을 제치고 앱스토어 2위를 달성한 사이드 프로젝트🔥 | Disquiet*

디스콰이엇에서 너무 흥미로운 글을 발견했다. 미국에서 인기 있는 어플을 카피하는 사이드 프로젝트를 진행해서 Skrr이라는 어플을 출시했는데 단기간에 엄청난 유저 수를 확보했다. 일단 컨셉 자체도 너무 재밌고 적절한 바이럴과 완성도 높은 어플로 성공을 거둔 거 같다. 나도 언젠가 이런 멋진 프로젝트 한번 만들어 보고 싶다! 🥹