Week I Learned

📌웹 앱의 필수 구성요소 - HTML, CSS, JavaScriptHTML UI를 기본적으로 만듦CSS UI의 비주얼적인 요소 담당JavaScript 동적인 프로그래밍 부분 담당, HTML조작 가능브라우저웹앱을 실행시키는 역할, 런타임(실행시간) 환경을 제공하는 환경

통상적으로 ES2015 버전부터 모던 JavaScript.

모던 웹 앱 개발 환경에서 가장 중요한 소프트웨어로 꼽을 수 있는 node.js node.js 브라우저에서 실행 될 필요 없이 노트북, 데스트톱 환경에서도 실행될 수 있는 Js런타임 환경. 현대의 웹 프론트엔드 개발 환경에 있어서 굉장히 중요한 역할을 하게 됨.

예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많음.)남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootst

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,1) 코드 복잡, 2) 브라우저 간 호환성 문제 고려 => jQuery라는 라이브러리가 등장.

Hacker News Client app 01 : JavaScript

Hacker News Client app 02 : JavaScript

position 속성은 문서 상에 요소를 배치하는 방법을 지정. top , right , bottom , left 속성이 요소를 배치할 최종 위치를 결정.static : 기본값.요소를 일반적인 문서 흐름에 따라 배치.relative : 월래 있어야 하는 자리에서 움직이

박스와 아이템들을 행 or 열 자유자재로 배치시켜줌.박스에 지정하는 속성값 들이 있고, 박스 안에 들어가는 item에 지정되는 속성 값이 있다.container => display, flex-direction, flex-wrap ,flex-flow, justify-co

리엑트에서 컴포넌트 생김새를 정의할 때 사용하는 문법.얼핏 보면 html처럼 생겼지만, 사실은 javascript이다.\-> babel이라는 도구를 사용해서 xml형태의 코드가 javascript로 변환된다.1\. 태그는 열었으면 꼭 닫혀 있어야함.\-> Self cl

📱접속 후 채팅해서 server가 메시지를 받은 뒤,메시지를 각 사용자들에게 보내는 방식의 채팅 앱 만들기~!📲 서버 생성은 처음이다! 서버단이 어떻게 돌아가는지 아주 간단하겠지만 알아보는 과정을 살펴보기 위해 앱을 만드는 시간을 가져봤다. (아주 일부분이겠지만..

변한다!대부분의 소프트웨어는 현실의 문제를 해결하기 위한 솔루션으로 만들어진다.여기서의 현실은? 매번 변하게 된다!당연히 현실의 문제가 바뀌니까, 현실의 문제를 해결하는 소프트웨어도 바뀌어야 한다!그래서! 소프트웨어는 굉장히 자주 , 그리고 지속적으로 바뀌게 된다.당연

문제가 많은 DOM API? 웹 어플리케이션에 있어서 가장 많은 문제를 일으키는 요소는 DOM이라고 하는 API라고 할 수 있다. DOM API라고 하는 것은 html문서를 브라우저가 rendering하기 위해서, 그리고 그 안의 많은 것들을 작동 시키기 위해서 가

개발자는 항상 무엇을 만든다. 그렇다면 어떻게 만들어야 할까?만들다보면 더 잘 만들고 싶고, 기능들을 더 추가하고 싶고, 제공하고 싶고... 분명 욕심이 나는게 사실이다.이런 욕심들을 채우기 위해 많은 것들을 담으려고 노력하면...? 안된다! 어떤 제품을 만들 때는 그

기능 변경에 따른 코드변경 소프트웨어는 지속적으로 변경되고 있다. 그리고, 자주 변경되는 소프트웨어를 살펴보면 아래와 같은 경우가 있을 것이다. 기존의 코드가 바뀐다 기존의 것이 사라진다 삭제된다 이 중에서도, 가장 빈번히 일어나는 것은 새로운 기능 추가일 것이다.

👩‍💻나의 서비스가 👨‍👩‍👦‍👦사용자를 대신해서 🌃google과 같은 서비스의 무언가를 이용하고 싶다면? 👩‍💻 내가 만든 서비스 👨‍👩‍👦‍👦 내가 만든 서비스를 사용하는 사용자 🌃 내가 만든 서비스가 * 연동하려고 하는 서비스*(googl

두 과정으로 나눠볼 수 있다!브라우저가 화면을 그리기 위해 파일을 가져오는 단계가져온 파일들( HTML, CSS, Javascript, 외부 리소스...)을 브라우저가 렌더링하는 단계이 과정들을 자세하게 살펴보자 !!✨브라우저가 화면을 그리기 위해 파일을 가져오는 과

를 이어서 배워 보려 한다.참고로 본 게시물은 Chrome broswer architecture에 대해 초점을 맞춰서 알아 볼 것이다!위의 이미지는 일반적인 broswer architecture이다. (broswer architecture는 표준이 없다는 특징이 있어서

HTML, CSS가 브라우저 렌더링하는데 필요한 전부이고, Javascript는 HTML태그를 동적으로 움직이게 만드는 프로그래밍 언어이다! 생각보다 간단한데..? 과연 그럴지...~ 🤷‍♀️ 브라우저가 어떻게 렌더링되는 되는지 자세히 알아보자 !!🔍 브라우저

렌더링 최적화를 왜 알아야할까? frames per second 1초에 몇 프레임이 그려지는지를 표현한 단위로, 60fps는 1초에 60장의 프레임이 그려지는 것을 뜻한다. 한장의 프레임을 그리는데는 1000/60=16.666... 즉, 16.6ms안에 브라우저가