"Life is Full of Possibilities" - Soul, 2020

우아한테크코스 23

[우아한테크코스] 길고 긴 10개월이 지나고... 드디어 수료식!!✨

영원히 지나가지 않을 것만 같았던 10개월이 지나고 .. 우아한테크코스 6기 수료식 날이 왔다!         오전에는 근로 팀이 열심히 준비해 준 컨텐츠로 시간을 보내고, 오후에는 다 같이 모여 수료증을 받고 사진을 찍었다.         우아한테크코스 동안 무엇을 배웠니?마인드 셋 부분으로는, '어떤 개발자가 될 것인가', '어떤 삶을 살아갈 것인가'에 대한 고민을 통해 나만의 답을 만들어 낼 수 있었다. '어떤 개발자가 될 것인가'에 대한 대답으로는, 협업하기 좋은 개발자, 동료들이 나와 함께 일하고 싶어지는 개발자가 되는 것이다. 개발자라는 직업은 반드시 다른 개발자들과 협업하는 부분이 생기게 된다. 이렇게 협업을 하는 과정에서 서로의 니즈를 원활하게 주고받으며, 동료들에게 도움이 되는 개발자가 ..

개발 서버와 운영 서버의 환경변수만 다른데 운영 서버 배포만 안되는 이유?! (AWS S3, CDN, CodePipeline, CodeBuild)

EC2와 Nginx를 사용한 첫 번째 버전의 배포 과정은 여기서 확인하실 수 있습니다. Devel Up 프로젝트의 브랜치 전략Devel Up 프로젝트에서는 dev 브랜치와 main 브랜치를 활용해 각각 개발 서버와 운영 서버의 파이프라인을 독립적으로 구축하고 배포하는 것을 목표로 했습니다.   처음에는 GitHub Actions를 사용하려 했지만, 제공받은 AWS 계정의 S3 정책 설정 상 access key 발급이 불가능했습니다. 이에 따라 AWS CodePipeline과 CodeBuild를 사용해 파이프라인을 구축하기로 결정했습니다.   AWS를 선택한 이유와 장단점 AWS는 GUI를 통해 파이프라인을 간편하게 설정하고 실행할 수 있는 장점이 있습니다. 디버깅 과정에서도 CloudWatch를 활용하면..

재사용 가능한 글 작성/수정 로직 설계 과정

3차례의 QA와 5회의 유저 테스트(UT)를 진행하며, 자잘한 버그를 해결하고 테스트 유저로부터 피드백을 수집했습니다.  테스트 과정 중 "글 수정 기능이 있으면 좋겠다"는 피드백을 받아 수정 기능을 구현하기로 결정했습니다. 하지만 새로운 풀이 작성 페이지와 풀이 수정 페이지를 같은 MissionSubmitPage로 재사용하고자 했기에, 이를 어떻게 설계할지에 대해 고민이 들었습니다. 그래서 일단 흐름도를 그려보기로 했습니다.글 작성 페이지를 (1) 새로운 글을 작성하기 위해 방문하는 경우와, (2) 수정하기 위해 방문하는 경우를 나누기 위해 url에 solutionId 파라미터를 추가했습니다. 페이지 로드 시 파라미터를 확인하여, 데이터가 존재하면 서버에서 기존 데이터를 가져와 수정 작업으로 간주합니다..

Intersection Observer와 display를 활용한 랜딩 페이지 및 헤더 구현기

1차 런칭 이후 피드백 반영   1차 런칭 후 받은 주요 피드백은 모바일 환경을 고려해야 한다는 점이었습니다.서비스의 주요 진입점이 카카오톡이었기 때문에 대부분의 사용자가 모바일로 접속하는 상황이었습니다. 특히, 메신저를 통해 주변 사람들에게 서비스를 홍보하는 경우가 많아 사용자들이 처음 마주하는 랜딩 페이지가 모바일 환경에 최적화될 필요가 있다는 의견이 있었습니다. 이러한 피드백을 반영해 반응형 디자인 적용을 결정했습니다.   저는 랜딩 페이지의 소개 이미지를 코드로 변환하고 반응형 작업을 맡았습니다. 또한, 헤더를 반응형으로 수정해 모바일과 데스크탑 환경 모두에서 최적의 사용자 경험을 제공하고자 했습니다. 반응형 랜딩 페이지 구현기존에는 UT 피드백에 따라 랜딩 페이지를 소개 이미지로 대체했지만 화질..

프로젝트 성능 개선기 (번들 사이즈 최적화를 통한 웹 성능 최적화)

번들 사이즈가 웹 사이트에 미치는 영향웹 사이트가 복잡해지면서 번들 사이즈도 함께 증가하는 경향이 있습니다. 특히 사용자 경험을 강화하기 위해 다양한 기능과 복잡한 인터페이스를 추가하면서 자바스크립트, CSS, 이미지 등의 리소스 크기가 커지는 문제가 발생합니다. 이로 인해 초기 로딩 시간이 길어지고, 이는 사용자 경험과 웹 사이트 성능에 부정적인 영향을 미칩니다.KissMetrics 연구 결과에 따르면 페이지 로드 시간이 1초씩 길어질 때마다 웹 페이지 이탈률이 7%씩 증가한다고 합니다. 전자상거래 사이트의 경우, 이는 매출 감소로 이어질 수 있습니다. 사용자는 로딩 시간이 길어지면 페이지를 떠날 가능성이 높아지고, 특히 구매 과정에서 지연이 발생하면 구매를 포기할 확률이 증가합니다. 실제로 대형 전자..

