3-7. STAR 기법으로 나의 경험 정리해보기

[imakerjun]

1. STAR 기법으로 경험을 정리해보는 이유

이 미션은 자신의 프로젝트 경험을 체계적이고 효과적으로 정리하고 소개하기 위한 연습니다. 특히 개발 분야에서는 이력서 뿐만 아니라 기술과 관련한 문서를 작성하면서 복잡한 문제를 해결하는 과정과 결과를 명확하게 전달하는 능력이 중요합니다. 이를 통해 면접, 프레젠테이션, 팀 회고 등 다양한 상황에서 여러분의 기술적 역량과 협업 능력을 효과적으로 보여줄 수 있습니다.

2. STAR 기법 소개

STAR 기법은 다음과 같은 네 부분으로 구성됩니다:

1. Situation(상황): 프로젝트의 배경이나 맞닥뜨린 상황을 설명합니다.
2. Task(과제): 여러분이 해결해야 했던 구체적인 과제나 목표를 기술합니다.
3. Action(행동): 과제를 해결하기 위해 취한 구체적인 행동들을 서술합니다.
4. Result(결과): 여러분의 행동으로 어떤 결과가 도출되었는지 설명합니다.

3. 구체적인 예시

1. Situation(상황): 개인 포트폴리오 웹사이트가 데스크톱 레이아웃만 구현되어있었음
2. Task(과제): 기존 데스크톱 중심의 웹사이트를 모바일 사용자에게도 최적화된 반응형 웹 디자인으로 전환
3. Action(행동): CSS 미디어 쿼리를 활용하여 기존 레이아웃을 모바일 화면 크기에 맞게 조정. 모바일 사용자를 위한 터치 최적화 요소와 축소된 메뉴 디자인 구현. 다양한 화면 크기에서의 사용성을 테스트하며 디자인을 조정
4. Result(결과): 웹사이트의 모바일 사용자 접근성 향상으로 방문자 수 50% 증가

4. 실습

이제 본격적으로 지금까지의 경험 중 1~2가지를 STAR 기법을 이용해 정리해보세요. 아래 템플릿을 복사해서 사용해주시면 됩니다.

### 1. 상황(Situation):
프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
예시: "개인 프로젝트로 간단한 포트폴리오 웹사이트를 구축했었는데, 모바일 화면에서의 호환성 문제를 발견했습니다."

### 2. 과제(Task):
해결해야 했던 구체적인 과제나 목표를 서술하세요.
예시: "웹사이트를 모바일 화면에도 잘 보이도록 반응형으로 개선하는 것이 목표였습니다."

### 3. 행동(Action):
과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
예시: "CSS 미디어 쿼리를 사용하여 모바일 화면 크기에 맞게 디자인을 조정했습니다. 또한, 테스트를 통해 다양한 화면 크기에서의 호환성을 확인했습니다."

### 4. 결과(Result):
행동의 결과로 어떤 변화가 있었는지 설명하세요.
예시: "이로 인해 웹사이트는 모든 디바이스에서 일관성 있는 사용자 경험을 제공하게 되었고, 로딩 시간도 단축되었습니다."

[jsweetpotato]

1. 상황(Situation):

개인 프로젝트로 간단한 포트폴리오 웹사이트를 구축했었는데, CSS height:auto로 설정한 오브젝트의 애니메이션이 작동하지 않았습니다.

2. 과제(Task):

애니메이션이 정상적으로 동작하게 만드는 것이 목표였습니다.

3. 행동(Action):

stack overflow, youtube에서 관련 해결 방법을 찾아봤습니다. 다른 CSS 코드로 대체할 수 있는지 시도해봤습니다.

4. 결과(Result):

getBouncingClientRect를 사용해 오브젝트 크기를 가져온 뒤 height:auto에 애니메이션을 주는 방식으로 변경해 적용 시켰습니다. 다만 완벽한 구현은 성공하지 못했습니다(height가 정확하게 측정되지 않는 문제 발생)

[1101x]

1. 상황(Situation):

스와이퍼로 구현한 사이트의 카드 스택 형태가 랜덤으로 섞이지 않음

2. 과제(Task):

카드 스택 랜덤 셔플

3. 행동(Action):

피셔 예이츠 알고리즘을 활용

4. 결과(Result):

랜덤 기능 적용

[dldnlee]

1. 상황(Situation):

프로젝트를 진행하는 과정에서 데이터베이스 관리하는 방법이 익숙하지 않았습니다.

2. 과제(Task):

데이터베이스에서 원하는 데이터를 마음대로 뽑아오고 추가하는 방법을 익히는 것이 목표였습니다.

3. 행동(Action):

사용하기 쉬운 데이터베이스 플랫폼을 활용해서 데이터가 어떻게 관리되고 어떤 방식으로 활용할 수 있는지 이해해보는 과정을 밟아야 했습니다(사용하는 데이터베이스 플랫폼 mdn문서를 읽어보기와 인터넷 검색하기). 이런 과정이 지나고 나서 실제로 프로젝트에서 활용해보면서 숙련도를 높였습니다.

4. 결과(Result):

작업하던 프로젝트에서 실제로 데이터베이스를 활용해서 유저가 입력한 정보를 데이터베이스에 추가하고, 제가 뽑아오고 싶은 데이터를 마음대로 뽑아올 수 있었습니다.

[imakerjun]

• ** OO 데이터베이스 활용 역량**
  • 프로젝트 중 데이터베이스의 데이터 조회 및 업데이트 과정에서 어려움을 겪게 됨
  • 따라서 사용자 친화적인 데이터베이스 플랫폼을 활용하여 필요한 기술 습득
  • 이를 통해 사용자 정보를 데이터베이스에서 더욱 효율적으로 관리하고, 데이터 처리 과정을 개선

[Taewook1212]

1. 상황(Situation):

프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
처음 스크럼 마스터가 되고 익숙치 않은 깃허브로 협업 프로젝트를 하게 된 상황

2. 과제(Task):

해결해야 했던 구체적인 과제나 목표를 서술하세요.
organization저장소와 포크 방식으로 각 팀원들과 연동하는 방법을 마련하고 역할을 나눠서 협업 프로젝트를 실시.

3. 행동(Action):

과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
회의에서 최대한 각자의 역할과 분담을 나누고 정보들을 같이 공유, 서로 맡은 분야들 외에 다른 업무도 자신의 일처럼 협업
같이 성장하자라는 마인드로 정보 공유. 완성 보다는 배우는 마음으로 실시

4. 결과(Result):

행동의 결과로 어떤 변화가 있었는지 설명하세요.
팀원들간의 협업 작업에 필요한 업무 흐름이나 회의 내용들, 필요한 스킬들을 경험했습니다.

[Samuel-0930]

