All
35 posts
움직이는 미모티콘 GIF 생성하기

미모티콘 생성하기 미모티콘을 생성하시려면 먼저 아이폰 메시지에 들어가시면 메시지앱에 다음과 같은 옵션이 있습니다. 여기서 앱스토어 옆에 있는 버튼을 클릭하면 아래와 같은 미모티콘들이 나오는 걸 볼 수 있습니다. 미모티콘 리스트 맨 왼쪽에 위치한 플러스 버튼을 클릭하시면 아래와 같이 나만의 미모티콘을 커스터마이징 할 수 있는 페이지가 나오게 됩니다. 이 과정을 쭉 진행하고 나시면 아래와 같이 방금 생성한 미모티콘이 추가 되있는 것을 확인하실 수 있습니다. 움직이는 미모티콘 만들기 미모티콘을 만드셨다면 이제 움직이는 미모티콘을 만들어보도록 하겠습니다. 동일하게 메시지앱에서 이번에는 앱스토어 버튼 옆옆 버튼을 클릭합니다. 그리고 휴대폰을 응시하시면 내 얼굴의 움직임에 따라 미모티콘이 움직이는 것을 확인할 수 있습니다. 여기서 우측하단에 있는 녹화 버튼을 눌러서 움직임을 녹화합니다. 녹화를 완료하면 다음과 같은 화면이 나오게 되는데요. 여기서 우측 하단에 있는 전송 버튼를 눌러 메…

신입 개발자의 고민: 나는 잘하고 있는 것일까

🌪 나는 잘하고 있는 것일까 입사를 한지 어느덧 반년 가까이 흘러가고 있다. 회사에서 멋진 프로젝트에 참여하며 훌륭한 사람들과 함께 일을 하고 있게 되었고, 남아있던 마지막 학기도 저녁과 주말 시간을 활용해서 마무리하게 되었다. 겉보기에는 순탄하게 잘 진행되고 있는 것 같지만 본격적으로 시작된 직장인 생활은 녹록치 않았다. 특히 조급함과 불안감이 참 나를 힘들게 했다. 이 글을 쓰는 지금 나는 아직 회사의 수습 기간 중에 있다.(우리 회사의 수습기간은 6개월이다.) 외면하고 싶지만 수습이라는 타이틀이 주는 특유의 긴장감이 있다. 그 안에서 에 대한 질문을 던져보며 나를 돌아보게 되고, 내가 가지고 있는 열정을 일 속에 잘 녹여내기 위해 노력하게 된다. 천천히 팀에 적응하며 앞으로 나아가고 있는 중에 다른 곳에서 열심히 성장하고 있는 주변 친구들이나 멋지게 무언가를 해내고 있는 사람들을 보면서 자극과 동시에 조급함을 가지게 되었다. 그 와중에 서울에서 어떻게 살지에 대한 고민 속에 …

three.js로 회전하는 책 만들어 보기

💥 동기 회사에서 독서비를 지원해주는 덕에 코로나 한참 전부터 거리두기를 하던 책을 조금씩 읽기 시작했다. 최근에 책을 알아보러 알라딘에 들어가보니 책에 마우스를 올리면 책을 돌려볼 수 있도록 되어있었다. 요즘 three.js에 대해 호기심이 있었는데 이 기회에 three.js 경험해볼 겸 혹시 다른 사이드 프로젝트에서 써먹어볼 수 있지 않을까 하는 마음으로 알라딘의 책을 three.js로 클론해보게 되었다.(알라딘에서 책의 앞, 뒤, 옆면에 사용할 이미지 소스도 구할 수 있어서 너무 좋았다.😊) 클론을 하면서 이런저런 소스를 통해서 three.js를 조금은 이해해볼 수 있게 되었는데 혹시 three.js를 뭔가를 만들어보면서 공부해보고 싶으신 분들을 워해 과제 형식으로 내용을 정리 해보았다. 🎮 알라딘 책 클론해보기 🤔 과제 알라딘의 책 미리보기를 three.js를 통해 최대한 유사하게 구현해본다. 제한시간: 5시간(긴장감을 위해) 🧺 준비물 책의 앞, 뒤, 옆면에서 사용할 이…

2021 SCPC 예선 후기 및 문제 풀이

일을 하고 있지만 여전히 학생 신분을 벗어나진 않았기에 삼성전자에서 주관하는 대학생 프로그래밍 경진대회 SCPC(Samsung Collegiate Programming Cup)에 참여하게 되었다. 퇴근하기 직전까지 JS로 코드를 짜다가 C++을 사용하려 하니 ===과 const를 난발했지만, 예선은 시간적으로는 여유가 있기 때문에 구현 속도보다는 생각에 집중하며 진행할 수 있었다. 나는 총 3문제 반 정도를 풀었다. 다 풀지는 못했지만 그래도 나름 푼 문제들이 있기에 푼 방법에 대해서 오랜만에 문제 풀이를 공유를 해보려고 한다. 친구들 이 문제는 사람들이 주어지고 각 사람마다 친구의 번호를 가지고 있다. 이때 각 사람은 자신의 친구의 친구들과도 다 친구가 될 수 있다고 할 때 이런 친구들의 disjoint set의 개수를 구하는 문제이다. union find를 통해 set을 만들고 set의 개수를 출력하도록 했다. 이진수 이 문제 속에서 이진수 a에 문제에서 제공하는 룰을 거치게…

Gatsby 테마 적용 후 테마 최신 버전으로 업데이트하기

