2024 Dev Camp🔥

2024 Dev Camp🔥

프론트엔드 서비스 기획과 애자일 방법론(w.홍석희강사님)

PMF와 애자일• PMF(Product Market Fit): 제품이 시장 요구를 충족시키는 정도• 애자일 방법론: 유연하고 반복적인 개발 프로세스• 워터폴 vs 애자일: 전통적 방식과 현대적 방식의 비교UX 설계와 문제 해결• UX(User Experience) 중요성: 사용자 맥락, 행동, 요구, 태도, 동기 이해• 문제 해결 과정으로서의 UX• '5 Whys' 기법: 근본 원인 파악 방법MVP(Minimum Viable Product)• 정의: 최소한의 기능으로 제품의 핵심 가치 검증• 린(Lean) 스타트업 방법론의 핵심 요소페르소나와 사용자 스토리• 페르소나: 대표적 사용자 프로필 작성• 사용자 스토리: 기능 개발 우선순위 설정 및 팀 소통 도구• 사용자 스토리 작성법: "As a [user],..

2024 Dev Camp🔥

소프트웨어 테스트 특강

소프트웨어 테스트란?개발자 입장에서 바라본 테스트의도한 대로 정상동작하는지 검사하는 것 프론트엔드 테스트 수행하기: 테스트 케이스기반 테스트QA(Quality Assurance, 품질보증): 제품 품질을 보증하기 위한 전반적인 프로세스와 활동. 테스팅은 QA의 중요한 부분이지만 QA는 이보다 더 광범위한 개념  만약 시나리오 테스트를 마치면 끝이날까? No기능이 잘 되지 않는지 세부적으로 문제가 되는 지점을 찾기 어려움테스트 시간적 비용 고려, 리소스 소비가 크다그럼, 조금더 작은 단위의 기능을 테스트 해보자  조금 더 세부적인 테스트 작성하기 : 로직 하나 하나의 정삭적인 동작 테스트예) 회원등록 페이지의 이메일 입력 관련아주 세부적인 테스트로 갈 수록 문제가 생겼을 때, 어떤 문제인지 발견/추적하기 ..

2024 Dev Camp🔥/Issues

[Issues] Vite 번들링 이슈 - 단일 index.html 엔트리 포인트

1. 이슈 상황Vite 번들러 사용HTML, CSS, Vanilla JavaScript로 SPA 개발프로필 사진 컴포넌트를 헤더 메뉴링크에 붙여 테스트 중이었다구현된 라우팅 함수를 통해 해당 링크로 이동 시 화면전환 되고,HistoryAPI를 이용해 직접 주소창 입력을 통한 화면전환이 가능했다. 그런데 새로고침을 하고보니, 프로필이미지를 붙인 페이지의 css가 깨져버림  해당 에러(사파리 브라우저 콘솔)밑에 빨간 에러를 보면 저기 경로로 css파일을 찾지 못했다고 나옴(해당 파일을 지워서 이미 존재하지 않음)Did not parse stylesheet at 'http://localhost:5173/src/pages/clara-shin/css/ProfileImage.css' because non CSS M..

2024 Dev Camp🔥/Issues

[Issues] table 높이 고정하기

1. 이슈 상황직원목록 나오는 테이블과 페이지네이션이 연결됨한 페이지 당 10개의 직원 데이터가 출력됨페이지네이션 마지막 페이지의 출력 데이터가 10개 미만인 경우, 테이블 높이가 줄어들며 페이지네이션 또한 위로 붙어버림   2. 어떻게 해결?테이블을 div로 감싸고 pagenation 영역을 띄워줄 수 있는 height값을 준다테이블에 width값을 줘서 영역을 잡는다colgroup를 만들어서 각 col의 width 값을 준다%로 설정 시, 모든 cal width의 합이 100%을 기준으로 주지말고나머지 하나는 *을 줘서 미세한 간격의 틈을 없애준다 ..

2024 Dev Camp🔥/Issues

[Issues] Safari 브라우저에 favicon 넣기

Safari에서 파비콘이 제대로 표시되도록 하기 위해, 다음 단계를 고려해보자파일 경로 확인: 파비콘 파일 경로가 정확하고 지정된 경로에서 파일에 접근할 수 있는지 확인올바른 format과 sizes 확인: 여러 크기와 타입을 포함시켰지만, 파일 자체가 올바른 포맷인지, 손상되지 않았는지 확인manifest.json 추가: Safari를 포함한 다양한 브라우저와의 호환성을 높이기 위해 manifest.json 파일을 추가하는 것이 좋음Safari를 위한 mask-icon 링크 추가:Safari는 파비콘을 위해 mask-icon이라는 특정 링크 관계를 사용함.mask-icon을 포함하면 호환성이 향상됨 manifest.json 파일 추가/src/assets/ 디렉토리에 다음 내용의 manifest.json..

2024 Dev Camp🔥/회고

온보딩(Onboarding) 프로젝트 회고 👩🏻‍💻

프로젝트 제목을 보면 알 수 있듯이, 교육을 시작하고나서 첫 프로젝트를 진행했다. 0️⃣ 온보딩(Onboarding)이란, '배에 올라타다, 그룹이라는 배에 새로 올라탄 사람들이 팀의 한 부분으로 잘 어우러지도록 돕는 과정'이라고 한다. 나는 호주에서 커피를 만들었는데, 첫 카페에서 나를 뉴비(newbie)라고 부르면서 나보다 오래 일했던 친구들이 a-z까지 하나씩 알려주던 기간이 있었다. 생각해보니 이 기간이 온보딩 기간이었구나 싶다.  교육에 앞서, 김민태 선배님(후배라고 부르는것을 좋아하신다고 한다. 강의중에는 못 불러볼 것 같아 블로그에 조심스레 적어본다😁)과 1:1 커피챗을 통해 궁금한 점을 여쭈었는데, 그 때 답변해주셨던 인사이트의 연속점이었던 프로젝트라고 말하고 싶다. 생각을 글로, 말로 ..

hyejin.frontend
'2024 Dev Camp🔥' 카테고리의 글 목록