React 프로젝트

간단하게 데이터 읽어와서 뿌려주고, 화면 이동하고, props 전달하고기본적인 조회화면을 만들며 사용한 라이브러리나 난감했던 상황을 정리create-react-app 으로 프로젝트 생성Mockoon - API 처리API를 호출하여 값을 읽어오는 테스트를 해야하는데, 데

internationalization 을 i18n으로 나타낸 것이며, 웹사이트를 구축할 때 다국어처리에 자주 쓰이는 라이브러리초기에 앱은 단일 언어로 운영하겠다고 설계하였지만,, 당연하게도 변경되었다다행히 미래를 예견한듯 라벨이나 메세지, 메뉴명 등을 i18n으로 관리

자바스크립트에 다양하게 제공되는 함수 중 map이 자주 쓰인다알고나면 편한데 익숙해지도록 여러가지 기록정의는 나중에 todo로 작성하고, 또 같은 일을 겪지 않기 위해 작성https://helicopter55.tistory.com/2여기 블로그를 보고 알았다m

강의를 마치고, 해당 프로젝트에 살을 붙여나가고자 하는데 첫번째로 SNS 로그인/회원가입이다움짤OAuth 2.0 이라는 개념을 알아야하는데, 생활코딩의 OAuth 강의도 보고 구글링도 해보았으나 설명을 할 만큼 깊게 알지는 못했다. 다른 SNS 로그인도 붙여볼건데, 그

구글 Map에 나의 타임라인이라는 기능이 있는데, 활성화시키면 본인의 동선이모바일폰의 GPS로 기록이 쌓인다이 데이터로 내가 다닌 경로를 볼 수 있는데, 그 경로에서 찍은 사진이나 코멘트를 남기며 기록을 하고 싶은 마음에 프로젝트를 시작했다구글 Map API에서 내가

지난번에 이어 변경된 부분이 있어서 추가하려고 한다이런식으로 설계 및 개념을 잡아가며 진행중현재 구성된 UI상위 컴포넌트(EditPage.js)에서 Map 컴포넌트로 현재 조회된 List를 내려준다기존과 바꾼 개념적 부분은 157~160 라인onDrawMap 함수 내에

달력을 통해 날짜를 선택해야하므로 캘린더 라이브러리를 여기저기 찾아보았고 적용된 내용!https://reactdatepicker.com/여기에 접속해보면 이 라이브러리를 활용하기에 대한 예시가 굉장히 많이 있다달력이 접혀있는 경우 or 열려있는 경우 좌측 시작

각각 선택한 선과 마커(이동중, 방문장소)에 사진과 텍스트를 저장시켜야 하므로 사진을 업로드 하는 부분을 해보았다사진을 여러건 업로드 해야한다업로드하면 바로 서버에 저장되고,저장된 경로를 프론트에서 받아서 화면에 보여준다사진을 클릭하면 지워진다https://r

구글의 Timeline 데이터는 Json 파일인데 이걸 멀티로 업로드하는 기능이 필요한데,화면을 따로 빼기보다는 dialog로 팝업창 띄우는 방식으로 해보았다material-ui에 Dialog를 활용했고, 텍스트와 버튼을 추가하고 업로드하는 영역도 추가된 모습https

지난 방식으로 xxx.json 파일을 업로드하는것에는 이상이 없었다그런데 지정된 폴더에 파일을 저장하는데 문제가 생겼다. 파일을 저장할 때, server쪽 DB 링크가 끊어진다.. 확인해보니 nodemon으로 백엔드, 프론트엔드 서버롤 올려서 그런다.. 여튼 첨부를 올

앞의 게시글에서 Timeline, Calendar 데이터를 MongoDB에 저장했다. 기존에 FE 개발할 때는 API를 호출하고, 가짜 데이터를 리턴해주고 있었는데 실제 데이터를 조회해본다1\.

구글에서 다운받은 Json 파일을 업로드업로드한 데이터를 통해 Timeline, Calendar 데이터 생성편집 페이지에서 접속한 유저의 calendar 데이터 조회날짜 선택하면 해당 날짜에 맞는 timeline 데이터 조회조회된 timeline 데이터에 의해 Map과

하이브리드 앱으로 개발하여 타이머를 쓰게되는 경우일정 시간이 흐른뒤 앱이 sleep 상태로 가게되고, 이런 경우 setInterval과 같이 주기적으로 함수가 수행이 원활하게 되지 않는 현상이 있었다.https://stackoverflow.com/questio

보통 지도를 이용할 때, 목록에 있는 항목을 누르면 그 항목이 중심에 위치하게 지도가 움직이게 된다.이를 위한 기능을 제공하는데,https://apis.map.kakao.com/web/documentation/카카오 Map에서 제공하는건 위와 같은 함수가 있다

서비스를 소개하는 문구와 날짜 선택하는 부분을 헤더 영역으로 고정position: 'fixed'와 zIndex: 5를 이용해서 고정해주고, 그 다음영역의 시작 높이 지점을 세팅하는 등 작업을 해줌항목이 나오는 부분에 제목, 내용, 장소, 시간, ... 정보를 보여주는

client 단을 react로 진행 중인데, 개발을 위해서는 npm run start를 사용하면 되었다후에 서비스를 배포하거나 운영할 때는 다른 방식으로 해야하는데,npm run build를 수행한다build를 처음하게되면, build 폴더가 생긴다. 불필요한 공백이나

로컬에서 신나게 개발한 것을 모든사람이 접근하도록 서비스하는것이 최종적인 목표현재 상황은 하나의 프로젝트에 서버, 클라이언트 모두 있음Server: Node js, ExpressClient: React개발OS: window10이정도가 되겠다참고자료https:/

앞서서 진행한건 Client 쪽인거고, 이제 Server 쪽도 적용해보자현재 로컬에서 작업 중인 폴더 구조인데, server폴더와 package.json 파일 등이 필요하겠다파일질라를 통해 옮겨도 되고, git을 이용할 경우에는 해당 폴더에서 git pull하면 되겠는

요즘 대부분 웹 페이지에 있는 다크모드를 적용해보고 싶었다작업한지 1달은 넘은것 같아서 잘 기억이 나지 않음styled component를 활용해서 global Theme를 설정Dark Mode의 커스텀 Hook을 만들어서 각각의 스크립트마다 적용styled compo

자바스크립트 기반으로 작성된 react 소스를 타입스크립트 기반으로 바꾸려고 한다 0. 참고한 유튜브 1. 설치 > npm install typescript @types/node @types/react @types/react-dom @types/jest @type