동기 많은 개츠비 스타터를 제공하는 저장소들은 지속적으로 새로운 기능들을 추가하고 버그를 해소하면서 발전시켜나가고 있는데요. 이런 과정 중에 블로그 테마를 받아 개인 블로그를 만드신 분들이라면 발전된 테마의 변동사항을 적용시키시고 싶으실 것 같습니다. 현재 제 블로그 테마는 피드백을 받으면서 틈틈히 발전시키고 있는데요! 이렇게 테마를 받아 사용하고 있는 블로그에 변동 사항을 적용 시킬 수 있는 방법을 공유드리고자 합니다. 방법 명령어는 간단합니다. 다음 명령어로 Gatsby Theme을 제공하는 저장소를 가리키는 upstream이라는 새 원격 저장소를 추가합니다. 그리고 나서 다음 명령어를 통해 변동사항을 현재 가져옵니다. 위의 명령어를 실행하고 나면 충돌(conflict)이 발생할 수도 있는데요! 충돌은 가져온 변동 사항의 내용과 현재 저장소의 변동 사항이 있는 지점이 같을 때 발생하게 됩니다. 이럴 때는 간단히 다음 과정을 진행하면 충돌을 해소할 수 있습니다. 어떤 파일에서 충…

Gatsby 테마로 GitHub Blog 만들기

제 블로그의 테마나 Gatsby의 다른 테마를 활용해서 Github Blog를 만들고 싶은 분들이 계실텐데요! 이런 분들에게 도움을 드리고자 이 글을 쓰게 되었습니다. 잘 안되는 부분이나 궁금한 점을 댓글로 남겨주면 확인해보고 답변 드리도록 하겠습니다! 1. Repository 생성하기 GitHub Blog를 만들려면 Github에 Repository를 생성해야 합니다. GitHub에 로그인 한 뒤에 우측 상단에 있는 New Repository 버튼을 클릭하면 repository 생성 페이지로 이동하게 됩니다. 이 때 Import a repository 버튼을 클릭합니다. 아래 페이지에 도달하시면 두 가지 정보를 넣어주셔야 하는데, Your old repository’s clone URL에는 사용하고자 하는 gatsby 테마가 있는 repository의 주소를 넣어주시면 됩니다. 제 블로그 테마를 쓰고 싶으신 분들은 여기에 https://github.com/zoomKoding/…

왜 개발 블로그를 하시나요?

🙋‍♂️ 내 소개 + 블로그 소개 나는 개발 4년차, 블로그 4년차인 개발자 줌코딩이다👋 개발을 시작하고 얼마지 않아 블로그를 운영하기 시작했고, 개발도 블로그도 꾸준히 운영하다보니 글의 양도 많아지고 글을 읽어주시는 분들의 수도 점차 늘어났다. (어느새 페이지뷰 수도 꽤 많이 늘었다🌝) 그렇게 블로그에 점점 애정이 생겨가면서 자연스럽게 내 블로그를 직접 개발하여 커스터마이징해보고 싶은 욕심이 생겼다. 그리고 올해 입사를 하게 되어 입사 전 마지막 프로젝트로 개발 블로그를 직접 디자인하고 개발해보게 되었다. 블로그를 이전하고 처음 쓰는 글로 내 블로그 경험을 나누면 좋겠다는 생각에 이 글을 쓰게 되었다. 블로그에 관심이 있다면 부담없이 편하게 읽어주면 좋겠다.🙏 🚀 블로그 시작 전공 첫학기에 개인 네이버 블로그에 과제를 포스팅해야하는 수업이 있었다. 당시 군복학으로 열정이 넘쳤던 나는 과제를 성실히 수행했고 학기가 흐르면서 자연스럽게 블로그에 차곡차곡 포스팅이 쌓여갔다. 그렇게 블…

쉽고 빠르게 나만의 개츠비(Gatsby) 블로그 만들기

👋 소개 블로그를 직접 운영하면서 조금씩 그려봤던 이상적인 개발 블로그 테마를 Gatsby를 통해 만들어보게 되었습니다. 이 테마가 블로그를 운영하고자 하시는 분들에게 자신의 이야기를 잘 담을 수 있는 공간이 되었으면 좋겠습니다.🙌 블로그 테마가 맘에 드셨다면 아래 과정을 통해 자신의 블로그를 만들어보시길 바랍니다! 혹시 만드시는 과정에서 궁금하신 점이나 어려움이 있으시다면 이슈를 통해 문의 남겨주세요! 스타는 블로그 테마를 지속적으로 발전시키는데 큰 힘이 됩니다!⭐️ 🚀 시작하기 Github Page나 Netlify 중 원하시는 배포 환경에 따라 다음 과정을 진행하시면 빠르게 블로그를 만드실 수 있습니다. 🦖 GitHub Page로 만들기 깃헙 페이지를 통해 블로그를 만드시다면 아래 글을 참고해주세요! Gatsby 테마로 GitHub Blog 만들기 🔧 Netlify로 만들기 아래 버튼을 활용하면 개인 계정에 를 사용하고 있는 Repository 생성과 Netlify에 배포를 동시…

2020년 마지막 회고(쉴 줄 모르는 자)

