개발새발

선형구조는 지난 포스팅 참조

자료구조란?

자료의 표현, 연산을 의미한다

크게 선형구조 와 비선형 구조로 나뉘며,

세부적으로 선형 구조의 종류에는 리스트, 스택, 큐, 데큐 (데크)

비선형 구조의 종류에는 트리와 그래프가 있다

트리 Tree

트리구조는 나무의 뿌리처럼 이미지상으로는 아래를 향하지만 가지처럼 뻗어나가는 구조이다

갭탭으로 이미지 그려 수정예정**

차수는 가지수를 의미한다

이미지에서 뿌리 노드 root node 에서 뻗어나온 가지 수는 3

ex) C 의 차수 : 2

차수가 0 인 노드는 단말노드 leaf node 라 한다

왼쪽 라인을 보면 뿌리부터 1,2,3,4...레벨로 깊이를 나타낸다

관계에 따라 부모, 자식, 형제, 조상 노드로 불린다

이진트리

갭탭으로 이미지 그려 수정예정**

그래프 Graph

정점 vertex, 간선 edge 의 모음

트리도 그래프라고 볼수 있는데, 다른 점은 사이클이 존재한다

그래프의 탐색 방법으로 깊이 우선 탐색 DFS(Depth-First Search) 과 너비 우선 탐색 BFS(Breadth-First Search)이 있다

정보처리기사를 공부하려던 계기중 하나인 자료구조 파트!

중요하니까 적어두자

필기 제 2과목 소프트웨어 개발

데이터 입출력 구현 A

자료구조란?

자료의 표현, 연산을 의미한다

크게 선형구조 와 비선형 구조로 나뉘며,

세부적으로 선형 구조의 종류에는 리스트, 스택, 큐, 데큐 (데크)

비선형 구조의 종류에는 트리와 그래프가 있다

먼저 선형구조부터 살펴 보겠다

리스트 Linear List

리스트 안에서도 선형 리스트와 연결 리스트로 나뉜다

이미지 갤탭 이용해 삽입하기

스택 Stack

이미지 삽입 예정

한쪽으로 들어와 한쪽으로 나가는 구조이며

상단을 Top, 하단을 Bottom 이라한다

입력은 push, 출력은 pop 이라 명칭하며

입력은 ABCD, 출력은 DCBA 순서로 진행된다

LIFO, FILO 구조라고도 한다

입력 (삽입) 알고리즘

Top = Top + 1
if (Top>n) then overflow;
else 삽입

출력 (삽입삭제) 알고리즘

if (Top=0) then underflow;
else {삭제 Top = Top - 1
}

=> 산술식 표현, 함수, 인터럽트 복귀 주소에서 활용한다

큐 Queue

이미지 삽입 예정

오른쪽으로 들어와 왼쪽으로 나가는 구조이다

입력이 되는 오른쪽을 Rear

출력이 되는 왼쪽을 Front 라 한다

입력, 출력이 ABCD 동일순서로 진행된다

LILO, FIFO 구조라고도 한다

입력 (삽입) 알고리즘

r=r+1

출력 (삽입 삭제) 알고리즘

f=f+1

=> 작업 스케줄링, 버퍼관리에서 활용한다

데큐 (데크) Deque (Double-ended Queue)

이미지 삽입 예정

큐와 동일한 구조면서

양방향에서 출력과 입력이 들어올수 있는 구조이다

입력 제한 데크 스크롤 Scroll

한쪽에서만 입력이 가능하도록 한쪽 방향의 입력을 막는다 (출력을 양방향 가능하다)

출력 제한 데크 쉘프 Shelf

한쪽에서만 출력이 가능하도록 한쪽 방향의 출력을 막는다 (출력을 양방향 가능하다)

소프트웨어 비용 산정 방식인 상향식 방식 중 하나인 원시코드 라인수 기법이다

LOC (Source Line Of Code) 기법 이라고 하며

원시 코드 라인수의 비관치, 낙관치, 기대치를 측정하여 예측치를 구해 비용을 산정한다

비관치 : 가장 많이 측정된 라인 수

낙관치 : 가장 적게 측정된 라인 수

기대치 : 측정된 모든 라인 수의 평균

[비관치, 낙관치, 기대치] = [b, a, m]

예측치 = a + 4m + b / 6

