전체 162

LH 청년매입임대 당첨 및 입주 준비 - 4. 재계약을 하자

오랜만에 또 집 관련 이야기를 써보려고 한다. LH 청년매입임대에 당첨되고 거주한 지 2년이 다 되감에 따라, 바야흐르 계약 종료일이 다가오고 있었다. 내가 알기로 행복주택이나 일반 매입임대주택은 재계약 시에도 소득 제한이 있어서 소득 기준을 넘는 경우에는 재계약이 불가능하다. (자격완화 행복주택의 경우 1회에 한해 재계약을 허용한다) 하지만 LH 청년매입임대는 다르다. 최초 계약 시에만 소득 조건을 만족하면, 이후 재계약은 소득 조건을 보지 않는다. 그럼 어떤 조건을 만족해야 하는가? 바로 무주택 여부이다. 정확히 말하면 무주택자이며 임대보증금, 임대료, 관리비 등 체납이 없는 세대만이 재계약이 가능하다. 다른 임대주택과는 달리 재계약 조건이 무척이나 간단하다는 장점이 있다. 자 그럼 이제 재계약을 위..

기타/일상 2023.05.30

서버 -> 클라이언트 실시간 통신 방법

웹 페이지는 브라우저에서 서버에 http 요청을 보내 데이터를 받아와서 화면에 보여줍니다. 이를 http 통신이라고 부르죠. 즉, 브라우저에서 화면을 보여주기 위해서는 서버와의 통신이 꼭 필요합니다. 물론 화면을 보여주는 것 외에도 로그인 등 특정 버튼을 클릭했을 때 어떠한 동작이 일어나도록 요청하는 경우도 포함됩니다. 기본적으로 아래와 같은 기능들은 일반적인 http 요청으로 구현이 가능합니다. 회원 로그인 상품 목록 보여주기 장바구니 담기 왜냐하면 단순히 서버로 요청을 보내고, 필요한 경우 데이터를 전달받아 화면에 뿌려주기만 하면 되기 때문이에요. 클라이언트에서 요청을 보내면, 서버는 요청에 대한 데이터와 함께 응답을 보냅니다. 클라이언트는 해당 응답의 데이터로 사용자에게 보여줄 화면을 렌더링하거나 ..

모바일 앱에서 페이지가 웹뷰인지 확인하는 방법

앱을 사용하다 보면 이 페이지가 네이티브인지 웹뷰인지 헷갈릴 때가 많다. 오늘은 해당 페이지가 웹뷰인지 판별하는 방법에 대해 알아보자. 텍스트 드래그 가능 여부로 판별 웹뷰로 띄운 화면은 브라우저와 마찬가지로 꾹 눌러서 텍스트를 드래그하고 복사할 수 있다. 아래 사진은 GSShop 앱의 마이쇼핑 화면이다. 꾹 눌러서 텍스트 드래그가 가능하므로 네이티브가 아닌 웹뷰로 띄운 페이지라는 것을 알 수 있다. 하지만 이 방법은 css 단에서 웹뷰의 텍스트 드래그를 막아놓은 경우에는 판별이 불가능하다. user-select: none; -webkit-user-select: none; 이 방법이 안 될 경우엔 아래 방법을 사용하도록 하자. a 태그 요소 드래그 가능 여부로 판별 텍스트와 마찬가지로 웹뷰 화면에서는 a..

기타 2023.05.04

Node.js - commonJS vs ES Modules

Node.js에서 사용할 수 있는 자바스크립트 모듈 시스템 방식으로는 commonJS와 ES Modules가 있다. commonJS란? // import const 모듈명 = require('모듈 경로'); // export module.exports = 모듈명; // 기본적으로 내보낼 하나의 모듈 지정 module.exports = { 모듈1, 모듈2, ... }; // 여러 모듈 한 번에 export module.exports.모듈명 = 모듈; // 특정 모듈 export commonJS는 EMCAScript에 자바스크립트 내장 모듈 표준이 존재하지 않았을 때부터 사용되던, Node.js에서 기본적으로 제공하는 모듈 시스템 방식이다. *.cjs 확장자를 사용하여 명시적으로 commonJS 모듈임을 나..

Backend/Node.js 2023.02.20

웹 접근성 - 모바일 링크(a) 요소 내 초점 분리 이슈 해결법

증상 Android/iOS 모바일 기기에서 TalkBack, VoiceOver 등의 스크린 리더를 사용하여 화면을 읽는 경우, 링크(a 태그) 요소 내에 위치한 모든 텍스트 요소에 초점이 잡히는 문제가 발생한다. G마켓의 스마일프레시 모바일 화면을 예시로 가져왔다. 스마일프레시의 아이템 카드는 a 태그로 감싸져 있으며, a 태그 내에 위치한 span, p 태그 내 텍스트 요소에도 초점이 옮겨가는 문제가 발생하고 있다. 1 45,820원 할인율 14% 할인 전 금액 53,900 원 22년산 이맛쌀 20kg 평점 4.8 후기 (5,306) 건 15% 쿠폰 카드 10% 실제로 초점이 잡혀야 할 링크 요소 외에도 불필요한 초점이 늘어나기 때문에 탐색에 대한 depth도 늘어나게 되므로 스크린 리더 사용자는 웹 ..