🤓 이 글의 목적 정말 오랜만에 글을 쓴다. 이 글을 통해 복학과 동시에 시작된 혼돈의 시간와 지금을 되돌아 보려 한다. 🤯 혼돈의 카오스 그리고 알게된 소중한 시간 🎓 복학, 조기 취업 그리고 취업계 Picky와 우아한테크캠프(우테캠)를 거치며 여러 훌륭한 사람들을 많이 만났다. 그리고 내가 꿈꾸는 개발자로서 미래의 이상적인 모습을 어렴풋이 그리게 되었다. 그 모습을 향해 적극적으로 달려보고 싶었지만, 아직 대학교라는 큰 산을 마무리하지 못한 상황이기에 나는 다시 포항으로 돌아가야만 했다. 학교는 배우는 기관이니 가서 열심히 배우고 돌아오겠다는 마음으로 마음을 다잡고 포항으로 돌아왔다. 하지만 아무래도 오랜만에 겪는 강의식 학습과 평가, 그리고 학교 커리큘럼에 대한 적응은 쉽지 않았고 마음을 다 잡지 못하고 계속 방황하게 되었다. 이 와중에 우테캠의 연장선으로 채용 면접 과정을 진행하게 되었는데 너무 감사하게도 기대하지 않았던 캠프로 주어진 채용 기회를 잡게 되었다. (많이 부족…

(개인프로젝트 개발 회고) 대학시간 개발기

🤓 이 글의 목적 입사하기 전 한달 조금 넘는 기간 동안 개인 프로젝트를 진행했다. 이 프로젝트는 찐 개인 프로젝트로 기획, 디자인, 개발, 홍보, 유지보수까지 다 직접 진행하여 현재 서비스하고 있다. 이 글을 통해 이 프로젝트의 과정과 경험을 나눠보고자 한다. 🧩 대학시간은..! 대학시간은 수강신청을 도와주는 웹사이트로, 1월 중순에 배포하여 유지보수를 진행하고 있다. 웹사이트 링크 깃헙레포 링크 감사하게도 한학기 학생 수의 절반이 넘는 1600명이 대학시간을 이용했다!🌝 먼저, 개발에 사용한 기술스택은 다음과 같다. 🎨 직접 기획하고 디자인하기 작년 우아한테크캠프에서 만났던 해민이와의 프로젝트 이후에 디자인에 대한 욕심이 생겼고 당시 해민이가 추천해줬던 디자인 레퍼런스 사이트인 Dribbble을 활용해서 웹 디자인에 도전하게 되었다. 💅 디자인 도전기 일단 내 눈을 높여 놓자는 마음으로 이 프로젝트를 기획하는 일주일 동안 Dribbble을 참고해서 눈을 높이는데 집중했다. …

2020 ACM ICPC 예선 참가 후기 및 문제 풀이 (5 Solved)

마지막 ICPC 참가 내년 10월에는 학교에 있을 가능성이 거의 0에 가깝기에 이제 진짜 마지막으로 ICPC에 참여하게 되었다. 작년에 Negend라는 팀명으로 함께 참가했던 진혀쿠님과 갇예준이 다 재학생인 덕분에 또다시 같은 팀으로 참가하게 되었다. 작년에 등록 문제를 제외하고 3문제를 풀었기에 등수보다는 4문제 푸는 것을 목표로 참가했다. 대회 후기 작년에는 대회 전날 엄청 긴장했었는데 오늘은 그런 것도 없었고 확실히 마음이 편했다. 하지만 막상 대회 시작하니 한국어 독해에 조금은 문제가 생겼었다 ㅋㅋ 진혁이랑 예준이랑 작년 ICPC 이후로 처음 같이 풀었는데 각자 자신의 방법으로 팀에 기여했다. 그리고 어찌어찌 문제를 풀어나가다 보니 총 5문제를 풀어낼 수 있었다! 등록 없이 5문제라니 기분 좋다~~ㅎㅎㅎㅎ 이 포스팅을 통해 간단하게 우리가 풀었던 5문제의 접근법과 코드를 공유하고자 한다. 문제 풀이 문제는 우리가 쉽게 접근했던 문제 순으로 나열했다. Problem I (P…

(우아한테크캠프 3기) 캠프를 마치며

💫 목적 캠프의 반환점을 돌며 포스팅을 썼으니 캠프의 마무리 회고를 잘 쓰고 캠프를 끝맺고 싶었지만, 복학과 함께 4학년 생활을 시작하게 되면서 끝을 보지 못했다😭 그렇게 방치했던 회고였지만 이제는 진짜로 우아한테크캠프의 마무리를 지어 보려 한다!ㅎㅎ 일단 수료증 사진 투척하고 간다~ㅋㅋ 우아한테크캠프의 마지막 2개의 프로젝트 일단 나는 매우매우 인복이 좋은 사람이다. 이전 프로젝트에서도 그랬지만 마지막 두개의 프로젝트를 함께할 팀원 명단을 보고 매우 안도했다. 그리고 실제로 프로젝트를 하며 많이 배우고 제법 완성도 있는 결과물도 만들어 내게 되었다. 우아한가계부(with 갇해민) 결과물 링크 프로젝트 링크 해민이(당시 해민님)은 정말 갇해민이었다. 이미 캠프에서 어너더 클래스로 많은 사람에게 은총을 베푸시는 분이셨다. 그리고 심지어 디자인까지 너무 잘하는 자칭타칭 만능 프론트엔드 디자이너였다. (해민이 블로그글) 이번 프로젝트 기간 동안에 나와 해민이는 개발자, 개발과 디자인이…

(우아한테크캠프 3기) 캠프의 반환점을 돌며

💫 목적 우아한테크캠프(우테캠)의 중간 즈음 온 시점에서 4주 동안 참여했던 캠프의 과정들에서 경험했던 것들과 배웠던 것들을 돌아보고자 한다. 🤓 🌪 시작 전 두려움 합격 통보를 받고 퇴사 회고를 쓰며 나름 결의를 다졌지만 막상 7월 1일이 다가오기 앞서서 고민하기 시작했다. 붙으면 완전 신나서 올 줄 알았는데 막상 가려니 어떻게 보면 **배부른 고민(?)**이 생겨났다.😭 ♘♞ 또 다른 경쟁의 시작? (#우아한형제들입사) 사실 우테캠를 시작하기 전에 마음이 굉장히 어려웠다. 온전히 배움에 집중하기 위해 우테캠에 참여하게 됐지만 결국 이 프로그램은 우아한 형제들 신입 채용이 포함되어 있는 과정이라 배움보다 잘하는 걸 보여줘야 하는 또다른 성과의 스트레스 속에 들어가는 게 아닌가 하는 두려움이 있었다. ❓반복적인 프로젝트 속 공부는 언제? (#픚플젝플젝프을젝) 3기는 교육 기간을 따로 가지지 않고 4번의 짧은 프로젝트로 진행하고 마무리 하는 식으로 진행된다. 지원 전 1기 일정표…

어렵지 않게 CSS 레이아웃 잡기

🤔 목적 css를 진짜 많이 얕봤다.. flutter를 이용해서 UI 구현해내는 일에 이제 익숙해졌기 때문에 스타일링 하는 것은 진짜 가볍게 여겼다가 큰코 다쳤다. 이번에 겸손한 마음으로 css 기초부터 반응형으로 레이아웃을 잡는 여러 좋은 방법들에 대해 조사해봤고 마지막으로 간단하게 github project를 따라하며 실습을 진행했다. 📗 참고 자료 poiemaweb 튜토리얼 flex box로 만들 수 있는 10가지 레이아웃(네이버 D2) 📦 Box Sizing 브라우저는 박스모델의 정보를 근거로 렌더링을 진행한다. 여기서 width와 height는 박스의 전체 사이즈를 말하는 것이 아니라 파란색 영역인 contents 영역의 너비와 높이만을 의미한다. 이 말인 즉슨 만일 width 100%를 주고 padding이나 border 값을 주면 이 되어 box가 예상했던 공간 밖으로 삐져나오게 된다. 이 상태에서 박스의 사이즈를 제대로 측정하려면 contents 너비 + 양쪽 pa…

Express 미들웨어 제대로 사용하기 + 로그인 구현하기

🧩 목적 express의 특징에 대해서는 Node 개발자라면 알아야 할 기본 지식 포스팅을 통해 정리했으니 이번에는 express generator로 생성되는 여러 미들웨어와 로그인 프로그램 구현에 사용된 미들웨어를 정리해보려고 한다. 📽️ 프로젝트 깃헙 레포지토리 [우아한테크캠프] 배민상회 회원가입/로그인 구현 프로젝트 🏭 Express 주요 미들웨어 pug Express는 런타임에 템플릿 엔진을 이용해서 여러 변수가 있는 static한 템플릿 파일에 실제 값을 넣어 html 파일을 생성한다. Pug는 가장 대표적인 템플릿엔진으로 템플릿이 있는 디렉토리를 views에 정해주고 view engine으로 pug로 설정해주면 사용할 수 있다. app.js에 view engine 종류와 template directory를 정해주고 다음과 같이 index.pug 를 만들어 주고 title에 대한 변수값을 전달받는 template을 설정하고 router.js 에서 res.render 함수를 …

Test Driven Development란?

🧪 TDD란 Test Driven Development : 말그대로 테스트가 이끌어 나가는 개발을 의미한다. 개발을 진행하기 앞서 테스트를 먼저 만들거 테스트를 통과하기 위한 것들을 구현한다. 📒 참고글 [Agile] TDD(테스트 주도 개발)란 [번역]쉬운 테스트 주도 개발과 단위 테스트를 위한 5단계 방법론 ❓ TDD는 언제 해야할까? 처음해보는 프로그램 주제일 때(나의 불확실성) 고객 요구조건이 바뀔 수 있는 프로젝트인 경우(외부적인 불확실성) 즉 불확실성이 높으면 테스트를 짠다. 결과가 명확하다면 TDD를 적용하지 않는게 좋다. 🤩 TDD를 잘하는 법 도구나 규칙에 집착하지 말아라(TDD는 어떤 도구가 아니다.) 상황에 맞게 적응적으로 진화적으로 접근하라 어떻게 하면 피드백을 더 많이 받을까를 계속해서 고민해보라 테스트 자체가 처음부터 완벽할 수 없다! 상황에 맞게 반복적으로 개선해나가자 🧠 테스트 코드를 잘 짜는 사고법 비밀번호 강도 측정이라는 예를 통해 과정을 살펴보자 …

Atomic Design Pattern이 뭐지?

🤔 목적 Atomic Design Pattern을 본격적으로 적용하기에 앞서 글을 적어보려고 한다. 이 패턴을 설명하는 여러 블로그글을 가볍게 훑어보고 글들 마다 있는 아래 그림을 보면서 작은 단위의 컴포넌트인 원자를 잘 만들어서 개발하는 느낌이구나하고 넘어갔다. 하지만 막상 구현하기 앞서 여러 글들을 진득하게 앉아서 읽어보니 중점적으로 신경써야하는 부분이 있었다. 그리고 가장 많이 생각 났던 것은 피키를 개발할때 디자이너님과 함께 적용시켜봤으면 너무 좋았을 것 같은 방식이었다. 우아한테크캠프의 프로젝트를 진행하면서 잘 배워서 언젠가 하게 될 또 다른 피키에 잘 적용시켜보자. 📒 참고 글 Brad Frost의 개념적인 내용에 Danilo Woznica의 글을 참고에서 개발에 필요한 구체적인 내용을 담아보았다. atomic design by Brad Frost Atomic Design and ReactJS by Danilo Woznica ⚛️ Atomic Design Pattern …

스타트업 팀과 앱을 떠나보내며 (퇴사 회고)

이 글의 목적 나의 스타트업 앱 개발 후기에 대한 글을 읽었다면 알겠지만 나는 패기롭게 도전한 스타트업에서 우연한(?) 기회로 홀로 피키라는 앱을 개발하고 배포하게 되었다. 이제는 6개월 간의 피키에서의 시간을 마무리하고 다음 여정을 준비하고 있다. 이 글을 통해 그동안 나는 어떤 것들을 배웠는지 내가 왜 이런 피키를 떠나게 됐는지를 정리하고 나눠보려고 한다. 배포 이후 피키는 그동안 나는 들어온 개발자들과 함께 최근까지 2달 동안 열심히 버그를 고치고, 새로운 기능을 추가하는 사이클을 반복하며 앱을 성장시켰다. 그동안 로그인 유저 수는 2000명을 넘겼고 앱에 대한 리뷰도 긍정적이었고 앱은 꾸준히 성장하고 있다. 그리고 하루는 갑작스런 필리핀 사람의 TicTok 홍보 덕에 필리핀 Free App 다운로드로 순위권 진출하기도 했다! 나는 코어 개발자!? 일단 개발의 과정과 코어와 상관없이 나는 팀의 였다. 구글 출신 CTO님과 함께 시작한 개발 과정이었지만 CTO님은 나에게 자…

Node 개발자라면 알아야 할 기본 지식(Javascript, Node, Express)

배경 면접에서 다음과 같은 질문을 받게 됐다. 노드를 이용해서 개발을 여러번 진행하셨는데, 자바스크립트와 노드의 특징에 대해 알고 있나요? ‘비동기’, ‘싱글스레드’, ‘이벤트루프’…? 머리속에 여러가지 개념들이 막 돌았다. 근데 막상 이 여렴풋이 아는 개념을 제대로 설명을 하려니 말문이 막혔다. 면접이 끝난 후에 면접을 세게 맞았지만 그렇다고 그냥 모르는 대로 있을 순 없다. 그래 이왕 이렇게 된 거 자바스크립트와 노드의 특징에 대해서 집고 넘어가자. Javascript란? 1. 자바스크립트는 스크립트 언어다. 자바스크립트는 웹 브라우저에서 동작하는 스크립트 언어이다. 한번에 모든 코드를 기계어로 번역하는 컴파일 언어와 달리 자바스크립트는 스크립트 언어로 한줄씩 코드를 번역하고 실행한다. 이런 스크립트 언어에서 오는 장점은 다음과 같다. 실행 속도는 컴파일 언어보다 느리지만 코드 수정시 바꾼 부분만 번역하고 실행한다.(컴파일 언어의 경우 컴파일을 새로 진행해야 한다.) 이벤트에 …

대학생 개발자의 스타트업 앱 개발 후기

목적 개발자를 꿈꾸는 사람이라면 실제 취업을 하기 전에 인턴을 할까 개발 캠프에 참여해야 하나 이런 저런 고민이 많아질 것이다. 개발자를 필요로 하는 곳이 많기 때문에 그만큼 기회도 많고 어떤 게 나에게 제일 좋은 기회일지 고민하고 있을지도 모르겠다. 이런 고민 속에서 혹시 에 관심이 있을 이들에게 개인적인 경험을 나누고자 한다. 결과적으로 나는 나는 대학교 3학년으로 작은 스타트업의 개발 인턴이다. 채용은 웹 프론트엔드 개발 인턴으로 채용되었지만 2달 만에 회사가 사업 방향을 바꾸게 되면서 얼떨결에 1인 개발자로 풀스택(?) 앱개발을 진행하게 되었다. 그리고 한달 반 동안 5명의 팀원들과 함께 시간을 갈아넣은 끝에 IOS 앱을 배포하였다.(안드로이드 배포는 앱이 좀 더 완성도가 있어지면 배포할 예정이다.) 지금은 배포 2주전에 합류한 프론트엔드 개발자와 함께 버그 픽스 버전 배포를 준비하고 있다. App Store Link 왜 인턴? 하필 스타트업? 네이버 핵데이에서 만난 친구…

나의 비효율적이지만 효율적인 알고리즘 공부법 (코딩테스트를 준비하는 이들에게)

목적 요즘은 IT 기업에 개발자로 취업하기 위해서 코딩테스트라는 관문을 통과해야하는 경우가 허다하다. 이러한 기업들의 요구 때문인지 자연스럽게 코딩테스트를 위한 알고리즘 공부를 중요시 하고 있고 심지어 코딩테스트를 대비하기 위한 알고리즘 학원과 300만원이 넘는 방학 집중 코스까지 생겨났다. 나도 알고리즘을 시작하려던 때에 어떻게 하면 알고리즘을 제대로 효율적으로 배울까를 고민하며 알고리즘 공부법에 대한 블로그글, 유투브 영상 등을 찾아다녔고 알고리즘학원에 직접 전화해보기도 했다. 나와 같은 고민을 하는 분들에게 내가 공부했던 비효율적이지만 효율적인 알고리즘 공부법을 소개하고자 한다. 알고리즘 공부법을 찾는 당신에게 공부할까를 정하는 문제는 선택이 필요하고 그에 따른 책임과 리스크가 따르기 때문에 고민이 되기 마련이다. 특히 취업을 위한 코딩테스트를 준비하고 있는 상황이라면 최대한 짧은 시간 내에 좋은 성과를 내야한다는 생각이 고민을 더 어렵게 만든다. 나는 알고리즘을 공부하는…

Codeforces Educational Round 77 후기 및 문제 풀이

후기 A부터 C번까지 수학 문제만 내버렸다.. 간신히 C번까지 풀긴 했는데 제출을 어마무지하게 많이 해버렸다… 제출 횟수가 아쉬운 시험이었다. C번에서 1시간 넘게 걸렸는데 D를 못본건 아쉽지만 어떻게든 C를 풀었다는 사실에 만족한다! A. Heating 문제 링크 이 문제는 이해하는데만 10분이 걸렸다.(영어가 안되는건지 그냥 이해가 너무 어려웠다.) 이 문제는 크게 두 경우로 나눌 수 있다. (10000, 10)처럼 설치할수 있는 라디에이터 개수가 섹션의 개수보다 많거나 같은 경우와 그렇지 않은 경우이다. (10000, 10)과 같은 경우에는 그냥 라디에이터를 각 위치에 1 만큼씩 배치하는게 이득이다. 하지만 나머지 경우에는 총 섹션을 라디에이터 개수로 나눈 값(m)을 구하고혹시 나머지가 n만큼 있다면 m값을 가지는 애들 중에 n만큼만 1을 더해준다. B. Obtain Two Zeroes 문제 링크 A번보다 B번이 훨씬 쉬운듯 했다. 먼저, a, b 두 수 중에 큰 값을 a에…

2019 NAVER CAMPUS HACKDAY WINTER 참가 후기

포스팅 네이버 핵데이는 대학생 개발자라면 꼭 참여해봐야할 해커톤 대회 중 하나로 여럿에게 추천을 받았다. 어찌하다 보니 참여하게 된 캠퍼스 핵데이 경험을 공유하고자 한다. 정신없이 참여하다보니 사진이 별로 없다ㅠㅠㅠ 후기가 궁금하다면 아래 있는 후기만 봐도 좋지만 전반적인 핵데이에 대해서 궁금하다면 이 포스팅을 쭉 읽어도 좋을 것 같다. 후기 일단 소문대로 밥은 너무 맛있고 숙소도 아침에 구경차 한번 가봤는데 진짜 쾌적했다. 멘토님은 진짜 친절했고 해뜨는 거 보면서 멘티들과 나눈 소소한 각자 이야기들도 너무 좋았다. 커넥트원에서 보는 야경도 진짜 너무 이뻤다. 기술적인 것도 물론이지만 무엇을 어떻게 해야하는지에 대해 다시 고민해보된 중요한 경험이었다. 지원 핵데이를 지원할 때는 제공된 프로젝트 리스트 중에 내가 참여하고 싶은 프로젝트를 선택해야 한다. 2019 핵데이 겨울 주제 리스트 나는 뭐를 할지 몰라 겨울 방학 때 한번 해봤던 웹 개발 프로젝트에 지원하게 되었다. 지원서에 …

Codeforces Round 600 (Div. 2) 후기 및 문제 풀이 (드디어 코포 블루)

후기 블루의 문턱에 가까워지고 있음을 느끼며 쳤던 시험.. 등록하는 걸 깜빡해서 추가 신청하고 허둥지둥 시험을 쳐버렸다. 결과는… 4문제를 풀어 3373점으로 역대 최고점…!!!! 블루 넘나 싶었는데 아니나 다를까 이번 휴학의 하나의 목표인 코드포스 블루를 찍어버렸다!!ㅎㅎㅎ 간단하게 문제 풀이를 해보도록 하겠다! A. Single Push 문제 링크 이 문제는 차이가 같은 구간이 1개 이하로 있다면 YES 아니면 NO를 출력하면 되는 문제이다. 마음이 급하다 보니 간단한 구현 문제인데도 허둥지둥했다. 다행히 10분만에 제출한 게 정답이 됐다. B. Silly Mistake 문제 링크 이 문제도 어떻게 보면 현재 오피스에 오늘 사람들이 한번만 들어왔다가 잘 나갔는지 확인해주면서 사무실에 아무도 없을 때 날짜를 바꿔버리면 되는 구현 문제이다. 근데 문제는 구현하면서 또 마음이 급하니까 실수가 많아진다는 것이다. 문제 제목대로 silly mistake가 많아진다. 다 돌았는데도 오…

(알고리즘) KMP 문자 검색 알고리즘 + 백준 1786번 찾기

참고 자료 본 글은 내가 정리하기 위해 따로 해놓은 것으로 나는 갓멍멍님의 글을 참고했다. KMP 알고리즘 KMP 알고리즘은 문자열(텍스트)에서 특정 문자열(패턴)을 효율적으로 찾아내기 위한 방법이다. 문자열(T)에서 패턴(P)를 찾아내는데 필요한 시간이 O(N*M)이라고 할때 이 알고리즘을 사용하면 O(N+M)만에 처리 가능하다! 문자열의 i번째부터 패턴 j번째와 비교할 때 다를 경우에 문자열의 i+1 과 패턴의 0번째 부터 비교를 하는 것이 아니라 이미 같았던 부분 중 패턴을 굳이 처음부터 하지 않아도 되는 경우는 j를 0이 아닌 pi[j]에서 진행하도록 한다. 쓸만한 정보 Pi(접두사와 접미사) 이 알고리즘에서 가장 중요한 부분이 바로 이 검색에 앞서 만들어둔 pi이다. pi[i]는 패턴의 길이가 i일때 접두사와 접미사가 같은 개수를 의미한다. 예를 들어 패턴을 “ABAABAB”라고 할 때 pi는 다음과 같이 표현 할 수 있다. 그 후 pi를 이용해서 문자열을 n만큼만 훑으…

(알고리즘) LCA 알고리즘 + C++ 예제코드

LCA란 LCA란 Lowest Common Ancestor의 약자로 트리 속 두 노드의 가장 가까운 조상 노드를 의미한다. 이것을 BFS나 DFS를 이용해 모든 경로를 훑어봄으로써 두 노드 사이의 같은 조상을 찾을 수도 있겠지만 이를 더욱 빠르게 하기 위해 만든 알고리즘이 LCA 알고리즘이다. LCA 알고리즘 방법은 간단하다. 1.트리를 만들고 각 노드의 조상들을 저장한다. 2.두 노드의 깊이를 같게 깊이가 깊은 노드를 조상으로 업데이트 시켜준다. 3.두 노드를 조상으로 올리면서 가장 가까운 공통조상을 찾아준다. 트리 만들기 알고리즘 트리를 만드는 방법은 두가지가 있다. 자세한 내용은 코드를 보면서 설명하고자 한다. BFS를 이용한 트리 만들기 위 코드에서 build_tree는 트리를 만들어주는 함수이다. 1번 노드를 기준으로 해서 트리를 뻗쳐나가고 그에 따라서 깊이인 level을 저장해주고 parent를 업데이트 시켜준다.(parent에 대한 내용은 좀있다 다시 설명하겠다.) D…

(알고리즘) 세그먼트 트리 알고리즘 + 예제 코드

세그먼트 트리란? 세그먼트 트리는 트리의 각 노드에 어레이 부분부분의 연산 결과를 미리 저장해놓으므로써 탐색 시간을 OlogN)으로 감소시켜준다. 주로 부분합, 부분최소, 최대값을 찾는데 사용된다. 세그먼트 트리 구조 세그먼트 트리의 리프 노드와 나머지 노드는 다음과 같은 의미를 가진다. 리프 노드 : 해당 어레이 값 다른 노드 : 오른쪽 자식과 왼쪽 자식을 연산한 결과 값 구조는 아래와 같은 구조를 가지게 된다. 사진 세그먼트 트리 만들기(합 구하기용) 만약 node를 root node로 주고 start, end를 어레이 전체 범위로 잡게 되면 리컬션을 통해 tree가 완성 된다. 세그먼트 트리 탐색(합 구하기용) 만약 어레이 원소가 10개라고 할 때 0-9까지 모든 원소의 합을 찾고 싶다고 하면 아래와 같이 루트 노드만 확인하면 될 것이다. 사진 하지만 만약에 2~4까지 범위의 합을 구하고 싶다고 하면 아래와 같이 두개의 원소를 확인하면 될 것이다. 사진 그래서 만약 노드가 담…

(알고리즘) 위상 정렬 Topological Sort + C++ 예제

위상 정렬(Topological Sort)이란? 여태까지 정렬 기준이 였다면 **위상정렬의 정렬 기준은 ‘위상’**이다. 여기서 위상이란 incoming edge의 수를 의미한다. 위상 정렬은 Directed Acyclic Graph(DAG)에서만 가능한 정렬방법이다. DAG란 각 edge가 방향을 가지고 있는데 cycle이 발생하지 않는 경우를 말한다. Cycle이 있으면 무한 루프를 발생시킬 것이다!! 보통 일의 순서를 정하는 알고리즘에서 많이 사용된다. Topological Sorting 알고리즘 알고리즘의 과정은 다음과 같다. 각 vertex의 위상(incoming edge의 수)를 저장한다. 정점(위상이 0인 노드)을 다 큐에 넣어준다. 큐에서 노드를 하나씩 꺼내서 위상정렬에 넣어준다. 꺼낸 노드와 연결된 노드의 위상을 하나씩 낮춰주고 엣지를 없애준다. 위상이 0인 노드를 큐에 다시 넣어준다. 3번부터 5번을 큐가 빌 때까지 반복한다. 예시 다음과 같은 그래프에 대해 위상…

(알고리즘) Double Linked List C++ 구현 알고리즘

링크드 리스트 링크드 리스트는 나의 오랜 숙적이다. 항상 최후의 방법으로 미뤄놓는 방법인데 알고리즘을 하면서 링크드 리스트를 사용하지 않고는 풀기 어려운 문제가 나와서 하는 수 없이 정리를 해본다ㅎㅎ 더블 링크드 리스트란? 보통 링크드 리스트라고 하면 다음 원소가 무엇인지(next)를 포인터로 연결해놓게 된다. 하지만 더블 링크드 리스트는 이전 원소의 값도 알려주는(prev) 포인터가 존재한다. 더블 링크드 리스트는 지금 element 이후와 이전의 원소 정보가 모두 필요할 때 사용한다. ex) 원소 정방향, 역방향으로 출력하기 참고 더블 링크드 리스트 참고 사이트 여기서 tail이 움직일 수 있게 코드를 수정했다. Node 구조체 Node를 추가할 때는 ptr 정보를 같이 받아와서 ptr 바로 뒤에다가 새로 생성된 노드를 연결시켜준다. Double Linked List 구조체 더블 링크드 리스트에서 더미를 head와 tail에 놔둬서 링크드 리스트가 범위를 초과하지 않을 수 있게…

(알고리즘) Minimum Spanning Tree MST 알고리즘 - Kruskal 알고리즘

Minimum Spanning Tree란? Minimum Spanning Tree란 Undirected Graph 내에서 Cycle이 발생하지 않는 한도 내에서 모든 vertex가 연결되있는 tree 중 weight의 합이 가장 작은 tree를 의미한다. 그렇기 때문에 무조건 Edge의 갯수는 Vertex 갯수 - 1 개이다. 어떻게 찾지? 일단 edge의 set인 A를 만들자 처음에 A가 빈 상태에서 하나씩 넣은 거다. 여기서 중요한 것은 safe edge만 넣는다. Safe Edge란 A가 MST의 subset이라면 A를 추가해도 MST의 subset을 유지할 때의 Edge를 의미한다. Kruskal 알고리즘의 기본 개념 일단 Edge를 다 weight가 작은 순으로 나열한다. A라는 숲을 유지한 상태에서 safe edge를 찾아서 추가해준다. 즉 이 알고리즘은 GREEDDDY이다!!! Kruskal 알고리즘 스텝 edge을 weight 작은 순으로 sorting한다. 가장 작…

(알고리즘) Union Find 알고리즘 강화버전 - Rank, Path Compression 사용

기존 Rank 활용 방법 이전 포스트에서 그림으로 표현했듯이, union과 find를 계속 진행하다보면 worst case에서는 그림과 같이 나오게 된다. 사진 그림과 같이 작은 트리가 큰 트리에 붙는 형식으로 이는 Linked List의 형태를 띄게 된다. 이것의 시간 복잡도는 O(log n) 만큼 걸리게 된다. 이를 union by rank라고 한다. Path Compression 활용 방법 다른 방법이 또 있다면 path compression이다. 이 방법은 find()가 호출될 때 tree를 납짝하게 만드는 것이다. find()가 x에 대해서 호출되면 x로부터 root node를 찾기 시작한다. 찾아서 root node를 반환시켜준다. 그리고 root node에 이어붙이기 때문에 Rank 활용 때처럼 중간에 있는 친구들을 다 search하지 않아도 된다는 장점이 있다. Rank와 Path Compression을 활용하면 기존의 방법보다 훨씬 효율적인 코드를 짤 수 있다! R…

(알고리즘) Disjoint Set 구조와 Union Find 알고리즘

Disjoint-set 구조와 Union-Find 알고리즘이란? Disjoint set 이란 연결이 끊어진 원소들의 집합을 의미 한다. 이 데이터 구조를 위해서 Union-Find 알고리즘이 2가지 주요한 operation을 제공한다. Find : 어떤 원소가 어느 집합에 있는지 찾아준다. 주로 두개의 element가 같은 집합에 있는지 확인하는데 사용된다. Union : 2개의 집합을 하나의 집합으로 합쳐준다. 이 알고리즘은 Cycle을 찾는데 아주 용이하다. Union-Find의 활용 코드 (사이클 찾기) 사진 위와 같은 그래프 일 때 사이클 여부를 Union-find를 이용해서 확인해보자! 주석을 확인하면 훨씬 이해가 빠를 것이다. 헷갈림 주의!! union을 하게 되면 같은 집합에 있는 원소의 child node가 같아지게 된다. 밑에 그림을 참고하자:) 사진 느낀점 내가 bfs로 짰을 때보다 훨씬 효율적인지는 모르겠지만 일단 굉장히 직관적이다. 두개의 집합을 합치는 방법도…