원시코드 라인수 기법 산정 공식

노력(인원) = 개발 기간 X 투입 인원 = LOC / 1인당 월평균 생산 코드 라인수

개발 비용 = 노력(월) X 단위 비용 (1인당,월)
개발 기간 = 노력(월) / 투입 인원
생산성 = LOC / 노력(월)

정보처리기사 공부하면서 용어 정리한 것

• 데이터베이스 관리 시스템 DBMS : Database Manage System
• 통합 모델링 언어 UML : Unified Modeling Language
• 애자일 Agile : 날렵한 , 민첩한 (애자일 프로세스 소프트웨어 개발 방법론)
• 감성공학(感性工學) : 인체의 특징과 감성을 제품설계에 최대한 반영시키는 기술
  인간이 가지고 있는 소망으로서의 이미지나 감성을 구체적인 제품설계로 실현해내는 공학적인 접근방법
• 아키텍쳐 Architecture : 컴퓨터 시스템의 하드웨어적 구조
• 객체 지향 OOP (Object Oreinted Programming) : 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것
• 요구공학Requirements engineering, RE : 시스템 요구사항 문서를 생성, 검증, 관리하기 위하여 수행되는 구조화된 활동의 집합
• 인터페이스 interface : 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면
  사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템
  컴퓨팅에서 컴퓨터 시스템끼리 정보를 교환하는 공유 경계
• 미들웨어 Middleware : 서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어
• 객체 관계 매핑 ORM (Object Relational Mapping) : 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법
  객체 지향 언어에서 사용할 수 있는 "가상" 객체 데이터베이스를 구축하는 방법
• 트랜잭션 (트랜젝션 X) Transaction : 데이터베이스 상태를 변화시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위
  한꺼번에 수행되어야 할 일련의 연산들
• 프로시저 Procedure (저장 프로시저 또는 스토어드 프로시저, 영구저장모듈) : 일련의 쿼리를 마치 하나의 함수처럼 실행하기 위한 쿼리의 집합
  데이터베이스에 대한 일련의 작업을 정리한 절차를 관계형 데이터베이스 관리 시스템에 저장한 것
• 디버깅 Debugging : 모든 소프트웨어에서 소스 코드의 오류 또는 버그를 찾아서 수정하는 과정
• 쿼리 Query : 데이터베이스에 정보를 요청하는 것
• 인스펙션 Inspection : 코드 리뷰와 같은 개념이다
• 모듈 Module : 프로그램을 구성하는 구성 요소
  관련 데이터와 함수를 하나로 묶은 단위
• 통합 개발 환경 IDE (Integrated Development Environment) : 코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어
• 형상관리 Configuration Management : 구성 관리 또는 형상 관리는 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것
• 디지털 권리 관리 DRM (Digital Rights Management) : 저작권자가 그들이 배포한 디지털 자료나 하드웨어의 사용을 제어하고 이를 의도한 용도로만 사용하도록 제한하는 데 사용되는 모든 기술들을 지칭
• 구조적 쿼리 언어 SQL (Structured Query Language) : 관계형 데이터 베이스에 정보를 저장하고 처리하기 위한 프로그래밍 언어
• 트리거 Trigger : 테이블에 대한 이벤트에 반응해 자동으로 실행되는 작업
• 데이터베이스 생명 주기 관리 DLM : Database Lifecycle Management
• 데이터 조작 언어 DML : Data Manipulation Language
• 데이터 제어 언어 DCL : Data Control Language
• 데이터 정의 언어 DDL : Data Definition Language
• 서브쿼리 : 하나의 SQL 문 안에 있는 또 하나의 SQL 문
• 관계대수 : "어떻게 질의를 해석하는가" 에 대해 언급하는 절차적 언어
• 관계해석 : 원하는 데이터만 명시하고 "어떻게 질의를 해석하는가" 에 대해 언급이 없는 선언적 언어
• 시스템 카탈로그 System Catalog : 데이터 베이스 관리자 도구
  데이터 베이스에 저장되어 있는 모든 데이터 개체들에 대한 정의나 명세에 대한 정보가 수록되어 있는 시스템 테이블
