개발 블로깅
-
[2020.09.16] (운영체제) 사용자 수준 스레드와 커널 수준 스레드의 차이개발 블로깅/기타 개념 2020. 9. 16. 17:04
운영체제 공부 중에 사용자 수준 스레드와 커널 수준의 스레드에 대해 개념이 이해가 되지 않았다. 다른 블로그 글을 찾아봐도 뭔가 애매모호하게 설명하고 말아 버린 느낌으로 받아들여져서 이해하는데 시간이 꽤 걸렸다. 혹시나 나 같은 사람이 있을까봐 직접 최대한 쉽게 정리를 해보려고 한다. 스레드 우선 스레드부터 정리해 보자면, 운영체제 공부를 했으면 다들 알 듯이 '프로세스 내 작업 단위'이다. 이것은 하나가 될 수도 있고 여러 개가 될 수 도 있다. 여러 개의 스레드가 동작하면 '멀티 스레드' 방식으로 동작하게 되는 것이다. (더 자세한 설명은 이번 글과 맥락이 맞지 않으니 생략...) 그런데 스레드 중에 커널 수준 스레드와 사용자 수준의 스레드로 종류가 나뉜다... 우선 이 두가지가 각자 무엇인지 알아보..
-
자바스크립트 메모리 관리(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로 ..
-
[2020.08.04] 브라우저 동작원리개발 블로깅/기타 개념 2020. 8. 4. 18:20
현재 정보화 사회에 이제는 없어서는 안 될 프로그램. 프론트엔드 개발자라면 무조건 다룰 수밖에 없는 도구이자, 끝없는 정보 바다에 접속하기 위한 필수 도구. 웹 브라우저. 우리가 평소에 접하는 이 화면은 도대체 어떻게 나타나게 되는 것일까? 우리는 평소처럼 당연하게 인터넷 주소창에 주소를 입력하고 거기에 해당되는 홈페이지 화면을 접하며 사이트를 돌아다니기만 했지, 이렇게 화면이 보여지는 과정이 어떻게 동작하는지는 생각해보지 못했을 것이다. (사실 그렇게까지 생각해 볼 필요도 없겠지만...) 프론트엔드 개발자 역시, HTML과 CSS 문서를 작성하고 Javascript 코드를 짜면서 기대하던 동작을 확인하며 웹 개발을 했을 것이고, 실제로 이 HTML문서가 어떻게 자리를 잡아서 웹 페이지에 각자 자리에 D..
-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다. Element.style 속성 참조 getComputedStyle() 메소드 나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다. 그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다. # 각기 다른 방식으로 적용된 엘리먼트 두 개 우선 위와 같이 그려진 브라우저 화면이 있다. 해당 코드는 다음과 같다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바..
-
[2020.06.13] 더 좋은 커밋 메시지를 남기자개발 블로깅/팀 문화 및 시스템 2020. 6. 13. 14:09
오랜만에 내 github에 있는 옛날 프로젝트 코드들을 살펴보았다. 지금처럼 git에 익숙지 않던 때인지라, commit도 그렇겠지만, 무엇보다 커밋 메시지가 매우 엉망이었다. 내가 남긴 과거의 프로젝트 커밋 메시지... 너무 창피한 이력들.. 요즘 드는 생각이 있다면, 영어 메시지로 남긴다면 더 좋기야 하겠지만, 어설픈 영어로 작업한 내용에 대한 설명이 부실해진다면 차라리 한글로 더 명확하게 메시지를 남기는 것이 좋겠다는 생각이다. 트레바리에서 일하면서는 주로 한글로 커밋 메시지를 남기고 있다. 이렇게 메시지 한 줄을 이용해서 과거에 작업했던 내용을 더욱 자세히 알 수 있게 된 것 같다. 그런데 문득, 더 좋은 커밋 메시지를 작성할 수 있지 않을까 라는 생각이 들었다. 그래서 인터넷에 찾아보니 좋은 커..
-
input type="file" 커스터마이징 하는 방법개발 블로깅/기타 개념 2020. 6. 11. 23:44
Input File 태그의 기본적인 사용 File 필드를 사용하기 위해선 일반적으로 input type="file" 태그를 사용하게 된다. #Input File 태그 코드 # 각 브라우저 상에 나타나는 file 필드 해당 필드를 선언하면 각 브라우저마다 위와 같은 UI로 나타나게 되는데, 이는 브라우저 자체에서 적용되어 있는 UI여서 CSS 스타일로 변경이 불가능하다. 해당 필드의 스타일을 변경할 수 없지만, 대안으로 특정 필드의 액션에 inpit file이 동작하도록 하는 방법이 있다. 특정 필드에 File 필드가 동작하도록 하는 방법 기존의 input File 필드를 사용하게 되면 UI를 커스터마이징 할 수 없기 때문에, 대안으로 다른 태그와 연동하여 input file 태그의 기능을 대신하도록 할 ..
-
[2020.05.24] Infrastructure as Code란?개발 블로깅/Server&DataBase 개념 2020. 5. 24. 17:37
Infrastructure as Code 인프라 구성을 소프트웨어 코딩을 하는 것처럼 처리하는 방식을 말한다. 애플리케이션을 작업하는 방식과, 애플리케이션을 실행하는 환경을 구현하는 작업이 유사한 것. Infrastructure as Code의 장점 가상 시스템에 대한 프로그래밍 방식의 관리를 지원하기 때문에, 개별 하드웨어를 수동으로 구성하고 업데이트할 필요가 없음. 즉, 인프라의 '유연성', '반복성','확장성'을 부여 예시 AWS의 EC2 instance의 성능을 높이기 위해, type을 small에서 large로 업그레이드를 하려고 할 때, AWS 콘솔 웹에서 일일이 변경하지 않고 code로 간단히 변경할 수 있다. 번외 # IaaS (Infrastructure as a Service) 인프라를 ..