1. 상황(Situation):

팀 프로젝트로 물건을 판매하고 게시판을 통해 이웃과 소통하는 프로그램을 개발을 진행중이었는데, 데이터 파일을 불러오기는 가능했으나 쓰기가 불가능한 문제를 발견했습니다.

2. 과제(Task):

사용자가 데이터를 읽는 것 뿐만 아니라 쓰기 또한 가능하고, 일부 관리자는 데이터 삭제까지 가능하도록 개선하는 것이 목표였습니다.

3. 행동(Action):

기존 Json 파일로 만들어 두었던 임시 데이터 베이스를 pocketbase를 이용하여 재 구성하였고, pocketbase에 내장되어있는 권한 부여 기능으로 admin 계정과 일반 계정을 구분하여 권한 부여를 구분해주었습니다.

4. 결과(Result):

사용자가 기존 데이터에 접근하여 원하는 내용을 추가할 수 있었습니다.

[vHwav]

1. 상황(Situation):

프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
:: 개인 프로젝트로 웹사이트를 만들었는데 메인에서 제가 원하는 기술을 제 능력 선에서 구현하지 못하는 문제점이 생겼습니다

2. 과제(Task):

해결해야 했던 구체적인 과제나 목표를 서술하세요.
:: 한 섹션을 스와이퍼로 구현했는데 스와이퍼가 움직일 때마다 배경과 스와이퍼 내의 테마 색상이 바뀌도록 하려 했으나 쉽게 되지 않았습니다."

3. 행동(Action):

과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
:: 스와이퍼 공식 홈페이지에 들어가 문서를 읽으면서 지원하는 기술 중에 제가 구현하기 위해 어떤 것을 쓰면 좋을 지 살펴봤습니다.

4. 결과(Result):

행동의 결과로 어떤 변화가 있었는지 설명하세요.
:: 결국 해결은 하지 못했으나, 스와이퍼가 움직일 때마다 특정 이벤트를 줄 수 있다는 것을 알게 됐습니다.

[Bambiru]

1. 상황(Situation):

팀 프로젝트로 테일윈드를 사용하는데 같은 css파일 내에서 apply를 하다보니 pull 해올때마다 충돌이 일어났습니다.

2. 과제(Task):

깃 충돌을 최소화하면서 코드를 깔끔하게 만드는 것이 목표였습니다.

3. 행동(Action):

postcss-import를 이용하여 팀원들과 페이지 별 css를 만들어 각자 css에서 apply를 진행했습니다.
그 후 기본구조가 있는 tailwind.css에서 import하는 방식을 사용했습니다.

4. 결과(Result):

깃 충돌을 최소화하고, 코드의 가독성도 높아졌습니다.

[imakerjun]

테일윈드 CSS 활용 및 깃 충돌 최소화

• 팀 프로젝트에서 테일윈드 CSS를 사용하며 apply 작업 중 발생한 지속적인 깃 충돌 문제에 직면
• postcss-import를 활용해 팀원들이 각자의 CSS 파일에서 apply를 진행하고, 이를 기본 구조를 가진 tailwind.css 파일에서 import하는 방식을 채택
• 이 접근법을 통해 깃 충돌을 크게 줄이고 코드의 가독성을 향상시킴

[dlehdg]

1. 상황(Situation):

프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
과제를 위해 개인프로젝트를 만들었는데 모달창에서 건 이벤트에서 문제 발생

2. 과제(Task):

해결해야 했던 구체적인 과제나 목표를 서술하세요.
웹 사이트 모달창 코드를 원래의 목적에 맞게 코드 수정

3. 행동(Action):

과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
문제의 원인을 파악하고 > 해당하는 코드를 수정

4. 결과(Result):

행동의 결과로 어떤 변화가 있었는지 설명하세요.
모달창이 원래의 목적에 맞게 기능이 작동되었다

[hyun9758]

1. 상황(Situation):

프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
예시: "개인 프로젝트로 간단한 포트폴리오 웹사이트를 구축했었는데, 모바일 화면에서의 호환성 문제를 발견했습니다."

• 팀 프로젝트로 동아리를 선택하는 설문조사를 진행하는 사이트에서 페이지 전환이 이루어지지 않음.

2. 과제(Task):

해결해야 했던 구체적인 과제나 목표를 서술하세요.
예시: "웹사이트를 모바일 화면에도 잘 보이도록 반응형으로 개선하는 것이 목표였습니다."

• 설문조사에 따라서 자동적으로 동아리를 선택하고 추천하는 웹 사이트였습니다.

3. 행동(Action):

과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
예시: "CSS 미디어 쿼리를 사용하여 모바일 화면 크기에 맞게 디자인을 조정했습니다. 또한, 테스트를 통해 다양한 화면 크기에서의 호환성을 확인했습니다."

• 웹 컴포넌트를 사용하여 조금 더 편리하게 사이트를 이식했습니다.

4. 결과(Result):

행동의 결과로 어떤 변화가 있었는지 설명하세요.
예시: "이로 인해 웹사이트는 모든 디바이스에서 일관성 있는 사용자 경험을 제공하게 되었고, 로딩 시간도 단축되었습니다."

• 덕분에 나중에 다른 프로젝트를 할 때도 개발된 컴포넌트를 다시 재사용하고 유연하게 사이트를 옮길 수 있었습니다.

[clapsheep]

1. 상황(Situation):

github을 사용하면서 브랜치를 분기하며 사용할 때 기준이되는 develop브랜치를 Pull하지 않아, push하는 시점이 달라 " This branch is 1 commit ahead of, 2 commits behind develop." 메세지가 뜨는 상황을 마주했습니다.

2. 과제(Task):

push한 브랜치와 기준이 되는 develop브랜치의 커밋 시점을 동일하게 맞추어야 했습니다.

3. 행동(Action):

rebase를 진행하여 develop브랜치를 push한 브랜치에 병합하여 시점을 일치 시켰습니다.

4. 결과(Result):

이로인해 앞서 언급한 메세지는 사라졌고, 해당 경험을 통해 github 브랜치 전략을 한단계 더 깊이 이해할 수 있었습니다.

[ryujinzz]

1. 상황(Situation):

프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.

1. 부트캠프의 개별 swiper.js 구현 프로젝트에서, 제가 구상한 디자인대로 스와이퍼가 자리잡지 못 했습니다
2. 부트캠프의 바닐라 프로젝트에서, 헤더 부분 레이아웃이 사용자의 창크기에 따라 잘 움직이지 않았습니다.

2. 과제(Task):

해결해야 했던 구체적인 과제나 목표를 서술하세요.

1. 스와이퍼가 배경화면을 기준으로 대각선으로 무한 루프를 돌 수 있도록 만들어야 했습니다.
2. 사용자의 입장에서 어느정도의 창크기에 따라 헤더의 레이아웃이 제대로 중앙정렬이 되도록 해야 했습니다.

