개발 일기 (36) 썸네일형 리스트형 [Kotlin] 간단 메모장 만들기 1 #Intent #FloatingActionButton #다크모드 간단한 메모장을 만들어 보기로 했다. - 대략적인 설계 MainActivity에서는 메모 리스트(이미지 썸네일 1개, 제목, 내용, 작성 날짜)를 볼 수 있고 해당 리스트를 클릭하면 상세보기를 할 수 있다. 메인에서 화면 전환은 Fragment로 할 예정이다. 메인에서 FloatingActionButton을 통해 WriteActivity를 생성한다. WriteActivity는 게시글을 작성하는 페이지로 이미지 여러 장을 추가할 수 있고 제목(한 줄)과 내용을 작성하여 DB에 저장한다. 개발에 앞서 Activity와 Fragment에 대해 찾아봤는데 이전엔 성능 때문에 여러 가지를 고려해서 사용했는데 지금은 Single Activity에 Fragment만 사용해서도 어플 제작이 가능하다고 한다. 그래도 여.. [React] 자식 컴포넌트에서 부모로 callback 보내기 #onClick 이번에 개발을 하다보니 부모 뷰 에서 여러가지 컴포넌트들을 뷰에서 관리하고 동작하는 행동이 많았다. 자식 컴포넌트에서 부모로 데이터를 보내는 방법이 뭐가 있을까 하다가 찾아낸 방법이다. Home.js class Home extends Component { callback=(data)=>{ //여기서 자식에 응답이 왔을 경우 처리를 해준다. } render(){ return({ //여기서 넣어줌 }); } } 컴포넌트에서는 예를 들어 버튼이 클릭되었을 때 callback 함수를 실행 시켜 주면 된다. Compoent.js function Compoent({ callback }) { return({ CLICK }); } 쉽게 쉽게 통신이 가능하다. [Node] 서버에서 html로 보내기 #ejs 서버를 따로 쓰지만 가끔 해당 주소로 들어갈 경우 페이지 화면을 보여줘야 하는 경우가 있다. ex) 인증 완료 페이지 이메일 인증 완료 시 쿼리문이 아닌 완료 페이지를 보여주고 싶었다. ejs를 사용해 html 파일을 보여줄 것이다. app.js import express from "express"; import ejs from "ejs"; const app = express(); app.set("view engine", "ejs"); // ejs 설정 app.engine("html", require("ejs").renderFile); // ejs 설정 export default app; 이렇게 설정을 하고 router 부분으로 가서 실행해 주면 끝이다. router.js import express fr.. [React] react-route-dom, gh-pages 새로고침 #Router#reload react로 개발하고 깃허브 페이지에 올리면 새로고침할 경우 404 error가 우리를 반겨준다. 이런 문제를 해결하기 위해 react-router-dom에서 BrowserRouter를 썻다면 HashRouter로 바꿔줘야한다. [Node] EC2에 MongoDB 설치하기 #mongo#EC2 - 참고 Install MongoDB Community Edition on Amazon Linux — MongoDB Manual docs.mongodb.com - 설치하기 기본설정 $ sudo vi /etc/yum.repos.d/mongodb-org-4.2.repo *참고 뒤에 버전은 항상 달라질 수 있음. 참고에 버전을 참고하자 ㅋㅋ vi를 통해 파일을 하나 만들고 파일에 [mongodb-org-4.2] name=MongoDB Repository baseurl=https://repo.mongodb.org/yum/amazon/2/mongodb-org/4.2/x86_64/ gpgcheck=1 enabled=1 gpgkey=https://www.mongodb.org/static/pgp/server-4.2.a.. [Node] EC2에 nginx 설치하기&포트변경 #nginx#EC2 - ec2에서 nginx 설치 방법 yum을 사용해서 설치하려고 하면 amazon-linux-extras를 사용하라는 안내 문구가 나온다. "nginx1.12" and "nginx1" 둘 중 하나 골라서 사용하면 된다. $ sudo amazon-linux-extras install nginx1 설치 후 $ sudo service nginx start 로 실행해준다. ec2 인스턴스 -> 보안 그룹 -> 인바운드 에 꼭 포트 허용을 해주자!! nginx의 기본 포트인 80번 포트를 열어주었다. ec2주소로 접속하면 nginx가 반겨준다. 이러면 일단 설치는 성공적... - 내가 원하는 포트로 접속하기 nginx의 기본 포트는 http의 80번 포트이다. 이 포트로 접속을 하면 내가 쓰는 포트로 연결해줘야한.. [Node] EC2에 Node.js 설치하기 #npm#EC2 https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html 자습서: Amazon EC2 인스턴스에서 Node.js 설정 docs.aws.amazon.com 자습서에 있는 내용이다. 1. nvm 먼저 설치 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash - 참고 nvm-sh/nvm Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm git.. [React] gh-pages로 react-router-dom 페이지 업로드할 경우 #gh-pages#react-router-dom 로컬에서 작업하듯이 하고 페이지를 git서버에 올리면 아무것도 없는 흰색 화면이 뜨는 경우가 있다. router의 설정 문제 때문이었다. import { BrowserRouter as Router } from "react-router-dom"; function App() { return ( ); } export default App; 제일 처음 라우터 설정에 basename={process.env.PUBLIC_URL} 설정을 꼭 붙여주자!! 이전 1 2 3 4 5 다음
