전체 글

chapter 01

컴퓨터가 이해하는 코드는 바보도 작성할 수 있다. 사람이 이해하도록 작성하는 프로그래머가 진정한 실력자다. 1. 리팩토링하기전에는 테스트 부터 분량이 방대한 코드를 리팩토링하다보면 잘 돌아가던 코드도 안되는 경우가 빈번하게 생기기 마련이다. 때문에 지속적으로 눈으로 보며 기능이 정상적으로 동작하는지 확인하는 과정이 필요하다. 이를 리팩토링 - 기능검사 순으로 반복적으로 수행하다보면 너무나 비효율적이고 검수에 너무나 많은 시간이 소요될 것이다. 이를 위해서 테스트 작성에 시간이 걸리더라도 신경 써서 만들어두면 디버깅 시간이 줄어 전체 작업시간은 줄어드는 효과를 얻을 수 있다. 2. 기능 쪼개기 긴 함수의 리팩토링을 맞닥뜨렸을 때 당황하지말고 기능쪼개기부터하자. 본문에서 발췌한 다음과 같은 코드를 보자. f..

2022 디프만 11기 FE 활동 회고

약 반년간 진행된 디프만 활동이 파이널 발표를 마침표로 끝이 났다. 기존 DDD, 오픈소스 컨트리뷰톤 활동을 통해서 스스로 채찍질할 수 있기도 하고 개발자 네트워킹 및 협업을 통해서 1년 반동안 많은 성장을 이뤘다고 생각한다. 이후 이직을 고민하고, BE에서 FE로 전향하게 되면서 현재 현업에서 쌓을 수 없는 리액트 프로젝트 경험이라던가 퍼블리셔가 맡는 파이를 가져오고 싶어서 디프만 11기 FE로 약 반년간 프로젝트를 진행하게 되었다. 면접 그리고 프로젝트 감사하게도 높은 경쟁률을 뚫고 11기로 활동할 수 있게 되었다.(한 10:1은 되었던 것 같다.) 그 동안 쌓아온 MBC 프로젝트 포트폴리오와 개발에 대한 열정을 높게 사주신 것 같다. 서류심사 이후에는 비대면 면접이 진행되었다. 일반 기업 수준의 기..

첫 이직 회고

첫 회사 방송사와는 전혀 연관이 없을 줄 알았는데 어쩌다보니 개발자로써 첫 사회생활을 디지털미디어시티에서 하게되었다. 사실 생각해본적도 없고 C#이라는 난생 처음보는 언어로 서버개발을 한다는데, 그동안 해왔던 건 java와 스크립트 뿐이었다. 졸업하고 취준 2개월만에 그렇게 풀스택(?) 개발자로써 첫 발을 내딛게 되었다. 이직에 대한 고민 첫 회사에 입사하고 이전과는 비교도 할 수 없는 성장을 하게되었다. 그래도 부족하다고 생각하지만 1년 반 이전의 나와 비교한다면 그렇다. 특히 재직하며 MBC 앱을 네이티브에서 웹뷰로의 전환 이슈로 혼자 처음부터 모래성을 쌓아올리듯 개발한 경험이나, 대선, 올림픽과 같은 이벤트 사이트 개발, 각종 관리자 페이지 개발은 재미도 있었고 서비스가 배포되는 뿌듯함을 느낄 수 ..

[BOJ 11053] 가장 긴 증가하는 부분 수열(javascript): DP LIS

