본문 바로가기
728x90

웹풀스택14

[why] 📚 테스트 코드는 왜 작성해야 할까요? 특히 프론트엔드에서는요? 들어가며테스트 코드. 올해 제가 가장 많이 마주한 단어이자, 그 필요성을 뼈저리게 느낀 개발 문화입니다. 이 깨달음은 두 가지 의미 있는 경험을 통해 얻게 되었습니다.첫 번째는 상반기 인턴 근무 중의 경험입니다. 당시 저는 혼자 개발을 진행해야 하는 상황이었습니다. 동료 개발자의 코드 리뷰나 피드백을 받을 수 없는 환경에서, 제가 작성한 코드의 신뢰성을 검증할 방법이 절실했습니다. 이때 테스트 코드의 부재가 얼마나 큰 리스크가 될 수 있는지 깨닫게 되었습니다.두 번째는 현재 참여 중인 네이버 부스트캠프에서의 경험입니다. 5명으로 구성된 팀에서 유일한 프론트엔드 개발자로 프로젝트를 진행하게 되었습니다. 웹 풀스택 과정이기에 팀원들이 제 코드를 리뷰할 수는 있지만, 복잡한 상태 관리나 사용자 인터랙션과 같은.. 2024. 11. 16.
[네이버 부스트캠프] OAuth 2.0 정리하기: 현대 웹 인증의 표준 들어가며"이 앱에서 GitHub 로그인하기 버튼을 클릭했더니, 내 모든 코드와 개인정보가 유출되면 어쩌지?" 많은 개발자와 사용자들이 이런 걱정을 한 번쯤은 해보셨을 것입니다. 하지만 OAuth 2.0을 제대로 이해하고 나면, 이런 걱정은 기우였다는 것을 알 수 있습니다.OAuth 2.0이란?OAuth 2.0은 사용자의 패스워드를 공유하지 않고도 특정 리소스에 대한 접근 권한을 부여할 수 있는 인증 프로토콜입니다. 쉽게 말해, 여러분의 GitHub 비밀번호를 모르더라도, 여러분이 허용한 범위 내에서만 다른 애플리케이션이 여러분의 GitHub 정보에 접근할 수 있도록 하는 방식입니다.OAuth 2.0의 핵심 요소1. 주요 참여자리소스 소유자: 보호된 리소스를 소유한 사용자 (예: GitHub 계정 소유자).. 2024. 11. 13.
[네이버 부스트캠프] 토스의 퍼널 패턴 적용해보기 퀴즈 플랫폼에 퍼널 패턴 적용하기: 토스의 UX 디자인 패턴 차용들어가며부트캠프에서 실시간 퀴즈 플랫폼을 개발하면서 마주친 가장 큰 도전과제는 "어떻게 하면 사용자들이 끊김 없이 퀴즈에 참여할 수 있을까?"였습니다. 이 문제를 해결하기 위해 우리는 토스(Toss)의 퍼널 패턴을 도입했고, 놀라운 결과를 얻을 수 있었습니다.퍼널 패턴이란?퍼널(Funnel)은 '깔때기'라는 뜻으로, 사용자가 특정 목표를 달성하기까지의 단계를 위에서 아래로 시각화했을 때 깔때기 모양이 되는 것에서 유래했습니다. 예를 들어 일반적인 이커머스의 구매 과정은 다음과 같은 단계로 이루어집니다:쇼핑몰 방문상품 검색상품 선택장바구니에 담기결제 정보 입력최종 결제실제 토스의 컨퍼런스 영상에서의 토스의 송금 프로세스를 보면 이러한 퍼널 패.. 2024. 11. 11.
[why] "왜" 시리즈를 한번 적어볼까 합니다. Why 시리즈: 당연한 것들에 대한 질문개발을 하다 보면 당연하게 받아들이는 것들이 참 많습니다.JavaScript에서 undefined를 마주치면 "아, 값이 할당되지 않았구나"라고 생각하고 넘어가고, React에서 클로저를 사용할 때도 "이렇게 하면 되겠지"하고 넘어가곤 합니다.하지만 정작 "왜?"라는 질문을 받으면 제대로 된 답을 하지 못하는 경우가 많은 것 같습니다.시리즈를 시작하며부스트캠프 8주차, 늦은 저녁 오프라인 활동이 끝나고 양꼬치를 즐기며 7,8주차 그룹 동료들과 이야기를 나누던 중이었습니다. 프론트엔드 스프린트가 끝나가던 시점이었습니다. 바닐라 자바스크립트로 프레임워크를 직접 만들어보고, 리액트로 프로젝트까지 진행하면서 많은 것을 배웠지만, 동시에 더 깊은 의문도 생겼던 시기였죠.그날.. 2024. 10. 26.
[네이버 부스트캠프] 5,6주차 회고 정말 즐거웠던 추석 인터미션 시간이 지나가고 빠르게 스프린트 후반부가 시작되었습니다. 하반기 서류를 쓰면서 인터미션을 보냈고, 스프린트 후반기 시작 후에도 서류도 쓰고 미션도 하는 시간을 2주간 보냈던 것 같습니다. 그 중 기억에 남는 것들 위주로 회고를 적어보려고 합니다.서류 탈락과 코딩테스트원래는 지난 상반기에 서류를 내고 취업 준비를 제대로 하는게 목표 였는데 인턴을 하다보니 생각보다 서류를 많이 내보진 못했던 것 같습니다. 그래서 네부캠을 하는 동안 꼼꼼하게 서류를 써보고, 이력서와 포트폴리오를 정리하는 시간을 틈틈히 가졌습니다. 10~20군데 정도 서류를 냈고, 서류 합 이상 간 곳이 많지는 않지만 4~5번의 코테 까지 볼 수 있었고 항상 문제가 코딩 테스트 였던 것 같습니다. 아무래도 프론트로.. 2024. 10. 6.
[네이버 부스트캠프] 프론트엔드 프레임워크 비교하기(feat. typescript) 들어가며최근 네부캠에서 후반부 학습 스프린트를 진행하면서 프레임워크를 직접 구축해보는 경험을 하고 있습니다. 이 과정에서 각 프레임워크의 등장 배경, 그들이 해결하고자 했던 핵심 문제들, 그리고 그 해결 방식을 이해하는 것이 매우 중요하다는 것을 깨달았습니다.그룹 활동 중에 리액트가 주로 논의되었지만, 다양한 프레임워크를 폭넓게 이해하는 것이 장기적으로 더 큰 도움이 될 것이라 생각합니다. 따라서 이번 기회에 주요 프론트엔드 프레임워크들의 역사와 특징을 정리해보고자 합니다.참고해주셨으면 하는 부분은 jQuery와 React가 엄밀히 말해 프레임워크는 아니라는 것입니다. jQuery는 라이브러리이고, React는 라이브러리 혹은 UI 개발을 위한 JavaScript 도구로 분류됩니다. 그러나 이들을 이 글.. 2024. 9. 24.
728x90