3. 행동(Action):

과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.

1. 코드펜 사이트를 참고하고, 구글링도 하여, 새로운 swiper.js 기능을 추가하였습니다 또한, css에서 각 스와이퍼에 간격을 조정하여 대각선으로 움직이는 것처럼 구현하였습니다.
2. 시안을 다시 꼼꼼히 확인하고, 마크업에서 구간을 새롭게 나누어 어느정도의 창 크기에 따라 레이아웃이 잘 정렬되도록 하였습니다.

4. 결과(Result):

행동의 결과로 어떤 변화가 있었는지 설명하세요.

1. 멋진 스와이퍼 기술들이 있다는 것을 알게 되었고, 그런 기술을 쓸 수 있다는 것에 기뻤습니다. 그리고 다른 js 들도 사용해보고 싶다는 생각이 들었습니다.
2. 시안을 처음부터 꼼꼼히 확인하고 마크업 단계에 시간을 많이 써야한다는 것을 깨달았습니다. 조금 더 사용자 입장을 고려하게 되는 시간이었습니다.

[chohyundon]

1. 상황(Situation):

프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
예시: "팀 프로젝트를 진행하면서 css flex를 만들면서 자꾸 빈 공간이 생기는 문제"

2. 과제(Task):

해결해야 했던 구체적인 과제나 목표를 서술하세요.
예시: "flex를 만들면서 빈 공간을 제거하기"

3. 행동(Action):

과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
예시: "구글링을 통해서 각각의 컨텐츠 태그에 flew-grow:1을 할당을 시도했더니 성공했다는 글을 보고 그대로 실현"

4. 결과(Result):

행동의 결과로 어떤 변화가 있었는지 설명하세요.
예시: "flex:grow:1 을 사용하니 각각의 태그에 빈 공간이 사라졌다"

[song0331]

1. 상황(Situation):

포트폴리오에 넣을 웹사이트를 만들던 중 LP판이 돌아가며 좌우 버튼으로 조작하는 UI를 만드는데 문제가 생겼습니다.

2. 과제(Task):

UI 위치와 크기가 깨지지 않게 만드는 것이 목표였습니다.

3. 행동(Action):

UI가 계속 깨져서 HTML 마크업 구조를 다시 설계해서 스타일링 했습니다.

4. 결과(Result):

LP판 UI를 만들어 사용자에게 시각적인 즐거움을 줄 수 있었습니다.

[iamjinpark]

1. 상황(Situation):

팀 프로젝트에 맡은 페이지 중 버튼의 기능이 작동되지 않음

2. 과제(Task):

뒤로가기 버튼을 클릭하면 이전 페이지로 이동하는 기능 구현, 여러 페이지에 활용되는 버튼이였음

3. 행동(Action):

처음엔 onclick 속성으로 해결했으나, 추후 조원들이 활용도 높은 버튼을 구현하려면 자바스크립트로 함수를 짜는것이 더 유용하다고 알려주어 수정

4. 결과(Result):

두가지 방법 모두 배울 수 있었고 기능 문제도 해결할 수 있었음

[jykim29]

1. 상황(Situation):

• 팀 프로젝트 진행 중에 페이지에 swiper를 삽입했었는데, 커스텀한 슬라이드 스타일이 제대로 적용되지 않는 문제를 발견했습니다.

2. 과제(Task):

• 파서가 기존 swiper.css 파일을 읽은 이후에 제가 커스텀한 css파일을 읽어서 스타일 오버라이딩이 되는 것이 목표였습니다.

3. 행동(Action):

• swiper.css를 js파일 안에 import 했었는데 이렇게 되면 제일 마지막에 읽혀진다는 것을 발견하게 되었고, 대신에 html 파일의 head태그 안에 제가 커스텀한 css 파일 위에 위치시켜서 올바른 순서로 읽도록 바꿨습니다.

4. 결과(Result):

• 이로 인해 제가 만든 스타일에 불필요한 !important를 사용하지 않아도 되었으며, 정상적으로 스타일이 적용되었습니다.

[lin0211]

1. 상황(Situation):

애니메이션이 끝나고 모달창이 활성화시켜야했습니다. 동기적인 자바스크립트의 특성이 있기 때문에 모달창이 애니메이션을 가져버리는 상황이었습니다.

2. 과제(Task):

애니메이션이 끝나면 모달창이 활성화하는 함수가 진행되도록 만드는 것이 목표였습니다

3. 행동(Action):

첫번째 해결방안으로는 애니메이션 타임라인에 추가로 모달창이 활성화 하는 코드를 작성하였습니다. 하지만 이는 함수에 한기능이 아닌 두가지 기능을 담게 되었기 때문에 async-await 사용으로 비동기 처리를 해주었습니다.

4. 결과(Result):

함수에 여러가지 기능을 넣지 않고 비동기 처리를 하여 클린코드에 가까운 코드를 만들수 있었습니다.

[ParkjiDev]

1. 상황(Situation):

tailwind 사용시 class명이 너무 길어지고, 프로젝트 내에서 여러 요소에 공통적으로 사용하는 스타일의 경우도 일일이적어줘야 하는 불편함이 있었습니다.

2. 과제(Task):

공통적으로 사용되는 스타일을 묶어서 사용하는 것이 목표입니다.

3. 행동(Action):

팀원들과 소통한 뒤 공통적으로 쓰이는 스타일을 정하고 tailwind config 파일에 정의하여 사용할 수 있도록 하였습니다.

4. 결과(Result):

피그마 시안을 바탕으로 클래스명을 지정하여 붙여주어 시안에 있는 내용 그대로 사용할 수 있어 코드 작성에 시간을 줄일 수 있었고, tailwind class를 좀 더 직관적으로 표현할 수 있었습니다.

[SWLee2973]

1. 상황(Situation):

swiper js를 사용해 아무거나 만들어보기 과제를 수행할 때였는데, 음악플레이어로 결정해 곡 넘김 화면 애니메이션을 swiper로 작동하도록 구현했었습니다. 이 때 다음 / 이전 곡 넘김 시 버튼을 반복적으로 클릭하면 swiper가 1번 작동되는 동안 곡 넘김이 여러번 발생하는 문제를 발견했습니다.

2. 과제(Task):

다음 / 이전 곡 넘김 시 버튼을 여러번 클릭해도 다음 슬라이드가 완전히 나타나기 전까지 넘어가지 않도록 개선하고자 했습니다.

3. 행동(Action):

js의 스로틀링 기법을 활용해 다음 스와이퍼가 나타나는 시간인 2000ms동안은 한번만 작동되도록 개선했습니다.

4. 결과(Result):