• 개체-관계(E-R)모델 Entity Relationship : 개체와 개체간의 관계,속성을 직관적으로 표현
• 파티셔닝 Partitioning : 데이터 베이스를 여러 부분으로 분할
• 클러스터링 Clustering : 유사한 성격인 개체들을 묶어 군집화(그룹화)
• 데이터 무결성 Data Integrity : 데이터의 정확성, 일관성, 유효성이 유지
• 반정규화 Denomalization : 시스템의 성능 향상과 개발, 운영 단순화를 위해 중복, 통합, 분리를 시도하는 데이터 모델링 기법
• CRUD : Create Read Update Delete
• ETL (Extract Transform Load,Extraction Transformation Loading) : 데이터 추출, 변환, 적재
• API (Application Programming Interface) : 컴퓨터나 컴퓨터 프로그램 사이의 연결, 다른 종류의 소프트웨어에 서비스를 제공
• 프로토 타입 Prototype : 중요 기능들이 포함되어 있는 시스템의 초기 모델
• 전송 제어 프로토콜 TCP (Transform Control Protocol) : 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 네트워크 프로토콜
• 사용자 데이터그램 프로토콜 UDP (User Datagram Protocol) : 비연결형 프로토콜 (TCP 에서 신뢰성을 제외)
• 테일러링 Tailoring : 주어진 대상에 맞게 줄이거나 늘리는 것
• 라우터 Router : 컴퓨터 네트워크 간에 데이터 패킷을 전송하는 네트워크 장치
• 백본 스위치 Backbone Switch : 백본 => 네트워크의 중심, 스위치 => 스위치 역할을 하는 기기
• 보안 운영체제 Secure OS
• 네트워크 결합 스토리지 NAS (Network Attached Storage) : LAN 으로 연결하는 외장 하드디스크
• 직접 연결 저장장치 DAS (Direct Attached Storage) : 서버 또는 컴퓨터에 네트워크를 거치지 않고 직접 연결되는 저장장치
• 스토리지 에어리어 네트워크 SAN (Storage Area Network) : 서버와 저장장치를 Fiber Channel Switch 로 연결한 고속 데이터 네트워크
• 안전한 소프트웨어 개발 생명주기 Secure SDLC (Software Development Life Cycle)
• 스키마 Schema : 데이터베이스에서 자료의 구조, 자료의 표현 방법, 자료 간의 관계를 형식 언어로 정의한 구조
• MVC (Model View Controller) : 소프트웨어 디자인 패턴
• 배치 프로그램 Batch Program : 여러 작업들을 미리 정해진 일련의 순서에 따라 일괄적으로 작업
• 컴포넌트 기반 방법론 CBD (Component Based Design) : 컴포넌트를 조합하여 하나의 새로운 애플리케이션을 만드는 방법론
• 델파이 기법 Delphi Method : 전문가 감정 기법의 주관적인 편견을 보완하기 위해 많은 전문가의 의견을 종합하여 산정하는 기법
• 원시 코드 라인수 기법 LOC (Source Line Of Code) : 원시 코드 라인수의 비관치, 낙관치, 기대치를 측정하여 예측치를 구해 비용을 산정 자세한 설명

출처 :  위키백과, MDN 공식문서, AWS

Q-net 에서 시험에 대한 정보를 파악한다

https://www.q-net.or.kr/man001.do?imYn=Y&gSite=Q 

자격정보를 확인하자

https://www.q-net.or.kr/crf005.do?id=crf00505&gSite=Q&gId= 

시험일정 정보처리기사( ※ 원서접수시간은 원서접수 첫날 10:00부터 마지막 날 18:00까지임)

시험정보

<실기시험 출제 경향>

정보시스템 등의 개발 요구 사항을 이해하여 각 업무에 맞는 소프트웨어의 기능에 관한 설계, 구현 및 테스트를 수행에 필요한 

1. 현행 시스템 분석 및 요구사항 확인(소프트웨어 공학 기술의 요구사항 분석 기법 활용)

2. 데이터 입출력 구현(논리, 물리데이터베이스 설계, 조작 프로시저 등)

3. 통합 구현(소프트웨어와 연계 대상 모듈간의 특성 및 연계 모듈 구현 등)

4. 서버프로그램 구현(소프트웨어 개발 환경 구축, 형상 관리, 공통 모듈, 테스트 수행 등)

5. 인터페이스 구현(소프트웨어 공학 지식, 소프트웨어 인터페이스 설계, 기능 구현, 구현검증 등)

