전체 글 (16) 썸네일형 리스트형 [VSCode] 협업시 프로젝트 환경설정 (.vscode 폴더) VSCode는 여러 확장을 통해 기능을 강화시키고, 커스터마이징이 가능해서 많은 개발자들이 사랑하는 IDE 중 하나입니다.그러다보니 협업을 할때 팀원들도 VSCode를 사용하는 경우가 많이 있습니다.사용하는 IDE가 같다면 VSCode가 지원하는 .vscode 폴더를 사용해서 해당 프로젝트에서 적용할 확장 프로그램, 설정값 등을 공유할 수 있습니다. 제가 자주 사용하는 설정 몇가지를 공유해드리겠습니다.settings.jsonsettings.json은 VSCode 설정을 저장하는 파일입니다.프로젝트를 진행하면 공백관련(탭이냐 스페이스냐) 문제와 포매팅 관련 문제를 경험하는 경우가 다수 있었습니다.그래서 저장시 자동 포맷이 적용되게, 그리고 기본 포매터를 Prettier로 설정하고 공백 관련 옵션도 통일시켰.. [프로그래밍] 깃허브 위키를 아시나요?? 간혹 TIL 이나 Study, 정보 공유등을 레포지토리에 저장하는 경우가 종종 있습니다. 레포지토리에 저장하는 방식과 위키 방식은 각각 장단점이 있습니다. 우리는 프로그래머로서 같은 문제를 해결할 수 있는 도구 중 더 적합한 도구를 사용하는 것이 좋겠죠. 이 글에서는 깃허브 위키 기능과 레포지토리와 차이점에 대해서 알아보겠습니다. 위키란 위키는 md 문법을 사용합니다. 레포지토리 - Settings - Features에서 위키를 활성화시킬 수 있습니다. 위키란 깃허브에서 제공하는 레포지토리의 문서 기능입니다. 주로 라이브러리나 프레임워크의 사용법을 기술하는 용도로 사용됩니다. 위키 장단점 홈, 푸터, 네비게이션 바가 존재한다. 네비게이션을 통해 필요한 정보를 빠르게 탐색할 수 있다. 수정 권한이 유연해 .. [Typescript vs Javascript] 타입스크립트의 종말 저는 언젠가 타입스크립트가 대체될 것이라고 생각합니다.타입스크립트는 자바스크립트의 단점을 보완하여 만들어진 언어입니다.자바스크립트와 타입스크립트의 가장 핵심적인 차이는 type이 있느냐 없느냐입니다. Javascriptconst a = 10const b = 20const c = "abc"a + b // 30a + c // "10abc"a + Number(c) // NaNTypescriptconst a: number = 10const b: number = 20const c: string = "abc"a + b // 30a + c // "10abc"a + Number(c) // Error 타입스크립트의 코드는 컴파일 과정에서 오류가 발생합니다. 서로 다른 자료형을 더했기 때문이죠.이처럼 타입스크립트는 컴파일.. [프로그래밍] 2024년에 새롭게 추가되는 자바스크립트 신규 기능 프로그래밍 언어의 최신 기능을 탐색하는 것은 휴일이나 생일을 간절히 기대하는 것과 비슷합니다.이는 새로운 선물을 탐구하는 설렘과 스릴로 가득 찬 시간입니다.ES2024®에 포함될 예정인 향상된 기능을 통해 개발자는 JavaScript 코딩을 간소화하고 이를 더욱 효율적이고 이해하기 쉽고 복원력 있게 만드는 수많은 개선 사항을 해결하는 정점에 서 있습니다. Top-level await (최상위 레벨 await) 기존의 await은 async 함수 이내에서만 사용가능했습니다."Just Do It"이라는 이름이 붙은 이 획기적인 기능은 await 키워드를 비동기 범위를 넘어 자유롭게 작성할 수 있습니다.예를 들어, 모듈의 최상위 수준에서 Promise를 직접 기다리는 것을 가능하게 만들어 비동기적으로 데이터를.. [Modern][vue3] dialog 태그를 활용한 로딩 바 구현 Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다. 는 원래 모달을 구현하기 위해 제안된 스펙으로 2022년 3월에 HTML5의 기능으로 추가되었습니다. 모달을 위해 설계되긴 했지만 모달의 특성을 생각해보면 로딩으로 활용했을 때, 그 이점이 상당하다는 것을 알수 있습니다. div 태그로 로딩 바를 구현해보시면 이벤트를 완전히 차단하는게 꽤나 피곤한 작업이란걸 아실겁니다. backdrop 효과를 적용하기 위에 바깥에 div를 씌우고... 클릭 이벤트, 키보드 이벤트(tab 키 클릭), 스크롤 등 신경써야 할 부분이 상당히 많죠 dialog 태그를 이용해 로딩 바를 구현하면 많은 부분을 지원해주기 때문에 상당히 안정적입니다. 아래는 dialog가 지원해주는 기능입니다. dialo.. [Modern][Javascript]Enum 올바르게 쓰는법 (클린코드) Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다.실무에서 협업할 때, Enum을 올바르게 사용하면 가독성이 좋아져서 프로그래머가 실수할 확률을 줄여줍니다.그럼 어떻게 작성해야 Enum을 "잘" 썻다 라고 말할 수 있을까요?? 일반적으로, Enum은 DB 저장 효율성을 위해서 각 숫자에 의미를 부여해 저장합니다.예컨데 1은 손님, 2는 사용자, 3은 관리자 ... 이런 식이죠. 그러나 데이터를 화면에 표시할 때, 사용자의 화면에서는 숫자가 아닌 읽을 수 있는 텍스트로 표시되어야 합니다.그래서 프론트엔드 개발을 한다면 Enum을 어떻게 작성하냐에 따라 향후 유지보수성이 크게 갈리는데요.만약 Enum을 사용하지 않고 개발하면 프론트엔드 코드를 읽을 때, DB까지 봐야하는 불상사가.. [프로그래밍] 나만의 클린코드 클린 코드란 무엇일까요? 코드에 정답은 없습니다. 이 글에서는 제가 생각하는 클린 코드의 정의를 전달하고자 합니다. 먼저 구글에 클린코드의 정의를 검색하면 다음과 같습니다. 클린 코드(Clean Code)는 소프트웨어 개발에서 사용되는 개념으로, 읽기 쉽고 이해하기 쉬운 코드를 작성하는 것을 강조합니다. 클린 코드는 프로그램의 동작을 보장하는 것뿐만 아니라, 코드 자체가 가독성이 뛰어나고 유지 보수가 쉽도록 작성되어야 한다는 원칙에 기반합니다. 프로그래밍하다보면 가독성이 떨어지지만 성능이 뛰어난 코드 혹은 성능은 평범하지만 가독성은 뛰어난 코드 둘 중 하나를 고민하게 되는 순간이 찾아오죠. 대부분은 성능 좋은 코드를 선택하게 됩니다 위 상황처럼 양자택일의 상태에 놓인다면 어떤게 더 좋은 코드일까요? 두 .. [Javascript] Enum 사용하기 Enum Enum은 상수 값 중 비슷한 것들을 묶어두는 역할을 하는 자료형입니다. 자바에서는 enum형을 지원하지만 자바스크립트에서는 지원하지 않습니다. 하지만 자바의 enum처럼 비슷한 기능을 간단하게 만들 수 있습니다. const SEASON = { spring: "봄", summer: "여름", autumn: "가을", winter: "겨울" }; Object.freeze(SEASON); const data = "가을"; console.log(data === SEASON.autumn); // true 자바스크립트의 JSON을 활용해서 enum형을 구현했습니다. 단, 자바스크립트의 JSON은 값이 변경될 수 있다는 문제가 있습니다. 따라서 Object.freeze 로 Enum이 더 이상 수정되지 못하.. 이전 1 2 다음