이로 인해 다음 곡 및 이전 곡 재생 버튼 클릭시, 또한 셔플 재생시에도 여러번 클릭할 경우에도 다음 재생되는 곡과 화면에 나타나는 정보가 일치하도록 수정됐습니다.

[ksyee]

1. 상황(Situation):

프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.

바닐라 프로젝트에서 header와 footer를 html 문서마다 복사, 붙여넣기 하는 게 귀찮았음.

2. 과제(Task):

해결해야 했던 구체적인 과제나 목표를 서술하세요.

vite 환경에서 header.html, footer.html을 만들어두고 include 하기.

3. 행동(Action):

과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.

header.html, footer.html을 만들어두고 include.js에서 fetch를 사용해 header.html, footer.html의 내용을 include.js를 불러온 html문서의 header, footer에 넣어주기

4. 결과(Result):

행동의 결과로 어떤 변화가 있었는지 설명하세요.

복사, 붙여넣기를 하지 않고 편안하게 header, footer를 불러올 수 있었음.
html문서가 깔끔해졌음.

[bellori729]

1. 상황(Situation):

sass의 학습량이 매우 부족했는데 프로젝트 때 sass로 진행하기로 함

2. 과제(Task):

sass를 잘 활용하여 스타일링 하는 것이 목표였습니다.

3. 행동(Action):

팀원들과 함께 의논하면서 환경구성을 마쳤고 영상강의와 문서들을 참고하여 복습 진행하였고 pure css로 먼저 작성 후 변수, mixin 등을 활용하여 수정

4. 결과(Result):

sass 활용능력이 이전보다 올라갔고, 막막함도 조금 덜해졌으며 코드의 가독성이 높아졌습니다.

[jio-ping]

1. 상황(Situation):

개인 토이프로젝트로 html2canvas 라이브러리를 이용한 이미지를 제공하는 서비스를 만들었는데 ios 모바일에서는 다운로드가 되지 않았습니다 .

2. 과제(Task):

웹사이트를 모바일 화면에도 잘 작동하도록 하는것이 목표였습니다.

3. 행동(Action):

같은 이슈를 기재한 깃허브 이슈를 참고해 모바일과 pc 코드를 분리해 작성해 수정했습니다.

4. 결과(Result):

잘 작동되었습니다...

[bellori729]

회고 7조

1. 상황(Situation):

2. 과제(Task):

3. 행동(Action):

4. 결과(Result):

[Bambiru]

1. 상황(Situation):
   로컬에서는 데이터바인딩이 잘 되는데, 배포만 하면 데이터가 안들어가는 현상이 있었습니다.
2. 과제(Task):
   데이터를 성공적으로 바인딩시키는 것이 목적이었습니다.
3. 행동(Action):
   에러를 자세히 보니, url에 undefined가 있었고, env파일이 연동되지 않았다는 것을 알게되어 netilfy에 연결시켜주었습니다.
4. 결과(Result):
   url이 정상적으로 적용되었으며, 데이터가 정상적으로 들어오는 것을 확인하였습니다.
   또한, 에러를 자세히 읽어봐야한다는 것을 다시 한 번 깨달았습니다.

[bellori729]

1. 상황(Situation): 코드상 문제가 없었으나, input 레이아웃 깨짐 현상 발생

2. 과제(Task): 레이아웃 깨짐 현상 해결

3. 행동(Action):

• 캐시 비우기 및 강력 새로고침 (해결 X)
• 작성한 코드와 로컬 서버 상태를 확인 (정상)
• css 우선순위를 높이기 (해결 X)
• 윈도우, 맥 OS 2개 비교하여 실행 (레이아웃 꺠짐 현상 그대로)
• 크롬, 파이어폭스, 웨일, 엣지 총 4개의 각 브라우저에 접속해서 확인 (크롬 제외 모두 레이아웃 정상 랜더링)
• 시크릿창으로 확인 (레이아웃 정상 랜더링)
• 확장 프로그램 하나씩 꺼보기 (해결 O)

4. 결과(Result):
   문제는 Grid Layout System 확장 프로그램이 사용하고 있는 클래스명과 충돌되어 레이아웃이 깨졌다는 것을 알 수 있었다.
   해당 확장 프로그램을 끄면 정상 랜더링이 되기에 이것으로는 문제가 해결되었다고 볼 수 없어 클래스명이 element 없이 input-wrapper와 같이 단순하게 되어있는 부분 모두 수정하니 해결되었다.
   그동안 단순히 프로젝트 디렉토리 내 겹치지 않게끔만 신경을 써왔는데 예상치 못한 문제가 발생되어 해결하느라 애를 좀 먹었다.
   이를 통해서 느낄 수 있었던 부분은 BEM 패턴 방식을 사용했더라면 이런 문제가 발생하지 않았을 거라는 생각이 들었고 클래스명을 대충 짓지 않도록 신경을 조금 더 써야겠다는 생각이 들었다.

[yeo-seoyun]

1. 상황(Situation)
   : checkbox 두 개를 연동해야 하는 상황
2. 과제(Task)
   : checkboxA와 checkboxB를 연동해서, checkboxA의 상태가 변경될 때 checkboxB의 모든 항목들의 상태도 동일하게 변경되는 기능을 구현.
3. 행동(Action)
   : 'input[id^="checkBox"]' 선택자를 사용하여 두 checkbox를 선택 후 eventListener를 추가하는 간단한 방법을 찾게 되었습니다.
4. 결과(Result)
   : 체크박스 A와 B가 성공적으로 연동되었고, 체크박스 A의 상태가 변경될 때마다 체크박스 B의 모든 항목들의 상태도 동일하게 변경되었습니다.

[HHeoGeon]

1. 상황(Situation)
   : 스와이퍼 버튼 커스텀
2. 과제(Task)
   : 스와이퍼에 기존 버튼을 사용하는 것이 아닌 디자인 시안에 나와있는 것을 사용하는 것.
   3.행동(Action)
   : 가이드에 나와있는 그대로 container, wrapper, button을 사용하는 것이 아닌 버튼에 클래스를 다르게 주는 것.
3. 결과(Result)
   : 클래스에 button을 넣어 사용한다면 기존 이미지가 줄어드는 현상이 나왔지만 다른 다른 클래스명을 넣어 사용한다면 이미지가 줄어들지 않고 사용할 수 있게 되었습니다.

[hoon0817]

상황(Situation):익숙치 않은 테일윈드를 사용

과제(Task): 테일윈드로 마크업을 하여야함

행동(Action): 구글링과 공식홈페이지의 설명으로 하나씩 시도해봄

결과(Result): 테일윈드를 사용하여 마크업을 완료함

[SWLee2973]

회고 8조

1. 상황(Situation):

2. 과제(Task):

