프론트엔드 개발자의 기록 공간

우아한테크캠프 1년마다 돌아오는 우테캠 모집 글이 올라왔다. 우형에 대한 관심과 우테캠에 대한 관심이 많아서 무조건 붙어야겠다는 마음으로 준비했다. 세부 전형 단계 사전접수 > 1차 코딩테스트 > 2차 과제테스트 > 서류접수 > 면접 > 우아한테크캠프 작년과 다르게 자소서 기입 항목이 2차 테스트까지 거친 이후에 진행되었다. 1차 코딩 테스트 프로그래머스 플랫폼으로 150분 4문제로 시험이 치러진다. 화상 감독이나 캠은 키지 않고 편안한 분위기에서 진행됐다. 프론트엔드 웹 풀스택 과정은 코딩 테스트 언어를 JS로 제한되어 있었다. 덕분에 자료구조를 직접 구현해야 하는 까다로운 문제는 나오지 않았다. 1번과 2번 문제는 최근에 코테에서 자주 나오는 유형으로 나왔다. 주어진 정보와 문제로 객체 or 배열로 ..

🚩 7576번_토마토 골드5 📖 문제 설명 : N x M 상자 크기에 토마토가 있을 경우, 하루가 지날 때마다 인접 토마토들을 익게 한다. 모든 토마토가 익는 데까지 걸리는 최소 일수 구하기 💡 시간 초과를 벗어나기 위해서는 queue 알고리즘을 구현해서 사용 or index가 증가하는 cursor를 두고, queue.length < queueCursor를 사용 queue 알고리즘을 구현 예시 const fs = require('fs') const [mn, ...input] = fs .readFileSync('/dev/stdin') .toString() .trim() .split('\n') const [m, n] = mn.split(' ').map(Number) const graph = input.map..

아토믹 디자인(Atomic Design)을 착안하여 실제로 프로젝트를 수행한 경험을 늦게나마 공유하겠습니다. 완벽한 아토믹 디자인이 아니지만 프로젝트 기획에 맞게 팀원들과 논의를 통해 적절히 입맛에 바꿔 사용했습니다. 그전에 아토믹 디자인에 대해서 간략히 알아보도록 합시다. ❓ Atomic Design이란? 웹 프론트 개발 프레임워크, 라이브러리인 Angular, Vue, React는 컴포넌트 단위로 개발을 진행한다. 이러한 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다. 따라서 아토믹 디자인이 컴포넌트 중심 설계 패턴에서 더욱 주목받게 되었다. 아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플..

특강 소개에 앞서 간략하게 동아리에 대해 소개를 하고 본론으로 넘어가겠다. 💪 개발 동아리 "InQ" 창립 2021년도에 복학한 후배들과 함께 개발 얘기를 나누던 도중, 교내에 개발 동아리가 없어 동아리를 창립하여 학부생들끼리 학습하고 프로젝트를 같이 하는 환경이 생기면 좋겠다는 얘기를 나누었다. 그리고 며칠뒤 직접 만들어서 활동하자고 의견을 모아 바로 창립을 하게 되었다. 졸업을 앞두고 있어서 직접적인 활동은 하지 못했지만, 대외 개발 동아리 활동, 부트 캠프 활동 경험을 통해 이러한 활동 방식을 모태로 동아리 방향성을 잡았다. 하나의 팀을 꾸려 하나의 프로젝트를 목표로 한 학기를 수행하도록 계획을 했고, 거기에서 나의 역할은 개발 경험이 다소 적은 팀 or 학생들을 도와 방향성을 잡아주는 길라잡이 역..

🚩 1463번_1로 만들기 실버3 📖 문제 설명 : N 개의 줄에 각각 빨강, 초록, 파랑 집이 주어진다. N 번째 선택한 집의 색은 N-1 번째 선택한 집의 색과 같지 않아야 한다. 즉 N 번째 집이 빨간색일 때, N-1, N+1은 빨간색으로 칠할 수 없다. 또한, 각각의 집의 비용이 다르기 때문에 최소한의 비용을 선택하면서 규칙에 어긋나지 않게 선택해야 한다. 💡 모든 경우를 선택해서 마지막에 최솟값을 출력하면 된다. 즉, N 번째 파란색을 선택하는 경우는 N 번째 파란색 집 + N-1 번째 빨간색 집 + N-1 번째 초록색 집의 가격이다. 이 개념을 생각해서 각각의 집을 선택할 때 적용하면 된다. const fs = require('fs') const input = fs.readFileSync('/..

🚩 1463번_1로 만들기 실버3 📖 문제 설명 : 정수 N이 주어졌을 때 주어진 조건에 따라 1로 만든다. 이때 연산을 사용하는 횟수의 최솟값을 구해라. 💡 DP 유형이므로 i번째를 구할 때, i 이전의 값들을 이용해서 해결한다. const fs = require('fs') const input = fs.readFileSync('/dev/stdin').toString().trim() let N = Number(input) let answer = Array.from(Array(N + 1), () => 0) answer[2] = 1 answer[3] = 1 for (let i = 4; i 이전 값의 경우의 수 +1 answer[i] = answer[i - 1] + 1 // 3으로 나누어지는 경우 -> 3으..

🚩 최소직사각형 JS 📖 문제 설명 : 가로, 세로 길이가 적힌 명함들의 정보가 주어질 때, 최소한의 크기로 명함 지갑을 만들려고 할 때, 필요한 가로, 세로 크기를 구해라. 단 명함은 가로로 눕혀 가로 세로를 바꿀 수 있다. 💡 명함을 가로 세로 전환이 가능하므로(눕힐 수 있다) 명함 당 가로를 큰 쪽, 세로를 작을 쪽으로 돌린다. function solution(sizes) { let answer = 1 // 가로의 길이를 제일 긴 변으로 설정 후 회전 for (let i = 0; i < sizes.length; i++) { if (sizes[i][0] < sizes[i][1]) { ;[sizes[i][0], sizes[i][1]] = [sizes[i][1], sizes[i][0]] } } // 가로..