본문 바로가기

분류 전체보기

Programmers - 크레인 인형뽑기 게임 / Javascript function solution(board, moves) { //인형을 담을 바구니 let bascket = []; let answer = 0; for(let i = 0; i < moves.length; i++) { //moves에 담긴 값은 1부터 시작이고 index는 0부터 시작하므로 -1을 해줌 const move = moves[i] - 1; for(let j = 0; j < board.length; j++) { //열(move)값은 고정이므로 행(j)값을 반복으로 돌면서 인형이 있으면 관련 코드 실행 const doll = board[j][move]; if(doll) { //인형이 있는 자리에 0을 대입하여 인형을 꺼내준다. board[j][move] = 0; //만약 basket이 비어있지 않고.. 더보기
Programmers - 124 나라의 숫자 / Javascript function solution(n) { const array = ['4', '1', '2']; let answer = ''; while(n) { answer = array[n % 3] + answer; n = (n % 3 === 0)? parseInt(n / 3) - 1 : parseInt(n / 3); } return answer; } 3 * n번째의 숫자를 변환하는 과정에서 규칙 찾는데서 오래 걸렸다. 기본적으로 숫자 n을 3으로 나눴을 때 나머지가 1이나 2로 나누어 떨어지면 1, 2가 되고 나머지가 0인 경우에는 4가 된다. 따라서 나머지에 0, 1, 2 index에 맞춰 ['4', '1', '2'] array를 만들어준다. 3 * n번째의 숫자가 아닌 경우에는 숫자 n을 0이 될 때 까지 계속.. 더보기
Programmers - 스킬트리 / Javascript function solution(skill, skill_trees) { let answers = 0; skill_trees.map(skillTree => { const skillArray = skill.split(''); const skillTreeArray = skillTree.split(''); let flag = true; for(let i = 0; i < skillTreeArray.length; i++){ //선행스킬트리에 포함된 스킬이 아니라면 continue if(!skillArray.includes(skillTreeArray[i])) continue; //선행스킬트리에 포함된 스킬이고 skillArray의 첫번째 스킬과 같으면 continue if(skillArray.shift() === s.. 더보기
Programmers - 단어변환 / Javascript function solution(begin, target, words) { //다음으로 바꿀수 있는 단어가 들어간 큐 const que = [begin]; //방문여부 판별 배열 const isVisited = words.map(w => false); //target으로 바꾸는 것이 가능한지 판별 flag let flag = false; //target으로 바꾸는 것이 가능할 때 변환과정 answer; let answer = 0; //isChangeable이라는 함수로 현재 단어와 큐에 집어넣을 그 다음 단어가 changeable한지 판별한다. //changeable한 조건은 단어의 알파벳 중 한자리만 다른 알파벳인 경우 변경 가능 const isChangeable = (begin, target) => .. 더보기
Programmers - 카펫 / Javascript 굳이 값을 변수화 하지 않았다면 코드 라인은 더 짧아질 수 있었을 것 같지만 가독성 면에서는 좋지 않다고 생각해서 변수명을 달아주었다. function solution(brown, yellow) { const area = brown + yellow; const result = []; //yellow가 될 수 있는 너비 * 높이 조합을 찾는다. for(let i = 0; i * i = height이라는 조건이 있기 때문에 큰 수를 너비로, 작은 수를 높이로 본다. const yellowWidth = yellow / i; const yellowHeight = i; //갈색 격자의 너비는 노란격자 너비 + 2 //갈색 격자이 높이는 노란격자 높이 + 2 const brownWidth = yellowWidth .. 더보기
Programmers - 모의고사 / Javascript 전날 아무리 해도 자꾸 테스트 케이스 검증에서 50점만 맞다가 오늘 아침에 일어나서 코드 싹지우고 다시해보니까 통과! 이렇게 간단한 로직인데 어제는 왜 안됐던건지 모르겠다 후 분명 동일한 로직에 코드만 약간 달랐던 것 같은데... 이전 코드를 비교해볼수가 없어서 아쉽긴하지만 어제의 자괴감에서 탈출할 수 있어서 다행이다. function solution(answers) { const scores = [0, 0, 0]; const a = [1, 2, 3, 4, 5]; const b = [2, 1, 2, 3, 2, 4, 2, 5]; const c = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5,]; answers.map((answer, i) => { if(a[i % a.length] === answe.. 더보기
Programmers - 이중우선순위 큐 / Javascript function solution(operations) { let que = []; let answer = []; //들어온 연산 순서대로 que에 작업을 해줌 operations.map((o) => { const isInput = o.slice(0, 1) === 'I'; //'I'로 시작하는 명령일 경우 if(isInput) { //들어온 숫자 큐 que.push(o.slice(2)); //오름차순으로 정렬 que.sort((a, b) => a - b); //'D'로 시작하는 명령이면서 que는 빈 que가 아님(빈 큐인 경우에는 연산을 무시하라고 문제에 나와있음) } else if (!isInput && que.length !== 0){ const deleteMax = o.slice(2) === '1'.. 더보기
2020년 회고하기 - 2년차 개발자가 되었다 나는 2019년 11월에 한 스타트업에서 프론트앤드 개발자로 커리어를 시작했고, 이제 2년차 개발자가 되었다. 2020년 한해를 나에게 있었던 굵직한 사건들을 회고하면서, 또 1년차의 개발자 커리어를 돌아보는 식으로 회고록을 작성해보려 한다. 사실 기술 블로그이기 때문에 감성적이고 주관적인 생각이 들어간 글을 블로그에 올리기는 것이 뭔가 부끄럽기도하고, 이때는 맞다고 생각했던 것이 나중에는 그렇지 않을 가능성이 높기 때문에 불특정 다수가 볼 수 있는 공간에 글을 쓰기가 꺼려진다. 예전에 개발 공부하면서 느꼈던 점들에 대해서도 몇개 글을 올렸다가 나중에 다시 읽어보니 이불발차기감이라 비공개로 돌렸던적이 있다. 이 글도 나중에 비공개가 될지는 모르겠지만 어쨌든 미래의 나를 위해서, 기억하기 위해서 기록해보고.. 더보기
구글 애널리틱스4(Google Analytics4) React + Next.js에 연동하기 react-ga 라이브러리를 가장 많이 쓰는 것 같길래 직접 코딩하는 것 보다 간편해 보여 연동했더니 어쩐 일인지 연동이 되지 않았다. 알고보니 구글 애널리틱스 이전 버전에는 추적 코드 형식이 UA-XXXXXXXXX-X인데 이번에 4로 버전업 되면서 코드 형식이 G-XXXXXXXXXX로 바뀌었는데, 최근 버전의 형식은 지원하지 않는다고 한다. 라이브러리가 업데이트될 때까지 마냥 기다릴순 없으니 방법은 두가지가 있다. 1. 추적코드를 UA-XXXXXXXXX-X 형식으로 만들어서 react-ga를 사용하기 왼쪽 사이드바 하단에 관리메뉴 - 속성 만들기를 누른 후 '고급옵션보기'에서 유니버설 애널리틱스 속성 만들기 토글을 켜준다. 설명에 나와있듯이 UA속성은 이전 버전이고, 웹 측정만 지원되므로 신규 사용자에.. 더보기
React.memo와 useMemo 차이점 React.memo React.memo는 Higher-Order Components(HOC)이다. 👀 Higher-Order Components(HOC)란 컴포넌트를 인자로 받아 새로운 컴포넌트롤 다시 return해주는 함수이다. const NewComponent = higherOrderComponent(WrappedComponent); 일반 컴포넌트는 인자로 받은 props를 UI에 활용하는 반면에, higher-order component는 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다. HOC는 리액트의 API가 아니라 리액트가 컴포넌트를 구성하는데 있어서의 일종의 패턴이라고 보면된다. React.memo의 사용법은 다음과 같다. const MyComponent = React.memo((p.. 더보기

티스토리툴바