안녕하세요. brandy 입니다. Javascript를 공부하던 도중 Call stack의 개념에 대해서 알게 되었고, Event Loop 등 관련한 개념들을 정리해보고자 합니다. 이전에는 학교에서 자바스크립트는 HTML 페이지와 어떤 방식으로 상호작용 하는지만 알았다면, 내부 동작 원리를 이해하고자 합니다. 이제는 어떤 엔진으로 돌아가고 자바 시간에 배운 스레드와 맞물려 이해해보고자 합니다. * Single Thread : 일하는 주체가 1개 > 하나의 작업만 처리 가능 그런데 자바스크립트는 동시에 많은 작업을 처리하는 '것처럼 보인다' 왜 그럴까요? 바로 Event Loop 에 의 의해 가능한 일입니다. 출처 : https://joshua1988.github.io/web-development/tran..

안녕하세요. brandy 입니다. 요즘 Web 개발 공부에 다시 매진하고 있는데, 공부하면서 미디어쿼리 라는 것을 알게 되었습니다. 솔직히 말해서 프론트엔드 분야는 남의 일이라고 생각했지만,, 풀스택으로 공부하는게 맞다고 생각하여 프론트엔드 백엔드 둘다 공부를 하고 있습니다. ※ 반응형 웹페이지가 중요한 이유? Responsive Web Design (RWD) 우선 반응형 웹페이지는 하나의 웹사이트에서 PC,스마트폰,태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 페이지 디자인은 사용자가 콘텐츠를 보기 위해 가로로 스크롤하거나 핀치 또는 확대/축소하지 않고도 모든 화면 크기에서 올바르게 렌더링 될 수 있는 경우가 반응형입니다. 출처 : bradf..

VSCode를 이용하여 웹개발을 많이 진행합니다. 그중에서도 빠른 마크업을 위한 도구인 Emmet(에밋)이 있는데요, 저도 놓치고 있었던 부분이 있어서 한번 정리해보고자 합니다. 빠른 마크업이 중요한 이유 ? html이나 xml 같은 마크업 언어는 코드의 양이 많기 때문에 시간 단축이 중요합니다. 그래서 html에서는 emmet 같은 tool들이 개발자들이 좀 더 빠르게 코드를 작성할 수 있도록 지원해주죠. https://docs.emmet.io/abbreviations/syntax/ 정리하기 앞서, Nesting Operator에 대해 알아보도록 하겠습니다. Nesting Operator은 약어 요소를 생성된 트리 안에 배치하는데 사용하고, 컨텍스트 요소의 내부 또는 근처에 배치할지 여부를 결정합니다...

저는 잔나비를 삼행시로 한번 지어봤습니다. 밑의 잔 / 나 / 비 버튼을 하나씩 클릭하면 잔 = ~ / 나 = ~ / 비 = ~ 에 대한 삼행시 문구가 한 줄씩 출력되는 프로그램입니다. html과 Javascript를 이용하였습니다. '잔' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. '나' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. '비' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. 꼭 잔>나>비 순서대로 누르지 않아도 '나' 버튼만 클릭하였을 때 '나를 설레게 만든다' 문구가 먼저 출력될 수 있습니다. 다른 버튼도 마찬가지입니다. 사용환경은 VSCode입니다. html 코드 태그 안에서 index.js 파일을 가져오기 위하여 코드를 사용하였습니다. 삼행시 문구가 출력되기 ..

안녕하세요. brandy 입니다. 최근 블록체인, 메타버스 등 떠오르는 기술들에 관한 글을 읽거나 하면 'web 3.0'이라는 단어가 자주 등장합니다. 저는 web 1.0부터 web 3.0까지 어떤 변화가 있었는지 궁금해서 한번 서치해보았습니다 :) 출처 : https://leofinance.io/@pitboy/web-1-0-to-web-3-0-the-evolution-of-the-internet Web 1.0 - 사용자끼리 상호 교류 X, 일방적 정보전달의 웹 시대 www의 시작 web 1.0은 1994년~2004년 대부분 웹사이트에 해당합니다. 이 시대는 '정적 웹 사이트의 시대'라고 불리는데요, 정적이라고 불리는 이유는 이때 당시의 웹 서비스 사용자들은 서비스 이용 시 웹사이트에서 일방적으로 전달하..