Jaddong's Lab

얼마 전 회사에서 클라이언트가 왜 브라우저를 닫고 퇴근했는데, 다음날 로그인이 되어 있다고 해당 사항을 바꿔달라고 한 요청이 있었다. 그래서 sessionStorage의 존재를 알게 되었고 차이점을 정리해보았다. 보통 우리가 개인 컴퓨터에서 네이버나 구글처럼 자주 사용하는 사이트들에 대해 로그인 상태를 유지를 해놓는 경우가 많다. 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 해당 로그인 정보를 유지하기 위한 정보는 보통 브라우저에 내장되어 있는 저장소인 localStorage혹은 sessionStorage에 저장되어 유지된다. localStorage 로컬스토리지 오리진(도메인·프로토콜·포트..

자바스트립트 값은 항상 특정한 타입에 속한다. (ex. 문자열, 숫자형 등) 8개의 자료형이 있다. 아래와 같이 변수에 어떤 형의 값을 넣느냐에 따라서 변수의 형태가 정해진다. (=동적타입) // no error let message = "hello"; message = 123456; 숫자형 정수형(integer) : 우리 아는 단순한 정수이다. 부동소수점 숫자(floating point numbers) : 우리가 아는 소수이다. Infinity : 어떤 수보다 더 큰 수로 무한대를 의미한다. alert( 1 / 0 ); // 숫자를 0으로 나누면 무한대이다. alert( Infinity ); // Infinity 로 값을 할당할 수 있다. -Infinity : 어떤 수보다 더 작은 수로 마이너스 무한대..

구글은 웹페이지로부터의 결과를 위해 세가지 단계를 거친다.1. 크롤링페이지를 발견 첫번째 단계를 웹페이지의 존재를 찾는 것이다. 모든 웹페이지를 관리하는 장치는 없기때문에 구글은 계속해서 알려지지 않은 새로운 웹페이지를 검색해서 리스트에 추가해야한다. 몇몇 페이지는 구글이 이미 방문한 적이 있어 알고 있지만, 그렇지 않은 페이지들은 구글에 의해 발견되어야 한다. 웹사이트 오너들이 구글 크롤링을 위해 페이지 리스트(sitemap)를 제출하면, 해당 페이지들이 발견되어진다. Wix나 블로그같은 웹호스팅 플랫폼은 새로운 페이지나 업데이트된 페이지에 대한 정보를 크롤링하도록 구글에 요청한다. 구글이 웹페이지 URL을 찾으면 페이지에 어떤게 있는지 찾기 위해 방문하고 크롤링한다. 구글은 검색결과가 어디에 보여져야..

서버사이드렌더링을 위한 프레임워크인 Nestjs를 사용해서 프로젝트를 시도해서 개발중이다.🙄 물론 처음이니까 아직 Nextjs를 안다기보단 겉햙기 중인데, 워낙 도큐멘트나 깃에 정리가 잘 되어있는 편이라 조금씩 읽어보면서 셋팅 및 개발해보고 있다. 이번 프로젝트에서 에디터 적용이 필요한 경우여서, 여러 개를 서칭해봤는데 React와 Quill Editor를 많이 사용하고 있는 것 같아서 선택하게 되었다. (summernote만 해본자,,,, 🧐) 허나, 서버사이드렌더링이란 특징때문에 그대로 Quill을 적용하게 되면 아래와 같이 document is not defined라는 에러가 발생하게 될 것이다. 그래서 해결한 소스는 아래와 같다! Next.js는 JavaScript 용 ES2020 dynamic ..

window 에서는 바로 되더니, 오랜만에 맥북을 꺼내 셋팅하려니까 에러가 뜬다.....ㅠ_ㅠ 해결방법!! 터미널에 아래와 같이 명령어를 치면 brew install watchman Homebrew 를 업데이트하기 시작한다. 리액트 네이티브 내부에서 파일들의 변경을 감시하기 위해 watchman을 사용하기때문이라고 한다.

문서의 끝을 처리하는데 있어서 OS마다 약간의 차이가 있기 때문에 발생 유닉스 시스템에서는 한 줄의 끝이 LF(Line Feed)로, 윈도우에서는 줄 하나가 CR(Carriage Return)와 LF(Line Feed), 즉 CRLF로 이루어지기 때문 유닉스 OS(맥)을 쓰고 있다면 CRLF will be replaced by LF in… 에러 메시지가 뜰 것이고, 윈도우를 사용하고 있다면 LF will be replaced by CRLF in… 에러 메시지가 뜰 것이다.( 내가 이렇게 뜸....! 👩) 이러한 변환 기능을 원하지 않고, 그냥 에러 메시지 끄고 알아서 작업하고 싶은 경우에는 아래 명령어로 경고메시지 기능인 core.safecrlf를 꺼주면 된다. core.autocrlf 기능 꺼주기 $ ..

1. 카카오 본인 카톡 채팅방 1-2개(본인 것도 됨) 정도에서 테스트해서 썸네일이나 타이틀 디스크립션이 업데이트가 안되었다면 아래와 같이 처리 필요함 Kakao Developers 사이트 접속 : https://developers.kakao.com/ 로그인하기 도구>초기화 도구>(Open Graph) 캐시 접속 url 입력한 후 초기화 클릭 다시 채팅방에서 공유하기 테스트! 그래도 안되면 클라이언트단 캐시때문에 뜨는 않는 것이므로 채팅방을 나가거나, 설정>기타>채팅방용량관리>캐시데이터삭제 한 후 다시 테스트하....! 안되면 5-6번 다시 해보기 그래도 안되면 그저 기다릴 뿐.... ( 테스트시 캐시삭제하고 적용까지 이틀 소요되었습니다 (ﾉ*･ω･)ﾉ) ‌ 2. 페이스북 페이스북은 보통 테스팅을 Fac..

그냥 이메일, 패스워드를 활용한 로그인/로그아웃이 있는가 하면 google, github, facebook 같은 소셜 로그인이 있다. 어드민 같은 경우에는 소셜 로그인을 할 필요는 없을 것 같다고 판단했고, 작업은 이메일과 패스워드로 Create Account를 해서 해당 Account가 firebas Authentication User에 남도록 하는 목표로 수정하였다. 그래도 소셜로그인 테스트도 진행해보았다. 최종코드 : github.com/jayounglee92/react-firebase 1. 선행작업 자세한 선행작업은 스킵하겠다. CRA로 프로젝트 생성 : https://ko.reactjs.org/docs/getting-started.html react-router-dom 설치 : https://r..

매번 하드코딩으로 마크업하던 걸 좀 자동화하기 위해서 회사에서 간단한 어드민을 개발하려고 하는데, 백엔드까지 혼자서 손보기에는 시간과 힘이 너무 들기에,,,,😥 파이어베이스로 백엔드 프로세싱을 하고 프론트만으로 개발할 수 있다는 걸 알게 되서 시작한 프로젝트이다. 혼자서 깃허브에서 테스팅을 완료했고, 실제 사내에서 이용하기 위한 프로젝트를 개발하면서 블로깅할 예정이다. 매번 혼자서 공부하면서 하려니,,,, 좀 시간이 걸릴 것 같다 😂 아무튼 화이텡....! 최종코드 : github.com/jayounglee92/react-firebase 1. 목표설정 우선! 하고자하는 목표는 아래와 같다. (스타일은 나아중에 추가적인 부분....!) - 소스 관리 : GitLab - 호스팅 : Netlify - 백엔드 ..

Staircase Consider a staircase of size : # ## ### #### Observe that its base and height are both equal to n, and the image is drawn using # symbols and spaces. The last line is not preceded by any spaces. Write a program that prints a staircase of size n. Function Description Complete the staircase function in the editor below. It should print a staircase as described above. staircase has the fo..