분류 전체보기 61

Open Source License 고르기, GPL? MIT? No License?

프로젝트에 쓰이는 MIT 라이센스를 무의식적으로 "다들 이걸로 세팅하던데..."하고 업로드 하려는 스스로를 보고 아차 했다! 오픈소스 라이센스를 고를 때 고려해야될 방법과 가장 흔히 쓰이는 MIT 라이선스는 무엇인지도 알아보고 만약 라이선스를 넣지 않을 경우엔 어떻게 되는지도 알아보겠다! 저작권? Copyright 저작권은(Berne 협약 이후) 저작자가 저작물을 만들 때 자동으로 생성된다. 모든 저작물은 저작권에 의해 보호되며, 저작권 보유자에게 저작물에 대한 독점적인 권한이 부여된다. 따라서 당신의 저작물(소스 코드, 텍스트, 이미지, 기타 미디어 등)을 다른 사용자가 사용할 수 있게 하려면 그들에게 라이선스를 부여해야 한다. 라이선스 License 특정 권리를 실행하기 위해 자격이 있는 기관으로부터..

Problem Drilling 2023.11.10

경계선을 밟고 가자, 나의 삶

현재의 삶을 만들어내기까지 깎인 면이 셀 수 없기에 어느 정도 추상화하였다. 어떤 경계에 서있었는지, 왜 결국 개발이었는지를 풀어내보려 한다. 개발과는 먼 길을 걸어왔다고 미리 말씀드린다. 세 명의 희정이들 항상 어딘가의 경계선을 밟고 있는 아이였다. 어디에도 속하지 못하는 기분이 자주 들었다. 한 가지 예로 우리 반엔 나와 이름이 같은 친구가 두 명 있었다. 그들과는 다르게 나는 어떤 수식어도 붙지 않은 그냥 희정이였다. 타지 학원에 맡겨지다 꾸준하게 글쓰기와 그림 그리기를 좋아했다. 어릴 때나 지금이나 감정을 글과 그림으로 표현하는 데에 익숙했다. 꿈으로 삼을 생각은 못하다가 우연히 그림을 별로 좋아하지 않는 친구가 미대나 가볼까 하는 마음으로 써 내린 장래희망에 불현듯 승부욕을 느끼고 엄마에게 달려..

Vite config파일 수정해서 배포 디렉토리 상대 경로로 변경하기

Vite로 TypeScript + React 프로젝트 세팅을 하던 중 pnpm run dev 를 사용하여 로컬 서버를 실행했을 땐 잘되었는데 빌드를 하고 배포 파일(dist)에 저장된 정적파일은 404 오류가 떴다. 백엔드 분께서 배포 파일을 확인해달라고 하셔서 확인해보았는데 dist폴더 내 assets폴더(dist/assets) 안에 있는 파일들을 읽어내지 못했고 경로 설정의 문제가 있음을 확인했다! 절대경로로 되어있는 파일들을 상대경로로 바꿔주어야 했다. 그런데 dist 파일의 경우 수동적으로 상대경로를 설정해주어도 빌드를 실행하면 어차피 똑같이 절대경로로 된다. 그렇기에 빌드시 적용되는 Default Path로 `/`로 되어있는 것 같은데 이것을 `./` 이렇게 바꿔주고 싶어서 Vite config..

Problem Drilling 2023.10.29

MVC Pattern의 본질, GUI, 관심사의 분리, 파생된 아키텍처 패턴 알아보기

이번에 리액트 기초 공부 시작을 위해 수강하게 된 강의에서 MVC패턴을 사용하여 코드를 짜게 되었다. MVC패턴이 무엇인지, 다른 디자인 패턴의 종류도 궁금했고 본질이 궁금하여 알아보게 되었다. History of MVC 1979년 MVC의 탄생 1979년, Xerox Parc(Palo Alto Research Center) 연구원들은 현재 우리가 누리고 있는 IT 기술의 여러 원형을 개발, 연구 중이었다. 그 중 TrygveReenskaug 트라이브 린스케이지는 다이나북(Dynabook) 팀에서 일하게 되었다. 다이나북은 최초의 태블릿 PC로, 전문 지식의 여부나 남녀노소에 상관없이 모두가 직관적으로 사용할 수 있어야한다는 철학을 내세우고 있었으며 프로그래머들이 쓸 수 있는 CLI가 아닌 일반 사람들의..

The Type Hierarchy Tree: 타입스크립트의 Top, Bottom Type 더 깊게 바라보기

2023.09.29 - [JavaScript/TypeScript] - Type의 근원을 알아보고 타입스크립트의 Type System 바라보기 🔼 이전 글을 읽고 읽어보면 더욱 이해가 잘 될 것이다. Top Type, Bottom Type TypeScript에서는 any와 unknown이라는 Top Type(최상위 타입: ⊤)과 never라는 유일한 Bottom type(최하위 타입)이 있다. 이것은 모든 타입들의 상한(Upper bound)과 하한(Lower bound)를 나타낸다. TypeScript의 모든 Type은 계층 구조를 기반으로 자리를 잡고 있다. Supertype, Subtype ✔️ 일반적인 타입을 슈퍼타입Supertype, 특수한 타입을 서브타입Subtype이라 한다. 어떤 타입이 다른..

