반응형

프론트엔드 3

npm package 구축 및 사용법

Package란?package: 완성된 프로그램 1. 다른 패키지의 부품으로써 사용되는 package$ var my = require('my-package'); 2. package 자체가 완제품으로써 사용되는 것$ my-package  Package의 특성1. 코드 모듈화공통된 기능을 별도의 코드베이스로 추출하여 npm 패키지로 만듦예로, 여러 레포지토리에서 공통으로 사용하는 함수나 유틸리티를 하나의 패키지로 모을 수 있음 2. 패키지 생성해당 코드를 포함한 새로운 프로젝트를 생성,package.json 파일을 작성하여 npm 패키지로 등록할 준비 3. 배포공통 기능을 npm 레지스트리에 배포 4. 각 프로젝트에서 사용개별 프로젝트에서 이 패키지를 의존성으로 추가npm install  명령어를 사용해 패..

Frontend 2025.03.10

웹 프론트엔드 개발자 기술 면접 준비

프론트 개발자로서 중요하다 생각하는 것? 사용자 경험에 대한 고민이 중요하다 생각함. 사용자가 서비스를 정상적으로 사용할 수 있게끔 오류 없는 비지니스 로직을 만드는 것 부터 시작해서 크게는 서비스 전반에 발생할 수 있는 이슈를 선제적으로 파악하기 위한 이슈 트레커를 추가하는 것까지 사용자 경험에 대한 고민의 일환이라고 생각함. 요즘은 PC 이외에도 모바일 기기, iot 디바이스를 통해 웹 페이지를 접할 수 있는데 성능이 낮은 디바이스에서는 UI 변경이 쾌적하게 반영되지 못해 사용자에게 안좋은 경험을 제공하는 경우가 생길 수가 있음. 이를 퀀커런트 uI 패턴을 통해 사용자에게 더 나은 경험을 제공하고자 함. 퀀커런트 모드에서는 우선순위에 따른 화면 렌더, 컴포넌트의 지연 렌더, 로딩 화면의 유연한 구성 ..

Frontend 2024.04.18

UMC project 1주차(23/01/02~23/01/10)

UMC 3기 프로젝트를 시작했다. 안드로이드 프론트(코틀린) 팀장으로 참여했고 우리 팀이 개발할 어플은 '강아지 건강 관련 어플'이다. 우선, 내가 한 주간 맡은 부분은 시작화면과 반려견 등록 화면이다. 첫 화면 구현은 어렵지 않게 해결했다. 레이아웃 디자인은 constraintLayout을 사용했다. 문제는 반려견 등록하기 화면에서 나타났다. 화면의 견종, 강아지 성별, 나이 밑을 보면 드롭다운 형식으로 항목들을 선택하게 하는 스피너를 구현해야 한다. 코틀린 공부하면서 스피너를 접한 적이 없어서 스피너에 대해 따로 찾아보았다. 스피너란? 값 집합에서 하나의 값을 선택할 수 있는 빠른 방법을 제공하고 기본 상태의 스피너는 현재 선택된 값을 표시한다. 스피너를 터치하면 기타 모든 사용 가능한 값을 포함하는..

Kotlin 2023.01.11
반응형