사용자 피드백 반영하기 (수정 기능, 반응형 랜딩+헤더 구현)

QA, UT 피드백 반영  3차례의 QA와 5회의 유저 테스트(UT)를 진행하며, 자잘한 버그를 해결하고 테스트 유저로부터 피드백을 수집했습니다.  테스트 과정 중 "글 수정 기능이 있으면 좋겠다"는 피드백을 받아 수정 기능을 구현하기로 결정했습니다. 하지만 새로운 풀이 작성 페이지와 풀이 수정 페이지를 같은 MissionSubmitPage로 재사용하고자 했기에, 이를 어떻게 설계할지에 대해 고민이 들었습니다. 그래서 일단 흐름도를 그려보기로 했습니다. 글 작성 페이지를 (1) 새로운 글을 작성하기 위해 방문하는 경우와, (2) 수정하기 위해 방문하는 경우를 나누기 위해 url에 solutionId 파라미터를 추가했습니다. 페이지 로드 시 파라미터를 확인하여, 데이터가 존재하면 서버에서 기존 데이터를 가..

우아한테크코스 최종 데모데이 회고🍀

끝이 나지 않을 것만 같았던 레벨 3, 4가 끝이 났다..! 어느새 우테코도 마지막을 바라보고 있다..😭    드디어 대망의 데모데이 .. !우리 팀은 오전 부스로 배치되었다. 깔끔하고 단정한 컨셉에 맞춰 부스를 꾸미고 부스 방문 손님(?)들을 맞이했다. 예전에 서비스직 알바했던 톤이 저절로 나왔던 게 신기했다 ㅋㅋㅋㅋㅋㅋ저희 서비스 사용해 보신 적 있으신가요~? 아 없으시다구요~? 그럼 앉아서 사용해 보고 가세요~!    크루들에게 서비스를 소개하면서 우리 서비스를 직접 사용할 수 있게 홍보했다. 웹으로도, 모바일로도 사용이 가능한 점을 어필했고, 프리코스를 웹으로 즐길 수 있음을 강조했다. 우테코 크루가 아닌 외부인들도 많이 오셔서 서비스를 사용하고 가셨다. 4개월 동안 열심히 만든 서비스를 잘 사..

'위로 가기 버튼' 스크롤 이벤트 최적화하기

본 글은 2024.11.13에 마지막으로 수정되었습니다.  Devel Up 서비스에는 '위로 가기 버튼'이 있습니다. 아래 사진과 같은 버튼인데요, 글이 길어지는 경우 사용자 경험을 향상시키기 위해 스크롤을 최상단으로 끌어올릴 수 있게 해주는 버튼입니다.      이 버튼은 페이지 스크롤에 상관 없이 항상 position: fixed로 화면에 고정되어 있었습니다. 하지만 스크롤이 최상단에 있는 경우에도 버튼이 존재하는 것이 어색하다는 사용자 피드백이 있었습니다. 따라서 이 버튼을 스크롤이 특정 지점 아래에 있을 때만 보이도록 구현하기로 했습니다.  여기서 든 의문점이 있었습니다. 1. 사용자의 스크롤 위치를 항상 구하고 있어야 되는가?2. 스크롤 위치를 항상 구하고 있어야 한다면, 이벤트의 콜백 함수를 ..

웹 사이트의 성능을 높여보자 (2) (같은 건 매번 새로 요청하지 않기, 최소한의 변경만 일으키기)

본 글은 2024.11.06에 마지막으로 수정되었습니다.  1편과 이어집니다.  웹 사이트의 성능을 높여보자 (1) (요청 크기 줄이기, 필요한 것만 요청하기)개선 전후 성능 측정 결과   요청 크기 줄이기 1. 소스 코드 줄이기  Home 페이지에서 불러오는 스크립트 번들 크기가 951KB였다. 웹 페이지의 권장 번들 사이즈는 250KB 미만으로, 번들 사이즈의cho-sim-developer.tistory.com    같은 건 매번 새로 요청하지 않기 1. CDN 설정 1-1. CDN 캐시 설정 npm run build를 통해 생성된 정적 파일을 S3에 업로드 한 뒤 CDN을 통해 접근 가능하도록 했다.CDN의 캐시는 CachingOptimized를 적용! 새롭게 변할 데이터가 없을 것이라 판단하여 최..

S3, AWS CloudFront(CDN) 캐시 설정의 차이점

성능 개선 중 S3와 CDN에 배포를 진행하며 캐시를 설정했다. CDN과 S3의 데이터에 새롭게 변할 데이터가 거의 없을 것이라 판단하여 모두 캐싱 기간을 1년으로 설정해 두었다. 여기서 궁금한 점이 생겼는데, S3에도 캐시 기간 설정을 할 수 있고 CDN에서도 캐시 설정을 할 수 있다. 그렇다면 각 캐싱이 어디에 적용되는지 헷갈렸다😵‍💫 정리하자면, 1. S3의 max-age : 브라우저가 캐시를 저장하는 시간이때, CDN의 최소 TTL < max-age < 최대 TTL인 경우 : CDN의 캐싱 시간은 max-agemax-age < 최소 TTL인 경우 : CDN의 캐싱 시간은 최소 TTL최대 TTL < max-age인 경우 : CDN의 캐싱 시간은 최대 TTL2. S3의 s-maxage : CDN이 캐..