6. 화면설계(UI 요구사항 및 설계, 표준 프로토 타입 제작 등)

7. 애플리케이션 테스트 (테스트 케이스 설계, 통합 테스트, 성능 개선 등)

8. SQL 응용(SQL 작성 등)

9. 소프트웨어 개발 보안 구축(SW 개발 보안 설계, SW개발 보안 구현 등)

10. 프로그래밍 언어활용(기본 문법 등)

11. 응용 SW기초 기술 활용(운영체제, 데이터베이스 활용, 네트워크 활용, 개발환경 구축 등)

12. 제품 소프트웨어 패키징(제품 소프트웨어 패키징, 제품소프트웨어 매뉴얼 작성 , 버전 관리등 )

<세부 평가 내역>

- 필기시험의 내용은 고객지원 > 자료실의 출제기준을 참고 바랍니다.

- 실기시험은 필답형을 시행되며 고객지원> 자료실의 출제기준을 참고 바랍니다.

  출제기준 참조(www.q-net.or.kr)

시험과목 및 활용 국가직무능력표준(NCS)

국가기술자격의 현장성과 활용성 제고를 위해 국가직무능력표준(NCS)를 기반으로 자격의 내용

(시험과목, 출제기준 등)을 직무 중심으로 개편하여 시행합니다.(적용시기 2020.1.1.부터)

   ※ 국가직무능력표준(NCS)란? 산업현장에서 직무를 수행하기 위해 요구되는 지식·기술·태도 등의 내용을 국가가 산업부문별·수준별로 체계화한 것

취득방법

① 시 행 처 : 한국산업인력공단

② 관련학과 : 모든 학과 응시가능 

③ 시험과목

- 필기 1. 소프트웨어설계 2. 소프트웨어개발 3. 데이터베이스구축 4. 프로그래밍언어활용 5. 정보시스템구축관리

- 실기 : 정보처리 실무

④ 검정방법

- 필기 : 객관식 4지 택일형, 과목당 20문항(과목당 30분)

- 실기 : 필답형(2시간30분)

⑤ 합격기준

- 필기 : 100점을 만점으로 하여 과목당 40점 이상, 전과목 평균 60점 이상.

- 실기 : 100점을 만점으로 하여 60점 이상.

출처: Q-net

SK C&C 데이터 센터 화재가 났을때, 나는 스터디 카페에서 티스토리 개발 포스팅 중이었다 (티스토리는 카카오의 자회사이다)

일시적 오류인줄 알았으나, 생각보다 영향력이 컸던 바로 그사건

https://terms.naver.com/entry.naver?docId=6636183&cid=43667&categoryId=43667 

https://www.kakaocorp.com/page/detail/9814?lang=KOR 

 

데이터센터 화재로 인한 카카오 대표 대국민 사과문

#카카오

www.kakaocorp.com

사건 당시 캡쳐했던 다음 홈페이지이다

흥미로웠던 점은 보통 h1~h3정도 사용하는걸로 알고있었는데, 개발자 도구로 코드를 까보니 h4가 있었다

ir(image-replace) 기법인 screen_out인걸 보면 안보이게 숨겨둔 텍스트인데

쇼핑몰 리스트인걸 나타내기 위해 h4 태그를 썼다는게 시멘틱하다고 생각했다

보는김에 tab으로 어떤 부분부터 이동하는지 처음부터 끝까지 확인해 보았다

이렇게 자세히 본적이 없어서 몰랐는데 웹접근성에 관한 페이지가 있었다

https://focus.daum.net/daum/pc/accessibility.html

무려 시각장애인 사용자 안내가 있는걸 보고 기분이 좋아졌다

그런데 어차피 스크린리더로 이동하게 할거라면 이 접근성안내 페이지를 조금 더 위쪽 구석에 놓아도 되지않을까?

혹은 푸터에서 제일 첫번째로 오게 한다는지 하는 생각이 들어서 건의했다

아무튼, 다시 화재당시 다음 페이지로 돌아가서!

아래 광고 리스트를 보면 list-style : none 처리가 안된게 왠지 재밌었다

그리고 리스트를 잘보면 크게 3목록으로 나뉜뒤 세부 리스트가 나열되어 있는 데,

원래는 어떤 모습이었길래 3구역으로 리스트가 나뉘어져 있는지 궁금했다

