개발일지

Emotion을 사용한 이유? 평소 styled-components를 활용하여 스타일링을 진행했지만, 이번에 TS를 공부하면서 진행하는 프로젝트에서는 emotion을 이용하여 스타일링을 해보고 있다. styled-components와 emotion을 비교하는 글들이 많기는 하지만, 그런 글들과는 상관 없이 직접 사용해보면서 비교도 해보고, 차이점을 느껴보려고 한다. emotion 중에서도 styled-components와 유사한 방식으로 스타일링을 할 수 있지만, 미세한 차이점이 있어 기록하기 위해 이 글을 적는다. Emotion을 사용하면서 마주한 상황 1. props에 따라 스타일을 변경해야 하는 경우 한 컴포넌트를 스타일링 하는 경우, 부모에서 내려오는 props에 따라 스타일링을 다르게 해야하는 ..

생성자 함수? class아니냐? 이번에 프로그래머스 강의 중 하나인 Vanilla JS 스터디에 참여하게 되면서, 리액트나 뷰, 스벨트와 같은 라이브러리를 사용하지 않고 간단한 기능들을 만들어 보고 있다. 그러던 중.. 멘토님께서 해당 부분을 설명해 주시면서, function을 사용하면서도 new를 붙여서 구현하는데 이를 생성자 함수라고 설명하셨고, 생성자 함수에 관련된 내용도 짧게 설명해주셨다. class는 흔히들 붕어빵 찍어내는 틀이라고 생각하라던 강의들과 설명들이 많았다. 생성자 함수 또란 이와 비슷한 개념으로, 조금 찾아보니 class와 생성자 함수는 많은 점이 닮았지만, 조금은 다르게 동작하며 class에서는 사용할 수 있는 기능이 생성자 함수에서는 사용할 수 없다는 등의 차이점이 있었다. //..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근방법 1. 모든 성격 유형에 0점을 매기고 시작하기 2. survey에 들어있는 2개의 성격 유형을 한 개로 나누기 3. 각 유형에 맞게 점수 매기기 4. 지표 번호 순으로 성격 나열하기 구현 function solution(survey, choices) { let answer = []; // 각 성격마다 점수를 추가할 수 있도록 Map 사용 const kbti = new Map(); // 문항 선택에 따른 점수 구분 -> 배열의 첫 요소로 0을 넣은 이유는 문항에는 0번 문항이 없기 때문 const sc..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근방법 스파이는 다양한 부위에 해당하는 의상을 가지고 있는데, 부위는 중첩되더라도 의상은 중복되지 않는다. 따라서 의상의 부위가 중복된다면 부위라는 사물함에 의상이라는 내용물을 넣어야한다고 생각, 즉 해쉬를 이용하여 풀었다. 코드 function solution(clothes) { // Map을 이용하자! const spyClothes = new Map(); clothes.forEach((item) => { // Map에 부위가 저장되어 있지 않다면 if (!spyClothes.get(item[1])) { ..

생각한 점 1. commands 안의 배열의 첫번째 수 부터 두번째 수까지 빈 배열에 push 2. 이후 오름차순으로 정렬 3. 세번째 수의 순서의 숫자를 구하기 function solution(array, commands) { var answer = []; var count = 0; while (count a - b); answer.pus..

function solution(v) { var answer = []; var x = []; var y = []; for(let i=0; i a-b); let yList = y.sort((a,b) => a-b); xList[0] === xList[1] ? answer.unshift(xList[2]) : answer.unshift(xList[0]); yList[0] === yList[1] ? answer.push(yList[2]) : answer.push(yList[0]); return answer; } 직사각형이 되기 위해서는 x축과 y축이 꼭 중복되어야 한다. ..

1. 문제 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데,..