전체 글 (393) 썸네일형 리스트형 [JS] Array.from 의 두번째 인자는 map 과 유사한 함수다. 생각보다 자주 사용되고 있는 Array.from 이라는 메소드에 대해서 알아보고 보다 다양한 상황에서 활용할 수 있는 능력을 키우기 위해서 이번 포스팅을 준비하였다. 기본 사용과 개념 | 순회 가능 혹은 유사 배열 객체를 Array 인스턴스로 생성우선 Array.from 은 Array 생성자 함수에 바로 접근이 가능한 정적 메소드이다. 그리고 해당 메소드를 사용하면 순회 가능한 객체나 유사 배열 객체를 Array 인스턴스로 생성할 수 있다. 예를 들어, hello 라는 문자열이 있으면, 해당 문자열은 실제 배열은 아니지만, 내부적으로는 배열과 유사한 형태를 지니기 때문에 유사배열객체로서 순회가 가능하다. 따라서 Array.from 의 인자로 해당 문자열을 전달하게 되면, Array 인스턴스로 새롭게 .. [복지맵 프로젝트] ~ 2024.05.10 진행사항 점검[CH04] 현재 까지 진행도뉴스 검색기능복지맵과 연관하여 추가적으로 제공할 수 있는 기능이 무엇이 있을까 고민하다가. 네이버 검색 api 를 사용하여 복지 관련 뉴스를 가져와서 보여주면 좋을 것 같아서 해당 기능을 추가하였다. 해당 프로젝트에서 제공되는 복지서비스 정보는 부산 지역에 한정하여 제공할 생각이기 때문에, 검색 필터링을 부산 구군별 + 대상별로 한정하여 기능을 구현하였다. 복지맵과 서비스 상세내가 이번에 계획한 복지맵 프로젝트의 주요 컨셉은 말그대로 지도이다. 물론 그 지도가 카카오 맵 api 와 같은 sdk 를 사용한 방식 보다는 실제 SVG 를 사용하여 각 구군별 선택 시 해당 지역에서 제공하는 서비스 목록을 렌더링하여 보여주는 것이 주요 컨셉이었다. 레이아웃이 변경 됨원래 기존의 복지맵은 지리도.. [복지맵] 복지맵 프로젝트 테스트 코드 아카이브 보호되어 있는 글입니다. 윈도우 환경에서 잘 되던 PUTTY SSH 접속이 안 될 때 확인해야 하는 것 중 한 가지, 로컬 IP의 변경 [서론] 잘 되던 친구가..기존 프로젝트를 올렸던 인스턴스에 접속하기 위해서 putty.exe 를 실행하여 SSH 접속을 시도하였다. 그러나, 2024.05.09 오후 12시 경, 아래와 같은 에러가 발생했다. [본론] 문제 원인으로 짐작되는 것네트워크 에러가 발생하는 이유에 대해서 구글링을 통해 찾아보니, 현재 로컬 IP 와 인스턴스를 연결하는 데 사용된 IP 주소가 서로 달라서 발생할 수 있다고 한다. 생각해보니, 어제 LGU+ 에서 제공하는 공유기에서 SK 브로드밴드로 바꾸었기 때문에, 기존 내 컴퓨터를 식별하는 IP 주소가 바뀌어서 이 문제가 발생한 것이라 짐작할 수 있었다. 사실 이거 말고는 문제를 일으킬 요소가 없었긴 했다. 문제원인이 명확해졌으니 바꿔주면 될 일그래서 이 문제를 해결하기 위.. CSS +JS 를 이용한 톡톡 튀는 폭죽(스파크) 애니메이션 만들기 이전 애니메이션 | 로딩 스피너 HTML/CSS 를 이용한 로딩 스피너 만들기3탄 | 마우스 호버 시 따라다니는 언더라인 만들기 바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄)2탄 | HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기 HTML/CSS 만으로 재밌는duklook.tistory.com 미리보기현재 포스트를 따라오시면 다음과 같은 애니메이션을 구현할 수 있는 능력을 갖추게 되십니다. HTML이번 포스트는 HTML 을 직접적으로 생성할 일은 없습니다. 향후 JS 를 이용해 동적으로 생성할 것입니다.CSSCSS 초기화* { margin: 0; padding: 0; box-sizing: border-box;} 우선 margin 과 padding 을 0 으로 .. 나중에 참고할 수도 있는 코드 모음집 보호되어 있는 글입니다. HTML/CSS 를 이용한 로딩 스피너 만들기 이전 애니메이션 | 마우스 호버 시 따라다니는 언더라인 만들기 바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄)2탄 | HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기 HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기(var 함수 활용)(2탄)1탄 | JS/HTML/CSS 로 랜딩 애니메이션 구현 바닐라 자바스duklook.tistory.com미리보기이번 포스트를 따라오시면 아래와 같은 로딩 스피너를 구현하실 수 있는 능력을 얻게 됩니다. 순수 HTML/CSS 를 사용하여 구현되었고, 응용에 따라서는 각 도트가 제자리에 있는 상태에서 투명도만 조절하여 순차적으로 파도타기가 되는 애니메이션 등을 구현해보실 수 있습니다. 무엇이든 응용에 달렸습니다. 간단한 원.. [모음집] Zustand 모음집 해당 포스트는..이 포스튼 클라이언트 상태관리 라이브러리인 Zustand 에 대한 일부 팁이나 내용들에 대한 것들을 모음집 형태로 모아두기 위한 포스트 입니다. 추가된 내용이 있으면 당일 날짜로 업데이트 됩니다. 저장소 내에 꼭 상태와 업데이트 함수를 같이 둘 필요는 없음일반적으로 Zustand 를 사용 시 스토어를 정의하면일반적인 방식으로 스토어를 정의하면 아래와 같이 상태와 업데이트 함수가 하나의 스토어에 같이 위치하고 있습니다.이 방식은 권장하고 있기도 하구요.export const useBoundStore = create((set) => ({ count: 0, text: 'hello', inc: () => set((state) => ({ count: state.count + 1 })), s.. 이전 1 ··· 7 8 9 10 11 12 13 ··· 50 다음
