Hello World!!

(번역) 블로그 답변: React 렌더링 동작에 대한 (거의) 완벽한 가이드 링크 : https://velog.io/@superlipbalm/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior Read More

New York is 3 hours ahead of California, but that doesn’t make California slow. 뉴욕은 캘리포니아보다 3시간 빠르지만, 그렇다고 캘리포니아가 느린 것은 아니다. Someone graduated at the age of 22, but waited 5 years before securing a good job. 누군가는 22세에 졸업하지만, 좋은 직업 확보에 5년이 걸린다. Someone became a CEO at 25, and died at 50. 누군가는 25세에 사장이 되지만, 50세에 죽는다. While another became a C... Read More

학원 마지막 날! 포트폴리오에 적용할 수 있도록 다양한 효과의 ui를 실습했다. Intersection Observer 링크 IntersectionObserver()는 DOM 엘리먼트가 뷰포트상에 노출되었는지 여부를 비동기적으로 감시하는 API이다. 스크롤 좌표값에 따라 스타일을 적용하는 대신, IntersectionObserver()를 활용해 현재 화면에 보여지고 있는지 여부에 따라 스타일을 적용할 수 있다. IntersectionObserver()를 선언해두면 변경점이 생길 때 마다 다시 실행한다. 옵저버 생성 시 인자로 변경값에 대한 실행 함수를 입력한다. const optio... Read More

학원 수업 Day36 node-express 로 구축해서 DB를 연결한 동적인 페이지는 github에 배포할 수 없으므로 Heroku 를 이용했다. Heroku 헤로쿠는 여러 프로그래밍 언어를 지원하는 PaaS(Platform as a Service, 서비스로서의 플랫폼) 이다. 여기서 PaaS 가 무엇인지 궁금해졌다. 원래 직접 만든 App 을 다른 사람도 볼 수 있게 하려면 서버 컴퓨터를 세팅 해 두어야 그곳에 저장된 데이터를 볼 수 있었다. 하지만 최근에는(사실은 내가 모르는 오래 전 부터) 클라우드 컴퓨팅 서비스를 통해, 하드웨어나 소프트웨어 등의 자원을 직접 소유하지 않고 업체에서 제공하... Read More

학원 수업 Day35 기존에 만들어 둔 게시판에 회원 정보를 연동시켜 작성자를 출력하고 동일한 작성자일 때만 수정, 삭제 버튼이 출력되도록 한다. 게시글 작성 front-end 글 작성 컴포넌트 Create.js 에서 현재 저장된 유저 정보를 받아온다. import { useSelector } from 'react-redux'; const User = useSelector(store=> store.user); 정보를 저장하는 item 객체에 회원 고유값(여기서는 uid)을 합쳐서 back-end 로 보낸다. const item = { ... uid: User.uid }; b... Read More

학원 수업 Day35 웹사이트 규모가 작을 경우 가입된 회원의 데이터 관리는 자체 DB에서 하는 것보다 firebase를 이용해 구글에서 관리하게 하는 것이 보안 등의 측면에서 편리하다. firebase firebase 를 react 폴더에서 설치한다. npm i firebase firebase 를 사용하기 위해 src 폴더에 firebase.js 파일을 생성한다. //firebase추가 import firebase from 'firebase/compat/app'; //firebase auth 추가 import 'firebase/compat/auth'; const firebaseConfig = ... Read More

학원 수업 Day34 지난 시간에 이어서 수정, 삭제 기능을 구현했다. 게시글 수정 back-end 먼저 edit로 호출이 들어오면 같이 넘어온 정보들을 temp 에 저장한다. router.post('/edit', (request, response)=>{ const temp = { title: request.body.title, content: request.body.content } }) updateOne() 메서드를 이용해 데이터를 수정한다. 첫번째 인자로 원하는 조건(고유 id값, 여기서는 communityNum 값)으로 수정할 Document를 하나 검색하고, 두... Read More

학원 수업 Day33 mongoDB를 활용해 본격적으로 커뮤니티 게시판을 생성했다. 게시글 출력 back-end app.post('/api/read', (request, response)=>{ Post.find() .exec() .then(doc=>{ response.json({success: true, list: doc}); }) .catch(error=>{ console.log(error); response.json({success: false}); }) }) node/index.js에서 find(조건) 메서드... Read More

Router-DOM V5 useHistory() JSX에서 라우터를 이동할 때 라우터의 Link 를 사용하지만 js에서 이동을 시키고 싶을 때는 useHistory() 를 사용한다. react 로부터 useHistory 를 import 하고 history 로 정의해 사용한다. const history = useHistory(); history.push() 실제로 페이지를 이동할 때는 history.push(경로) 형태로 사용한다. 인자로 문자열만 넣으면 단순하게 해당 경로로 이동하지만, 객체 형태로 넣으면 경로 뿐만이 아니라 다른 데이터도 같이 보낼 수 있다. history.push({ pa... Read More

Function 컴포넌트와 Class 컴포넌트의 차이는 기존에 궁금했던 부분이어서 강의를 찾아보고, 검색을 통해 추가적인 내용을 보충해서 이해했다. 인프런 - React class vs. function style coding class형 보다 함수형 컴포넌트가 사용이 더 쉽지만, 예전에는 class형 컴포넌트만 state나 react life cycle을 이용할 수 있었기 때문에 대부분 class 문법으로 작성이 되었다. 하지만 Hook이 등장하면서 함수형에서도 state나 react life cycle을 이용할 수 있게 되어서 함수형으로도 많이 쓰인다. 컴포넌트 생성 function 컴포넌트 ... Read More