3. 행동(Action):

4. 결과(Result):

[SWLee2973]

1. 상황:

• 바닐라 자바스크립트 프로젝트에서 각 분류 별로 상품을 출력하고, 정렬 히스토리를 맞춰야 했습니다.

2. 과제:

• 쿼리스트링으로 기능을 작동시키는데 정렬 조건을 parameter에 붙이고 나니 이후 분류 쿼리가 정상적으로 url에 붙지 않았습니다.

3. 행동:

• 구글링을 통해 new URLSearchParams()라는 웹 API를 사용해 쿼리 스트링을 추가하고 제거할 수 있는 방법에 관해 알게 되었습니다.

4. 결과:

• 이로 인해 string을 직접 다루지 않고 api의 메소드를 통해 분류와 정렬 기능이 동시에 잘 작동하게 되었습니다.

[1101x]

8조 정현주

1. 상황(Situation): 배포시 일부 파일 이미지가 깨지는 현상 발생
2. 과제(Task): 깨진 파일의 배포용 경로가 로컬 작업용 경로와 상이함, vite 배포시 폴더 관리가 잘못되엇기 때문이엇음
3. 행동(Action): 정적자산과 동적자산 폴더를 다시 정리함
4. 결과(Result): 파일 경로가 옳게 수정되어 배포됨

[vHwav]

1. 상황(Situation): 배포 시 location의 경로가 깨지는 현상이 발생함
2. 과제(Task): 경로 설정이 배포된 루트의 연결된 홈페이지와 달라서 라는 것을 알게 됨.
3. 행동(Action): root 설정 시 /src/pages로 만들었는데 이 경로가 사라지는 것을 알게 됨. 맨 처음으로 가는 start 페이지의 루트를 다시 설정함
4. 결과(Result): 제대로 원하는 루트로 가게 됨

[song0331]

1. 상황
   프로젝트 파일들을 절대경로로 설정했는데 github로 배포 시 경로 문제가 발생

2. 과제
   github 배포 시 저장소 이름이 url 앞에 붙어서 생긴 문제

3. 행동
   vite에서 제공하는 base를 사용해서 배포 시 저장소 이름을 경로 앞에 붙이면 된다.
   배포 시 필요에 따라 절대, 상대 경로를 구분해서 경로를 설정

4. 결과
   배포한 사이트를 경로 문제 없이 이용할 수 있었다.

[jio-ping]

1. 상황
   몇 몇 icon 이 화면에 랜더링 되지 않았다.

2. 과제
   정적으로 랜더링 된 아이콘은 올바르게 보여지고 동적으로 랜더링 되는 아이콘들은 불러와지지 않음을 알게됨

3. 행동
   동적 랜더링되는 에셋들은 하나하나 불러와줘야 랜더링 됨

4. 결과
   아이콘들이 올바르게 랜더링됐다. 🎶

[jsweetpotato]

회고 5조

1. 상황(Situation):

2. 과제(Task):

3. 행동(Action):

4. 결과(Result):

[ryujinzz]

1. 상황(Situation):

첫 바닐라 팀 프로젝트에서 , 주소 api를 이용해 호버로 작업하던 것을 다른 곳에 이식하여 작동되지 않는 문제를 발견

2. 과제(Task):

호버나 클릭이벤트가 아니라 주소를 입력한 뒤 주소 입력창이 닫히면 바로 입력값이 렌더링 되어야 했음.

3. 행동(Action):

여러가지 방법을 생각해보다가, 주소 api 창이 같은 창에서 이루어지는 것이 아니라 아예 다른 창에서 열리고 닫히는 것이었으므로, 호버에서 아이디어를 생각해내어 창이 닫히면 바디 전체에 마우스오버의 효과를 주어 해결함.

4. 결과(Result):

정상적으로 렌더링 되며, 주소 api를 다양한 방법의 이벤트 핸들링으로 활용할 수 있게 됨.

[yen815]

1. 상황(Situation):

자바스크립트를 한 줄도 못쓰는 상황에서 프로젝트에 던져 졌습니다. 속으로 어떻게 해야 될지 너무 고민도 많고, 이걸 제가 해낼 수 있을지 모르겠다고 스스로도 생각하는 상황이었습니다.

2. 과제(Task):

제가 맡은 페이지는 어떻게든 마크업, css를 해놓자, 자바스크립트는 최소한의 동작 구현이라도 해보자.
두 가지가 저의 목표였습니다.

3. 행동(Action):

우선 제가 할 수 있는 파트부터 진행했습니다.
테일윈드 css부터 익혀서 마크업과 css를 완성시켜놓았습니다.
그리고 자바스크립트는 정말 감사하게도 조원분들이 많이 도와주셨습니다.
수량 증가, 감소와 그에 따른 금액 증가, 감소에 대한 틀을 배워서 적용해보았습니다.
그러면서 발생한 오류들은 팀원들과 소통하고, 뤼튼을 통해 문제점을 파악하고 해결해보려고 노력했습니다.
(아직은 혼자 오류를 발견해서 문제를 해결할 수 있는 단계까진 못 된다는 것을 알 수 있었습니다..)

4. 결과(Result):

여전히 뤼튼 같은 사이트를 통해 문제를 해결해야 하는 단계로 아직 많이 부족합니다.
하지만 처음엔 오류인 코드 조차 파악하지 못했다면
지금은 어떤게 문제였는지 파악할 수 있게 되었고, 그걸 사용하여 오류를 해결해 볼 수 있는 단계까지 성장했습니다.

다음 프로젝트에선 직접 코드도 짜보면서 씹고, 뜯고, 맛보며, 즐길 수 있는 경지까지 이를 수 있게 열심히 노력하겠습니다.

[jsweetpotato]

1. 상황(Situation):

회원가입 페이지를 만드는 중, 회원가입 페이지에서 등록할 사용자 이메일과 비밀번호를 입력한 후 validation을 거치면 사용자 프로필 상세정보 입력 페이지로 이동하는 기능을 구현하는 중이였다.
문제는 프로필 입력 페이지에서 브라우저 뒤로가기 버튼을 누르면 다시 이메일과 비밀번호 validation 페이지로 이동되는 것이다.
이는 회원가입 페이지 전체 플로우에 적용되는 문제였다.

2. 과제(Task):

회원가입 페이지가 다음 스텝으로 넘어갔을 때 다시 이전페이지로 되돌아가지 못하게 하기.

3. 행동(Action):

먼저 window.history에 대해 알아봤다. window.history 자체는 변경할 수 없는 정보라, 다른 방법을 탐색해야 했다.
처음엔 validation state를 localstorage에 저장해서 state가 false면 window.location을 사용해 강제로 이동시키는 방법을 사용하려했다.
그런데, 이는 localStorage를 조금만 조작하면 쉽게 파훼될 수 있어 다른 방법을 찾아야 했다.
그러던 중 window.history.replaceState();라는 기능을 알게되었고 이를 사용해서 막았다.