복구된 다음 홈페이지는 이러하다

이런 궁금증이 생겼다

다 리스트로 하되 반응형 효과를 주면 알아서 간격에 맞추어 리스트를 나열할 수 있지 않을까?!

아무튼 다음 측에서 받은 답변

그렇다고 한다

데이터 센터 화재부터 였나... 카카오의 연이은 악재가 소액주주로서 안타까울 따름이다

힘을 내 카카오...!

프로젝트 하면서 엑시오스를 불러오려는데

다른 파일에서도 멀쩡하게 불러와지던게

보기 싫은 빨간 밑줄이 생겨버렸다

이런 오류는 왜 뜨는걸까?!

원인은 from 뒤에 있다

오류 메세지를 보면

Absolute imports should come before relative imports. eslint (import/first)

=> 절대 경로는 상대 경로보다 이전에 와야만 한다 ESLint (불러오기/ 먼저)

절대 경로는 'react' 나 'axios' 처럼 절대적인 경로이고

상대 경로는 

'../../components/molecules/TopNavBarSave/TopNavBarSave'

와 같이 현재 파일의 위치로부터 설정된 경로이다

때문에 이런 오류가 떴다면 현재 위의 상황과 같이 폴더로 된 상대 경로가

엑시오스와 같은 절대 경로보다 위에 있지는 않는지 위치를 확인해보면 된다

위치를 바꿔주자 간단히 오류가 사라졌다

근본적으로 왜그런지 까지는 알 수 없지만 스택오버 플로우에 의하면 ESLint 설정상 법칙인 것 같다

https://stackoverflow.com/questions/47734886/why-should-absolute-imports-come-before-relative-imports

It's just an coding convention to make everything cleaner.

맥을 사고 초반에 VSCode를 실행하며  별것도 아닌 오류들이 나올 때,

문득 터미널을 보니 윈도우에선 bash 로 써있던게

zsh로 되어있어 오류의 원인인줄 의심했던 적이 있다 (물론,아니였다)

똑같은 명령어를 실행하는것 같은데, 그럼 둘은 무슨 차이일까?

단순한 호기심에 찾아봤고 꽤나 흥미로워 기록해둔다

일단 우리가 쓰는 터미널 창을 Shell 이라고 한다

Shell은 무엇이냐? 쉘이 터미널 아냐?! 어떻게 보면 맞는 것 같은데,

핵심은 운영체제(커널Kernel)에게 사용자 언어를 해석해 명령해주는 인터페이스.

즉, 쉘(Shell)이란 운영체제와 사용자를 이어주는 다리라고 보면 된다

편집기의 종류가 VScode, Sublime Text, Atom, Brackets 있는 것 처럼

쉘의 종류도 여러가지가 있다

왼쪽부터 sh, ksh, csh, tcsh, bash, zsh 이며 파헤치다보니 재밌어서 간단히 소개해보겠다

Bourne shell

AT&T 벨 연구소의 스티브 본 Steave(Stephen 자료마다 이름다름) bourne 이 개발했다

본 쉘이라고 하며 유닉스 쉘의 기본 쉘이고

초기 쉘이라 미흡한 점이 많다

Korn Shell

AT&T사의 데이비드 콘 David Korn 이 개발했다

C shell 씨쉘의 기능을 모두 제공하면서 처리 속도가 빠르다는 장점이 있다

C Shell

버클리대 빌 조이가 개발 (vi에디터 개발한 빌 조이)

본 쉘보다 강력하고 C언어를 기반으로 만들어졌다

크기가 커져 속도가 느려졌다는 단점이 크지만 아직 많은 사용자들이 사용 중이다

tcsh

C shell 의 버그를 수정하고 기능이 추가되었다

Bash (Unix shell)

브라이언 폭스가 개발했다

리눅스,우분투,페도라의 기본 쉘이다

sh 본 쉘 기반이다

콘 쉘 과 달리 무료이면서 본 쉘과 씨쉘의 기능 대부분 사용할 수 있어 둘의 장점만 가져왔다

특징으로 alias 앨리어스(명령어 단축) 기능 

히스토리 기능

정수 연산 기능

잡 컨트롤 기능

자동 이름 완성 기능

프롬프트 제어 기능

명령 편집 기능이 있다

Z shell

