본문 바로가기

programming

(124)
[Javascript] 엔진 구조와 동작 방식 자바스크립트 엔진의 구조 Heap : 메모리 할당을 담당 Stack : 1개의 stack = single Thread = 동기적 실행, 호출된 시점에 Stack 이 쌓인다. 실제 업무 수행 담당 Web API : 비동기적 task를 수행하는 곳, 비동기적 task 예시) setTimeout, AJAX, 이벤트리스터, Promise.then Callback Queue : 비동기 task 다 끝나면 들어가는 곳, microtask Q > animation Frame Q > task Q(event Q) 세가지의 Q가 내부에 존재하고, 순서대로 우선순위를 갖는다. Event Loop : Stack 의 상태를 계속 주시하다가, 비어있는 순간 콜백큐의 task를 stack으로 집어넣어준다. [실행 코드 예시] co..
브라우저 저장소 비교 (localStorage, SessionStorage, Cookie) HTML5에서 웹의 데이터를 저장할 자료구조 공간 스토리지 스펙을 제공한다. 그 공간은 키 : 밸류 쌍으로 데이터를 저장하고 키값을 통해 데이터에 접근할 수 있다. 이 웹스토리지에 포함되는 것이 바로 로컬스토리지와 세션스토리지 이다. 쿠키는 고인물이고, 웹스토리지가 5부터 등장 쿠키 대비 웹스토리지의 장점 1. 쿠키는 매번 서버로 전송됨 웹스토리지 저장된 데이터는 그냥 클라이언트에 존재, 서버로 전송은 자동으로는 이루어지지 않음 트래픽 비용 절감 2. 단순 문자열을 넘어 객체정보를 저장가능 브라우저의 지원여부는 확인 필요 3. 용량의 제한 없음 쿠키는 최대 4KB, 20개까지 한 사이트에서 저장 가능 모바일은 2.5mb, 데스크탑은 5mb-10mb 4. 영구저장가능 쿠키는 만료일자를 지정하게 되어 언젠가..
[Javascript] 클로저란? private 변수, 메소드의 관점 여러가지 정의들 중에, 개인적으로 좀 더 직관적으로 받아들여 졌던 정의는, 다음과 같다 클로저란, 생성한 시점의 스코프체인을 기억하여, 비공개 변수를 가질수 있는 환경에 있는 함수이다. 이 외, 다른 정의들 MDN) 클로저는 독립적인 변수를 가리키는 함수이다. 또는 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 함수와 렉시컬 환경의 조합 함수가 생성될 당시의 외부변수를 기억하여 생성 이후에도 계속 참조가 가능한 것 생성한 시점의 스코프체인을 계속 들고있는 함수 일단 실무에서는 private 변수를 사용하기 위한 것으로 많이 쓰인다. 선행지식 스코프체인 스코프는 일단 범위라는 뜻인데, 간단하게 브라켓{}, 블록 안 저장소라고 생각하자. 블록별로 (if문, 함수선언문, while...등) 자기만의 스..
[Javascript] var, let, const 차이 - 중복선언, 호이스팅, 스코프 관점 var만 쓰고 있다가 ES6에서 let과 const가 추가됨 var & let 중복선언 관점에서의 차이점 var은 중복선언이 가능하다. let은 중복선언이 불가능하다. 둘다 재할당은 가능(당연한 소리) case1) var은 재할당, 중복선언 모두 가능하다. --> 이상한것.. var gender = 'female' console.log(gender) // 변수 재할당 가능 gender = 'none' console.log(gender) // 변수 중복 선언 가능 var gender = 'male' console.log(gender) case2) let은 재할당은 가능하나 중복선언이 불가하다. -> 당연한것.. let name = 'Mike' console.log(name) // output: Mike /..
[JAVA] (1) 환경 설정 - 다운로드 1. JDK 설치 : x64 Compressed Archive zip 파일 다운로드 https://www.oracle.com/java/technologies/downloads/#jdk17-windows 2. 이클립스 설치 : Eclipse IDE for Enterprise Java and Web Developers (Windows x86_64) 다운로드 https://www.eclipse.org/downloads/packages/ Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source pro 509 MB 566,255 DOWNLOADS T..
[Error] Get 으로 보내는 주소에 한글이 있을 때 TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters 일단 상황은 해시태그를 url 에 담아서 서버로 get 요청을 하는 것이다. 해시태그는 당연히 한글이 될 수 있다. 프론트 서버에서는 다음과 같은 에러를 뱉어냈다. 에러발생의 원인인 axios 로 서버에 API 요청을 하는 부분을 보자 axios.get(`/hashtag/${data}?lastId=${lastId || 0}`); data 변수에 hashtag 가 들어간다. lastId 는 페이지네이션을 위한 것이므로 여기서는 무시한다. data 에 한글이 들어갈경우 백엔드로 요청하는 API는 '/hashtag/크리스마스' 가 되는 것이다. 여기서 바로 에러가 발..
react-hook-form 과 meterial-UI 함께 쓰기 (3) - DateRangePicker (1) TextField https://tacit.tistory.com/41 react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextF.. tacit.tistory.com (2) ToggleButton https://tacit.tistory.com/42 react-hook-form 과 meterial-UI 함께 쓰기 (2) - ToggleButton 이전 게시물(1) - TextField 에 이어서..
react-hook-form 과 meterial-UI 함께 쓰기 (2) - ToggleButton 이전 게시물(1) - TextField 에 이어서 https://tacit.tistory.com/41 react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextF.. tacit.tistory.com 이번엔 ToggleButton 과 함께 사용하는 방법에 대해 정리해보려한다. CheckBox로 예시들이 몇개 구글에 나와있다. ToggleButton도 비슷한 맥락이다. import ToggleButton..
react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField react-hook-form은 material-UI 나 ant-D같은 외부 UI 라이브러리와 함께 사용할 수 있다. 그 중 가장 기본이 되는 TextField와 연결하는 방법을 정리해보려한다. import TextField from '@material-ui/core/TextField'; import { useForm, Controller } from 'react-hook-form'; export default function App() { const { handleSubmit, control, formState: {errors} } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( ( )}/> 전송 ); } 전달하는 속성들에..
[Web] 색상 코드 추출하기 (컬러콥 color cop 추천 및 오류 해결) 컬러콥을 사용하고는 신세계가 열렸었다.ㅋㅋ ppt 만들때나, 문서작성, 디자인 등등에 유용한 색상 추출 프로그램을 소개하려 한다. 뭐 이미 유명한 프로그램이겠지만 ㅎㅎㅎㅎㅎ colorcop.net/download/ download The easiest way to install Color Cop is to download the self-installing version. If you use the installer it's easy to remove the application by using add/remove programs under Windows. Standalone 5.4.6 BETA beta.zip I have a new version here, but I'd like colorcop.net..