본문 바로가기

FrontEnd+

nestjs 네스트 서버 기초 하루 만에 끝내기 코드 작성에 필요한 딱 '기초'만 정리해보자. 시작하기 다음 명령어를 통해 쉽게 nest 프로젝트를 세팅할 수 있다. $ npm i -g @nestjs/cli $ nest new project-name 그러면 세팅 후 아래와 같은 파일들이 자동으로 생성된다. 각 모듈을 자체적인 전용 디렉토리에 보관하는 방식의 이 구조는 네스트에서 개발자들에게 권장하는 규칙이다. src app.controller.ts // route가 하나인 기본 컨트롤러 app.controller.spec.ts // 유닛테스트용 app.module.ts // 앱의 루트 모듈 app.service.ts // 메서드 하나인 기본 서비스 main.ts // 네스트 앱 인스턴스를 생성하기 위해 네스트의 핵심 함수 NestFactory를 사용하.. 더보기
Recoil 입문 - 기초 API 알아보기 Recoil은 리액트 전용 상태 관리 라이브러리이다. 리액트에서는 본인 또는 부모의 상태에만 접근 가능하다는 점 때문에 코드 복잡도가 올라가거나 불필요한 리렌더링이 발생하기도 한다. Recoil은 리액트스러운 메커니즘을 유지하면서 이러한 단점을 극복하기 위해 등장했다고 한다. Recoil의 가장 작은 단위인 아톰(atoms)부터 순수함수인 셀렉터(selectors)까지 하나씩 알아보자. 📦 아톰 (atoms) 아톰은 상태(state)의 단위이다. 1 아톰 1 상태라고 생각하면 된다. 컴포넌트는 아톰의 변화를 구독(subscribe)할 수 있다. 아톰이 업데이트 되면, 아톰을 구독하고 있던 컴포넌트들은 새로운 아톰의 값을 반영하여 리렌더(re-render)된다. 만약 아톰을 여러 컴포넌트에서 사용하고 있더.. 더보기
Less 입문 - 기초 문법 알아보기 👀 Less가 뭔가요? Less는 Ant Design, Bootstrap, Cardinal, Semantic UI 등에서 사용하고 있는 CSS 전처리기이다. Less는 Leaner Style Sheets의 약자이자, '더 적은'이라는 의미이기도 하다. CSS를 더 간결하고 쉽게 작성할 수 있음을 어필하는 이름인 듯 하다. It's CSS, with just a little more. - Less 슬로건 현재(2022. 01월) 기준 Less의 최신 버전은 4.1.2이다. Less 언어에서 지원하는 편리한 문법들을 하나씩 익혀보자. 📚 변수 (Variables) 변수명 앞에 앳 사인(@)를 붙이고, 콜론(:)뒤에 할당할 값을 적어주면 된다. @width: 10px; @height: @width + 10px.. 더보기
웹 앱 매니페스트 manifest.json 를 작성해보자. 프로젝트에 PWA(Progressive Web App)을 도입하기 위해서는 manifest.json 파일을 필수적으로 작성해야 한다고 한다. 그래서 처음 접하게 된 manifest.... manifest는 무슨 파일일까? manifest는 처음이라... 컴퓨팅 분야에서 manifest 파일은 한 그룹의 *메타정보를 담고있는 파일을 말한다. 이름, 버전번호, 라이센스 등의 정보를 담을 수 있다. *메타정보: 다른 데이터를 설명해주는 역할을 하는 구조화된 데이터 위키의 설명에 따르면, 이 용어는 'ship manifest'라는 세관 용어에서 유래했다고 한다. 'ship manifest'는 수하물 목록, 승객 목록 등을 정리한 문서이다. 영단어 'manifest'는 명확한 또는 명백하게 만든다는 뜻을 갖고 있.. 더보기
[번역] 리액트의 스케줄링 (Pull 방식 vs Push 방식) 이 글은 리액트의 디자인 원칙 중 '스케줄링' 부분을 의역한 글입니다. 함수 호출은 리액트가 한다. 리액트 컴포넌트를 함수로 표현하긴 하지만, 리액트가 그 함수들을 즉시 호출하는 것은 아니다. 과 같은 컴포넌트의 변경사항을 어느 시점에 재귀적으로 UI트리에 실제로 변경사항을 적용을 할지는, 순전히 리액트의 마음이다. 이는 미묘한 차이지만 큰 의미를 갖는다. 리액트 사용자가 직접 컴포넌트 함수를 호출하는 것이 아니라, 리액트가 이를 호출하기 때문에 필요할 경우 리액트는 함수 호출을 지연시킬 수 있다. 리액트는 pull 방식을 따른다. 많은 라이브러리에서는 새로운 데이터를 반영하기 위해 Push 방식을 사용하지만, 리액트는 꼭 필요한 때가 아니면 이를 지연시킬 수 있는 Pull 방식을 사용한다. 리액트는 범.. 더보기
월간 키워드 - 2021년 10월 💻 웹 접근성 Week 1 iOS ux 피드백을 받았다. 인풋창에 포커스가 갈 때 예상치 못하게 zoom-in이 된다. 폰트 사이즈가 16px보다 작으면 iOS에서 잘보이라고 알아서 확대해주는 것이다. 이 이슈를 해결하는 방법으로는 meta 태그를 수정해주는 작성하는 방법이 있다. 그런데 이 방법은 일반적인 UX가 향상될지는 몰라도, 웹 접근성은 오히려 해치는게 아닐까? 하는 생각이 들었다. 이 이슈와 해결방법에서 디자인, UX, 접근성 세 가지 가치가 충돌(?)한다. 더보기 [디자인] 앱의 디자인 통일성을 생각하면 16px 이상으로 키울 수 없다. [UX] 앱의 UX를 생각하면 갑자기 확대되면 당황스럽다. [접근성] 앱의 웹 접근성을 생각하면 16px 이상이 아니거나 확대안하면 보기힘들다. 애플에서 고.. 더보기
AWS 배포 가이드북 - S3 + CloudFront 편 지난 AWS 배포 가이드북 - EC2 편 에 이어서 이번에는 S3와 CloudFront를 다루어보려고 한다. 💬 S3 + CloudFront 소개 S3 S3(Simple Storage Service)는 확장성이 뛰어난 클라우드 저장장치이다. S3를 이용하면 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있다. 사용자는 원하는 버킷을 만들고 버킷 내 객체에 데이터를 저장하기만 하면 된다. S3에서 이야기하는 버킷(Bucket)은 S3의 최상위 단위이자 각 스토리지 계정을 구분하고 ID 역할을 한다. '양동이'라는 뜻 답게 버킷에는 객체를 담을 수 있다. 객체(Object)는 S3에서 기본 저장 단위로, 버킷 내에서 key와 version id로 고유하게 구분할 수 있다. 즉, S3의 구성은 { "버킷 .. 더보기
AWS 배포 가이드북 - EC2 편 들어가면서 아마존의 클라우드 서비스 AWS(Amazon Web Services)는 시장 점유율 32%에 달하는 클라우드 컴퓨팅 분야 1위 IaaS 서비스이다. (2위: Microsoft Azure 19%, 3위 Google Cloud 7%, 출처) AWS는 현재 시점으로 컴퓨팅, 스토리지, 네트워킹, 데이터베이스, 배포, 머신러닝 등 다양한 분야에서 무려 200개가 넘는 제품과 서비스를 제공하고 있다. 시장 점유율이 높은 만큼, 채용공고를 보다 보면 기술 스택을 이들 중 하나로 소개하거나, 혹은 아예 이를 사용한 경험을 우대사항으로 기록한 공고를 찾아볼 수 있다. github pages나 netlify, vercel 등의 SaaS 서비스로 편하게 배포할 수도 있지만, 편한 만큼 디테일하게 조작하기에는 한.. 더보기

티스토리툴바