react-daum-postcode 사용하여 주소검색 기능 구현하기 react-daum-postcode는 사용법이 정말 간단하다는 장점이 있다. 그래서 주소 검색 컴포넌트를 진행하는 프로젝트 테마에 맞게 커스텀 하는데 좀 더 포커스를 맞추고 진행하였다. 참고 카카오 우편번호 서비스 참고2 react-daum-postcode 0308_gif_v1.gif 구현 사항 체크 react-daum-postcode 사용 주소 검색 기능 구현 modal을 사용하여 주소 검색 노출, 주소 선택 후 선택한 주소와 상세주소 입력 부분 노출 상세주소 입력 여부에 따라 저장 버튼 활성화 및 비활성화 데스크탑 사이즈에서는 modal 팝업 모바일 사이즈에서는 화면에 가득 채우기 - 반응형 1. react-daum-postcode 사용 주소 검색 기능 구현 설치 사용 위 절차대로 진행하면 바로 주소검색 기능을 사용가능하다. 이제 원하는대로 커스텀해서 사용하면되는데 가이드라인 문서를 확인해보면 원하는 기능을 확…

주소검색 Api 사용하여 주소검색 컴포넌트 구현하기 - 2 view 작업은 어제 끝냈다. 이제 OPEN API를 활용하여 주소 검색 기능을 구현하고 redux를 사용하여 유저가 검색한 주소 + 입력한 상세주소를 저장하는 부분까지 진행하였다. 0304_gif_v1.gif 구현 사항 체크 Axios를 사용하여 OPEN API를 받아 주소 검색 및 검색한 주소 자동완성 기능 구현 상세주소 처리 1. Axios를 사용하여 OPEN API를 받아 주소 검색 및 검색한 주소 자동완성 기능 구현 실질적인 검색 기능이 실행되는 modal 팝업에서 axios를 활용하여 juso.go.kr에서 제공하고 있는 OPEN API를 받아왔다. 주소를 검색하는 input에 입력된 값을 useRef를 사용하여 addAddress에 담아 api의 부분에 들어갈 수 있도록 하였다. 그리고 autosearch라는 함수에 api를 받아 useState를 사용하여 datas에 검색한 주소를 저장, console.log…

주소검색 Api 사용하여 주소검색 컴포넌트 구현하기 - 1 juso.go.kr에서 제공하고 있는 OPEN API를 사용하여 주소검색 기능을 구현하고자 한다🔥 오늘은 주소검색 컴포넌트 view 작업을 먼저 진행 0303_gif_v1.gif view 작업을 진행하며 구현 사항을 체크했다. 을 클릭 시 modal 팝업을 사용 컴포넌트 노출 주소 선택 후 modal 팝업 종료와 선택된 주소 노출 및 재검색 버튼 노출 상세 주소 입력 인풋 유저가 주소 검색 영역을 클릭 시 modal 팝업을 사용하여 주소 검색 컴포넌트를 노출시킨다. 해당 컴포넌트에서 실질적인 주소 검색 기능이 실행되는 영역이다. view 작업을 하며 우선 체크한 부분은 검색 input 영역 하단에 위치한 검색 안내 가이드 문구는 유저가 검색어를 입력 시 자동완성된 영역에 가려진다는 점이다. 그리고 그 하단에 있는 회색으로 된 주소 입력 가이드 부분도 자동완성된 영역의 크기만큼 줄어든다는 점을 생각하여 작업 진행 조건부…

Api 호출하여 데이터 받고 가공하여 Chart 구현하기 최근 1경기부터 50경기까지 1~8위의 데이터를 라인 차트로 구현하여 유저에게 보여줘야 한다. 라인 차트를 사용하기 위해 여러 가지 라이브러리들을 검색해 봤다. Recharts와 Chartjs를 먼저 알게 되었는데 Chartjs가 공식 문서에 커스텀 하는 부분이 상세하게 나와있고 가볍다는 장점이 있어 Chartjs를 사용하여 구현하기로 했다. 처음 사용하는 라이브러리이고 주어진 시간은 짧기 때문에 공식 문서가 친절한 Chartjs에 마음이 감ㅋㅋ 0227_gif_v1.gif view 작업을 진행하며 구현 사항을 체크했다. Api를 호출하여 유저의 최근 1경기부터 50경기까지 1~8위의 기록을 라인차트로 구현 우측 상단 지난 200경기의 평균 순위, 최근 50경기의 평균 순위 표시 1. Api를 호출 유저의 1경기부터 50경기 1~8위의 기록을 라인차트로 구현 Chart.js의 공식 문서를 먼저 살펴보았다. 그 뒤 여러 블로그…