Svelte란? + 프로젝트 생성 및 코드 맛보기

이번에 토이 프로젝트를 시작하면서 예전부터 유튜브에서 관심있게 본 svelte를 공부하면서 사용해 보려고 한다. Svelte란? Svelte는 2016년도에 등장한 프론트엔드 기술 중 하나로, 프레임워크가 없는 프레임워크 혹은 컴파일러라고도 한다. 따로 프레임워크를 로딩하지 않고 빌드시 자바스크립트 코드로 컴파일링하므로 React와 Vue, Angular 등의 기존 프론트엔드 기술보다 빠른 웹 어플리케이션을 만들 수 있다. 이제 Svelte의 특징에 대해 알아보고, 기존 프레임워크들과 비교해서 어떤 점들이 좋은지에 대해 알아보자. Svelte의 특징 적은 코드로도 기능 작성 가능 Svelte는 동일한 코드를 작성하더라도 React, Vue에 비해 적은 양의 코드로도 작성이 가능하다. 간단하게 두 숫자를 ..

Frontend/Svelte 2022.11.21

Git - 커밋 메시지에 #이슈번호 추가

Github Repository에서 제공하는 기능 Github에 저장소(Repository)를 생성하면 다음과 같이 코드 형상관리 뿐만 아니라 이슈, PR(풀 리퀘스트), 프로젝트, 마일스톤, 위키 등의 관리가 가능하다. 각 메뉴는 다음과 같은 특징을 갖는다. Issues - 프로젝트 작업의 모든 활동을 아우르는 단위(기능 추가, 환경 설정, 리팩토링, 버그 수정 등) - 모든 작업을 이슈로 만들고, 등록한 이슈를 기반으로 프로젝트 관리 - 마일스톤 생성 및 관리 가능 PR(Pull Requests) - 작업 브랜치의 내용을 메인 브랜치에 병합하기 전에 다른 참여자들과 공유하고 리뷰를 요청할 수 있는 메뉴 - 코드 리뷰를 통한 수정 코드 추천, 강제 어프루브 제약 사항 추가 등 다양한 기능 제공 Proj..

기타/Git 2022.10.31

npm이란? & package.json의 dependencies vs devDependencies vs peerDependencies vs ...

npm(= Node Package Manager)은 Node.js의 기본 패키지 관리자로, 패키지를 설치하고 관리할 수 있는 여러 기능을 제공한다. npm은 package.json을 통해 프로젝트의 정보를 저장하고, 의존하는 패키지 버전 정보를 관리한다. package.json 파일을 열어 보면, 다음과 같이 라이브러리의 의존성 관리와 관련된 부분을 발견할 수 있다. { "dependencies": { "@charlietango/use-native-lazy-loading": "^1.9.0", "@repacks/next-pack": "^10.0.1", "@vercel/fetch": "^6.1.1", "abort-controller": "^3.0.0", "classnames": "^2.3.1", "clean..

기타/npm 2022.09.26

Typescript - 유틸리티 타입(Utility Type)

본격적인 업무에 들어가기 앞서, 타입스크립트에서 유용하게 사용할 수 있는 유틸리티 타입 종류에 대해 정리했다. 유틸리티 타입 종류는 아래 타입스크립트 공식 문서를 참고했다. Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 일반 유틸리티 타입 Awaited Promise 형태의 T 타입을 전달받아, 해당 Promise가 반환하는 리턴값의 타입을 반환한다. async ~ await의 await 키워드와 유사한 기능을 담당한다. type A = Awaited; // type A = string type B = Awaited; // type B = number type C = Aw..

Language/Javascript 2022.09.25

[티스토리 블로그 테마] - 2. 티스토리 본문에 목차 추가

오늘은 티스토리 블로그 글 상세 페이지에 목차를 추가해보자. 기본 제공 티스토리 테마는 보다시피 본문 목차가 없다. 구글링을 해보니 jQuery의 toc 라이브러리로 간단하게 목차를 생성하는 방법도 있었지만, 직접 자바스크립트로 페이지를 파싱해서 만들어 보기로 했다. 목차 레이아웃 구성 코드를 작성하기에 앞서, 목차 컨텐츠 및 레이아웃을 구성해 보자. 목차는 본문시작 지점 가운데에 위치하며, 사용자가 스크롤을 내려서 목차가 보이지 않는 경우에는 사용자 화면의 오른쪽 영역에 미니 목차가 표출되도록 구현할 것이다. 모바일 기기로 접속한 사용자의 경우에는 목차를 표출할 충분한 공간이 없으므로, 목차 열고 닫기 버튼을 우측에 대신 표출하기로 했다. 또한 티스토리 에디터에서는 제목 1, 2, 3과 본문 1, 2,..