3-7. STAR 기법으로 나의 경험 정리해보기 #44
Replies: 29 comments 41 replies
-
1. 상황(Situation):개인 프로젝트로 간단한 포트폴리오 웹사이트를 구축했었는데, CSS height:auto로 설정한 오브젝트의 애니메이션이 작동하지 않았습니다. 2. 과제(Task):애니메이션이 정상적으로 동작하게 만드는 것이 목표였습니다. 3. 행동(Action):stack overflow, youtube에서 관련 해결 방법을 찾아봤습니다. 다른 CSS 코드로 대체할 수 있는지 시도해봤습니다. 4. 결과(Result):getBouncingClientRect를 사용해 오브젝트 크기를 가져온 뒤 height:auto에 애니메이션을 주는 방식으로 변경해 적용 시켰습니다. 다만 완벽한 구현은 성공하지 못했습니다(height가 정확하게 측정되지 않는 문제 발생) |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):스와이퍼로 구현한 사이트의 카드 스택 형태가 랜덤으로 섞이지 않음 2. 과제(Task):카드 스택 랜덤 셔플 3. 행동(Action):피셔 예이츠 알고리즘을 활용 4. 결과(Result):랜덤 기능 적용 |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):프로젝트를 진행하는 과정에서 데이터베이스 관리하는 방법이 익숙하지 않았습니다. 2. 과제(Task):데이터베이스에서 원하는 데이터를 마음대로 뽑아오고 추가하는 방법을 익히는 것이 목표였습니다. 3. 행동(Action):사용하기 쉬운 데이터베이스 플랫폼을 활용해서 데이터가 어떻게 관리되고 어떤 방식으로 활용할 수 있는지 이해해보는 과정을 밟아야 했습니다(사용하는 데이터베이스 플랫폼 mdn문서를 읽어보기와 인터넷 검색하기). 이런 과정이 지나고 나서 실제로 프로젝트에서 활용해보면서 숙련도를 높였습니다. 4. 결과(Result):작업하던 프로젝트에서 실제로 데이터베이스를 활용해서 유저가 입력한 정보를 데이터베이스에 추가하고, 제가 뽑아오고 싶은 데이터를 마음대로 뽑아올 수 있었습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요. 2. 과제(Task):해결해야 했던 구체적인 과제나 목표를 서술하세요. 3. 행동(Action):과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요. 4. 결과(Result):행동의 결과로 어떤 변화가 있었는지 설명하세요. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):팀 프로젝트로 물건을 판매하고 게시판을 통해 이웃과 소통하는 프로그램을 개발을 진행중이었는데, 데이터 파일을 불러오기는 가능했으나 쓰기가 불가능한 문제를 발견했습니다. 2. 과제(Task):사용자가 데이터를 읽는 것 뿐만 아니라 쓰기 또한 가능하고, 일부 관리자는 데이터 삭제까지 가능하도록 개선하는 것이 목표였습니다. 3. 행동(Action):기존 Json 파일로 만들어 두었던 임시 데이터 베이스를 pocketbase를 이용하여 재 구성하였고, pocketbase에 내장되어있는 권한 부여 기능으로 admin 계정과 일반 계정을 구분하여 권한 부여를 구분해주었습니다. 4. 결과(Result):사용자가 기존 데이터에 접근하여 원하는 내용을 추가할 수 있었습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요. 2. 과제(Task):해결해야 했던 구체적인 과제나 목표를 서술하세요. 3. 행동(Action):과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요. 4. 결과(Result):행동의 결과로 어떤 변화가 있었는지 설명하세요. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):팀 프로젝트로 테일윈드를 사용하는데 같은 css파일 내에서 apply를 하다보니 pull 해올때마다 충돌이 일어났습니다. 2. 과제(Task):깃 충돌을 최소화하면서 코드를 깔끔하게 만드는 것이 목표였습니다. 3. 행동(Action):postcss-import를 이용하여 팀원들과 페이지 별 css를 만들어 각자 css에서 apply를 진행했습니다. 4. 결과(Result):깃 충돌을 최소화하고, 코드의 가독성도 높아졌습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요. 2. 과제(Task):해결해야 했던 구체적인 과제나 목표를 서술하세요. 3. 행동(Action):과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요. 4. 결과(Result):행동의 결과로 어떤 변화가 있었는지 설명하세요. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
2. 과제(Task):해결해야 했던 구체적인 과제나 목표를 서술하세요.
3. 행동(Action):과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
4. 결과(Result):행동의 결과로 어떤 변화가 있었는지 설명하세요.
|
Beta Was this translation helpful? Give feedback.
-
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 브랜치 전략을 한단계 더 깊이 이해할 수 있었습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요.
2. 과제(Task):해결해야 했던 구체적인 과제나 목표를 서술하세요.
3. 행동(Action):과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요.
4. 결과(Result):행동의 결과로 어떤 변화가 있었는지 설명하세요.
|
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):프로젝트의 배경이나 맞닥뜨린 상황을 간결하게 기술하세요. 2. 과제(Task):해결해야 했던 구체적인 과제나 목표를 서술하세요. 3. 행동(Action):과제를 해결하기 위해 취한 구체적인 행동들을 기술하세요. 4. 결과(Result):행동의 결과로 어떤 변화가 있었는지 설명하세요. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):포트폴리오에 넣을 웹사이트를 만들던 중 LP판이 돌아가며 좌우 버튼으로 조작하는 UI를 만드는데 문제가 생겼습니다. 2. 과제(Task):UI 위치와 크기가 깨지지 않게 만드는 것이 목표였습니다. 3. 행동(Action):UI가 계속 깨져서 HTML 마크업 구조를 다시 설계해서 스타일링 했습니다. 4. 결과(Result):LP판 UI를 만들어 사용자에게 시각적인 즐거움을 줄 수 있었습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):팀 프로젝트에 맡은 페이지 중 버튼의 기능이 작동되지 않음 2. 과제(Task):뒤로가기 버튼을 클릭하면 이전 페이지로 이동하는 기능 구현, 여러 페이지에 활용되는 버튼이였음 3. 행동(Action):처음엔 onclick 속성으로 해결했으나, 추후 조원들이 활용도 높은 버튼을 구현하려면 자바스크립트로 함수를 짜는것이 더 유용하다고 알려주어 수정 4. 결과(Result):두가지 방법 모두 배울 수 있었고 기능 문제도 해결할 수 있었음 |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):
2. 과제(Task):
3. 행동(Action):
4. 결과(Result):
|
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):애니메이션이 끝나고 모달창이 활성화시켜야했습니다. 동기적인 자바스크립트의 특성이 있기 때문에 모달창이 애니메이션을 가져버리는 상황이었습니다. 2. 과제(Task):애니메이션이 끝나면 모달창이 활성화하는 함수가 진행되도록 만드는 것이 목표였습니다 3. 행동(Action):첫번째 해결방안으로는 애니메이션 타임라인에 추가로 모달창이 활성화 하는 코드를 작성하였습니다. 하지만 이는 함수에 한기능이 아닌 두가지 기능을 담게 되었기 때문에 async-await 사용으로 비동기 처리를 해주었습니다. 4. 결과(Result):함수에 여러가지 기능을 넣지 않고 비동기 처리를 하여 클린코드에 가까운 코드를 만들수 있었습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):tailwind 사용시 class명이 너무 길어지고, 프로젝트 내에서 여러 요소에 공통적으로 사용하는 스타일의 경우도 일일이적어줘야 하는 불편함이 있었습니다. 2. 과제(Task):공통적으로 사용되는 스타일을 묶어서 사용하는 것이 목표입니다. 3. 행동(Action):팀원들과 소통한 뒤 공통적으로 쓰이는 스타일을 정하고 tailwind config 파일에 정의하여 사용할 수 있도록 하였습니다. 4. 결과(Result):피그마 시안을 바탕으로 클래스명을 지정하여 붙여주어 시안에 있는 내용 그대로 사용할 수 있어 코드 작성에 시간을 줄일 수 있었고, tailwind class를 좀 더 직관적으로 표현할 수 있었습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):swiper js를 사용해 아무거나 만들어보기 과제를 수행할 때였는데, 음악플레이어로 결정해 곡 넘김 화면 애니메이션을 swiper로 작동하도록 구현했었습니다. 이 때 다음 / 이전 곡 넘김 시 버튼을 반복적으로 클릭하면 swiper가 1번 작동되는 동안 곡 넘김이 여러번 발생하는 문제를 발견했습니다. 2. 과제(Task):다음 / 이전 곡 넘김 시 버튼을 여러번 클릭해도 다음 슬라이드가 완전히 나타나기 전까지 넘어가지 않도록 개선하고자 했습니다. 3. 행동(Action):js의 스로틀링 기법을 활용해 다음 스와이퍼가 나타나는 시간인 2000ms동안은 한번만 작동되도록 개선했습니다. 4. 결과(Result):이로 인해 다음 곡 및 이전 곡 재생 버튼 클릭시, 또한 셔플 재생시에도 여러번 클릭할 경우에도 다음 재생되는 곡과 화면에 나타나는 정보가 일치하도록 수정됐습니다. |
Beta Was this translation helpful? Give feedback.
-
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를 불러올 수 있었음. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):sass의 학습량이 매우 부족했는데 프로젝트 때 sass로 진행하기로 함 2. 과제(Task):sass를 잘 활용하여 스타일링 하는 것이 목표였습니다. 3. 행동(Action):팀원들과 함께 의논하면서 환경구성을 마쳤고 영상강의와 문서들을 참고하여 복습 진행하였고 pure css로 먼저 작성 후 변수, mixin 등을 활용하여 수정 4. 결과(Result):sass 활용능력이 이전보다 올라갔고, 막막함도 조금 덜해졌으며 코드의 가독성이 높아졌습니다. |
Beta Was this translation helpful? Give feedback.
-
1. 상황(Situation):개인 토이프로젝트로 html2canvas 라이브러리를 이용한 이미지를 제공하는 서비스를 만들었는데 ios 모바일에서는 다운로드가 되지 않았습니다 . 2. 과제(Task):웹사이트를 모바일 화면에도 잘 작동하도록 하는것이 목표였습니다. 3. 행동(Action):같은 이슈를 기재한 깃허브 이슈를 참고해 모바일과 pc 코드를 분리해 작성해 수정했습니다. 4. 결과(Result):잘 작동되었습니다... |
Beta Was this translation helpful? Give feedback.
-
회고 7조1. 상황(Situation):2. 과제(Task):3. 행동(Action):4. 결과(Result): |
Beta Was this translation helpful? Give feedback.
-
회고 8조1. 상황(Situation):2. 과제(Task):3. 행동(Action):4. 결과(Result): |
Beta Was this translation helpful? Give feedback.
-
회고 5조1. 상황(Situation):2. 과제(Task):3. 행동(Action):4. 결과(Result): |
Beta Was this translation helpful? Give feedback.
-
회고 1조1. 상황(Situation):2. 과제(Task):3. 행동(Action):4. 결과(Result): |
Beta Was this translation helpful? Give feedback.
-
회고 2조1. 상황(Situation):2. 과제(Task):3. 행동(Action):4. 결과(Result): |
Beta Was this translation helpful? Give feedback.
-
회고 3조 STAR 기법을 이용한 경험 작성 코멘트란아래에 reply로 본인의 경험을 STAR 기법을 이용하여 작성해주시면 됩니다.
|
Beta Was this translation helpful? Give feedback.
-
회고 4조1. 상황(Situation):2. 과제(Task):3. 행동(Action):4. 결과(Result): |
Beta Was this translation helpful? Give feedback.
-
|
회고 6조
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
1. STAR 기법으로 경험을 정리해보는 이유
이 미션은 자신의 프로젝트 경험을 체계적이고 효과적으로 정리하고 소개하기 위한 연습니다. 특히 개발 분야에서는 이력서 뿐만 아니라 기술과 관련한 문서를 작성하면서 복잡한 문제를 해결하는 과정과 결과를 명확하게 전달하는 능력이 중요합니다. 이를 통해 면접, 프레젠테이션, 팀 회고 등 다양한 상황에서 여러분의 기술적 역량과 협업 능력을 효과적으로 보여줄 수 있습니다.
2. STAR 기법 소개
STAR 기법은 다음과 같은 네 부분으로 구성됩니다:
3. 구체적인 예시
4. 실습
이제 본격적으로 지금까지의 경험 중 1~2가지를 STAR 기법을 이용해 정리해보세요. 아래 템플릿을 복사해서 사용해주시면 됩니다.
Beta Was this translation helpful? Give feedback.
All reactions