TIL
코드 리뷰 진행
프로그래머스 lv.0 최빈값 문제 풀이에 대해서 논의를 진행함.
https://school.programmers.co.kr/learn/courses/30/lessons/120812
나는 어떻게 풀었나?
빈 배열answerList을 하나 따로 생성하고
배열에 객체를 만들어서 반복적으로 추가하게 작성함(array의 숫자값 number ,세어진 횟수 count). 행동의 기준점을 findIndex를 사용함.
-
array의 첫 항목의 경우에는answerList에 아무것도 없으니findIndex의 값이 -1이기 때문에 해당 경우에는count값을 1로 하는 항목을push함. -
그 뒤로 들어온 항목에서 첫번째 조건이
false가 나온다면, 해당 값이 존재하는index를 찾아서 해당 값의count값만 더해준다. -
반복 과정을 마친 다음
sort메서드를 사용해서count를 기준으로 내림차순으로 정렬함 -
만약,
- 입력한 배열의 항목이 1개밖에 없다면, 첫번째 항목의number값을 대입answerList의 첫번째 와 두번째 항목의 count값이 동일하다면 최빈값이 존재하지 않는 것이기 때문에 -1로 대입- 위의 두가지 조건을 만족하지 않는다면 최빈값이 하나가 존재한다는 뜻이므로 가장 첫번째 인덱스의
number값을 대입한다.
function solution(array) {
if ((0 <= array.length) | (array.length < 1000)) {
var answerList = [];
for (let i = 0; i < array.length; i++) {
//해당 number가 이미 추가되었는가?
if (answerList.findIndex((k) => k.number === array[i]) === -1) {
//없으면 새로 항목을 추가하고
answerList.push({ number: array[i], count: 1 });
} else {
var someIndex = answerList.findIndex((k) => k.number === array[i]);
// 만약 있으면 count값을 추가로 더한다
answerList[someIndex].count++;
}
}
}
// 최빈값을 구하기 위해 count를 내림차순 기준으로 정렬
answerList.sort((a,b) => b.count- a.count);
// 만약 입력한 배열의 항목이 1개밖에 없다면
if (answerList.length === 1) {
var answer = answerList[0].number
}
// 만약 answerList의 첫번째와 두번째 항목의 count 값이 동일하다면 가장 많이 존재하는 숫자가 하나가 아닌 것이므로 -1로 지정
else if (answerList[0].count - answerList[1].count === 0){
var answer = -1
} else{
// 가장 첫번째 인덱스의 number 값을 지정
var answer = answerList[0].number
}
return answer;
}
다른 사람은 어떻게 풀었나?
빈 배열에 객체를 집어넣는 나의 방법과는 다르게 그냥, 빈 객체를 만들어서 그곳에 집어넣고 반복문을 만들어서 구현하니 코드가 좀더 단순해지고 이해하기가 편해졌다.
function solution(array) {
let numObj = {};
let max = 0;
let answer = -1;
// numObj 객체에 배열의 각 요소별 개수 정보를 입력
for (let num of array) {
numObj[num] ? (numObj[num] += 1) : (numObj[num] = 1);
}
// 가장 높은 빈도수를 max에 할당
for (let key in numObj) {
max = Math.max(max, numObj[key]);
}
// max 빈도수를 가진 요소를 출력
for (let key in numObj) {
// max 빈도수가 중복이라면 -1 반환
if (numObj[answer] === numObj[key]) {
return -1;
}
// max 빈도수값을 가지는 요소를 반환
if (numObj[key] === max) {
answer = parseInt(key);
}
}
return answer;
}다른사람이 해결한 코드를 보니, 저런 방법으로도 해결할수 있다는 사실에 감탄하면서 아직 멀었다는 생각이 든다.
flex
하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성
※ flex container : flex 속성을 가진 부모요소
※ flex items : flex 속성을 가진 부모 아래의 자식요소
- flex items의 경우 block 속성처럼 최대한으로 늘어나는 것이 아니라 최소한으로 줄어들려고 한다!
1차원 레이아웃 구조를 만드는용도로 사용하는 css 기술!!
flex, inline flex
flex : Block 특성의 Flex Container를 정의
inline-flex : Inline 특성의 Flex Container를 정의
flex-flow
단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정합니다.
flex-dirction 과 flex-wrap을 동시에 사용하고 싶을때 이 속성하나로 정의가 가능함
justify-content
메인 축 방향 정렬
-
lex-start (기본값)
아이템들을 시작점으로 정렬. -
flex-end
아이템들을 끝점으로 정렬.
-
center
아이템들을 가운데로 정렬. -
space-between
아이템들의 “사이(between)”에 균일한 간격 생성. -
space-around
아이템들의 “둘레(around)”에 균일한 간격을 생성. -
space-evenly
아이템들의 사이와 양 끝에 균일한 간격을 생성.
align-content
교차 축의 정렬 방법을 설정
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용이 가능하다.
기본 값은 strech 교차 축을 채우기 위해 Items를 늘린다.
Content를 기준으로 정렬하는 것!
align-items
Items가 한줄일 때 사용이 가능
여기도 기본값은 strech
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선하게된다!
flex-items
- order : flex item의 순서를 설정
- flex-grow : Flex Item의 증가 너비 비율을 설정
- flex-shrink : Flex Item의 감소 너비 비율을 설정
- flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정
※ flex-grow는 콘텐츠(문자 텍스트)사이의 양 옆의 공간에 따른 여백의 비율을 결정하므로 서로의 콘텐츠의 길이가 다른 상황에서는 원하는 만큼의 비율로 나누어 지지 않을수 있다.
이럴때에는 flex-basis의 값으 0으로 변경하면 원하는 만큼의 비율로 나타나는 모습을 볼수 있다.
flex
flex-grow, flex-shrink, flex-basis의 단축 속성
flex : 1
오 그럼 이건 flex-grow가 1 flex-shrink 1 flex-basis는 auto겠네?
아니다. flex:1 로 지정하면 flex-basis는 0으로 되어버린다.
align-self
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있다.
css 코딩 관련 조언
-
부모 요소에서 width 혹은 height를 관리하는 것이 수월하다.
부모 요소에서 너비를 정하면 자식요소에도 적용될수 있기 때문 -
position:fixed는 무적이 아니다.
부모요소에서 scale()을 써버리면 위치가 바뀌게 된다.
만약position:fiexed를 사용했는데 원하는 위치가 보이지 않으면 scale()과같은 요소가 주변에 있는지 확인해보자.
-
position을 사용할때는 부모 혹은 그 상위 요소에position이 존재하는지를 확인해야한다. 참고로position의 기본값은 staticdlek. -
position:sticky를 사용할때는 top,bottom,left,right 요소중에 하나를 무조건 작성해야한다.
말줄임표 만들기
- 요소의 너비가 존재해야한다.
white-space: nowrap을 사용해서 지정된 너비이상의 텍스트가 삐져나오게 만듦overflow:hidden을 사용해서 삐져나온 부분을 보이지 않게 설정text-overflow: ellipsis를 사용해서 ...을 추가함
contain,cover
contain은 이미지를 부모 요소중 좁은 너비에 맞추고, cover는 이미지를 부모요소중 넓은 너비에 맞춘다.
마진 중복(margin collapse)
만약 3개의 아이템을 작성하고 각각 margin 값을 20px씩 하면 위 아래같의 여백은 40px로 늘어날까?
아래의 결과를 보면 그게 아니다!
- 형제요소의 마진이 위 아래가 만나면 서로 중복되는 현상이 발생한다!
그런데 재미있는건,
- 이렇게 좌우로 만나는 경우는 중복현상이 발생하지 않는다!
다음 경우는 좀 다르다.
- 부모요소의 top 와 자식요소의 margin-top으로 인한 여백이 부딪히면, 중첩이 발생해서 위쪽이 붕 뜨게 된다.
해결 방법은 부모요소에 border를 추가해서 서로 부딪치지 않게만 해주면 위쪽의 여백이 생기지 않게 된다!