Type의 근원을 알아보고 타입스크립트의 Type System 바라보기

타입스크립트에서의 타입은 자바스크립트의 타입과 무엇이 다를까? 이전에 배운 객체지향에서의 타입, 타입시스템이 반영되어 있는 걸까? 타입은 프로그래밍에서 어떤 의미인가 🤔 코드보다 이론 위주의 포스팅이 될 것이라 유의바람. 타입 Type 타입을 알기 위해선 추상화 Abstraction에 대한 이해가 선행되어야 한다. 추상화 抽象化 어떤 양상, 세부 사항, 구조를 명확하게 이해하기 위해 특정 절차나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법. 복잡성을 다루기 위해 추상화는 두 차원에서 이루어진다. 1. 구체적인 사물들 간의 공통점만 취하고 차이점을 버리는 일반화를 통해 단순하게 만드는 것. 2. 중요한 부분을 강조하기 위해 불필요한 세부 사항을 제거함으로써 단순하게 만드는 것. ➡️ 이 ..

DNS Domain Name System을 깊게 알아보자

DNS는 "DNS 서버에게 IP주소를 받아온다"로 퉁쳐지는 경우가 많다. 이전에 공부를 했으나 네트워크의 경우 직접 사용하지 않으면 휘발되기 때문에 복습 + 조금 더 깊게 알아보려 한다! What is DNS? DNS, Domain Name System은 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행할 수 있도록 하기 위해 개발되었다. 특정 컴퓨터 또는 네트워크로 연결된 임의의 장치의 주소를 찾기 위해, 사람이 이해하기 쉬운 도메인 이름을 숫자로 된 IP주소로 변환해준다. 일반적인 DNS 조회를 할 경우 UDP, Zone Transfer(영역 전송)을 수행할 경우 혹은 512Byte를 초과하는 DNS 패킷을 전송해야 할 경우 TCP를 사용한다. 흔히 전화번호부에 비유되는..

Network 2023.09.24

프레임워크와 라이브러리의 차이점, Inversion of Control과 Dependency Injection

프레임워크와 라이브러리의 차이점은 무엇일까? 개발자들은 흔하게 접할 수 있는 단어다. 다만 그 차이를 명확하게 한 줄로 설명할 수 있는가,,? 나는 못한다. 그래서 정리하기 위해 포스팅을 해본다! Framework와 Library 프레임워크는 다양한 라이브러리의 모음이라고 대답하는 경우가 많다. 하지만 이 정의는 전적으로 사실이라 할 수 없다. 정확한 구분을 위해선 "누가 누구를 호출하는가?" caller/callee를 정의해야 한다. Framwork 🖼️ 프레임워크는 사용자가 사용자 지정 애플리케이션을 만들기 위해 작성하는 개방형, 또는 구현되지 않은 함수 또는 객체를 정의한다. 프레임워크는 그 자체로 애플리케이션이기 때문에 범위가 더 넓고 사용자의 필요에 따라 사용자 애플리케이션을 만드는 데 필요한 ..

Imperative 명령형, Declarative Programming 선언형 프로그래밍

이전에 공부했던 키워드이지만 명확하게 한마디로 정의할 수 없어서 복습을 위해 다시 공부해본다! Programming Paradigms 프로그래밍 패러다임 Paradigm은 어떤 문제를 해결하거나 어떤 작업을 수행하는 방법 어떻게 프로그래밍을 할 것인가? Programming Paradigm은 특정 프로그래밍 언어를 사용하여 문제를 해결하는 접근 방식, 또는 특정 접근 방식에 따라 사용할 수 있는 도구와 기술을 사용하여 문제를 해결하는 방법이다. 프로그래밍 언어는 알려진 것이 많지만 모두 구현할 때 몇 가지의 전략을 따르는데, 이 방법론/전략이 패러다임이다. 프로그래머에게 프로그래밍 관점을 갖게 하고 코드를 어떻게 작성할지 결정하는 역할을 한다. 새로운 프로그래밍 패러다임을 통해서 새로운 방식으로 생각하는..

로딩스피너, Optimistic UI 관점으로 바라보기, React Query

아무리 JavaScript 파일을 빠르게 들고온대도 서버에서 리소스를 가져오는 시간은 어쩔 수 없다. 로딩이 길어질수록 UX는 부정적으로 될 것이고 이탈자도 생길 것이다. 그리하여.. Weather API로 받아오는 시간이 꽤 걸리는 것 같아 로딩 스피너를 추가하게 되었다! 하지만 최선으로 구현했는지에 대해 의문이 남았다. Optimistic UI, React Query를 공부하면서 어떤 식으로 개선하는 게 효과적일지 생각해보아야겠다. 로딩스피너 테스트 영상 Roading Spinner 웹사이트/앱을 사용하는 동안 우리 모두가 직면할 수 있는 일반적인 상황은 진행 상태, 혹은 무언가가 로드될 때까지 기다리는 것이다. 이런 상황 중에 가장 간단한 해결책은 Loader나 Spinner를 사용하여 백그라운드에..

UIUX 2023.09.07