분류 전체보기 (399) 썸네일형 리스트형 리액트의 다양한 활용 팁을 정리하였습니다. 모르셨다면 하나 알아가세요. 해당 포스트는..해당 포스트는 리액트를 사용하면서 알게된 팁이나 주요하다고 판단되는 활용 예제를 만들어 정리 후 모아두는 공간입니다. 참고한 자료가 있으면 하단의 참고문헌에 모아둘 예정입니다. 해당 포스트는 추가되는 내용이 있으면 관리 효율성을 위해 그 날을 기준으로 갱신되어 업로드 됩니다. 동적으로 래퍼 컴포넌트를 생성하는 팁보통 재사용성을 높이기 위한 방식으로 Card 와 같은 컴포넌트를 만듭니다. Card 컴포넌트의 래퍼가 되는 태그는 ul 이 될 수도 있고, div 가 될수도 있고, article 이 될 수도 있죠. 그런데 이러한 경우에는 정적이기 때문에, 개발자가 직접 해당 컴포넌트에 들어가서 수정하지 않는 이상은 불변한 상태에 있게 됩니다. 하지만, 리액트는 한 가지 특별한 동작이 있습니다.. 자바스크립트 활용 모음집 해당 포스트는..자바스크립트 활용을 위한 간단한 예제를 정리해두는 모음집입니다. 필요에 따라 추가될 수 있고, 추가되는 경우 해당 날짜를 기준으로 갱신됩니다. 이미지 미리보기 기능을 구현하는 방법 FileReader 객체를 사용하여 이미지 미리보기FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. 참고로, File 객체는 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() AP.. [복지맵 프로젝트] 리팩터링하면서 효율적인 코드가 무엇인지 고민해보기 해당 포스트는..프로젝트를 하면서 작성한 코드 중 리팩터링하면 좋을 코드를 수정해 나가며 학습하기 위한 목적으로 작성된 포스트 입니다. 데이터를 읽어온 뒤 바로 저장하는 로직아래 코드는 출발지점의 경도/위도 상태와 도착지점의 경도/위도 상태의 변경에 따라 출발지에서 도착지 까지 길찾기를 수행하는 로직이다. 보면 알 수 있듯이 onClickGetDirections 라는 함수명을 가지고 있음에도 읽어오는(Get) 동작뿐만 아니라 setpath 와 같이 설정(Set) 하는 기능까지 수행하고 있다. /** * onClick | KAKAO API | 현재 위치에서 목적지 까지 길찾기 api 요청 * reference: https://developers.kakaomobility.com/docs/navi-a.. [모음집] NestJS(with TypeORM + PostgreSQL) 예제 모음집 포스트 목적NestJS, TypeORM, PostgreSQL 을 사용하면서 적용해야 했던 내용들에 대해 하나하나 정리하여 찾아볼 수 있는 아카이브 형식으로 자료들을 모아두는 포스트 입니다. 정리 순서는 뒤죽박죽이라서 목차를 보고 필요한 내용이 있다면 참고하시면 좋을 것 같습니다. 해당 포스트는 관리 효율성을 위해 업데이트 되는 날을 기준으로 최상단에 포스트가 갱신되는 것을 원칙으로 합니다. 참고/참조 자료 링크(TypeORM Where 문 예시) https://typeorm.io/select-query-builder#adding-where-expressionPostgreSQL 에서 제공하는 JSONB 타입의 데이터 다루기아래는 JSONB 타입의 데이터를 조작하기 위해 사용하는 옵션에 대한 간략한 설명을 .. [복지맵 프로젝트] 트러블 슈팅 모음집 ① 오늘의 명언 "모든 문제에는 실마리가 존재한다." [리셋 문제 1 ] 필터 모달을 닫는 경우 체크 항목이 초기화되는 문제 해당 문제는 단순하게 해결되며, [리셋 문제2] 로 이어집니다.문제상황,사용자가 필터 기능을 사용하여 검색을 하고, 해당 창을 닫은 후 다시 사용하려고 하면, 기존에 체크 영역이 초기화되는 무제가 있습니다.필터창을 열고 체크한 상태 [닫기] 후 다시 필터창을 연 후 개선과정,원인분석해당 문제의 1차적인 원인은 showFilters 라는 true or false를 담고 있는 상태가 변경될 때 마다 해당 필터창이 브라우저 렌더링에서 완전히 배제되었다가 생겨나면서 생기는 문제 입니다. 이 문제를 해결하는 단순한 방법은 showFilters 상태에 따라서 해당 필터 모달의 클래스를 동적으.. AWS EC2 내 파일을 내 로컬로 가져오려면?(Window Putty.exe) 명언 웹 프로젝트를 하면서 AWS EC2 내에서 사용하고 있는 데이터베이스 백업 파일을 로컬로 가져와야 하는 일이 생겼다. 이번 포스트는 Window 환경에서 키 페어를 .ppk 를 사용하는 Putty SSH 클라이언트를 사용하여 어떻게 ec2 내의 파일을 로컬로 가져오는지 정리한 것이다. putty 사용법 등은 이미 안다고 가정하므로 설치방법 등에 대한 절차는 모두 생략한다. 접근 권한 변경우선적으로 옮기고자 하는 파일이 위치한 폴더로 외부에서 접근할 수 있도록 임시적으로 권한을 부여해야 한다. 본인의 경우에는 admin.sql 이라는 DB 백업 파일이 /var/lib/pgsql 이라는 postgres 사용자만 접근이 가능한 경로에 있다. 따라서 pgsql 폴더에 대한 접근 권한을 수정하여 pscp 에.. [JS] Array.from 의 두번째 인자는 map 과 유사한 함수다. 생각보다 자주 사용되고 있는 Array.from 이라는 메소드에 대해서 알아보고 보다 다양한 상황에서 활용할 수 있는 능력을 키우기 위해서 이번 포스팅을 준비하였다. 기본 사용과 개념 | 순회 가능 혹은 유사 배열 객체를 Array 인스턴스로 생성우선 Array.from 은 Array 생성자 함수에 바로 접근이 가능한 정적 메소드이다. 그리고 해당 메소드를 사용하면 순회 가능한 객체나 유사 배열 객체를 Array 인스턴스로 생성할 수 있다. 예를 들어, hello 라는 문자열이 있으면, 해당 문자열은 실제 배열은 아니지만, 내부적으로는 배열과 유사한 형태를 지니기 때문에 유사배열객체로서 순회가 가능하다. 따라서 Array.from 의 인자로 해당 문자열을 전달하게 되면, Array 인스턴스로 새롭게 .. [복지맵 프로젝트] ~ 2024.05.10 진행사항 점검[CH04] 현재 까지 진행도뉴스 검색기능복지맵과 연관하여 추가적으로 제공할 수 있는 기능이 무엇이 있을까 고민하다가. 네이버 검색 api 를 사용하여 복지 관련 뉴스를 가져와서 보여주면 좋을 것 같아서 해당 기능을 추가하였다. 해당 프로젝트에서 제공되는 복지서비스 정보는 부산 지역에 한정하여 제공할 생각이기 때문에, 검색 필터링을 부산 구군별 + 대상별로 한정하여 기능을 구현하였다. 복지맵과 서비스 상세내가 이번에 계획한 복지맵 프로젝트의 주요 컨셉은 말그대로 지도이다. 물론 그 지도가 카카오 맵 api 와 같은 sdk 를 사용한 방식 보다는 실제 SVG 를 사용하여 각 구군별 선택 시 해당 지역에서 제공하는 서비스 목록을 렌더링하여 보여주는 것이 주요 컨셉이었다. 레이아웃이 변경 됨원래 기존의 복지맵은 지리도.. 이전 1 ··· 7 8 9 10 11 12 13 ··· 50 다음