4. 결과(Result):

window.history.replaceState(null, null, '/');를 사용해 뒤로가기를 누르면 곧바로 시작 페이지로 이동하게 만들었다.

[clapsheep]

1. 상황(Situation):

회원가입 페이지에서 전체 동의하기 버튼을 구현하면서 발생한 문제였다.
테일윈드를 사용하다 보니 가상선택자 사용에 어려움을 겪었고, checkbox를 커스텀 하면서 전체 동의하기 버튼이 이상하게 작동하는 문제를 겪었다.

2. 과제(Task):

전체동의를 누르면 동의 버튼의 항목들 모두 체크가 되게끔 구현하기

3. 행동(Action):

해당 부분은 과거 슬비쌤의 HTML시간에 배웠던 부분이라 선생님께 질문을 했고, 추가적으로 구글링을 통해 테일윈드에서 peer라는 속성이 있던 것을 알고 활용하였다.

4. 결과(Result):

기존에 놓쳤던 checkbox 커스텀 부분을 다시 한 번 익힐 수 있었고, 추가적으로 키보드 포커스도 확보가 되어 접근성도 준수할 수 있게 됐다.

[fullkeem]

1. 상황(Situation):

회원 가입 시 아이디와 핸드폰을 기존 유저 정보와 비교하여 중복 유무를 체크하는 재사용 가능한 함수를 작성했습니다. 그러나 그러나, 핸드폰 중복 확인 과정에서 로컬 서버가 다운되는 문제가 발생했습니다.

2. 과제(Task):

핸드폰 중복 확인 버튼을 눌렀을 때 에러가 발생하지 않도록 수정해야 합니다. 또한, 정상적으로 유저의 정보와 비교하여 중복 체크를 실행해야 합니다. 이 과정에서 함수의 단일 책임 원칙에 맞게 로직을 작성해야 합니다.

3. 행동(Action):

입력값 확인과 중복 검사를 동시에 진행하는 함수를 두 개의 함수로 분리하였습니다. 이 두 함수를 순차적으로 실행하는 새로운 함수를 작성하였습니다.

4. 결과(Result):

다양한 기능을 수행하는 함수를 각각 분리하여 작성하니, 코드의 가독성이 향상되었고 원하는 기능도 정상적으로 구현되었습니다.

[Samuel-0930]

회고 1조

1. 상황(Situation):

2. 과제(Task):

3. 행동(Action):

4. 결과(Result):

[Samuel-0930]

1. 상황(Situation): PocketHost에서 불러오는 데이터들이 화면에 렌더링이 되는 시간이 너무 오래걸리는 상황

2. 과제(Task): 데이터 베이스 부분에서 시간을 절약할 방법을 모색하고 로딩창, 스켈레톤 UI를 구현해야 했음

3. 행동(Action): 온라인 이미지 최적화 사이트에서 이미지들을 최적화하고 이미지가 모두 로딩이 된 시점을 파악해 로딩창을 만들어주었다.

4. 결과(Result): 로딩시간을 지루하지 않게 로딩창으로 변경완료

[chohyundon]

1. 상황(Situation): 포켓베이스를 통해 create를 진행하는데 이미지 파일 업로드를 못하는 상황
2. 과제(Task): 이미지 파일 업로드 하는 방법을 찾아봐야 했음
3. 행동(Action): 구글링을 해보니 이미지 파일 업로드 files로 접근해서 이름을 찾음
4. 결과(Result): 파일 업로드가 잘 구현되었다

[Lulurem]

1. 상황(Situation): 스크럼 마스터 역할을 맡았다.
2. 과제(Task): 마일스톤, 위키 작성을 해야한다.
3. 행동(Action): 처음 해보는거라 어떻게 작성해야하나 방법을 잘 모르겠어서 여러 레퍼런스를 참고하고 필요한 부분만 가져와서 페이지 구성
4. 결과(Result): 작성완료

[dldnlee]

회고 2조

1. 상황(Situation):

2. 과제(Task):

3. 행동(Action):

4. 결과(Result):

[jykim29]

1. 상황(Situation) : 이번 바닐라JS 팀프로젝트로 모바일전용 웹사이트를 구축하고 있었는데, 데이터 로딩 속도 문제를 발견했습니다.

2. 과제(Task) : 서버에서 받아오는 이미지 데이터의 용량을 경량화하여 로딩 시간을 개선하는 것이 목표였습니다.

3. 행동(Action) : 서버 API에서 제공하는 이미지 썸네일 옵션을 사용하여 용량이 큰 원본 이미지 대신에 용량과 이미지 사이즈가 축소된 이미지를 받도록 설정했습니다.

4. 결과(Result) : 썸네일 이미지 설정으로 인해 기존 원본 이미지의 용량보다 약 90% 감소된 용량의 이미지 데이터를 받게 되었으며 로딩 시간도 기존보다 50%이상 단축되었습니다.

[dldnlee]

1. 상황(Situation) : 데이터베이스에서 가져온 데이터를 렌더링 해주는데 유령 undefined가 화면에 렌더링되는 현상이 발생.

2. 과제(Task) : undefined 요소가 어디서 나오고 있고, 어떤 문제 때문에 렌더링 되는지 파악하는 것이 목표였습니다.

3. 행동(Action) : 제일 먼저 웹 브라우저 상에서 undefined가 어떤 방식으로 렌더링 되고 있는 확인 해봤고, 작성한 코드도 확인 해봤습니다.

4. 결과(Result) : 결과적으로 제가 작성한 렌더링 함수를 또 다른 렌더링 함수 안에서 매개변수로 사용해서 호출을 하고 있었습니다. 두 개의 함수를 분리한 결과, 해당 문제를 해결했고 더욱 근본적인 코드의 품질도 향상 시킬 수 있었습니다.

[dlehdg]

상황(Situation) : 장바구니 모달창에 데이터베이스를 불러오니 데이터 렌더링 속도에 문제가 생김

과제(Task) : 데이터 렌더링 속도 문제를 개선할 수 있는 방법을 찾아보기가 목표 였습니다

행동(Action) : 데이터베이스의 정보를 가진 요소를 만들어 모달창은 그 요소에서 데이터베이스 정보를 가져오게 구현

결과(Result) : 기존의 db에서 정보를 불러오는 코드를 개선하여서 좀 더 빠르게 웹사이트가 작동되었다

[iamjinpark]

상황(Situation) : 카테고리 페이지에서 담고싶은 아이템 버튼 클릭 시 로컬 스토리지로 값을 담는 기능 중에 스토리지의 값과 화면 렌더링 값이 매칭되지 않음

