wei3on 님의 블로그

FE 서비스 기획과 애자일 방법론: 사용자 중심의 민첩한 개발프론트엔드(FE) 개발에서 사용자 경험은 핵심!애자일 방법론을 FE 서비스 기획에 적용하면 사용자 중심의 서비스를 더욱 효과적으로 개발할 수 있음 📌 FE 서비스 기획의 특징- 사용자 인터페이스(UI) 중심- 반응형 디자인 필요성- 빠른 기술 변화 대응📌 애자일 방법론 개요- 반복적이고 점진적인 개발- 지속적인 피드백- 유연성과 적응력📌 FE 서비스 기획에 애자일 적용하기1. 사용자 스토리 작성   - 사용자 관점에서 기능 정의   - 우선순위 설정2. 프로토타이핑   - 빠른 시각화   - 사용자 피드백 수집3. 스프린트 계획   - 짧은 주기의 개발 계획   - 지속적인 리뷰와 개선📌 애자일 FE 개발의 이점- 빠른 시장 반응- 사용..

소프트웨어 테스트란?- 의도한 대로 동작이 확인하는 것, 결함이 있는지 검사하는 과정  프론트 엔드 테스트 수행하기- 세부적인 테스트 작성하기ex) 로그인 폼 테스트 코드 작성 할 때로직이 수행하는 케이스를 다 알고 있어야 세부적인 테스트를 작성할 수 있음  E2E (End to End 테스트)cypress v.s playwright v.s puppeteer 유닛 테스트가장 작은 단위 테스트유닛 테스트의 포인트어떤 부분을 어떻게 건드렸을때 예상하지 못한 사이드 이펙을 발견하기 좋다.e2e는 개발이 끝나야 알 수 있다.jest  통합 테스트여러 모듈이 엮인 테스트프론트엔드에서는 활용을 잘 안함  테스트 자동화CICD테스트 환경과 목업CI 환경과 목업(Mock-up)

설치해야할 것들nodejs, npm  npm install -g typescript tsc main.ts tsc main.ts -w tsconfig.json을 루트 경로에 생성한다.{ "compilerOptions": { "rootDir": "./src", //src 폴더 안에서 루트파일 "outDir": "./build/js" // 어디로 컴파일되서 들어가게 할건지 }} { "compilerOptions": { "rootDir":"./src", "outDir":"./build/js", "target":"ES6" //ES6 문법으로 컴파일링 }}기타 다른 컴파일 옵션들 💬{ "compilerOptions": { "rootDir":"./src", "outDi..

var a: number = 10;var → Declarea → Variable name: → Annotatenumber → Data Type10 → Set Value type annotation개발자가 타입을 타입스크립트에게 직접 말해주는 것const rate:number = 5   // number 타입 지정 type inference타입스크립트가 알아서 타입을 추론하는 것const rate = 5   //**변수 선언과 동시에 초기화 할 경우** 타입을 알아서 추론한다  ❗️근데 타입스크립트가 type annotation을 꼭 해줘야 하는 경우 any 타입을 리턴하는 경우const json:string = '{"x":4, "y":7}'const coordinates = JSON.parse(json)..

? Image Lazy Loadinig이미지가 실제로 보일 필요가 있을 때 로딩을 할 수 있게 하는 테크닉 구현 할 수 있는 방법 세가지자바스크립트 이벤트Intersection observer브라우저 Native Loading 이용 -> loading 속성 이용 브라우저 Native Loadingconst LazyImage = ({ url, alt }) => { const [isLoading, setIsLoading] = useState(true) const [opacity, setOpacity] = useState('opacity-0') useEffect(() => { isLoading ? setOpacity('opacity-0') : setOpacity('opacity-100') }, [..

프로젝트를 생성하고vs code 터미널에서 입력할 명령어 npm init vite Need to install the following packages: create-vite@5.4.0 Ok to proceed? (y) y > npx > create-vite ✔ Project name: project name을 입력하라고 나와있음하지만, 프로젝트 폴더를 미리 생성해놓고 vs code로 열어서 터미널을 실행했기 때문에./ 라고 입력 ✔ Select a framework: › React ✔ Select a variant: › JavaScriptframework과 variant까지 선택하면  프로젝트 생성 끝! npm install기본 패키지는 설치 해줘야함 Vite?https://ko.vitejs.dev/ ..

질문 1. 커밋 컨벤션 템플릿을 쓰는게 좋을까요?컨벤션은 너무 꼼꼼하게 잘 정한 것 같다고 하셨고커핏 type은 좀 줄이는 것이 좋을 것 같다고 하셨다. Q. 주석도 맞추는 경우가 있다던데?자바스크립트의 타입을 알려주는 jsdoc이라는 것을 알려주셨다.(타입스크립트를 쓰면 필요 없음!!)/** * @param {any[]} arr */function compact(arr) { if (arr.length > 10) return arr.trim(0, 10); // ~~~~ // 'any[]' 형식에 'trim' 속성이 없습니다.ts(2339) return arr;} 주석을 쓰는 경우 1. 내가 구현했어도 모르는 코드- 지피티에서 가져왔는데, 동작은 ..

커밋 컨벤션Type설명Feat:기능 추가, 삭제, 변경Fix:버그 수정 또는 typoDocs:문서 추가, 삭제, 변경Refactor:코드 리팩토링, eg. renaming a variableDesign:CSS 등 사용자 UI 디자인 변경Comment:필요한 주석 추가 및 변경Style:코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우Test:테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)Chore:위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)Init:프로젝트 초기 생성Rename:파일 혹은 폴더명 수정하거나 옮기는 경우Remove:파일을 삭제하는 작업만 수행하는 경우Close이슈 종료 키워드eg. 빌드 스크립트 수정, 패..

자바스크립트에 타입을 부여한 언어자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야함 (→ 컴파일 compile)정적 타입(static)                                                                              동적 타입(dynamic)컴파일 타임                                                                                       런타임에서 동작할 때코드 작성 단계에서                                                                             타입 오류 확인오류 확인타입스크립트는 자바스크립트 기능..

최적화?성능 최적화를 왜 할까?-> 불필요한 렌더링을 방지하기 위해서소규모 프로젝트에서는 큰 손실이 없을지 모르지만 프로젝트가 커질수록쓸모없는 렌더링이 메모리를 사용해 속도를 느리게 만들것이고 사용자 경험에도 영향을 미치게 됨 개념"리액트의 최적화" = "렌더링을 최적화 하는것" 렌더링 개념리액트에서 컴포넌트가 렌더링을 언제 수행하나?1. Props가 변경될때2. State가 변경될때3. forceUpdate() 를 실행했을때4. 부모 컴포넌트가 렌더링 되었을때 자식 컴포넌트도 렌더링됨 *참고 :렌더링 과정에서 변수나 함수는 초기화 된다.   React.memo(), useCallback, usememo 모두 memoization 개념 사용? Memoization비용이 많이 드는 함수 호출의 결과를 저장..