자바스크립트
-
[21.06.05] 비동기 처리? 그래도 싱글 스레드인 것이 함정인 자바스크립트개발 블로깅/Javascript 개념 2021. 6. 5. 14:44
자바스크립트를 다루는 개발자라면 웹 서비스에서 필수로 쓰이고 있는 Javascript가 싱글 스레드(Single Thread) 기반으로 동작한다는 것을 알고 있을 것이다. 그리고 이러한 싱글 스레드의 한계를 넘고자, 비동기(asynchronous) 동작을 제어할 수 있는 Event Loop라는 개념이 등장하면서 AJax, 그 뒤로 Promise, async/await 등 비동기 동작에 대한 제어를 쉽게 할 수 있는 키워드가 속속히 등장하기 시작했다. 그만큼 싱글 스레드 기반임에도, 멀티 스레드 못지않은 Task 동작을 시키고 이를 더 쉽게 제어하기 위해 계속해서 발전되어 왔다. 하지만, 자바스크립트는 여전히 싱글 스레드이다. 더 Row Level 단으로 따지고 보면, 비동기적으로 동작하는 Task들도, ..
-
자바스크립트 메모리 관리(Garbage Collection)에 대해 알아보자개발 블로깅/Javascript 개념 2020. 9. 4. 17:06
자바스크립트는 언어 특성상 메모리를 자동으로 관리하도록 동작하기 때문에 개발자가 '메모리 관리'에 대해 많이 소홀해질 수 있다는 특징을 가지고 있다. 서비스의 성능 관리를 신경 쓰려면 자바스크립트 내에서 메모리 관리가 어떻게 이루어지고 어떻게 메모리에 신경을 써야 하는지 파악할 필요가 있다. 그래서 이번 블로그에서 자바스크립트 내에서 메모리 관리 핵심 요소인 가비지 컬렉션(Garbage Collection)과 개발자가 메모리 효율성을 높이기 위해서 주의해야 할 점들에 대해 한번 정리해 보려고 한다. 기본적인 메모리 사용 우선 C언어와 같은 로우(Low) 레벨 언어에서는 메모리 관리를 위해 malloc()과 free()를 사용한다. #C언어의 메모리 할당 #include #include // malloc,..
-
Javascript Engine & Event Loop 동작 원리개발 블로깅/Javascript 개념 2020. 8. 30. 03:50
이번 기회에 내가 제일 좋아하는 언어인 자바스크립와 더욱 더 친해지기 위해서, 실제 자바스크립트을 동작시키는 엔진의 내부 구조와 동작 원리에 대해 파헤쳐보고 블로그로 정리해보려고 한다. 자바스크립트 엔진 자바스크립트 언어는 자바스크립트 엔진이라는 녀석을 통해 실행된다. 이 엔진은 웹 브라우저 내부 또는 Node.js 안에 구성되어있다. 자바스크립트 엔진은 가능한 짧은 시간 내에 최적화된 코드를 생성하기 위해 전통적으로는 인터프리터 방식으로 구현되지만, 특정한 방식으로 바이트코드로 JIT(Just-In-Time: 번역한 기계어를 저장해놨다가 필요할 때 다시 꺼내 쓰는 방식) 컴파일을 할 수도 있다. 💡인터프리터와 컴파일러의 차이 사람이 작성한 소스코드를 동작시키기 위해서는, 컴퓨터 언어에 맞는 0과 1로 ..
-
[2019.11.17] ES2019(ES10) 새로운 기능을 습득하자~!개발 블로깅/Modern script 2019. 11. 17. 17:31
# Object.fromEntries 배열로 가지고 있던 값을, 알맞게 매칭시켜서 obj 형식으로 변환시킨다. 첫 번째 배열 인자를 key, 두 번째 배열 인자를 value로 한다. 기존의 Object.entries 기능의 반대 기능을 한다. const entry = Object.entries({name:'inyong', age: 27, family: ['father', 'mother', 'brother', 'sister']}); console.log(entry); // [['name','inyong'],['age',27],['family',['father','mother','brother','sister' ]]]; const fromEntry = Object.fromEntries(entry); cons..
-
[2019.08.21] 오늘의 TIL - [Next.js] Style 주의할 점개발 블로깅/오늘의 TIL 2019. 8. 21. 22:36
Next.js에서 스타일을 추가할 때, 일반적으로 태그에 클래스 명을 지정해주고, style jsx라는 태그 사이에 스타일을 작성한다. 그리고 React 특성 상, style jsx 태그를 포함하여 다른 컴포넌트로 전체를 한번 감싸준다. (1번 줄, 맨 마지막 줄의 div) 그러나 이러한 일반적인 스타일 방식이 먹히지 않을 때가 있다. 바로 아래와 같다. const component = () => { const arr = ['하나', '둘', '셋']; const Temp = arr.map(element => ({element})); return ( {Temp} ); } 위 코드를 보면, View 단에 쓸 Temp 컴포넌트를 return 전에 미리 정의해서 사용했다. 저렇게 미리 만들어 놓은 컴포넌트에는..
-
[2019.05.28] TypeScript 사용법 (TypeScript+Express 구현)개발 블로깅/Modern script 2019. 5. 28. 20:17
기존의 자바스크립트는 컴파일을 돌리지 않고 브라우저 상에서 돌아가는 언어여서 데이터 타입이 정말 느슨하다. 변수 타입이나 파라미터에서도 제한되는 것이 없고 너무나도 자유롭다 보니, 개발할 때 데이터 타입에 대한 오류사항이 정말 많이 일어나기도 한다. 그러나 실제 컴파일 환경에서 돌리듯 자바스크립트 문법에 데이터 타입을 하나하나 명시를 해 줌으로써 이를 방지할 수 있는 방식이 타입 스크립트이다. 4주 차 프로젝트를 진행하면서 백엔드 역할을 맡게 되었는데, 이번 기술 스택에 typescript를 사용하도록 되어있다. 이번 기회에 typescript를 손에 익힐 기회가 왔다. 백엔드 파트를 맡았으므로, typescriptfh express환경을 구성하는 방법을 정리해보려고 한다. # typeScript 기본적..
-
[2019.05.06] 코드에 DB 쿼리문은 그만! 유용한 Sequlize개발 블로깅/Server&DataBase 개념 2019. 5. 6. 10:37
기존에 웹 API 개발에 DB를 연동하여 사용하려면, 쿼리 명령어를 문자열로 저장하고 사용을 했어야 했다. DB연결 부분 생략 .... /* 쿼리 결과 값이 필요 없는 경우 */ var query = `insert into users(name) values('name')`; connection.query(query); /* 쿼리 결과 값을 받아올 경우 */ var query = `select * from users`; connection.query(query, function(error, rows, fields) { if(!error){ console.log(rows); console.log(JSON.parse(JSON.stringify(rows))) // 이렇게 해야 제대로 object 방식으로 사용 ..
-
[2019.05.01] cookie와 session의 차이개발 블로깅/Server&DataBase 개념 2019. 5. 1. 10:39
서버와 그 서버를 이용하는 클라이언트 내에서 사용되는 저장데이터인 쿠키와 세션에 대해 정리해보려고 한다. # 라이프사이클 쿠키 : 로컬에 파일 형식으로 저장이 되기때문에 브라우저가 종료되도 데이터가 남아있음. 만료시간을 설정하여 쿠키 삭제 가능. 세션 : 세션도 만료시간이 있지만, 기본적으로 웹 브라우저가 종료되면 세션이 만료되어 사라짐. # 보안 쿠키 : 클라이언트의 로컬에 저장되기 때문에 변질되거나, 서버에게 request를 보내는 중 스나이핑을 당하는 등 보안에 취약함. 세션 : 서버 내에서 key값만 세션에 저장하여 유지하고, 해당 key값을 이용하여 원래 기존의 데이터에 접근을 하는 방식을 세션 자체적으로 처리하므로 보안성이 높음 # 속도 쿠키 : 로컬에 저장된 파일에 바로 접근하여 사용하기 때..