전체 글

안녕하세요. 사진과 철학에 관심이 많은 웹 프론트엔드 개발자 오원종입니다. 시간이 지나도 꾸준히 읽힐 수 있는 글을 쓰고 싶습니다. 재미있는 일만 하면서 살고 있는 사람입니다.
끄적끄적/Ringle

[Ringle] 튜터 피드백 정리 (November 2021)

November/05/2021 (8.75) When I get hard and difficult -> When things get difficult They have to start from basic -> they have to start from scratch I can speak my own voice -> I can speak my mind / I have my own voice I graduated Korea University -> I graduated from Korea University After those kind of experience -> after that kind of experience / after those kinds of experiences November/19/202..

Computer Sci./Algorithms

[알고리즘 문제 해결 전략] Ch03-3. 알고리즘 설계 패러다임 (동적 계획법)

8 동적 계획법 8.1 도입 동적 계획법(dynamic programming)이라는 말은 최적화 문제를 연구하는 수학 이론에서 왔으며, 우리가 전산학 전반에서 일반적으로 사용하는 동적(dynamic), 혹은 프로그래밍(programming)이라는 단어와는 아무런 관련이 없다. 중복되는 부분 문제 동적 계획법은 큰 의미에서 분할 정복과 같은 접근 방식을 의미한다. 동적 계획법을 사용하는 알고리즘들 또한 처음 주어진 문제를 더 작은 문제들로 나눈 뒤 각 조각의 답을 계산하고, 이 답들로부터 원래 문제에 대한 답을 계산해 내기 때문이다. 동적 계획법과 분할 정복의 차이가 발생하는 부분은 문제를 나누는 방식이다. 동적 계획법에서 어떤 부분 문제는 두 개 이상의 문제를 푸는데 사용될 수 있기 때문에, 이 문제의 ..

Web Frontend Developer

Backend For Frontend는 무엇인가?

최근에 BFF에 대해서 공부를 해 보아야 할 필요성을 느껴서 블로그에 정리해 보았다. BFF에 대한 설명을 하기 전에 먼저 MSA에 대해서 이야기를 해 보려고 한다. MSA MSA는 작은 자율 서비스 컬렉션으로 구성된다. 각 서비스는 독립적이며 제한된 컨텍스트 내에서 단일 비즈니스 기능을 구현해야 한다. 제한된 컨텍스트는 비즈니스 내의 자연스러운 분할이며 도메인 모델이 존재하는 명시적 경계를 제공한다. 마이크로 서비스란 다음과 같은 특성을 가지고 있다. 작고, 독립적이며, 느슨하게 결합되어 있다. 각 서비스는 작은 개발팀이 관리할 수 있다. 서비스를 독립적으로 배포할 수 있다. 팀이 전체 어플리케이션을 빌드한 후 재배치하지 않고도 기존 서비스를 업데이트 할 수 있다. 서비스가 잘 정의된 API를 사용하여..

Computer Sci./SW Architecture

[소프트웨어 아키텍처 101] Ch06. 아키텍처 특성 측정 및 거버넌스

6.1 아키텍처 특성 측정 아키텍처 특성을 정의할 때 흔히 다음과 같은 문제들이 발생한다. 물리학이 아니다 : 아키텍처 특성은 대부분 의미가 모호하다. 정의가 너무 다양하다 : 부서마다 정의를 통일하기 전까지는 원활한 소통이 어렵다. 너무 복합적이다 : 바람직한 아키텍처 특성은 대부분 더 작은 다른 여러 특성들로 구성된다. 이 세가지 문제들은 아키텍처 특성을 객관적으로 정의하면 모두 해결된다. 6.1.1 운영적 특성 아키텍처 특성은 성능, 확장성처럼 비교적 정확하게 측정할 수 있는 것도 많지만, 팀 목표에 따라 그에 따른 해석은 미묘하게 갈릴 때가 많다. 예를 들어 특정 요청에 대한 평균 응답 시간을 측정할 경우, 어떤 경계 조건 때문에 1%의 요청이 다른 요청보다 처리 시간이 10배 오래 걸리면 어떻게..

Computer Sci./Algorithms

[C.C.I] 02. 연결리스트

2.1 중복 없애기 정렬되어 있지 않은 연결리스트가 주어졌을 때 이 리스트에서 중복되는 원소를 제거하는 코드를 작성하라. 연결리스트에서 중복되는 원소를 제거하기 위해서는 원소를 추적할 수 있어야 한다. 여기서는 해시 테이블을 사용해서 처리한다. 연결리스트를 순회하며 각 원소를 해시 테이블에 저장한다. 그러다가 중복된 원소를 발견하면, 그 원소를 제거한 후 계속 진행한다. void deleteDups(LinkedListNode n) { HashSet set = new HashSet(); LinkedListNode previous = null; while (n != null) { if (set.contains(n.data)) { previous.next = n.next; } else { set.add(n.d..

Computer Sci./Algorithms

[C.C.I] 01. 배열과 문자열

1.1 중복이 없는가? 문자열이 주어졌을 때, 이 문자열에 같은 문자가 중복되어 등장하는지 확인하는 알고리즘을 작성하라. 자료구조를 추가로 사용하지 않고 풀 수 있는 알고리즘 또한 고민하라. 문자열은 ASCII 문자열임을 가정하자. 문자 집합은 boolean 타입의 배열로 만들어서 i 번째 원소는 문자열에 해당 인덱스의 문자가 존재하는지를 확인한다. 배열의 길이는 128이 아니라 256이 되어도 괜찮다. boolean isUniqueChars(String str) { if (str.length() > 128) return false; boolean[] charSet = new boolean[128]; for (int i = 0; i < str.length(); i++) { int val = str.cha..

Web Frontend Developer

[FeBase S3] SVG, Canvas, viewport와 viewbox

이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다. 1. SVG란? 바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다. SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. SVG는..

Web Frontend Developer

[Troubleshooting] Next.js에서 dynamic routing 새로고침 에러

회사에서 Next.js 프로젝트를 개발하다가 이슈를 만났다. /pages/some...path/[id]/index.tsx 이런 식으로 컴포넌트를 만들었고 이 페이지 url은 id=123인 경우 https://domain..name/some...path/123 이렇게 된다. 라우터 훅을 사용해서 router.push('/some...path/123') 이렇게 처리를 하면 동적 라우팅(dynamic routing) 처리가 되어 문제 없이 해당 페이지로 페이지가 이동한다. 문제는 이 페이지에서 새로고침(refresh)을 할 경우이다. 분명히 컴포넌트가 있는데 새로고침을 하면 403 에러가 뜨면서 접근을 할 수가 없다고 나오는 것이 아닌가? 분명히 페이지는 처음에 잘 나타났는데, 이후에 새로고침을 하면 페이지가..

DevOwen
오웬의 개발 이야기