과제(Task) : 관심있는 아이템을 클릭하면 체크표시로 전환 후 로컬스토리지에 저장하는 기능 구현

행동(Action) : 코드 로직을 바꾸어 클릭하는대로 로컬스토리지에 담기는것이 아닌 클릭한 값들의 isChecked 클래스를 add 한 뒤 isChecked 클래스가 있는 값만 로컬스토리지에 저장

결과(Result) : 사용자가 어떤 값을 클릭해도 최종값만 저장하면 되기 때문에 문제없이 저장할 수 있었다.

[roben31380]

1. 상황(Situation): top-level-await를 써서 build가 되지 않음

2. 과제(Task): top-level-await 오류를 해결하는 방법

3. 행동(Action):

1. vite config 수정했으나 다른 팀원에서 오류가 나서 진행하지 못함
2. 오류난 부분의 코드의 리팩토링 진행 ( template를 html에 남겨두고, 내용을 채워넣는 함수로)

4. 결과(Result): 오류가 없어져서 build가 잘 진행됨

[DragonTiger92]

회고 3조 STAR 기법을 이용한 경험 작성 코멘트란

아래에 reply로 본인의 경험을 STAR 기법을 이용하여 작성해주시면 됩니다.

• 미션 내용: 이번 프로젝트에서 반드시 가져가보고 싶은 경험 1가지를 상상하며 STAR 기법으로 작성해보기. (지난 스프린트 회고 참고)

• 템플릿 및 개요 코멘트 링크: 3-7. STAR 기법으로 나의 경험 정리해보기 #44 (comment)

[asdfqaz74]

1. 상황(Situation):

채팅방을 구현하고 싶었음

2. 과제(Task):

바닐라 자바스크립트로 실시간으로 대화내용을 가져오는 방법

3. 행동(Action):

포켓베이스 api 문서를 구석구석 찾아봤음. 결국 Realtime api 라는 것을 찾게 되었고 적용함.

4. 결과(Result):

Realtime api 를 사용하여서 채팅이벤트가 발생 시 바로바로 렌더링 해주었음.

[mondimhaus]

1. 상황(Situation):
   html 문서에 테일윈드로 css를 구현하느라 중복되는 클래스 명이 많아져 속성을 찾기 힘들어짐

2. 과제(Task):
   가장 자주 사용되는 속성들만 하나로 묶기

3. 행동(Action):
   테일윈드의 layout apply를 사용하여 속성을 하나로 묶음.

4. 결과(Result):
   수정하기 용이해짐

[DragonTiger92]

1. 상황(Situation):

밤 12시가 됐는데, 다음 날 09:10 전까지 완료해야 하는 CSS 코드 작성을 완료하지 못 했습니다. 밤을 새자니 컨디션이 걱정 되고, 그냥 자자니 정해진 마일스톤을 지키지 못 할 것 같은 상황이었습니다.

2. 과제(Task):

'제품 상세 페이지'의 style을 전부 CSS로 구현해내야 했습니다.

3. 행동(Action):

과제 수행을 시간 내에 마치며 최소한의 컨디션 유지를 하기 위해 필요 없는 마크업을 지우고, 남은 부분에서 최소한의 CSS 코드 작성을 진행하였습니다. 이때, 코드 품질이 조금 저하 되더라도 시간 내에 작업을 마치며 컨디션을 유지하는 것이 더 중요하다고 생각해서 페이지 내 style이 페이지에 제대로 구현 되는 것만을 목표로 잡고 작업을 진행하였습니다.

4. 결과(Result):

익일 오전 6시 50분까지 목표한 작업을 완료할 수 있었습니다. 1시간 30분 정도 잠을 잔 후, 제 시간에 익일 수업에 출석하여 정상적으로 남은 프로젝트 작업을 이어나갔습니다.

[zooyaam]

1. 상황(Situation):

자바스크립트를 잘 학습하지 않은 시점에서 바닐라 프로젝트에 들어갔습니다. 때문에 기능 구현을 위한 코드 작성시, 처음 한 줄부터 쓰기 막막해서 하루종일 아무것도 못하고 한숨만 쉬는 상황이 있었습니다.

2. 과제(Task):

내가 맡은 페이지가 많지 않으니, 그 부분은 확실하게 내 힘으로 수행하고, 내가 작성한 코드를 이해하는 것이 목표였습니다.

3. 행동(Action):

처음에는 ai에게 질문해서 코드를 긁어왔지만 해당 코드를 이해할 수도, 제 코드에 적용시킬 수도 없어 아무것도 나아지지 않았습니다.
그래서 예전에 했던 실습 파일과 공식문서를 보며 오래 걸릴지라도 다시 되새김질 했습니다.

하나의 버튼이 4가지 기능을 한다면, 처음부터 4가지를 구현하기 위해 애쓰지 않고,
하나의 기능부터 마구마구 작성해보고 이후에 다시 다음 기능을 구현하기 위해 고민했습니다.

4. 결과(Result):

해당 과정을 통해서 제가 완벽하게 코드를 잘, 수월하게 짤 수 있게 된 것은 아닙니다.
하지만 처음에는 영어 한글자 입력하는 것이 어려워 너무 죄지은 느낌에 주눅이 많이 들었지만,
지금은 ”여기서는 함수를 사용하면 좋겠다“ 와 같은 생각의 틀이 잡힙니다.
비록 잘못된 생각이더라도 그런 생각이 가능한 것에 매우 많이 성장했다고 생각합니다.

[pistapixie]

1. 상황(Situation):

카테고리 페이지가 마우스로는 기능 구현이 되었으나 키보드로는 접근이 되지 않는 상황.

2. 과제(Task):

키보드로 접근 및 상호작용이 가능하도록 구현해야함.

3. 행동(Action):

카테고리들을 ul의 li요소로 마크업한 상태여서 tabindex 속성을 추가해 키보드로 접근가능하도록 함. 하지만 키보드 접근성만 제공되고 해당 키로 선택할 수 있는 상호 작용을 위해서는 자바스크립트로 이벤트 핸들링 구현을 따로 해줘야함을 알게 됨.
따라서 카테고리들의 마크업자체를 button 요소로 변경하여 기본적으로 키보드 포커스 및 상호작용이 되도록 함.

4. 결과(Result):

적절한 마크업 변경으로 웹접근성을 높이며 필요한 기능 구현을 완료함.

[hyun9758]

회고 4조

1. 상황(Situation):

2. 과제(Task):

3. 행동(Action):

4. 결과(Result):

[hyun9758]

1. 상황(Situation):

자바스크립트 함수를 잘 모른 채 바닐라 프로젝트에 들어가게 돼서 기본적인 함수 구현에서도 많이 막혔습니다.

2. 과제(Task):

