분류 전체보기 82

2.7 형 변환

더보기 primitives : 원시형 explicitly : 명쾌하게 exclusively : 독점으로 intuitively : 직관으로 대부분의 경우, 연산자와 함수들은 자동적으로 주어진 값을 적절한 형태로 변환한다. 예를 들면, alert은 값을 보여주기 위해 어떤 값을 문자열 형태 자동 변환한다. 수학적 연산자는 값을 숫자형으로 변환한다. 우리가 값을 기대한 형태로 명확하게 변환할 필요가 있을 때도 형변환 하는 경우이다. 아직 객체에 대해서 얘기하고 있진 않다. 이 챕터에서 우리는 객체는 다루지 않을 것이다. 지금부터 우리는 원시형에 대해서만 다룰 것이다. 객체를 원시형태로 변화하는 건, 객체에 대한 것을 배우고 이 후에 볼 것이다. 문자형으로 변환 문자형으로 형 변환은 문자형태의 값이 필요할 때 ..

2.6 상호작용 : alert, prompt, confirm

alert 메시지가 있는 작은 창을 modal window라고 부른다. "modal"이란 단어는 방문자가 "OK"를 누를때까지 나머지 페이지와 인터렉션을 할 수 없고, 버튼을 못 누르는 등의 의미를 말한다. alert("Hello"); prompt prompt 함수는 두 개의 인수를 받는다. result = prompt(title, [default]); 텍스트 메세지와 입력할 수 있는 input 필드 그리고 OK/Cancel버튼이 modal 창에 보여진다. title 방문자가 보는 텍스트이다. default 두번째 파라미터로 옵션사항이고 input 필드의 초기 값을 나타낸다. 위에서 예시의 []대괄호(square brackets)는 필수 값이 아님을 나타낸다.(denote) 사용자는 prompt 인풋에 ..

localStorage와 sessionStorage 중에 무엇을 사용해야할까?

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

Developer/Web 2021.05.22

2.5 자료형

자바스트립트 값은 항상 특정한 타입에 속한다. (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을 찾으면 페이지에 어떤게 있는지 찾기 위해 방문하고 크롤링한다. 구글은 검색결과가 어디에 보여져야..

Nextjs에서 Quill Editor 적용하기

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

Developer/React 2021.03.27

git add 에러 warning: LF will be replaced by CRLF 해결방법!!

문서의 끝을 처리하는데 있어서 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 기능 꺼주기 $ ..

Developer/GitHub 2020.10.08

카카오, 페이스북 공유하기 업데이트(캐시삭제)하기

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

Developer/Web 2020.10.07

[firebase] 구글/깃허브 로그인/로그아웃 (+그냥 로그인/로그아웃)

그냥 이메일, 패스워드를 활용한 로그인/로그아웃이 있는가 하면 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..

Developer/React 2020.09.15