Dug_House

요약1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)5. 개별 노드를 화면에 페인트한다.  자세한 내용은 밑에 개인 노션에 정리한 것을 확인해주세요 https://sanghoon98.notion.site/4f0c03b5de584f1792310f8ba40d97c7 브라우저 렌더링 과정v8 JS엔진으로 빌드된 JS런타임 환경인 Node.js의 등장으로 JS는 웹브라우저를 벗..

var, let, const 전부다 호이스팅은 되지만 let과 const는 호이스팅이 안되는 것처럼 동작한다. 호이스팅 요약 변수를 선언하고 할당했을 때 선언부분이 최상단으로 끌어올려지는 현상 ⭐ 많이 헷갈리는 부분이 선언과 동시에 초기화해도 선언부분만 분리하여 최상위로 끌어올린다. ex) let a = 10;일때 let a;만 최상위로 올라감 👍🏻 출석체크 먼저 할게~ 역할(값 할당)은 이따가 정해줄게~! 즉, JS엔진은 선언문이 어디에 위치하든 다른코드보다 먼저 실행한다. 따라서, 변수선언이 어디에 위치하든지 상관없이 어디서든 변수를 참조할수있다. 메모리 공간을 먼저 확보한다는 것이다! 변수 생성 3단계 선언 단계 : 변수를 실행컨텍스트의 변수 객체에 등록함 초기화 단계 : 실행 컨텍스트에 등록된 변..

2021년 9월 행정복지센터에서...코로나 관련 국민지원금 현장 접수 및 발열체크 자원 봉사를 했었다. 온라인으로 쉽게 할 수 있는데 전자기기를 사용 못하시는 50년대생 할머니, 할아버지들이 많이 찾아오셨다,  아주머니 2분과 함께 봉사 활동을 하였는데 종료되기 30분 전 나를 미리 보내주려고 자신들이 남은 일들을 남아서 할테니 먼저 집으로 돌아가라고 말씀해주셨다."아니에요 저도 같이 할게요!" 라고 했는데도 "그냥 빨리 뒤도돌아보지 말라고 가"라고 하셨는데 왠지모르게 울컥했다. 일이 힘들지도 않았고 억지로 봉사를 하러왔던 것도 아니었는데도 날 위해서 희생을 해주는 모습을 보고 울컥했다. 봉사를 하러갔다가 되려 봉사를 받은 기분으로 집으로 돌아왔고 한동안 깊은 여운이 남았었다. 그래서 언제든지 기쁜 마음..

너가 그렇게 한다고 해서 누가 알아줘? 왜그렇게까지 하는거야? 뭐가 좋은데? 안힘들어? 내 노력을 다른 사람은 몰라도 내가 알잖아 내 노력들을 우습게 보는 사람들에게... 나만의 루틴을 만들고 고민하고 개선해가는 것 자체에 더 큰 의미가 있다라고 생각한다. 이렇게 해서 벌어지는 그들과의 차이는 나중에 누가 웃고있을지를 알게한다.

사진을 업로드하는데 계속 버그가 뜬다...! 여기서 키워드는 No 'Access-Control-Allow-Origin' header is present on the requested resource. 즉, CORS 차단되었다는 것이다 그래서 S3 콘솔로가서 CORS를 변경해주었다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "ETag", "x-amz-meta-custom-header" ] } 그러고 다시 사진을 업로드 해보니 아직 안됨... 그래서 s3 400을 구글링 해보았다. https://velo..

고려해야할 점1. Next는 SSR이라서 클라이언트에서만 ToastUi-Editor를 dynamic import를 해와야함 2. Next에서의 환경변수는 .env.local파일안에서 클라이언트에서만 사용할 것은 밑에 처럼 NEXT_PUBLIC_ 키워드가 앞     에 붙어야한다3. dynamic import를 사용했기에 ref를 제대로 가져오지 못한다 그래서 React.fowardRef()를 사용해서 ref를 가져와야함  dynamic import  React.fowardRef()참고자료https://myeongjae.kim/blog/2020/04/05/tui-editor-with-nextjshttps://velog.io/@broccoliindb/Next.js-Editor-SSR-REF-이슈https:/..

문제점 사진의 url이 너무 길다. 글을 작성할 때 서버의 해당 text를 그대로 저장하고 불러오는 식으로 하려고 했으나... image의 길이가 너무나 길어서 서버가 감당하지 못할거라고 생각했고 다른 글들을 찾아보니 서버가 감당을 하지 못한다고들 말씀을 하신다... 해결방안 AWS가 제공하는 S3(스토리지)를 사용하여서 이미지만 S3에 저장을 해서 짧아진 img의 url을 서버에 저장하게끔 하는 것이다! 그렇다면 S3를 만들러가보자 도움받은 사이트 https://gareen.tistory.com/47

$ npm install --save @toast-ui/react-editor 공식문서 https://ui.toast.com/tui-editor https://nhn.github.io/tui.editor/latest/ https://github.com/nhn/tui.editor/tree/master/apps/react-editor 기본 코드 import "@toast-ui/editor/dist/toastui-editor.css"; import { Editor } from "@toast-ui/react-editor"; import React, { useState } from "react"; import { useRef } from "react"; const MyComponent = () => { const..