코딩배우는 학생🧀

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

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

[WEB웹자동화] Auto_portal 개발기

회사에서 자주 사용하는 포탈 목록 및 그에 따른 자동로그인을 구현해보자 매일 자주 사용하는 포털을 유지하면 좋겠지만 컴퓨터가 꺼지는 경우 다시 저번에 보던 환경을 구축하는데 귀찮아서 자주 사용하거나 이전 기록을 저장했으면 좋겠다는 생각을 하게 되었다. C#, Windows Form 형식으로 구현했다. 🎨기능 자주 사용하는 chrome url을 저장하고 하나의 윈도우에 다중 탭을 생성해 포탈을 연다. 자동으로 process를 생성해주고 프로그램이 종료될 시에 이 프로그램을 통해 생성된 process 모두를 kill하도록 하였다. 저장된 모든 데이터는 "C:/Users/autoLogin/key.txt" 경로에 관리자 권한을 가지고 저장된다. URL외에 ID나 PW가 존재한다면 해당 웹 사이트에 로그인 까지 ..

[SMS 커밋알리미 개발기]ASP.NET C#

매일매일 개발하구 매일매일 재미있게 매일매일 커밋하쟝 학부생때는 깃헙을 잠깐잠깐 쓰다가 본격적으로 사용한지는 1년 조금 넘었다. 매일매일 공부하면서 1일 1커밋 이상은 꼭 하려고 노력하고 있다. 문득 오늘의 커밋을 체크하고 알려주는 "커밋알리미"가 있으면 좋겠다고 생각을 했고 바로 실행에 옮겼다. 따로 설정을 하지 않아도 동작해야하므로 UI는 제거하고 윈도우 프로그램으로 제작하기로 했다. C#으로 WindowService로 등록을 해서 컴퓨터가 부팅만 되있다면 자동으로 저녁 자정 전 1시간 전에 사용자의 커밋 여부를 판단하고 내 SMS로 문자를 전송해주도록 설계해 보았다. docs.github.com/en/rest GitHub REST API - GitHub Docs You can use the GitH..

서버로 부터 받은 이미지 리소스의 로딩 시 속도 저하 개선 경험

저번에 MBC와 함께 모바일 호출 API를 개발하면서 이미지 리소스의 로딩 속도를 이미지 리사이징으로 어느정도 해결했던 경험이 있다. 어느정도 구현이 끝나고 모바일 이외 웹에서는 이 부분을 어떻게 해결했는지 궁금해졌다. 역시나 웹에서도 서버에서 이미지를 받아오는 과정에서 눈에 띄게 속도 저하가 나타났다. 역시 방송사라 그런가 엄청난 고화질 사진들의 향연으로... 부득이하게 이를 개선해야 겠다 마음먹게 되었다. 언제 만들어졌는지는 모르지만 도저히 보기가 힘든.. 그랬다.. 🧵섬네일 추가 주니어 개발자로써 사실 더 나은 방법이 많긴할텐데.. 시간의 제한으로 일단 당장 생각나는 섬네일 로직을 추가시켜서 이미지 리스트에서는 원본보다 작은 섬네일을 보여주고 원할때만 원본이미지를 보여주는 형태로 구현을 할까한다. ..

[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)하는 형태로 동작한다...

오픈API활용 주소

😃오픈 API 활용 주소들 공공데이터포털 네이버 개발자 API 카카오 개발자 API Google Developers facebook for developers API 스토어

클라이언트에서 잠재적 위험이 있는 Request.Form 값을 발견했습니다

가끔 웹개발 중 DB에 HTML요소가 포함된 값을 전달할 때 발생하는 오류이다. querystring에 값을 포함해서 나는 발생했는데 이는 프로그램 자체적으로 해킹에 대한 방지요소로 포함된 부분이다. 클라이언트에서 HTML 스크립트가 포함된 내용을 전송 받을 경우 XSS(Cross-site scripting)와 같이 보안적인 이슈가 발생하기 때문에 .NET 기반 웹 기술(ASP.NET, MVC, Razor)의 기본설정에서는 허용을 하고 있지 않는다. 하지만 특히 에디터를 사용하는 경우와 같이 CONTENTS 자체에 HTML요소가 포함된 경우에는 부득이하게 사용을 해야하는데 이때는 따른 처리없이 간단한 조작으로 허용할 수 있다. 일단 web.config 에서 validatieRequest ='false'로..

[.NET] 비동기 ZIP File Download API (서버 올리기)

저번 게시글에서 작성한 에 대해 클라에서 다운로드 받는 로직을 구현했다. 매개변수 값을 토대로 서버에서 파일을 찾아 다운로드 받으면 되는 방식. 동기식은 await, async를 제거하면 끝. 많이 리서치 한다고 해도 아직 실무에 직접 적용해 성능 비교가 어려운 것 같다. 1. 코드 [HttpGet] [Route("api/zipDownload")] public async Task SetFileZipDownLoad(string fileName) { //서버 zip파일 찾기 string zipFileURL = HttpContext.Current.Server.MapPath("/zip/" + fileName + ".zip"); WebClient req = new WebClient(); HttpResponse r..

[.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] 가장 큰 수[Java]

문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 return return [6, 10, 2..

[NWERC 2006] Printer Queue [Java]

The only printer in the computer science students' union is experiencing an extremely heavy workload. Sometimes there are a hundred jobs in the printer queue and you may have to wait for hours to get a single page of output. Because some jobs are more important than others, the Hacker General has invented and implemented a simple priority system for the print job queue. Now, each job is assigned..

[Programmers] 실패율(2019 KAKAO BLIND RECRUITMENT)[Java]

문제 설명 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가 매개변..

[Programmers]문자열 내 마음대로 정렬하기 [Java]

문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 [sun, bed, car]이고 n이 1이면 각 단어의 인덱스 1의 문자 u, e, a로 strings를 정렬합니다. 제한 조건 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 입출력 예 strings n return [sun, bed, car] 1 [car..

[Programmers] 짝지어 제거하기(2017 팁스타운)[Java]

문제 설명 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면 1을, 아닐 경우 0을 리턴해주면 됩니다. 예를 들어, 문자열 S = baabaa 라면 b aa baa → bb aa → aa → 의 순서로 문자열을 모두 제거할 수 있으므로 1을 반환합니다. 제한사항 문자열의 길이 : 1,000,000이하의 자연수 문자열은 모두 소문자로 이루어져 있습니다. ..

[Programmers] 폰켓몬(찾아라 프로그래밍 마에스터)[Java]

문제설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫 ..