코드로 대화하기

안녕하세요 하나의 웹페이지를 보여주기 위해서 브라우저를 우리 생각보다 꽤 많은 일을 하고있습니다. 구성 요소 브라우저의 주요 구성 요소는 아래와 같습니다. 1. 사용자 인터페이스 주소 표시줄, 이전/다음/새로고침 등 웹페이지를 제외한 나머지 모든 부분입니다. 2. 브라우저 엔진 사용자 인터페이스(1번)와 렌더링 엔진(3번)을 연결합니다. 3. 렌더링 엔진 HTML과 CSS를 파싱하여 요청한 웹페이지를 화면에 표시합니다. 4. 통신 HTTP 요청과 같은 네트워크 요청을 수행합니다. 5. UI 백엔드 체크박스나 버튼 같은 기본적인 위젯을 그려줍니다. OS 사용자 인터페이스 체계를 사용합니다. 6. 자바스크립트 해석기 자바스크립트 코드를 실행하는 인터프리터입니다. (ex. chrome - V8) 7. 자료 저..

안녕하세요 오늘은 var, let, const 에 대해 알아보겠습니다. var javascript에서 ES5까지 변수를 선언하는 방법은 var 뿐이었습니다. 이는 몇 가지 심각한 문제가 있습니다. 1. 함수 레벨 스코프 함수의 코드 블록만 스코프로 인정합니다. 전역 함수 외부에서 생성한 변수는 모두 전역 변수입니다. 2. var 키워드 생략 및 중복 선언 허용 암묵적으로 전역 변수를 생성할 가능성과 의도하지 않은 변수값의 변경이 일어날 가능성이 큽니다. 3. 변수 호이스팅 변수를 선언하기 이전에 참조할 수 있습니다. 이는 변수가 어디에서 어떻게 사용하는지 파악하기 힘들며 비순수 함수에 의하여 값이 변경될 때도 있습니다. ES6에서는 이러한 문제점들을 보완하기 위하여 let과 const를 만들었습니다. l..

타입크스립트를 공부하면서 "지금 작성하고 있는 코드가 깨끗한가? 올바른 길로 가고있나?" 생각이 들었습니다. 그렇게 클린코드에 관해 찾아보았고, 토스에서 진행한 [실무에서 바로 쓰는 Frontend Clean Code]와 삼성 SDS의[ 클린코드란 무엇인가?]의 내용을 토대로 정리하려합니다. https://toss.im/slash-21/sessions/3-3 실무에서 바로 쓰는 Frontend Clean Code 실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집 toss.im https://www.samsungsds.com/kr/story/cleancode-0823..

오늘은 React-Redux를 알아보겠습니다. 최대한 redux를 모르는 사람한테 설명한다는 가정하에 글을 작성하였습니다. 리덕스는 상태 관리 툴로 프로젝트 전역에서 사용할 수 있는 변수를 생성한다고 생각하시면 됩니다. redux를 사용해야 하는 이유는 아래와 같습니다. 1. 값을 넘길 때 props로 연속해서 타고 들어갈 일이 없어집니다. 2. 프로젝트 규모가 커질수록 필요성이 커집니다. 3. 리덕스 값이 바뀔 때 사용하고 있는 컴포넌트가 자동적으로 리렌더링이 일어납니다. 이외에도 비동기, 미들웨어에 관한 것이 있습니다. 저희의 목표를 1번에서 말한 props로 타고 들어갈 일 없이 전역적으로 변수를 관리가 가능하게끔 만드는 것으로 잡겠습니다. 이번 글에서 다루는 코드는 아래 깃에 모아두었습니다. ht..

오늘은 인터랙션 코딩이나 vanila javascript 프로젝트를 할 때 많이 활용하는 Node와 Element에 대해 알아보겠습니다. Node? Element? 노드와 엘리먼트의 차이점을 알기 위해서는 노드가 무엇인지를 먼저 알아야 합니다. Main Hello World 위 코드를 살펴보겠습니다. 일반적으로 봤을 때는 html엘리먼트들과 텍스트, 주석들이 있습니다. 노드 관전에서 보겠습니다. 은 와 자식 노드들이 있습니다. 는 이라는 노드가 있고, 는 , , 노드들이 있습니다. 그리고 안에는 Hello World라는 노드가 있습니다. html의 모든 태그들을 노드이고, 주석/텍스트들 또한 노드입니다. 노드란 여러 가지 DOM 타입들이 상속하는 인터페이스입니다. 노드 타입들 중 하나가 Element입니..

