박승준의 기술 블로그 박승준의 기술 블로그

검색 필터링을 구현할 때 URL 변경이 있거나 vs URL 변화가 없이 구현하는 방법이 있는데, 차이점을 알아보자. URL 파라미터의 변경이 있는 경우는 자주 쓰이는 방식으로쿼리스트링 방식이 있는데, http://example.com/search?query=example&category=web&sort=latest query, category, sort라는 파라미터에 example, web, latest라는 값이 할당된 경우다. 장단점으로는, 👍공유의 용이성 사용자가 특정 검색 결과를 저장하거나 공유할 때, URL에 검색 조건이 명시되어 있어 쉽게 전달할 수 있다. 💥 URL이 복잡해질 수 있음 검색 조건이 많아지면 url이 길어지고 복잡해 보일 수 있다 💥 보안성 일부 검색 조건이 url에 노출되면 보..

React를 사용하여 제작을 한 사이트입니다. Redux를 통한 상태 관리로 데이터 흐름이 명확해, 디버깅이나 테스트가 용이했습니다. 많은 사람들이 쓰는 기술인지라 관심을 가지고 사용하게 되었고, 협업을 하는데에 훌륭한 가독성과 유지보수가 용이하다는 장점도 느끼는 계기가 되었습니다. Hooks를 사용한 것은 배울 점이 많은 경험이었습니다. 익숙하진 않았지만 React 커뮤니티에서 선호된다는 점에 이끌려서 사용하기로 하였고, 코드가 더 간결하고 재사용하기 간편하다는 점에서 배울 점이 많은 경험이었습니다. 모바일 환경에서의 가독성을 높이기 위하여 한 화면에 필요한 정보만 담기 위한 UI/UX를 디자인했습니다. 5인이 진행한 프로젝트이었기에 통일되고 규칙적인 스타일을 위해서 Figma, TypeScript를 ..

서비스를 제작하다보면 관리자 페이지처럼 일반 유저들이 접근하지 못하는 부분을 만드는 경우가 생긴다. 프로젝트 제작 중, "상품 추가"나 "유저 관리" 등 관리자의 권한이 있는 테스크를 제작할 일이 생겼다. 이러한 페이지의 경우 일반적인 클릭으로 이동하거나, URL을 알고 있을 경우 직접적으로 이동하려는 시도가 가능하다. 이 두 가지 방법은 관리자의 권한이 없을 때에도 가능하므로, 다음 두 가지 경우는 피해야한다: 페이지를 이동 후 권한 체크 (접근 권한이 없는 사용자에게 페이지 내용을 노출 시킬 수 있음) 권한 체크 전 페이지 내용을 불러오는 행위 (당연한 말이다.) 권한 체킹을 하는 라우팅 미들웨어를 하나 제작해서, 페이지 이동하기 전 로그인을 한 게정의 권한 체크를 해주고, 관리자가 맞다면 헤당 페이..

호텔 예약 서비스이다. 보다 싶이 스테이 유형, 가격 범위, 그리고 이미지에는 바로 나와있지 않지만 지역에 따른 필터 등 5가지 필터가 존재 한다. 이 기능을 구현하는데에 어려움을 겪었는데, 그건 바로 '일반적인 쿼리스트링으로는 선택적인 필터 사용 불가' 라는 점이다. 카테고리 별 디폴트 값이 필수로 있는 것이 아니거나 있어야 할 경우 비효율적인 경우도 있었기 때문에 이는 골치아픈 문제가 아닐 수 없었다. 이 문제를 해결하기 위해서 query parameter DTO(Data Transfer Object)를 사용하여 선택적인 query data를 받을 수 있었다. 이런 경우 여러 데이터를 주고 받을 때 가독성도 좋고, 객체로 한 번에 주고 받기 때문에 편리하다. 사실 프로젝트를 진행하다가, 필터가 한두 ..

누군가 내게 'JSON이 뭐야? 이게 어떤 데이터 타입인거야? String인가?' 라는 질문을 했다. 내게 JSON은 데이터를 주고 받을 때 stringify라는 과정을 통해 문자열로 주고, parsing을 통해 다시 의미있는 데이터로 변하게 하는 작업에 연관된 '어떤 무언가'였다. 정확하게 설명을 해주고 싶어 chatGPT와 구글링을 해보았다. JSON은 JavaScript Object Notation의 약자로, 직역하면 '자바스크립트 객체 표기법' 정도 된다. "그러면 JSON은 객체인건가? { } (curly braces)로 감싸져 있는데?" Object notation이라는 이름에서도 알 수 있듯이, '객체'라기 보다는 객체 표기법이다. 그렇지만 객체처럼 key: value의 형태를 띄고 있어서 ..

간단한 JavaScript 기능을 chatGPT를 이용해 추가할 수 있을지 보았다. 간단한 텍스트가 있는 웹사이트고, 왼쪽상단에 토글 버튼이 있다. 토글 버튼을 클릭했을때 왼쪽으로부터 navBar가 등장하거나 사라지는 기능이 있으면 좋을 것 같다. 그리고 새로고침 등을 했을때에도, toggle의 on/off 상태가 저장되서 유지되었으면 좋겠다. 조금씩 단계별로 진행을 해보려고 자그마한 부분의 코드만 먹여보았다. 쉽게말해 토글버튼과 토글을 할 navBar를 getElementsByClassName로 잡을 경우, 2개 이상이 잡힐 수 있으니 하지 말라는 조언이었다. 수정해주자. const toggleButton = document.querySelector('.toggle'); const navBar = do..

간단히 말해 HTML 문서를 나타내는 트리 구조인데, JavaScript에서 사용되어 HTML / CSS를 조작해 상호 작용 기능을 추가할 수 있다. 그런 작업을 하기 위해서 DOM API, 즉 상호 작용을 도우는 메소드가 있는데, 일반적으로 document API, element API, event API, node API가 있다. 1. Document API : 2. Element API 3. Event API 4. Node API JavaScript를 사용하여 프로젝트 몇 번 해보았지만 기본적인 개념을 다시 끄집어내서 배우니 내가 쓰던 코드들이 어떠한 목적을 가지고 grouping 되어있는지 복습하는 기회였다.

라이브러리와 프레임워크 둘다 개발자의 코딩과정을 도와주는데, 라이브러리의 경우 개발자가 직접 코드의 플로우를 제어하고, 다른 라이브러리 사용에 구애받지 않는 다는 점이 있다고 한다. 프레임워크의 경우, 단어에서도 뜻을 알 수 있듯이 코드의 틀을 제공하는 것이고, 그렇기 때문에 제공된 프레임워크가 코드의 플로우를 제어한다. 특정 라이브러리를 꼭 사용해야 하는 경우가 있다. 이렇게 개념을 이해하는데에는 chatGPT를 이용하는 것이 편한 것 같다. 스크린샷은 올리지 않았지만 library와 framework 중 무엇이 더 낫냐는 질문도 해보았는데, 용도나 목적에 따라 다르다면서 각각 사용하기 좋은 상황을 설명해 주었다.