시간이 조금 여유로워서 그동안 밀렸던 자잘한 이슈들을 쳐냈습니다. 1. 서비스의 로고를 바꾸었습니다. - 기존 로고 기존에 10분에 걸려서 ppt로 만든 산림청 산하같은 로고를 버리고. - 신 로고 제리(팀원)가 만들어준 새로운 로고를 반영하였습니다. 바꾸는 과정에서 알았는데, 로고 사진을 cloudfront로부터 가져오는 경우도 있었고, asset으로 가져오는 경우도 있었습니다. 이 부분은 성능 최적화와 함께 개선해야겠습니다. https://github.com/woowacourse-teams/2021-darass/pull/719 [FE][공통] 로고 변경 by zereight · Pull Request #719 · woowacourse-teams/2021-darass Hide details View d..

어느 웹사이트에서나 이용할 수 있는 댓글서비스 다라쓰!는 일반적인 html코드에 스크립트 태그를 삽입하여 서비스를 이용할 수 있음은 물론, Gatby와 같은 react 컴포넌트에서도 이용이 가능합니다. darass.co.kr 에서 스크립트 발급 방법에서도 확인하실 수 있습니다. 그리고 이러한 UI Component는 npm에 패키지를 배포하여 유저가 설치해서 사용할 수 있도록 하고있었는데요. https://www.npmjs.com/package/darass-react darass-react A package for integrating Darass services into React applications. www.npmjs.com repo가 아예 분리되어있다보니, 기존 스크립트 관련 로직이 업데이트되었..

내 경쟁자들은 스펙도 빵빵하고, 취직도 힘들고, 일도 힘들고, 집 사기도 힘들고, 경제는 언제나 힘들어집니다. 하지만 백날 이런 요소들을 탓해봤자 변하는 것은 없습니다. 그 안에서도 성공할 사람은 성공하기 때문입니다. 단지, 그런 것들이 내 인생을 결정짓게 허락하느냐 아니냐는 문제일 뿐입니다. 그리고 그 결정은 자신이 내리는 것입니다. 성공학에는 사이코 사이버네틱스라는 용어가 있습니다. 사이코 === 정신인데, 사이버네틱스라는 용어는 낯섭니다. 사이버네틱스라는 용어는 2차세계대전 시절에 목표를 맞추기위한 유도미사일이 목표를 맞추기위해서 계속해서 경로를 수정하는 기법에서 유래했습니다. 즉, 사이코 사이버네틱스는 정신을 목표에 도달하기 위해서 계속해서 수정에 수정을 거치는 것이라고 할 수 있습니다 한달 실적..

다라쓰 프로젝트는 웹 페이지 어디서나 삽입가능한 댓글 서비스이다. 그리고 댓글과 관련된 각종 얼럿문구들을 "화면이 꽉차는" 모달로 제공하고 있다. 어느날 버그 리포트를 받았다. 모달을 띄웠는데, 삽입된 웹 페이지의 요소가 다라쓰 모달보다 위쪽에 나타나고 있는 것이다. 다라쓰는 사용자가 자신의 블로그에 삽입하고 싶은 위치에 를 삽입하면 그 태그 내부에 댓글영역과 모달을 렌더링하고 있었다. 그리고 모달은 거기서 position:fixed로 화면을 꽉차게하고 있었는데, 처음에는 z-index만 높이면 되겠다는 생각을 했다. 그런데 모달의 z-index를 많이 높였는데도 상황은 똑같았다. 원인을 찾고자 계속된 why질문을 던졌고, 레이어의 쌓임맥락에서 가 외부 요소의 fixed상태를 이기지 못한다는 결론에 도달..

자바스크립트 인터프리터가 변수와 함수 선언에 대한 메모리 공간을 미리 할당해 놓는 것. 자바스크립트만의 특별한 기능이라기보다. 기본적으로 프로그래밍 언어에서 지원하는 기능이다. 직접 프로그래밍언어를 만들때에도, 어떤 변수가 선언되어있는지 메모리에 할당을 해놓고, 코드를 실행하는 것이 더 쉬울 것이다. 이런 개념을 이해하기 쉽게 "끌어올린다"라는 명칭을 붙여서 호이스팅이라고 명명하게 되었다. -- 자바스크립트에는 다음과 같은 변수 선언방식이 있다고 할 수 있다. 1. var 2. const, let 그리고 이 모든 선언은 호이스팅이 일어난다. 차이점이 있다면, const/let은 호이스팅은 되어 메모리에 할당되어있지만 실제 const/let으로 선언된 값을 const/let가 선언된 코드 이전에서 접근을 ..

자바스크립트를 예로 들자면, 원시타입으로 Number, String, Undefined, Null, BigInt, Symbol, Boolean 값이 있고, 참조타입으로 Array, Object가 있습니다. 처음부터 이렇게 학습해서 당연하게 받아들였었는데, 아래 영상을 보고 새롭게 깨달은 것이 있습니다. https://www.youtube.com/watch?v=vMsK5f_0938&ab_channel=Taehoon 왜 참조타입이 따로있는걸까? Object나 Array도 값으로 저장하면 안될까? 라는 근본적인 질문을 하게되었는데요. 이 영상에서 제시하는 답은 다음과 같습니다. Object. Array같은 경우는 깊이가 얼마든지 커질 수 있는 구조이기 때문에, 값으로 저장하게 되면 값을 복사하는 비용이 매우 ..

간단한 버그를 해결하고, 자바스크립트 지식을 쌓는것에 집중했던 하루였습니다. 다라쓰의 댓글입력란은 textarea가 아니라, div contenteditable로 구현되어있습니다. 때문에, textarea 기능 처럼 동작하도록 해주어야 했습니다. textarea는 기본적으로, 텍스트가 textarea의 끝에 도달하면 자동으로 개행이 되었는데, div contenteditable은 가로 스크롤이 생기면서 계속 1줄로 가로로 길어지고 있었습니다. 그래서, 아래와 같은 코드를 추가해주었습니다. word-break: break-all; white-space: break-spaces; word-break는 https://developer.mozilla.org/ko/docs/Web/CSS/word-break 모든 ..

- Virtual DOM이란 무엇인가요? 리액트는 기존에 M이 포함된 아키텍처 (MVC, MVVM 등)에서, 어플리케이션이 복잡해질수록 Model-View간의 구현 복잡도가 올라가는 문제점을 해결하기위해 나온 Flux 아키텍처를 기반으로 합니다. 그 과정에서 상태의 변화가 있으면, 기존의 DOM을 아예 새로 그리자는 철학을 가지고 있는데요. 매번 DOM을 새로그리게 된다면, reflow가 잦게 일어나는 것이므로 웹 페이지의 성능에 상당한 부담을 주게 됩니다. 그래서 나온것이 Virtual DOM입니다. Virtual DOM은 말그대로 가상의 DOM으로써 메모리에만 존재하는 DOM입니다. 앞서 React에 DOM 업데이트가 일어났을때 DOM을 아예 새로그리는 것이 아니라, 이전의 DOM 상태를 기억하고 있..