이전 글에서 Array.prototype.slice.call()을 하다가 여기까지 왔는데요 하나를 제대로 알기 위해서는 그와 관련된 여러 가지를 알아야 하는 것 같습니다. 들어가기 전에 원시값과 참조값에 대하여 간단하게 설명드리겠습니다. 이것 또한 깊이 들어가면 들어갈 수 있지만 이 글에서는 다루지 않겠습니다. 원시값은복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 복사를 하더라도 서로에게 영향을 미치지 않습니다. 아래 코드와 같이 a를 b변수에 복사하고 b를 변경한다 하더라도 a가 변경되는 것은 아닙니다. const a = 1; let b = a; b = 2; console.log(a); // 1 console.log(b); // 2 * 원시값은 String, Number, Boolean, un..

vanila javascript 프로젝트를 하다가 "Array.prototype.slice.call()" 코드를 보았을 때 당황했지만, 무언가를 한 가지 더 배울 수 있다는 생각에 행복했습니다. 이 글은 해당 코드를 자세히 분석해보았으며 연관되어있는 코드/이론 또한 다루고 있습니다. NodeList 0 1 2 // js let itemEls = document.querySelectorAll(".item"); console.log(itemEls) // NodeList(3)[div.item, div.item, div.item] 콘솔로 itemEls를 찍어보면 " NodeList(3)[div.item, div.item, div.item] "이 찍힙니다. 배열과 비슷하게 생겼지만 배열은 아닙니다. documen..

이번 포스팅은 그림 설명이 많습니다!! 본격적으로 CSR과 SSR을 들어가기에 앞서 TTI와 TTV, SEO의 간단한 개념만 먼저 알아보겠습니다. * TTV (Time To VIew) 사용자가 웹사이트를 보는 것을 의미합니다. * TTI (Time To Interact) 클릭 이벤트 같은 인터랙션이 가능한 상태를 의미합니다. * SEO(Search Engine Optimization) 구글, 네이버와 같은 검색엔진들이 올라와져있는 html을 분석하여 검색 결과를 보여주는 것을 의미합니다. 이 개념을 가지고 앞으로 나올 내용을 보시면 도움이 될 것 같습니다. :) CSR (Client Side Rendering) CSR은 클라이언트 측에서 화면을 구성하는 것을 말합니다. 차근차근 순서를 살펴보겠습니다. 1..

오늘은 양방향과 단방향 데이터 바인딩을 알아보겠습니다. 데이터 바인딩 (Data binding) 먼저 데이터 바인딩이란 뷰와 모델에 있는 데이터를 동일하게 만들어주는 것을 의미합니다. 만약 js에서 데이터가 변경되어도 html에서 변경되지 않는다면 사용자는 잘못된 데이터를 보게 됩니다. 데이터 바인딩은 이러한 문제를 해결해줍니다. vanila javascript로 예를 들어보겠습니다. Hello const data = "song"; function changeText(){ const view = document.querySelector("#view"); view.innerText = data; } js에 있는 데이터를 화면상에 보여주기 위해서는 아래의 과정들이 있습니다. 1. document 선택자로 D..

안녕하세요! 오늘은 웹의 기초인 쿠키와 세션에 대해 얘기해보려합니다! Cookie 서버에서 사용자의 컴퓨터에 저장하는 기록 정보 파일입니다. 이는 사용자가 다음번에 접속시에도 재사용가능하게 만들어줍니다. 특징 이름, 값, 만료일, 경로정보로 구성되어있습니다. 클라이언트에 총 300개의 쿠키를 저장할 수 있습니다. 하나의 도메인당 20개의 쿠키를 가질 수 있습니다. 하나의 쿠키는 4kb까지 저장가능합니다. 사용자마다 적절한 페이지를 보여주고 트레킹이 가능합니다. Session 사용자가 한 브라우저내에서 계속 통신을하고 새로고침하여도 상태를 일정하게 유지시켜줍니다. 특징 상태를 유지하기 위하여 서버에도 저장됩니다. 브라우저를 종료하면 삭제되어 비교적 안전합니다. 저장데이터 제한이 없습니다. 사용자마다 고유의..