코딩배우는 학생

2022 디프만 11기 FE 활동 회고

약 반년간 진행된 디프만 활동이 파이널 발표를 마침표로 끝이 났다. 기존 DDD, 오픈소스 컨트리뷰톤 활동을 통해서 스스로 채찍질할 수 있기도 하고 개발자 네트워킹 및 협업을 통해서 1년 반동안 많은 성장을 이뤘다고 생각한다. 이후 이직을 고민하고, BE에서 FE로 전향하게 되면서 현재 현업에서 쌓을 수 없는 리액트 프로젝트 경험이라던가 퍼블리셔가 맡는 파이를 가져오고 싶어서 디프만 11기 FE로 약 반년간 프로젝트를 진행하게 되었다. 면접 그리고 프로젝트 감사하게도 높은 경쟁률을 뚫고 11기로 활동할 수 있게 되었다.(한 10: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의 원소는 큐가 수행할 연산을 나타냅니다. 원소는 “명령어 데이터” 형식으로 주어집니다.- 최댓값/최솟값을 삭제하는 연산에서 최댓값/최솟값이 둘 이상인 경우, 하나만 삭제합..

[BOJ/1987번] 알파벳

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

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

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

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

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

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

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

[BOJ/16929번] Two Dots (java) : 깊이우선탐색

문제 Two Dots는 Playdots, Inc.에서 만든 게임이다. 게임의 기초 단계는 크기가 N×M인 게임판 위에서 진행된다. 각각의 칸은 색이 칠해진 공이 하나씩 있다. 이 게임의 핵심은 같은 색으로 이루어진 사이클을 찾는 것이다. 다음은 위의 게임판에서 만들 수 있는 사이클의 예시이다. 점 k개 d1, d2, ..., dk로 이루어진 사이클의 정의는 아래와 같다. 모든 k개의 점은 서로 다르다. k는 4보다 크거나 같다. 모든 점의 색은 같다. 모든 1 ≤ i ≤ k-1에 대해서, di와 di+1은 인접하다. 또, dk와 d1도 인접해야 한다. 두 점이 인접하다는 것은 각각의 점이 들어있는 칸이 변을 공유한다는 의미이다. 게임판의 상태가 주어졌을 때, 사이클이 존재하는지 아닌지 구해보자. Inpu..

PriorityQueue : 우선순위 큐(Java)

우선순위 큐(Priority Queue) BOJ 11656 기본문제를 보다가 우선순위 큐를 적용해서 풀어보았다. 쉽게도 풀 수 있지만, 요즘에는 최대한 시간복잡도를 줄이면서 풀도록 노력하고 있다. N의 최댓값이 1000이고 O(N2)이라 시간초과가 나지 않을거 같긴한데 PriorityQueue로 O(N)으로 순서를 직접적으로 정렬하면서 진행한다면 훨씬 수월할 거라 판단. 구현을 시작했다. 접미사 배열은 문자열 S의 모든 접미사를 사전순으로 정렬해 놓은 배열이다. baekjoon의 접미사는 baekjoon, aekjoon, ekjoon, kjoon, joon, oon, on, n 으로 총 8가지가 있고, 이를 사전순으로 정렬하면, aekjoon, baekjoon, ekjoon, joon, kjoon, n,..

[그래프 위상정렬] Topological Sort : Java

그래프 위상정렬: Topological Sort BFS&DFS를 계속 공부하다가 위상정렬도 요즘 핫(?)하다길래 따로 공부하는 중이다. 위상정렬은 그래프 정렬의 일종인데 이것이 가능하기 위해선 순환성을 가져서는 안된다. 즉 순환없는 방향성을 가진 계층적 정렬이 가능해야 위상정렬이 가능하다. 조건식으로 나타내면 다음과 같다. 1. 1 -> 2 -> 3 -> 4 와 같은 관계가 성립되어야 한다. 2. A -> B | B

Vue.js로 점진적 도입 경험 공유

도입 배경 부족 하디 부족한 주니어 개발자 코딩 배우는 학생입니다. 기존 jQuery 레거시 기반을 Vue.js를 프로젝트에 적용한 경험 및 후기 공유입니다...! 기존의 회사 프론트 스택은 CSR(ClientSide Rendering)인 경우 Jquery, Jquery Template 기반으로 되어있었고, 어드민과 같은 사이트의 경우 SSR(Serverside Rendering) 기반(JSP, Razor 등)으로 구성되어 있었습니다. 새롭게 프로젝트를 시작하게 되면서 기존 스택을 고수하지 않은 이유에는 3가지가 있습니다. 1. 코드 관리의 어려움 2. 데이터 바인딩 및 화면 렌더링 시 성능 문제 3. 코드의 중복(레거시의 문제점), 반응형 지원 기술 조사 및 안정성 검토 후 두 달간 제가 맡은 프로젝트..

[Recursion]재귀: 미로찾기 C#

임의의 시작점에서 정해진 목적지의 출구(Exit)까지 PathWay가 있는지 도출할 수 있을까? 최근 알고리즘 공부를 다시 시작하면서 재귀함수적 사고에 익숙해지려고 연습중에 있다. 이런 이론적인 측면도 공부를 해야 좀 더 다양한 사고가 가능한 것 같다. 실무에 쓰이기는 어려움이 있을 것 같은데 일단 구현력을 갖춘 뒤 선택적 사용을 할 수 있는 것과 전혀 고려 대상이 아닌 것은 확실히 다른 것 같다. 미로찾기는 시작점에서 도착점까지 갈 수 있는지 그리고 그 Pathway는 어떻게 되는지 도출하는 문제이다. 재귀에서 너무 유명한 문제라 풀이 방식이 많지만 최근 회사에서 주로 사용하는 C#으로 풀어보았다. 🎉Recursion 재귀 임의의 시작점에서 (x,y) 출발을 한다 가정했을 때, 임의의 시작점이 Wall..

[Recursion:Backtracking, 깊이우선 탐색 예제] N-Queen C#

N * N 체스판에 최대한 많은 Queen을 놓고 싶다. 다만, 서로를 공격하지 않게 올려놓고 싶다. 총 몇 가지 경우의 수가 있을까? 🎡 BackTracking 백트래킹의 대표적인 문제로 N-Queen으로 공부해보았다. N-Queen이란 N*N의 체스판에서 서로를 잡아먹지 않는 선에서 최대한 많은 수의 퀸을 두는 문제이다. 한 행에는 같은 선상에는 퀸을 1개만 배치할 수 있으므로 N* N배열에서 최대 개수는 N개가 될 것이다. 이것의 위치를 한정조건 없이 탐색할 경우 엄청나게 많은 조합의 경우가 탄생한다(O(N^N)). 첫 행에 체스말을 배치시켰을 경우 그 다음행에서 배치말이 유효한 칸이 있는지(둘 수 있는 칸인지) 검사 한뒤 없다면 이를 배제하고 그 전 행으로 되돌아간 뒤 , 다음 노드를 검사한다. ..

[ASP .NET C#] 개인정보 암호화 적용 사례

내가 맡고 있는 서비스의 개인정보가 DB에 그대로 노출되는 이슈가 있어(오래된 서비스이다), 회원 패스워드와 휴대폰 번호, 이메일에 대해 암호화를 진행했다. 비밀번호는 SHA-1 방식, 휴대폰 번호와 이메일은 AES를 채택했다(이유는 본문에). 🔊해시(HASH) / 암호화(Encryption) 해쉬 해시는 동일한 입력값을 받아 동일한 출력값을 보장한다. 또한 특징으로 조금만 달라져도 해쉬된 값은 크게 달라지며(눈사태효과) 복호화가 되지 않는다. 예를들어 입력값 A에 의해 B가 출력되었다면, 출력된 B값만 주어졌을 때는 입력값 A를 계산적으로 찾는 것이 불가능하다. 그래서 이와 관련된 보안이슈도 무차별대입공격에 의해 이루어지며 최근 SHA-1의 충돌 이슈가 존재하기도 한다. 해쉬의 대표적인 예로 MD5,S..

우리가 Base64를 사용하는 이유

7L2U65Sp67Cw7Jqw64qUIO2VmeyDnQ== '코딩배우는 학생'의 Base64로 인코딩한 문자열의 예시이다. Base64 는 Binary 데이터를 아스키 코드 일부와 일대일로 매칭되는 문자열로 단순 치환되는 인코딩 방식이다. Base64는 6bit당 2bit의 OverHead의 발생으로 기존 데이터보다 30%이상 길어지게 되며 여기에 Encoding, Decoding의 로직까지 추가되므로 성능에도 영향을 끼칠 수 있다. 이러한 단점에도 Base64를 사용하는 이유는 무엇일까. 📮Base64를 사용하는 이유 Base64를 사용하는 가장 큰 이유는 Binary 데이터를 텍스트 기반 규격으로 다룰 수 있기 때문이다. JSON과 같은 문자열 기반 데이터 안에 이미지 파일등을 Web에서 필요로 할때..

Web Protocol 정리

🎮HTTP Hyper Text Transfer Protocol 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다. 웹 서버에서 통신하기 위해 사용하는 하나의 규칙으로써 4가지 요청형식이 존재한다. GET : 문서 요청의 역할. 서버가 클라이언트에 상태 정보와 복제된 문서를 보냄으로써 응답한다. - 조회 HEAD : 상태 정보 요청. GET과 동일한 형태의 응답. 문서 복제X POST : 데이터를 서버로 송신. 서버는 해당 데이터를 아이템에 붙임 - 생성 PUT : 데이터를 서버로 송신. 서버가 특정 아이템을 대체함 - 수정 HTTP 동작 클라이언트에서 브라우저를 통해 서비스를 요청(request)을 하면 서버에서는 해당 요청사항에 맞는 결과를 찾아 사용자에게 응답(response)하는 형태로 동작한다...

[.NET] 비동기 다중파일 ZIP File 생성 및 저장 API (서버 올리기)

최근 프로젝트를 진행하며 ZIP 파일을 생성해서 서버올릴 일이 있어 이것저것 구글링 하던도중 MemoryStream, ZipArchive, FileStream 을 통해 구성하는 법으로 구현해 보았다. 기존의 서버에 올라가있는 여러개의 이미지 파일을 묶어 서버로 zip file로 생성하고 저장 해보자. 1. 코드 [HttpGet] [Route("api/zipUpload")] public async Task SetFileZip() { //서버에 폴더있는지 조회, 없으면 생성 DirectoryInfo dir = new DirectoryInfo(HttpContext.Current.Server.MapPath("/data/zip/")); if (!dir.Exists) { dir.Create(); } List fil..

[Programmers] 기능개발 [Java]

문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자..

[Programmers]영어 끝말잇기(Summer/Winter Coding(~2018))[Java]

문제설명 1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다. 앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다. 이전에 등장했던 단어는 사용할 수 없습니다. 한 글자인 단어는 인정되지 않습니다. 다음은 3명이 끝말잇기를 하는 상황을 나타냅니다. tank → kick → know → wheel → land → dream → mother → robot → tank 위 끝말잇기는 다음과 같이 진행됩니다. 1번 사람이 자신의 첫 번째 차례에 tank를 말합니다. 2번 사람이 자신의 첫 번째 차례에 k..