개발 36

Github Action으로 CI/CD workflow 추가하기 | Azure로 리액트 앱 배포하기

GitHub Action는 레파지토리 내에서 workflow를 자동화 및 실행할 수 있도록 해주는 기능이다. 이 글에서는 그 중 Github Action을 사용해 CI/CD workflow를 추가하는 방법을 정리해보겠다. CI workflow 추가하기 예제로 리액트 앱을 사용할 것이므로 creat-react-app을 사용해서 간단한 리액트 앱을 생성하고 그 프로젝트를 Github 저장소에 push하자. 리모트 레파지토리에서 Actions를 클릭하면 저장소에 맞게 Action을 추천해준다. 이 중 Node.js를 이용해서 예제를 진행해보자. Configure를 클릭해준다. Node.js CI의 YAML 파일 예제를 확인할 수 있다. 오른쪽의 Documentation을 누르면 workflow에 대한 간단한 ..

[자료구조] 트리 (Tree) - 이진 트리 순회 (Binary Tree Traversal) | 트라이 (Trie, Prefix Trees)

이전글 [자료구조] 트리 (Tree) - 트리의 정의와 종류 (이진트리 등) 트리 (Tree)란? 트리는 노드로 구성된 자료구조이다. - 트리는 루트노드(root node)를 가진다. - 루트노드는 0개 이상의 자식노드(child nodes)를 가진다. - 각 자식노드 또한 0개 이상의 자식노드를 가진 jwdevv.tistory.com 이진 트리 순회방법에는 세가지가 있다. in-order, pre-oder, post-order 이다. In-Order Traversal (중위순회) in-order traversal은 left -> current -> right 노드 순서로 순회하는 방법이다. def inOrderTraversal(node): if node != None: inOrderTraversal(n..

[알고리즘, Python] Min Stack 구현하기

오늘은 Min Stack을 구현하는 문제를 풀어보자. 문제는 아래 leetcode에서 확인할 수 있다. https://leetcode.com/problems/min-stack/ Min Stack - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com Min Stack이란 push, pop, top, getMin function을 가지는 스택이다. 여기서 전제 조건은 모든 function은 시간 복잡도가 O(1)이어야 한다. pop과 top은 기존 스택처럼 구현하면 된..

[Refactoring JavaScript] 테스트 2 - TDD, Characterization Tests

앞선 글에서 리팩토링을 이야기할 때 테스트를 빼놓을 수 없다는 내용을 짚고 넘어갔다. [Refactoring JavaScript] 노트 1 - 리팩토링에 대해 리팩토링이라는 단어는 잘못 사용되기 쉽다. 그래서 간단하게 짚고 넘어가고자한다. 리팩토링은 interface 혹은 behavior를 유지하되 코드 구현이 달라지는 것을 의미한다. interface나 behavior이 바뀐다 jwdevv.tistory.com [Refactoring JavaScript] 테스트 코드 1 - 왜 테스트 코드를 작성해야 하나, 테스트 방법 4년차 개발자인 나의 주요 관심사는 "어떻게 더 좋은 코드를 만들 것인가"이다. 그동안 여러 책과 구글의 도움을 받아 리팩터링을 해왔지만, 복습 및 내가 뭘 모르고 있는지 배우기 위해 ..

[알고리즘, Python] 연결 리스트에서 중간 노드 삭제하기

오늘은 Linked List 문제를 풀어보았다. 단방향 연결 리스트의 중간에 있는 노드 하나가 주어지면 그 노드를 삭제하는 문제다. 이 때 head에는 접근할 수 없고, 각 노드는 각기 다른 정수를 value로 가진다. 여기서 중간 노드라는 이야기는 정확하게 정중앙에 있는 노드라는 뜻이 아니라 맨 첫번째나 맨 끝이 아닌 노드, 즉 그 중간에 있는 노드들 중 하나라는 뜻이다. 문제는 여기서 확인할 수 있다. https://leetcode.com/problems/delete-node-in-a-linked-list/ Delete Node in a Linked List - LeetCode Level up your coding skills and quickly land a job. This is the best ..

[Refactoring JavaScript] 노트 1 - 리팩토링에 대해

리팩토링이라는 단어는 잘못 사용되기 쉽다. 그래서 간단하게 짚고 넘어가고자한다. 리팩토링은 interface 혹은 behavior를 유지하되 코드 구현이 달라지는 것을 의미한다. interface나 behavior이 바뀐다면 그건 앞으로 다룰 리팩토링이라는 뜻이 될 수 없다. 예를 들어 새로운 기능을 추가하거나 버그를 수정하거나 하는 것들 모두 리팩토링이 될 수 없다. 왜냐하면 근본적으로 behavior를 추가하거나 바꾸는 것이기 때문이다. 그럼 behavior를 바꿀 수 없는데 왜 리팩토링을 하는걸까? 리팩토링을 하는 이유는 좋은 품질의 코드(quality code)를 만들기 위해서다. quality code란 정상적으로 작동하면서도 확장하기 쉬운 코드를 의미한다. (The quality code is..

[Refactoring JavaScript] 테스트 1 - 왜 테스트 코드를 작성해야 하나, 테스트 방법

4년차 개발자인 나의 주요 관심사는 "어떻게 더 좋은 코드를 만들 것인가"이다. 그동안 여러 책과 구글의 도움을 받아 리팩터링을 해왔지만, 복습 및 내가 뭘 모르고 있는지 배우기 위해 를 읽기 시작했다. 1,2 장에서는 리팩토링에 대해 설명하고 3장에는 테스팅에 대한 내용이 나온다. 왜 테스트를 해야하는가 3장 테스팅은 왜 테스트가 필요한지 설명하는 부분부터 나오는데, 나는 모든 이유에 격하게 공감하며 읽었다. 테스트 코드를 작성하지 않는 주된 이유로 "시간이 부족해서"가 가장 많은데, 사실 테스트 코드 작성하는데 익숙해진다면 테스트 코드 작성이 오래 걸려서 시간이 부족하다는 것은 핑계일 수밖에 없다. (물론 정말로 계속 데드라인을 쳐내야 하는 상황이라면 테스트 코드 작성에 익숙하지 않은 초심자가 업무 ..

[알고리즘, Python] 두 문자열이 아나그램 (Anagram)인지 확인하기

이전에 정렬 및 탐색을 공부할 때 아나그램끼리 묶는 문제를 풀었다. [알고리즘, Python] 아나그램(Anagram) 묶기 오늘 풀어볼 문제는 Anagram끼리 묶는 문제다. 여기서 Anagram이란 단어의 문자열은 같지만 순서는 다른 것들을 말한다. 예를 들면 "eat"과 "tea"는 모두 a, e, t 로 이루어진 단어지만 순서는 다르다. Leet jwdevv.tistory.com 이번에는 단순히 두 문자열이 주어지고 둘이 아나그램인지 확인하는 문제를 풀 것이다. * leecode에서 문제 보기 https://leetcode.com/problems/valid-anagram/ Valid Anagram - LeetCode Level up your coding skills and quickly land ..

[알고리즘, Python] 회전 정렬 배열 탐색 (Search in Rotated Sorted Array)

문제는 leecode에서 확인할 수 있다. https://leetcode.com/problems/search-in-rotated-sorted-array/ Search in Rotated Sorted Array - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 이 문제를 풀기 전 기존에 정렬 배열에서 어떻게 탐색하는지 생각해보자. 탐색이므로 직관적으로 binary search를 사용해야겠다는 생각이 든다. 예를 들어 [1, 2, 4, 5, 7, 8, 9] 라는 배..

[React] 환경변수로 github 에서 Naver Maps API Client ID 숨기기

현재 네이버 지도 API를 사용하는 사이드 프로젝트를 진행중이다. API 공식문서를 보면 다음과 같이 Client ID를 사용하도록 되어있다. 하지만 API key를 공개적으로 Github에 올리는 것은 바람직하지 않다. 따라서 우리는 환경변수를 이용해 이 문제를 해결해보자. 우선 이 방법은 `create-react-app`을 사용해 React 프로젝트를 생성했을때를 기준으로 설명한다. Create React App의 공식문서를 살펴보자. https://create-react-app.dev/docs/adding-custom-environment-variables/#referencing-environment-variables-in-the-html Adding Custom Environment Variabl..