dev_in 개발 블로그

본 프로젝트에서 검색 기능은 주요 기능이기에 검색창 UI 설계 부분에 고민을 많이 했습니다.UI 자체는 primary컬러인 주황색을 사용한 단순한 디자인입니다. 하지만, 해당 UI에 어떻게 구성할지는 기획을 처음해보고 검색창을 처음 구현해보는 저에게 있어서는 어려운 문제였습니다.이번 글에서는 설계를 하며 고민한 점과 진행 사항을 정리하고자 합니다. 초기 구상 처음에는 단순히 검색어를 사용자가 입력하고 엔터를 치면 검색 결과로 이어주는 검색창을 구상했습니다. 그림으로 대강 표현할 수 있을 정도로 간단했습니다.[ 검색어 input ] 고민 및 수정 사항 하지만 구글이나 네이버 등을 참고하다보니 제가 초기에 구상한 설계는 엔터 이외에는 검색을 완료할 수 없다는 것을 깨달았습니다.마우스만 사용하는 사용자나 ..

undefined와 null은 둘 다 '값이 없다'는 의미를 담고 있지만, 그 쓰임새와 의미에는 차이점이 존재합니다. undefined는 자바스크립트에서 자동으로 할당되는 값입니다.변수는 선언했지만, 아직 아무 값도 할당하지 않았을 때, 자바스크립트는 그 변수에 undefined라는 값을 자동으로 부여합니다. 예를 들어 let a;라는 변수를 선언만 하고 값을 넣지 않으면, 자바스크립트가 자동으로 a에 undefined을 할당하게 됩니다.반면에 null은 개발자가 의도적으로 할당하는 값입니다. 특정 변수에 값이 없음을 명확하게 표현하기 위해 개발자가 null을 넣어줄 수 있습니다. 예를 들어 let b = null; 이라고 할 경우, 이는 b라는 변수에 일부러 값이 비어 있다는 의도를 나타내기 위해 nu..

시맨틱 마크업은 HTML 요소를 사용하는 방식으로, 단순히 시각적 목적이 아닌 요소의 의미를 잘 나타내도록 작성하는 방식을 말합니다.예를 들어, 와 같은 비시맨틱 태그가 아닌, , , , 같은 시맨틱 태그를 사용하여 문서 구조와 콘텐츠의 역할을 명확하게 하는 것입니다. 시맨틱 마크업이 중요한 이유는 크게 두 가지입니다.첫째, 접근성을 개선하기 위함입니다.(사용자 경험 개선도 의미함) 시맨틱 요소들은 스크린 리더와 같은 접근성 도구에서 콘텐츠의 구조를 더욱 잘 해석할 수 있게 해 주어 시각장애인이나 노인 등 다양한 사용자층이 사이트를 효과적으로 탐색할 수 있게 합니다. 이러한 요소를 올바르게 사용하면, 더 많은 사람들에게 접근 가능한 웹 환경을 제공할 수 있습니다. 둘째, SEO(검색 엔진 최적화)에 ..

자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만을 처리할 수 있는 단일 콜 스택을 가집니다. 하지만 브라우저나 Node.js 환경이 제공하는 비동기 처리 메커니즘 덕분에 여러 작업을 동시에 수행할 수 있습니다. 자바스크립트는 브라우저의 Web API나 Node의 libuv, 이벤트 루프, 태스크 큐를 이용하여 비동기 작업을 동시에 처리합니다.비동기 작업이 발생하면, 해당 작업(타이머, 네트워크 요청 등)은 브라우저의 Web API에 위임됩니다. 예를 들어, setTimeout이나 fetch와 같은 작업이 수행되면 자바스크립트 엔진은 이 작업들을 Web API에 넘기고 다른 코드 실행을 이어갑니다. Web API에서 비동기 작업이 완료되면, 그 작업은 태스크 큐에 들어가 대기합니다.이후..

낙관적 업데이트는 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다. 사용자 요청을 서버가 성공적으로 처리할 거라고 미리 예상하고, UI를 즉각적으로 변경해서 사용자에게 빠른 반응을 보여줍니다. 낙관적 업데이트의 대표적인 예시로 좋아요 기능을 들 수 있습니다. 예를 들어, 사용자가 좋아요 버튼을 클릭하면 서버 응답을 기다리지 않고, 화면에 바로 좋아요 클릭에 대한 상태를 보여주는 것입니다. 서버 응답이 성공적으로 돌아오면 그대로 두고, 혹시나 실패하면 UI에서 해당 좋아요 상태를 다시 해제하거나 오류 메시지를 보여주는 방식입니다. 낙관적 업데이트의 장점은, 서버 응답 속도와 관계 없이 즉각적인 피드백을 제공해서 사용자들이 시스템을 빠르게 쓸 수 있다는..