Murpin Tech'blog

서론 git에 대한 내용을 설명하는 입장에서 한번 나의 생각을 정리보았다. 생각을 정리한다는 것은 나의 머릿속 git이란 단어를 들었을 때 어떻게 설명을 해야할까?를 정하고 개념과 개념을 설명하는 단어들의 의미를 알고 있음이라고 생각한다. 간단하게 말하면 만약 누군가 “git이 뭐죠”라는 질문에 나는 이렇게 답할 것이다라는 것을 정리한 것이 공부나 면접을 준비하는 과정을 정리한 내용이니 혹시라도 오해가 되는 내용이 있다면 첨삭 혹은 수정 요청 바랍니다. if.. git에 대해 설명해주세요, git에 대하여 알고계신가요? 개발자들은 git을 왜 사용하는 것 같나요? 분산형 버전관리시스템의 장점과 단점을 설명해주세요 위에 대한 내용은 모두 git을 알고 있는지를 물어보는 질문입니다. 과연 여러분은 해당 질문..

Web Storage 서론 이번에 Web Storage와 Session에 대해 정리하게 된 이유는 최근 백엔드 트랙 3명과 술을 마시면서 개발이야기를 하고 있던 대화에서 발생한 문제이다. 술을 마시다 우리가 서비스 하고 있는 앱에 대해 웹은 “세션 스토리지에서 데이터를 관리한다” 라고 했는데 백엔드 세 명이 달려들어서 내가 세션ID 발급안했는데 니가 어케씀, 이런 천한 프엔(=프론트엔드) 녀석! (피해자와 술에 의한 심신 미약으로 인해 실제 내용과 다를 수 있습니다) 라는 득달에 바로 같이 개발한 친구 2명 불러서 세션스토리지에 저장한다는 내용을 해명하는데 30분이 걸렸다. 다들 취해서 억까의 냄새가 많이 났지만, 내가 틀리지 않음을 증명했다. 그렇기에 술을 마셔도 더 확실하고 자세하게 설명할 수 있도록..

안녕하세요 저번에 포스팅에서 올렸던 이벤트루프와 비동기 이해에서 말했던 것처럼 Event Queue에 대해 끄적여 보겠습니다. 일단 먼저 Event Queue에 대해 여러분들은 어떻게 처음 알게 되었나요?저의 경우에는 전설의 JS Event Loop 강의에서 처음 알게 되었습니다. 혹시 보지 않으신 본과 보신 분들은 꼭 봐주시길 바랍니다. 여기서부터는 우리는 event loop의 존재와 event를 저장하는 queue가 존재한다는 것을 알고 있다는 전제로 설명하겠습니다. 위의 강의를 보셨다면 이벤트 큐가 하나로만 설명되었습니다. 하지만! 그렇지 않습니다. 이벤트 큐는 하나가 아닌 총 3개로 이루어져있습니다. ㄴㅇㄱ 한번 쭉 나열을 해보면 * microTaskQueue(Job Queue) * animati..

코알라 프로젝트 0. 시작이 반이다 목차 코알라 프로젝트 0. 시작이 반이다 코알라 프로젝트 1. (JWT 로그인 : 로그인 페이지) 코알라 프로젝트 2. (마이페이지) 코알라 프로젝트 3. (채팅) 코알라 프로젝트 4. (웹 알림) 혹시라도 잘못된 정보나 오타 같은 지적 사항이 있다면 댓글이나 qw04011@gmail.com으로 적어주시면 감사하겠습니다!! 안녕하세요, 한국기술교육대학교 IT 학술 동아리 BCSDLab의 FrontEnd 트랙장을 맡고 있는 김대관입니다. 2021년 12월 27일부터 사용자가 키워드를 등록하면 교내 관련 사이트 혹은 SNS에서 관련된 내용을 업로드 해주는 키워드 알림 서비스 koala 프로젝트 웹개발 PM을 맡고 있습니다. 시작 때는 바야흐로 11월 쯤에 동아리 멘토분에게..

잘못된 정보나 오타의 경우 댓글로 남겨주시면 감사하겠습니다. javascript가 동작하는 환경은 두 가지이다. 브라우저 환경 nodejs환경 이 중에 브라우저 환경에 대한 이벤트 루프구조와 비동기에 대해 공부해보자 이벤트 루프 구조 위는 크롬 브라우저 엔진에 대한 이벤트 루프 구조이고 브라우저에서의 비동기 처리는 3개의 테스크 큐가 담당하고 있다. web api를 호출하면 브라우저는 결과를 적절하게 큐에 등록한다. console.log("script start"); setTimeout(function(){ console.log("setTimeout") }) Promise.resolve() .then(function(){ console.log("Promise1"); }) .then(function(){ ..

오늘 공부해볼 것은 DOM이다. DOM (Document Object Model) : 직역하면 문서 객체 모델이다. MDN에서는 HTML, XML 문서의 프로그래밍 interface라고 설명한다. 내가 처음 개발을 시작할 때 이 개념의 중요한 점이라고 생각하지 않고 대충 DOM 트리, 엘리먼트 구조로만 알고 있었는데 웹을 공부하면서 조금은 자세하게 알 필요가 있다고 생각한다. DOM을 모델이라고 하니 해석이 이상해진다. 그냥 모델로만 인식하는 것은 반만 정답인 것 같다. WSC DOM의 개념을 확인하면 DOM은 문서(특히 HTML 및 XML 문서)에 액세스하고 조작하기 위한 API라고 해석하는 것이 좀 더 정확한 표현일 것 같다. 왜냐하면 DOM은 단순한 모델이 아닌 직접적으로 HTML 문서를 조작하는 ..