반응형 [JavaScript] 배열에서 특정 요소 제거하기 프로그래밍을 하다 보면 배열에서 특정 요소를 제거해야할 때가 있다. 이 글에서 자바스크립트 배열의 특정 요소를 제거하는 방법에 대해 알아보자. 배열에서 특정 요소를 제거하는 방법 splice() 메서드 사용 splice() 메서드는 첫 번째 인자로 주어진 인덱스에서 시작해서, 두 번째 인자로 주어진 개수만큼의 요소를 제거한다. splice() 메서드는 요소의 교체 및 추가에도 쓰인다. indexOf() 메서드를 사용하여 제거할 값의 인덱스를 먼저 찾을 수 있다. const array = [1, 2, 3, 4, 5]; const index = array.indexOf(3); // 값 3의 인덱스를 찾는다. if (index > -1) { array.splice(index, 1); // 인덱스 위치에서 1개.. 2023. 5. 20. [React] null vs empty fragment 리액트에서는 종종 다른 조건에 따라 아무것도 렌더링 하지 않고 싶을 때가 있다. 그럴 때 쓰는 반환값이 바로 null과 empty fragment( )이다. 이 둘 중에 무엇을 쓰는 게 더 나은 선택일까? function Item({ name, isPacked }) { if (isPacked) { return null; // 또는 } return {name}; } null을 사용하는 것이 리액트 렌더링 프로세스에 아무 영향을 끼치지 않기 때문에 성능상으로 좋아서 사용하는 개발자가 있고, "빈 엘리먼트를 반환한다"라는 개념에서 를 의미론적으로 사용하는 개발자도 있다. 이 문제에 대한 힌트가 담긴 내용이 공식 문서에도 나와있다. 역시 이럴 땐 공식 문서 먼저 살펴보는 것이 좋은 것 같다. 공식 문서에서는 '.. 2023. 5. 19. React에서 셋(Set)으로 체크박스 재정의하기 체크박스 기능 구현, 이게 이렇게나 복잡한 퍼즐이 될 줄은 몰랐다. 그래도 두 개의 구현 방법을 알아내긴 했다. 그 중 하나인 '셋(Set)' 자료구조를 활용한 방식은 신기하고 인상 깊었다. 셋은 알고리즘 공부할 때나 가끔 봤었는데, 예전에 면접에서 써봤다고 괜히 얘기 꺼냈다가 라이브로 관련 문제까지 풀었었던 아찔한 기억이 있다.(물론 떨어졌다.) 그래서 이 글에서는 제대로 이해하고자 체크박스 기능 구현을 통해 알아보려고 한다. 우선, 배열을 사용하여 구현한 방식을 살펴보고, 이를 개선하기 위해 셋을 이용한 방식까지 소개한다. 따라서, 이 두 가지 방식을 비교하고, 셋을 이용한 체크박스 기능 구현이 어떻게 기존의 배열을 사용한 방식을 개선할 수 있는지에 대해 살펴보자. 잠깐, 체크박스 UI란? 체크박스 .. 2023. 5. 14. URI의 스킴(scheme)과 프로토콜(protocol) 어젯밤, 개발 톡방에서 관심이 가는 내용으로 질문이 올라왔다. 흥미로운 주제라서 나도 한 자리 차지하기 위해 공부해서 정리한 후 내용을 공유했다. 질문의 내용은 URI의 스킴이 프로토콜을 포함하는 용어인지에 대한 질문이었다. 먼저, URI(Uniform Resource Identifier)는 프로토콜을 사용하여 인터넷상의 리소스를 고유하게 식별하고, 위치를 지정하기 위한 문자열이다. 이때, 프로토콜의 이름을 '스킴'으로 나타낸다. 예를 들어, 'https://example.com'에서 'https'는 스킴으로, 해당 URI에서 사용하는 프로토콜인 'Hypertext Transfer Protocol Secure'를 나타낸다. 따라서 스킴은 URI 주소의 시작 부분에 위치하며, 콜론(:) 앞의 문자열로 표시.. 2023. 4. 25. 어드민 프로젝트 중간 회고 첫 번째 어드민 프로젝트가 흐지부지 마무리되고, 두 번째 어드민 프로젝트를 시작했다. 이번 프로젝트는 규모도 꽤 크고 디자인과 기획까지 전달 받았다. 사내 주요 서비스의 메이저 버전 업데이트라서 그런 것 같다. 주요 서비스였지만 나는 어느 한 부분에서만 익숙한 상태였다. 그래서 서비스에 대한 이해도가 부족했고, 회의 내용에서 모르는 부분들도 있었다. 이런 상태로 프로젝트를 진행하면 스스로도 동기부여가 되지 않을 것 같아, 모르는 부분은 그때그때 질문을 드리고 상품 소개서를 받아 서 내가 구체적으로 무엇을 만들어야 하는건지부터 이해할 필요가 있었다. 어드민 프로젝트를 시작한 지 한 달이 조금 넘는 동안 정말 바쁘게 지냈다. 경험도 부족했고, 태스크별 기한도 정말 짧았다고 생각한다. 바쁜 와중에 개발까지 잘.. 2023. 4. 21. [JavaScript] Axios 사용하기(feat.CDN, Webpack) axios는 자바스크립트에서 사용하는 promise 기반 HTTP 클라이언트 라이브러리이다. 브라우저와 node.js 환경에서 모두 사용 가능하며, XMLHttpRequests와 node.js의 http 모듈을 사용하여 HTTP 요청을 처리한다. XHR 객체를 사용하기 때문에 브라우저 호환성이 좋고, 더 다양한 설정을 지원하기 때문에 요청에 대한 세밀한 제어가 가능하다. 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)뿐만 아니라 요청과 응답 데이터의 자동 직렬화와 역직렬화를 지원한다.(기본적으로 객체를 'JSON'으로 직렬화한다.) 이렇게 다양한 기능으로 인해 axios는 많은 프로젝트에서 HTTP 클라이언트 라이브러리로 사용된다. 그럼 이제 자바스크립트에서 axios를 어떻게 다운.. 2023. 4. 5. 자바스크립트는 모든 것이 객체일까? 왜인지는 모르겠지만 나는 꽤 오랫동안 자바스크립트의 값(value)들이 모두 객체(object)라고 생각을 했었다. 블로그든 강의든 어디선가 잘못 이해하고, 그 내용이 머릿속에 강하게 남았나보다. 많은 시간이 지나고, 이제서야 개념을 바로잡게 되었다. 결론부터 말하자면 자바스크립트에서 대부분의 것들은 객체이지만, 원시값(primitive)이 있으며, 이들은 객체가 아니다. 다음으로 객체란 무엇인지, 왜 모든 값들이 객체라고 생각을 했는지, 그리고 그 값은 왜 객체가 아닌지에 대해서 자세히 알아보자. 객체 알아보기 객체는 관련된 데이터와 함수(프로퍼티와 메서드)를 가지는 복합 자료 구조이다. 자바스크립트의 객체는 실제로 동적 구조와 프로토타입 기반의 상속 덕분에 매우 유연하고 강력한데, 이는 언어의 중요한.. 2023. 3. 30. 이전 1 2 3 4 5 6 ··· 26 다음 반응형