문제 설명 수열 A가 주어졌을 때, 가장 긴 증가하는 부분 수열을 구하는 프로그램을 작성하시오. 예를 들어, 수열 A = {10, 20, 10, 30, 20, 50} 인 경우에 가장 긴 증가하는 부분 수열은 A = {10, 20, 10, 30, 20, 50} 이고, 길이는 4이다. let n = 8; let arr = [5, 3, 7, 8, 6, 2, 9, 4]; console.log(solution(n, arr)); function solution(n, arr){ if (n === 1) return 1; let dp = Array.from({length: n}, () => 0); let answer = 0; dp[0]=1; for (let i=1; i=0; j--){ if (arr[i] > arr[j]..

[Programmers level3] 섬 연결하기(javascript) : 그루스칼 알고리즘

문제 설명 n개의 섬 사이에 다리를 건설하는 비용(costs)이 주어질 때, 최소의 비용으로 모든 섬이 서로 통행 가능하도록 만들 때 필요한 최소 비용을 return 하도록 solution을 완성하세요. 다리를 여러 번 건너더라도, 도달할 수만 있으면 통행 가능하다고 봅니다. 예를 들어 A 섬과 B 섬 사이에 다리가 있고, B 섬과 C 섬 사이에 다리가 있으면 A 섬과 C 섬은 서로 통행 가능합니다. 제한사항 섬의 개수 n은 1 이상 100 이하입니다. costs의 길이는 ((n-1) * n) / 2이하입니다. 임의의 i에 대해, costs[i][0] 와 costs[i] [1]에는 다리가 연결되는 두 섬의 번호가 들어있고, costs[i] [2]에는 이 두 섬을 연결하는 다리를 건설할 때 드는 비용입니다..

[Programmers level 3] 이중우선순위 큐 Javascript

문제 설명 이중 우선순위 큐는 다음 연산을 할 수 있는 자료구조를 말합니다. 명령어수신 탑(높이) I 숫자 큐에 주어진 숫자를 삽입합니다. D 1 큐에서 최댓값을 삭제합니다. D -1 큐에서 최솟값을 삭제합니다. 이중 우선순위 큐가 할 연산 operations가 매개변수로 주어질 때, 모든 연산을 처리한 후 큐가 비어있으면 [0,0] 비어있지 않으면 [최댓값, 최솟값]을 return 하도록 solution 함수를 구현해주세요. 제한사항 operations는 길이가 1 이상 1,000,000 이하인 문자열 배열입니다. operations의 원소는 큐가 수행할 연산을 나타냅니다. 원소는 “명령어 데이터” 형식으로 주어집니다.- 최댓값/최솟값을 삭제하는 연산에서 최댓값/최솟값이 둘 이상인 경우, 하나만 삭제합..

[Programmers Level 3] 디스크 컨트롤러 (javascript)

문제 설명 하드디스크는 한 번에 하나의 작업만 수행할 수 있습니다. 디스크 컨트롤러를 구현하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 요청이 들어온 순서대로 처리하는 것입니다. 예를들어 - 0ms 시점에 3ms가 소요되는 A작업 요청 - 1ms 시점에 9ms가 소요되는 B작업 요청 - 2ms 시점에 6ms가 소요되는 C작업 요청 와 같은 요청이 들어왔습니다. 이를 그림으로 표현하면 아래와 같습니다. 한 번에 하나의 요청만을 수행할 수 있기 때문에 각각의 작업을 요청받은 순서대로 처리하면 다음과 같이 처리 됩니다. - A: 3ms 시점에 작업 완료 (요청에서 종료까지 : 3ms) - B: 1ms부터 대기하다가, 3ms 시점에 작업을 시작해서 12ms 시점에 작업 완료(요청에서 종료까지 : 11..

[BOJ/1987번] 알파벳

문제 세로 R칸, 가로 C칸으로 된 표 모양의 보드가 있다. 보드의 각 칸에는 대문자 알파벳이 하나씩 적혀 있고, 좌측 상단 칸 (1행 1열) 에는 말이 놓여 있다. 말은 상하좌우로 인접한 네 칸 중의 한 칸으로 이동할 수 있는데, 새로 이동한 칸에 적혀 있는 알파벳은 지금까지 지나온 모든 칸에 적혀 있는 알파벳과는 달라야 한다. 즉, 같은 알파벳이 적힌 칸을 두 번 지날 수 없다. 좌측 상단에서 시작해서, 말이 최대한 몇 칸을 지날 수 있는지를 구하는 프로그램을 작성하시오. 말이 지나는 칸은 좌측 상단의 칸도 포함된다. 입력값 첫째 줄에 R과 C가 빈칸을 사이에 두고 주어진다. (1 ≤ R,C ≤ 20) 둘째 줄부터 R개의 줄에 걸쳐서 보드에 적혀 있는 C개의 대문자 알파벳들이 빈칸 없이 주어진다. I..

[Git] private config 설정 정보 submodule로 관리하기

git submodule 도입 배경 개발 진행시 배포 과정에서 설정파일 같은 private한 파일의 경우 레포지토리에서 누락되고, 직접 서버에서 config 파일을 배포하는 경우가 발생하게 됩니다. 이에따라 개발과정에서도 공통된 설정파일을 이용할 수 없는 문제점이 발생하거나 멀티 모듈 방식을 이용할 경우 여러 곳에서 공통된 설정파일을 요할 수 있습니다. 서브모듈을 통해 설정파일 디렉토리만 private 하게 가져가고 앞에 언급한 문제점을 해소하고자 합니다. git submodule이란? 하나의 레퍼지토리 안에 있는 또 다른 별개의 서브 레퍼지토리로 서브모듈만 별도로 private하게 가져갈 수 있는 장점이 있습니다. 서브모듈 레퍼지토리 생성후 기존 레포지토리에 다음과 같이 추가해주면 생성 가능합니다. g..

고차 컴포넌트 패턴(HOC)과 믹스인(Mixins)

하이오더컴포넌트는 리액트 진영에서 기반한 컴포넌트 개발 패턴이다. 컴포넌트의 로직을 훼손하지 않고 재사용성을 최대로 끌어올리는 것에 장점이 있지만, 중간 컴포넌트가 하나 추가되므로 depth가 깊어질 수록 컴포넌트 구조가 복잡해지는 단점이 존재한다. 반대로 믹스인의 경우 HOC에 비해 쉽고 고차 컴포넌트에 대한 생각을 안해도 되지만, SOC(관심사 분리), 컴포넌트 테스트 측면에서 HOC에 비해 불리하다. 때문에 둘의 패턴을 적절히 활용해 반복되는 코드의 역할을 단일화시키며 재활용이 용이하게, 외부 종속성을 최소화 하는 것을 유의하며 적용해야 한다. 믹스인(Mixins) 🎄글로벌 믹스인(Global Mixins) 믹스인은 여러 Vue 컴포넌트에서 기능을 재사용하는 방법이다. 컴포넌트가 믹스인을 사용하면 ..

[JS]-1 : 호이스팅(Hoisting)/ 타입스크립트

무작정 프론트로 프로젝트를 시작하며 느낀 JS 지식 및 활용-1 백단만 개발하다 본격적으로 두달동안 Vue로 프로젝트를 하며 Javascript에 대한 코어 지식이 부족하다는 것을 뼈저리게 느꼈다. 이번 프로젝트를 하며 JS의 코어 지식들이, 단순히 "이론적으로 암기할 것"이 아닌 효율성과 유지보수, 안정적인 프로덕트를 위해 필수적으로 알아야 한다는 것을 깨달았다. 다음은 실제로 프로덕트를 개발하며 느낀 JS의 문제점들, 문제를 해결하기 위해 도입하고자 하는 것들에 대한 내용이다. 그중 호이스팅과 타입안정성에 대해 먼저 말해보고자 한다. Javascript로 개발한다는 것은 생각보다 쿨하지 못한 과정이었다. 동적 타이핑 언어로 런타임에러를 뱉는 점, 타입안정성이 떨어지는 점, 관용적인 문법 표현들은 오히..

Vue 점진적 도입(2): SFC 전환 경험 공유

이 글은 jQuery 기반의 미디어 플랫폼 모바일 앱에 Vue를 도입한 사례를 정리한 내용입니다. 웹뷰에 Vue를 도입하거나 기존 레거시와 함께 점진적 도입을 고민하고 있으신 분들을 위해 공유합니다. 웹뷰를 좀 더 네이티브 앱에 가깝게 구현하자 기존에 작성했었던 Vue 점진적 도입 경험기(1) 에 이어 MBC 앱을 지속적으로 담당하게 되면서 연말 개편을 맡게 되었다. 지난 버전에서 웹뷰를 도입하며 vue 2.0 버전 cdn을 다운받아 사용해 보는 것을 시작으로, 각 페이지 별로 JS를 로딩하는 고전적 MPA구조로 작성했다. 처음 버전에서는 웹팩의 엔트리를 이렇게 작성했다. module.exports = { devtool: 'source-map', entry: { main: './src/entry/main..

[Azure-functions-openapi-extensions] 오픈소스 Merge 경험

선한 자극 vs 위기 의식 오픈소스 컨트리뷰톤(OCA)과 DDD를 병행하면서 회사일과 맞물려 너무 바쁜거 같은 요즘인데.. 어케든 가능은 한 것 같다. 그래도 하기 잘했다고 생각이 드는건 주위 사람들에게 선한 자극을 받고 나 또한 과거에 비해 성장하는 것이 느껴진다는 것이다. OCA에서는 이번에 챌린저스 기간이 끝나고 마스터즈 기간에 돌입했는데, 다들 뛰어난 개발자들이 모였는데 열심히 해서 그런가 리드멘티에 선정되었다. 사실 좀 바빠서 서포트 역할로 하고 싶었는데... 그래도 대충은 못하는 성격이라 어떻게든 1등팀으로 하기위해 전력을 다하고 싶다. 우리팀 프로젝트는 Azure function의 오픈api 스웨거 UI를 렌더해주는 Extension이다. 첨에는 프로젝트의 구조조차 파악하기 쉽지 않았는데, ..

[DDD 6기] Server 직무 합격..!

7전 8기 행운은 한번에 온다고 했던가.. 유명 IT 동아리들을 전부 계속(3번) 서류 탈락하고 이번에는 2개를 신청했는데.. 2개 다 덜컥 되버렸다. 사실 탈락의 고배를 마시기 전까지는 대외활동인데 열심히 안해도 적당히 붙겠지~라는 마음이었는데 오산이었다. 몇번의 탈락 후 어느 순간 겸손한 마음으로 퇴근 후 정말 최선을 다해서 서류를 정성스럽게 작성했던 것 같다. 처음에는 무슨 직장인 대외활동이 서류에 면접까지 보는거지?.. 라고 생각했었는데 몇번 떨어지고 경쟁률을 체감하니 만만치 않다는 것을 깨달았다. 무엇보다 10:1에 육박하는 경쟁률은 가히 만만히 볼 수치가 아니었다. 이전에 오픈소스가 되버려서 면접을 볼지말지 고민을 잠깐 했었는데, 불행인지 다행인지 정규 세션이 격주로 있어서 나만 좀 노력한다면..

[모듈번들링] Module Bundler: Webpack 도입 적용 경험 #1,2

도입 배경 기존 프로젝트 포함 현재 진행하고 있는 프로젝트 또한 보통의 js 모듈들을 로딩받아 사용하고 있다. 학부생때부터 번들링을 경험해본적이 없어서 그냥 당연하게 사용해왔고 사내에서 또한 그랬다. 이번 프로젝트를 진행하면서 더욱이 번들링의 필요성을 느끼고 도입해 적용해 보았다. 번들링을 함으로써 기대할 수 있는 효과는 다음과 같다. 1. 로 이어지는 코드의 간결화 2. 네트워크 코스트의 이점 3. 코드 난독화, 압축 등 여러 기능 제공 일단 script로 이어지는 지저분한 코드들이 파일들 마다 이루어지던 서버요청을 한번에 요청/응답을 받으므로 네트워크 코스트가 줄어들었다. 또한 하나하나 요청을 함에 따라 발생하는 js 요청 순서도 굉장히 중요했는데, 이로 인해 발생하는 버그를 방지할 수 있었다. 예를..