티빙 모방 페이지에서 제가 맡은 부분은 로그인 페이지의 마크업과 자바스크립트 코드였습니다. 그러나 인풋 창에서 어떻게 정규식을 세우고 어떻게 유효성 검사를 해야할지 많이 몰라서 막막했습니다.

3. 행동(Action):

다행히 회원가입 페이지를 이미 끝내신 팀원분께 개인적으로 질문을 드렸습니다. 바쁘실까봐 걱정도 많고 이렇게 혼자 실력이 좋지 않은 것 같아서 스스로 힘들었습니다. 그러나 동일하게 이용되는 함수도 많았고 오히려 그 과정에서 함께 같이 쓰는 함수들을 정리하고 정규식을 세우는 과정에서 많은 도움을 얻었습니다.

4. 결과(Result):

덕분에 마크업과 자바스크립트 단계에서 조금 더 구현을 수월하게 할 수 있었고 함수 기능과 어떻게 마크업을 구성해야 할지 눈에 들어오기 시작했던 것 같습니다.

[highballplz]

1. 상황(Situation):

접근성을 위해 키보드 포커싱이 돼야 할 버튼들이 공식 홈페이지에서도 포커싱되지 않는 문제가 있었습니다.

2. 과제(Task):

접근성을 고려하여 모든 버튼들이 키보드로 포커싱되게 만들어야 했습니다.

3. 행동(Action):

팀원(주현님)의 도움을 받아 appearance : none이라는 속성으로 input 박스를 보이지 않게 하면서도 키보드 포커싱을 받을 수 있게 했습니다.

4. 결과(Result):

이로 인해 모든 버튼들이 키보드 포커싱을 받을 수 있게 되었습니다.

[jump6746]

1. 상황 (Situation)

회원가입 페이지에 Validation을 만들어야 했습니다.

2. 과제 (Task)

회원가입 페이지 입력 값에 대한 Validation 하기.

3. 행동 (Action)

우선 생각나는 대로, 하드 코딩을 진행했습니다.

4. 결과 (Result)

기능은 동작하게 만들었으나, 생각이 정리되지 않은 채 만들어서 상당히 더러운 코드가 만들어졌습니다.

[juhyuny]

1. 상황(Situation):

장바구니 페이지의 상품 정보를 불러와 상품별로 수량에 따른 금액을 표시해야하는 상황, 버튼을 누를 떄 마다 각기다른 모든 리스트의 금액이 통일되어 버리는 상황

2. 과제(Task):

상품의 가격이 해당 상품의 수량 증감버튼을 누르는 것에 따라 변경되는 것

3. 행동(Action):

클릭한 수량변경버튼의 부모, 형제, 자식을 찾아 해당 상품의 가격을 변경

4. 결과(Result):

할인된 금액과 할인전 금액을 모두 증감버튼을 누른 해당 상품의 가격이 반영되어 변경

[cho-yn]

1. 상황 (Situation)
   제목마다 아이콘이 있는 페이지 만들기

2. 과제 (Task)
   아이콘 이미지를 스프라이트 이미지로 만들어 봄

3. 행동 (Action)
   수업 시간에 배운 스프라이트 플러그인을 사용함

4. 결과 (Result)
   이미지 파일 개수가 줄어들었음

[lin0211]

회고 6조

1. 상황(Situation):
2. 과제(Task):
3. 행동(Action):
4. 결과(Result):

[ksyee]

1. 상황(Situation)
   비밀번호 변경 api를 이용하기 위해서는 메일 서버가 필요함

2. 과제(Task)
   개인적으로 이용할 수 있는 메일서버 찾아보기

3. 행동(Action)
   개인 gmail을 이용해 서버 이용 가능하대서 써봄

4. 결과(Result)
   비밀번호 찾기를 이용하면 가입할 때 입력했던 메일로 비밀번호 변경 메일이 발송되고, 정상적으로 변경 가능

[lin0211]

상황(Situation): 바닐라 프로젝트에 참여 하였습니다

과제(Task): 회원가입 페이지를 담당하여 마크업, 스타일링, 자바스크립트 기능 구현

행동(Action): 시안과는 다른 포인트를 넣기 위해 테마 색상을 변경 하였는데 체크리스트의 경우, 클릭시 체크된 체크박스 이미지가 배경과 명도대비 4.5를 넘었음에도 불구하고 눈에 띄지 않는다는 의견이 나왔습니다. 이를 디자인적 훼손 없이 접근성을 높여주기위해 스케일을 커지게 해주었습니다.

결과(Result): 여러 방법의 조원들과도 토의 해보았는데( 보더를 주거나, 다른 색상을 추가하거나 ) 스케일만 크게 해주는 checked 형태를 만들어 주어 눈에 띄게 함으로서 디자인 훼손없이, 또 색상만으로 변하는 디자인이 아님으로써 웹 접근성 측면을 높여 주었습니다.

[junghyunlee0922]

상황(Situation):

팀 프로젝트때 베포 할때였습니다.

과제(Task):

베포 하였을때 main페이지에 스와이퍼가 3~4개정도 들어갔는데 버튼이 겹쳐서 이상해졌습니다.

행동(Action):

클래스명 겹쳐서 그런가 해서 바꿔보고 tailwind 문제인가 싶어서 한번 보고 보니까 버튼 swiper bundel 스타일 문제로 swiper에 대한 검색이랑
css 검색을 다 해봤습니다.

결과(Result):

결론은 다 뜯어 고쳐야되서 수정은 못하였으나 다음부터는 이런일 없도록 상황을 만들수 있을거같습니다.

[lanuioe]

1. 상황(Situation):

바닐라프로젝트로 장바구니 페이지를 만들면서, 선택한 상품의 선택 여부와 정보를 얻는 과정에서 문제가 발생했습니다.

2. 과제(Task):

선택한 상품의 데이터베이스 정보를 얻어 삭제, 수량 변경, 주문을 할 수 있도록 하는 것이 목표였습니다. Cart 레코드에서 불러온 DB를 사용해 Product 레코드에 접근하는 것에 어려움을 겪었습니다.

3. 행동(Action):

input, button 등의 요소에 data 속성을 활용해 개별 상품의 DB 정보를 얻을 수 있었습니다. 또한, 상태변수 관리를 통해 상품의 선택 여부를 관리하였습니다.

4. 결과(Result):

처음부터 상태 관리를 잘 했으면 좋았을 걸 싶을 정도로 그간 고생했던 것들이 그나마 정리가 되는 느낌이었습니다. 여러 번 갈아엎는 과정에서 코드를 깔끔하게 작성하지는 못했지만, 앞으로 어떤 식으로 작업하면 좋을 지에 대한 방향성을 조금이나마 잡을 수 있었던 것 같습니다.