로컬 스토리지를 활용해 간다한 댓글 남기기 구현할 기능은 간단한 댓글 남기기이다. 프로젝트 스코프가 작다고 판단하여 팀원들과 회의 끝에 Redux를 사용하지않고 진행하기로 함. 로컬스토리지를 사용하여 구현하기로 마음먹었다 0226_gif_v1.gif view 작업을 진행하며 구현 사항을 체크했다. 로컬 스토리지에 닉네임, 댓글 담고 남기기 버튼 클릭 시 댓글 보여주기 우측 상단 추가된 댓글 만큼 숫자 count 하기 우측에서 좌측으로 들어오는 에니메이션 추가 새로 추가된 댓글에 스크롤이 고정되어 추가된 댓글 먼저 보여주기 1. 로컬 스토리지에 닉네임, 댓글 저장 우선 유저가 작성하는 input의 닉네임과 댓글을 useRef를 사용하여 값을 받은 뒤, saveComment 함수인에서 commentArry 배열에 yourName, 과 yourCommet에 담아 로컬 스토리지에 setItem을 사용하여 저장한다. 댓글이 추가될 때마다 로컬 스토리지에 배열로 추가 저장하기 위해 스프레드 …

DOM DOM은 Document Object Model의 약자이며, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. MDN 에서 말하는 DOM의 정의는 다음과 같다. 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 여기서 XML이란 EXtensible Markup Language의 약자이다. 간단하게 설명하면, 텍스트 기반 컴퓨터 자료 구조인 SGML을 HTML처럼 간략화, 표준화하면서 HTML과 호환될 수 있도록 만들어진 마크업 언어이다. 다시 돌아와서, DOM이란 마크업 언어를 구조화해 웹페이지를 프로그래밍 언어를 통해 변경할 수 있게 하는 API인 셈이다. DOM으로 HTML 조작하기 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 방법을 학습해보…

1. 일반적으로 CSS 태그를 태그 사이에 위치시키고, JS 태그를 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요? myAnswer 🍕 CSS 태그를 태그 사이에 위치시키는 이유는 css 태그를 뒷부분에 사용할경우, HTML을 렌더링 한 후 CSS를 렌더링하기 시작하기 때문에, 랜더링이 총 두번 진행된다. 두번의 렌더링으로 낭비가 심하고 사용자에게 UX적인 측면에서 좋지 않다. JS 태그를 태그가 끝나기 직전에 위치시키는 이유는 브라우저는 태그를 만나면 HTML 파싱을 잠시 멈추고 를 다운로드하고 실행한다. 이 경우 사용자에게 화면이 보여지기까지 시간이 늦어지기 때문에 , HTML요소를 모두 파싱한뒤에 자바스크립트 파일을 다운로드하고 실행할 수 있도록 태그 맨 뒤에 태그를 두는 것이 좋다. 2. script / script async / script defer 태그들의 차이점은 무엇인가요? myAnswer 🍕 3개의 스크립트 태그는 해당 스크립트를 다운로드받은 뒤 실…

1. https란 무엇인지 아는 만큼 설명해주세요. myAnswer 🍕 https는 의 약자로 http가 서버와 정보를 텍스트로 주고받기 때문에 원치 않는 데이터 유출이 일어날 수 있는 보안 취약점을 해결하기 위한 프로토콜이 장점으로는 가 있습니다.단점으로는 가 느려질 수 있습니다. 2. http와 https의 차이점은? myAnswer 🍕 HTTPS는 기본 골격이나 사용 목적 등은 HTTP와 거의 동일하지만, 입니다. HTTPS를 사용하면 서버와 클라이언트 사이의 모든 통신 내용이 암호화됩니다. 3. 프로세스 생성 과정에 대해 설명해주세요. myAnswer 🍕 먼저 프로세스란 프로그램이 구동될 때 주 메모리에 적재되며 메모리 상에서 실행되는 작업의 단위를 프로세스라고 합니다. 보통은 작업(Task)라고도 부릅니다(작업 관리자). 쉽게 말해 실행중에 있는 프로그램이라고 할 수 있습니다. 프로세스의 생성과정은 다음과 같습니다. 실행파일 클릭 -> 실행을 위한 메모리 할당 -> …