Bash 배시등장 직후 프리스턴대의 학생이 개발했다

본 쉘의 확장버전이다

맥 Mac OS 카탈리나 부터 기본 쉘로 채택되었다

강력한 온라인 커뮤니티 Oh My ZSH 기반으로 250개이상의 다양한 플러그인과 140개 이상의 테마를 지원한다

특징으로 맞춤법 검사 로그인, 로그아웃 감시 기능

바이트 코드와 같은 내장 프로그래밍 기능

구문의 과학적 표기법 지원 (자동 완성 기능 말하는 듯)

부동 소수점 산술 및 기타 기능이 있다

결론은 bash, zsh 둘다 비슷하지만 zsh가 Oh My ZSH 를 통해 좀 더 확장성, 편의성 있게 사용할 수 있다

참조

생활코딩 Linux - Shell 2 : bash vs zsh

위키피디아 wikipedia 유닉스 Unix_쉘 shell

Bash, Zsh 및 다른 Linux 쉘의 차이점은 무엇입니까?

공통된 문제 하나씩 풀어와서 서로 설명해주는 오프라인 스터디

문제 풀이

// 석우님의 풀이 - 1
const test = sizes.map(el => el[0] > el[1] ? el[0] : el[1]);
    const test2 = sizes.map(el => el[1] < el[0] ? el[1] : el[0]);
    console.log(test, test2);
    return Math.max(...test) * Math.max(...test2);

// 2
sizes.forEach(el => {
        el.sort((a, b) => b - a);
    })
    
    const 큰놈 = sizes.map(el => el[0])
    const 작은놈 = sizes.map(el => el[1])
    
    return Math.max(...큰놈) * Math.max(...작은놈);

// 도영님의 풀이
function solution(sizes) {
    let bestSize = [Math.max(...sizes.map(v => Math.min(...v))),
                    Math.max(...sizes.map(v => Math.max(...v)))]
    return bestSize[0] * bestSize[1];
}

최대공약수 구하는 법

//성진님강의
function max (num1,num2){
   if(num1 % num2 === 0) return num2;
   else return max(num2 , num1 % num2)
}

공통된 문제 하나씩 풀어와서 서로 설명해주는 오프라인 스터디

문제

// 석우님의 풀이
function solution(d, budget) {
    const 정렬 = d.sort((a, b) => a - b);
    
    const temp = [];
    
    for (const element of 정렬) {
        temp.push(element);
        if (temp.reduce((acc, crr) => { return acc += crr }) > budget) {
            temp.pop();
            break;
        }
    }
    return temp.length;
}

// 지성님의 풀이
function solution(d, budget) {
    let count = 0;
    d.sort((a,b) => a-b);
    for(let i=0; i<d.length; i++) {
        if(budget >= d[i]) {
            budget -= d[i];
            count ++;
        }
    } return count;
};

// 지해님의 풀이
let sum = 0;
let answer = 0;

function solution(d, budget) {
    d.sort((a, b) => a - b);
    for (i = 0; i < d.length; i++) {
        sum += d[i];
        if (sum <= budget) {
            answer += 1;
        }
    }
    return answer;
}

// 배열을 객체로 빼서 중복값 세기
let arr = ['a','b','c','c','d','b','c']
let obj ={}
arr.forEach(el => obj[el] = (obj[el] || 0) + 1);

 console.log(obj);

// 고차배열을 앞값, 뒷값 기준으로 2번 정렬할 수 있다.
// 문제: https://school.programmers.co.kr/learn/courses/30/lessons/120880
// 최빈값 구하기 문제에서 고차배열로 푼 풀이 참고하기
// 성진님의 풀이
function solution(numlist, n) {
    var answer = [];
    // 1. 배열을 순회하면서 정수 n과의 차의 절대값을 구한다.
    // 2. 차이가 작은 요소부터 정렬을 해준다.
    // 3. 차이가 같을 경우 요소가 큰 수부터 푸쉬를 해준다.
    let obj = {};
    numlist.map(v => obj[v] = Math.abs(v-n) )
    let arr = Object.entries(obj)

    arr.sort((a,b) => parseInt(b[0]) - parseInt(a[0]))   
    arr.sort((a,b) => a[1] - b[1])

    arr.map(v => answer.push(parseInt(v[0])))


    return answer;
}