Hello World!!

포스팅을 하면서 이미지는 잘 넣지 않으니 어쩌다 한번씩 넣을 때마다 검색하는게 귀찮아서 정리해놓는 글. 줄바꿈 문단을 나누려면 엔터 두번 문단을 나누려면 엔터 두번 줄만 바꾸려면<br>br을 하거나 윗줄 뒤에 공백을 3개 이상 <- 이만큼 공백 써주고 바로 다음줄 작성 줄만 바꾸려면br을 하거나 윗줄 뒤에 공백을 3개 이상 써주고 바로 다음줄 작성 제목 라인 앞에 #을 붙인다. # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 링크 [텍스트](url) 이미지 링크와 사용법이 비슷하지만 앞에 !를 붙이고, 사이즈... Read More

인프런 강의를 보며 질문 답변 서비스를 만들었다. firebase 를 사용해 google 소셜로그인을 구현했는데, 카카오톡의 인앱브라우저로 열어서 로그인하려고 하니 로그인화면 대신 아래와 같이 403 에러가 반환되었다. 아래는 그에 대한 카카오의 답변 안녕하세요. 구글 소셜로그인은 구글 내부 정책으로 인해, 안드로이드 인앱 브라우저를 사용하는 앱 에서의 로그인을 차단하고 있습니다. https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html 14 카카오톡의 브라우저는 안드로이드 인... Read More

정적 웹인 jekyll 블로그에 댓글 기능 추가를 위해 Giscus 를 이용했다. Github 내 기능인 Discussions 에 댓글을 등록하고 읽어오는 방식이다. 따라서 먼저 댓글의 저장을 원하는 Repository 에 Settings 하단의 Features 부분에서 Discussions 를 활성화 시켜야 한다. 그리고 https://github.com/apps/giscus 에서 Giscus 앱을 Install 한다. 인스톨 시 Repository 선택을 특정지어서 저장하면 간단하게 설치가 끝난다. 이제 출력을 원하는 곳에 스크립트 코드를 넣어주면 된다. https://giscus.app/ko 으로 ... Read More

분명히 커밋을 했는데 잔디에 반영이 되지 않아서 확인 해 보니 이메일에 오타가 있었다. 계정에 잘못 입력된 이메일을 등록해두면 되지만 내 이메일도 아니고 근본적인 해결방법 또한 아니므로, 다른 방법을 찾아 보았다. 구글링 해 보니 커밋을 수정해 주어야 했는데 이미 수십개의 커밋이 잘못 되어있어 하나하나 수정하기는 번거로웠고, 그러던 중 일괄적으로 수정하는 방법을 찾아냈다. 수정하려고 하는 프로젝트의 root 폴더에서 아래 명령어를 그대로 입력하면 수정이 된다. git filter-branch --env-filter ' WRONG_EMAIL="잘못된이메일주소" NEW_NAME="새로운 이름" NEW_EMAIL... Read More

(번역) 블로그 답변: 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