(알고리즘) Shortest Path 찾기 - Bellman-Ford, DAG, Dijkstara 알고리즘

Shortest Path 최단경로를 찾는 문제의 특징은 다음과 같다. Input : directed graph G = (V, E) with weight function w : E -> R S에서 D까지의 minimum weight을 가지는 path를 찾는 문제이다. Weight w(p) of path p : p로 가는 길에 있는 모든 edge weight의 합이다. u부터 v 까지의 shortest-path weight은 다음으로 표현한다 S(u,v) = if path가 있으면 u부터 v까지 오는 path 중의 min . 없으면 무한대 Variants 최단거리를 찾는 문제는 크게 4종류가 있다. Single-source shortest path : 하나의 S에서 모든 vertex까지 최단거리 Single-destinations : 모든 vertex에서 하나의 D까지의 최단거리 Single-pair : 하나의 S로 부터 모든 하나의 D까지의 최단거리 All-pair : 모든 vert…

(알고리즘) Knapsack 알고리즘 2 Branch and Bound, Heap + 코드

Branch and Bound? Branch(가지)와 Bound(범위)를 이용한 방법으로 최적의 해를 찾기 위해 어느 정도의 범위를 정해두고 범위를 벗어난 값들을 가지치기 하는 방법을 의미한다. BFS를 이용해 뎁스를 늘려가며 최선의 값을 찾는다고 했을 때 모든 리프까지 가지 않고 어느정도의 바운더리를 정하고 바운더리 밖에 있는 친구들을 제하는 방법을 의미한다. Knapsack에 어떻게 적용해? 각 원소를 넣는 경우와 안 넣는 경우로 두 경우로 가지(Branch)를 쳐가는데 현재 원소의 최대치로 넣었을 때의 경우(bound)가 현재 찾은 최대 가치(max_benefit)을 넘지 못하면 더 이상 볼 가치가 없는 친구이므로 더이상 뻗지 않는다.(queue에서 넣지 않는다.) 여기서 queue를 priority queue로 하면 맥스 근처 값을 더 빨리 찾을 수 있기 때문에 가치가 없는 친구들을 더 많이 걸러낼 수 있다! 가치가 없다고 여기는 경우는 두가지이다. bound <= max_…

(알고리즘) Knapsack 알고리즘 Greedy, DP + 코드

Knapsack 문제란? 배낭에 담을 수 있는 무게의 최댓값이 정해져 있고, 일정 가치와 무게가 있는 짐들을 배낭에 넣을 때, 가치의 합이 최대가 되도록 짐을 고르는 방법을 찾는 문제를 말한다. 크게 두가지 종류의 문제로 나뉘는데 물건을 쪼갤 수 있다면 Fractional Knapsack Problem 물건을 쪼갤 수 없다면 0-1 Knapsack Problem 이라고 한다. 모든 문제에서 일단 item이라는 struct를 사용했다. 쪼갤 수 있다면? (Greedy) 만일 쪼갤 수 있다면 말그대로 가치( value/weight )가 제일 높은 애들을 최대한 담고 공간이 부족하다면 하나를 쪼개서 부분적으로 넣고 끝내면 된다. 즉, 제일 좋은 것을 취해가는 Greedy Algorithm을 이용하면 된다. Greedy Algorithm 활용 코드 0-1 Knapsack Problem DP 되나? Subproblem으로 문제를 쪼개서 부분의 답이 전체의 답이 되는지를 먼저 확인해보자 만일…