전체 글

Query String구상한 와이어프레임을 보면 MAP 페이지에는 지도 api와 숙박/맛집 정보를 가져오는 api까지 사용하여 서버와 통신할 일이 많은 작업이 포함되어 있어, 디테일 페이지로 이동하고 다시 돌아오면 괜한 로딩시간만 더 생기지 않을까 생각하였다. 때문에 디테일 페이지를 모달 형태로 띄워 뒤에 지도나 숙박/맛집 정보는 리렌더링 되지 않도록 하는 방법을 선택하였다.다만 이럴 경우 모달을 띄운 상태로 새로고침을 하게 되면 모달 창이 유지되지 않기에 튜터님의 도움을 받아 query string을 이용해 주소값을 부여하였다.

공통 컴포넌트 BigModal, Modal 제작공통 컴포넌트를 만드는 도중 크기와 용도가 다른 모달을 하나로 합쳐야 하나 아니면 분리를 해야 하나 고민이 많았다. 괜히 하나의 주제로 여러 개를 만들면 괜한 리소스가 낭비되는 게 아닌가 싶었기 때문인데, 많은 구글링 끝에 이 글을 보고 분리하기로 결정했다.더 가치 있는 공통 컴포넌트 만들기: KAKAO 기술 블로그URL: https://fe-developers.kakaoent.com/2024/240116-common-component/'공통'이라는 말의 선입견 때문에 반드시 하나를 재사용성 높게 구현해야 한다고 생각했는데, 오히려 그 생각이 독이 된 케이스였다. 해당 공통 컴포넌트에서 지향하는 방향과 확장성에 대해 더 고민해 볼 수 있던 기회였고, 결과적으..

자바스크립트 딥다이브를 공부하며 공부하는 내용이 지난 알고리즘 심화반에서 한 내용과 연관 지어 기록해 두기 ※ 배열여러 개의 값을 순차적으로 나열한 자료 구조요소(element): 배열이 가지고 있는 값으로, 자바스크립트의 모든 값은 배열의 요소가 될 수 있음인덱스(index): 요소가 배열에서 자신의 위치를 나타내는 0 이상의 정수로, 배열의 요소에 접근할 때 사용 ※ 일반적인 자료구조 배열밀집 배열자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 ※ 자바스크립트의 배열희소 배열배열의 요소가 연속적으로 이어져 있지 않는 배열 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있음 따라서 엄밀히 일반적인 ..

아웃소싱 프로젝트는 특정 업무나 프로젝트를 회사 내부의 팀이 아닌 외부의 전문 회사나 프리랜서에게 의뢰하여 수행하는 것을 의미하는 것으로, 외주를 할 때 많이 사용하는 api를 사용해 보는 의미를 가진다고 한다. 1. 어떤 주제를 선택할까?필수 구현 사항 중에 지도 api, 유튜브 api, 설문조사 중 하나의 주제를 정해서 팀 프로젝트를 진행하는 한 주. 유튜브 api는 무언가 youtube의 일부 기능 구현의 느낌이고, 기획 당시 설문조사는 자유도가 조금 낮아 보여서 다방면에서 사용될 수 있는 지도 api를 선택했다.  2. 어떤 api를 사용할까?필수 구현 사항에 지도 api가 있다는 걸 보자마자 이전에 참여하려고 준비했었던 '2024 관광데이터 활용 공모전'이 떠올랐다. 공모전에 권장되는 Tour-..

주말 동안 내배캠 챌린지 반 녹화된 강의를 모두 돌려보면서 복습 한 번 진행하고, 과연 테스트 코드가 무엇일지 궁금해서 조금이나마 도전해 보았다. Q. 테스트는 QA팀이 있잖아!보통 소프트웨어를 검증하는 QA(Quality Assurance) 팀이라는 테스트 하는 조직이 있지만, 점차 공부해 나가면서 프론트엔드단에서 테스트라는 용어가 많이 들려서 과연 프론트엔드가 어떤 테스트를 진행하는지 궁금해져서 주말에 시간을 내 보았다.단위 테스트: 상호작용 하지 않는 독립적인 함수, 모듈, 클래스를 테스트통합 테스트: 묶었을 때 상호작용 테스트(모듈들, 클래스들)E2E 테스트(end-to-end): UI 테스트, 사용자 테스트단위 테스트 → E2E 테스트로 갈수록 cost가 비싸지고, 작성하기 까다로워짐 / 테스트..

알고리즘 심화반 타임어택 문제로 선택된 문제. 확실히 한 주 동안 풀어본 유형을 내주셔서 생각보다 빠르게 풀 수 있었다. 프로그래머스_다음 큰 숫자처음에는 재귀로 풀어야 할까? 생각하다가 좀 더 단순하게 생각했다. NumberOfOne이라는 함수를 만들어 1의 개수를 세었고, 이 함수에서 toString()과 match()는 모두 O(log n)의 시간 복잡도를 가진다. 따라서 solution 함수에서는 targetNumber의 초기값을 선언하고 while문의 조건문을 실행할 때 O(log n), while 루프를 돌 때 O(n)의 시간복잡도를 가짐으로 최종적으로 O(n)으로 계산하였다. 이것보다 비트 연산을 통해 더 빠르고, 시간 복잡도도 줄이는 방법이 있었는데 많이 난해하여 실제 적용하긴 어려울 듯하..

어느 정도 완성해서야 생각하지만, 아예 심화과제를 받았을 때부터라도 tailwind css로 리팩토링을 하고 진행했으면 어떨까 하는 아쉬움이 조금 남지만 이미 돌아가기에 너무 멀리 와버렸다. 이번 프로젝트는 styled-components로 마무리하고 다음 프로젝트 때부터 tailwind를 더 많이 써보기로! ※ 추가된 프로젝트 기능1. Header Nav 바 구현헤더는 글래스 모피즘으로 구성하였고, 홈으로 이동할 수 있는 로고, 마이페이지 이동 이미지, 로그인/로그아웃 버튼이 위치해 있다. 마이페이지 이미지는 로그인했을 때만 노출된다.2. jwt 인증 서버를 통한 로그인/회원가입 기능로그인을 하지 않으면 메인 페이지로 이동이 불가능하게 하였으며, 로그아웃 시에도 로그인 화면으로 되돌아온다.3. 마이 페..

기존에 진행한 프로젝트에 이어서 jwt 인증을 이용한 로그인/회원가입, json-server를 통해 Restful 하게 구현하기, Zustand 사용, Tanstack Query 이용하기 등 다양한 도전과제들이 추가된 이번 과제!처음 발제날 들을 땐 상당히 빡빡한 일정인 것 같았는데, 인증/인가 기능을 구현한 이후는 뭔가 9부 능선 넘은 것 처럼 수월하게 풀렸다. 다만, 익숙하지 않은 Tanstack Query를 사용하는데 반갑지 않은 오류를 만나고, 아직도 access Token을 header에 추가하여 보내는 과정은 뭔가 두리뭉실하게 알고 있는 느낌이다.하루를 꼬박 과제에 투자하니 어느정도 완성되었다! 트러블 슈팅도 크게 있지 않아 작업 과정은 내일 TIL에 모아서 올려야겠다..