본문 바로가기

전체 글

WIL - JS ECMAScript(ES)란? ES5와 ES6의 주요 발전

Computer Programming/Javascript 2023. 6. 18. WIL - JS ECMAScript(ES)란? ES5와 ES6의 주요 발전 오늘은 JS ECMAScript의 정의와 발전 과정, 특히 주요한 발전이었던 ES5와 ES6에 대해 공부했다. JavaScript가 웹 개발을 위해 가장 일반적으로 사용되는 '언어'라면 ES는 이 JavaScript의 기능과 문법, 객체 모델을 정의하고 있는 규격, 표준이라고 할 수 있다. ES5는 2009년에 출시된 ECMAScript 5의 줄임말로, JavaScript에 많은 개선을 가져온 주요한 규격이다. 1. ES5 - strict mode (엄격 모드)의 도입 : 코드 자성의 실수나 잠재적인 오류를 방지하기 위한 규칙 도입 - 배열 메소드 추가: forEach, map, filter, reduce 메소드 - JSON객체 - bind 메소드 등 ES6는 2015년에 출시된 ECMAScript 20..

[리액트를 다루는 기술] 10. Todo List 만들기

Computer Programming/[리액트를 다루는 기술] 2023. 6. 17. [리액트를 다루는 기술] 10. Todo List 만들기 리액트를 다루는 기술 - 김민준 책을 따라만 하는것에 그치고 싶지 않아서 최대한 내가 먼저 생각해서 만들어 본 후, 책의 코드와 비교했다. 그리고 새로 알게된 점은 주석도 달고 여기에 메모해서 기억해두려고 한다. 디렉토리는 components와 styles 크게 두가지로 나눴고 css는 scss를 사용했다. npx create-react-app 으로 리액트 앱을 만든 후 App.js에 TodoTemplate.js 를 렌더링 한 후, 나머지 컴포넌트들은 이 컴포넌트의 props로 전달함으로서 렌더링했다. 1. classnames classnames 라이브러리 - 동적으로 css 클래스를 조작해야할 때 간결하게 작성할 수 있음. 조건부로 클래스 이름을 동적으로 생성해서 복잡한 조건에 따라서도 해결할 수 있음..

[리액트를 다루는 기술] 9. 컴포넌트 스타일링

Computer Programming/[리액트를 다루는 기술] 2023. 6. 16. [리액트를 다루는 기술] 9. 컴포넌트 스타일링 1. Sass 사용하기 Scss도 있지만 문법만 다르고 사용 용도와 방법은 같다. .scss 파일을 만들고 //util.scss //변수 사용하기 $red: #fa5252; $yellow: #fcc419; $blue: #339af0; $indigo: #5c7cfa; $violet: #7950f2; //mixin 만들기 (자주 사용되는 스타일을 함수처럼 만들어 재사용함) @mixin square($size) { $calculated: 32px * $size; width: $calculated; height: $calculated; } 자주 사용하는걸로 변수와 함수같은 minxin을 만들어 재사용할 수 있다. 자주 사용될 이 변수와 믹스인들은 utils.scss 와 같은 곳에 저장하여 필요할 때 꺼내 쓰는 ..

[리액트를 다루는 기술] 8. Hooks | Custom Hooks

Computer Programming/[리액트를 다루는 기술] 2023. 6. 16. [리액트를 다루는 기술] 8. Hooks | Custom Hooks 1. useEffect cleanup ? useEffect 에서는 함수를 반환할 수 있는데, 이를 cleanup 함수라고 한다. 렌더링이 다시 일어날때 (첫 렌더링 또는 deps 변화) useEffect 의 return 함수가 실행된다. 이 함수의 실행 시점은 업데이트 직전이다. 따라서 업데이트 직전 clean up 하고싶거나 원하는 상태로 되돌리고싶을때, 또는 중단하고 싶을 때 사용하면 된다. useEffect(() => { console.log("렌더링이 되었습니다!") console.log(name) return () => { console.log("cleanup") console.log(name) } },[name]) *주의사항 의존성 배열에 함수를 추가하면 렌더링때 마다 갱신됨 (렌더링때마다 함..

[Browser] DOM (Document Object Model)

Computer Programming/Browser 2023. 6. 15. [Browser] DOM (Document Object Model) https://nayoungkim00.tistory.com/44 브라우저의 구조와 렌더링 엔진의 working process 에 관한 글을 먼저 작성했습니다. 이후 DOM 에 관해 모던 자바스크립트 Deep dive 책을 읽고 정리해보았습니다. 프론트엔드 개발자(사실 지망생 😎)에게 브라우저의 동작 원리를 이해하는 것은 매우 중요합니다. 내가 작성한 코드가 어디에서 어떤 순서로, 어떤 방식으로 동작하는지 이해하면 더 효율적이고 클린한 코드를 작성할 수 있을 것이라 생각합니다 :) 1. DOM (Document Object Model) DOM 이란 HTML 문서의 계층적 구조(부모-자식)와 정보를 표현하며 이를 제어할 수 있는 API(DOM API), 즉 프로퍼티와 메소드를 제공하는 트리의 자료구조입니다...

[리액트를 다루는 기술] 6. 컴포넌트의 반복 (map, key, 데이터 추가 및 삭제, concat, filter)

Computer Programming/[리액트를 다루는 기술] 2023. 6. 15. [리액트를 다루는 기술] 6. 컴포넌트의 반복 (map, key, 데이터 추가 및 삭제, concat, filter) 1. map 함수 사용하기 map 함수는 기존 배열로 새로운 배열을 만들어 반환한다. 각 요소들을 원하는대로 가공할 수 있다. const IterationSample = () => { const names = ['눈사람', '얼음', '눈', '바람'] const nameList = names.map(item => {item}) return ( {nameList} ) } export default IterationSample 하지만 위의 코드를 실행하면 콘솔에 warning이 뜬다. 바로 key가 없다는 것 2. Key의 중요성 리액트에서 key는 컴포넌트 '배열'을 렌더링 했을때 어떤 원소에 변동이 있었는지 알아내려고 사용한다. 즉 원소의 생성, 제거, 수정을 알아낼 수 있다. 만약 key가 없다면 V..

[리액트를 다루는 기술] 4. 이벤트 핸들링

Computer Programming/[리액트를 다루는 기술] 2023. 6. 15. [리액트를 다루는 기술] 4. 이벤트 핸들링 리액트를 다루는 기술 - 김민준 4. 이벤트 핸들링 DOM의 Event (문자열로 전달) Activate 리액트의 Event (함수 그대로를 전달) Activate 이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것 이벤트 핸들러란? 이벤트가 발생하면 처리하는 역할 이벤트 사용시 주의사항 1. 카멜표기법 2. 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값(객체 자체)을 전달해야한다. 3. DOM 요소에만 이벤트를 설정할 수 있음 : 즉, 우리가 만든 컴포넌트에는 이벤트를 설정할 수 없고 DOM 요소인 div, button, span, form등에만 설정할 수 있다. 우리가 만든 컴포넌트에 onClick = {clickHandler} 을 설정한다면 단지 onClick이..

Browser - 브라우저의 구조와 렌더링 과정

Computer Programming/Javascript 2023. 6. 15. Browser - 브라우저의 구조와 렌더링 과정 1. 브라우저의 구조 웹브라우저의 기능이 다양화되면서 많은 역할을 수행하고 있습니다. 그러나 웹브라우저의 근본적인 역할은 웹페이지를 다운받아 렌더링하여 화면에 보여주는 것입니다. - User Interface : 요청한 페이지를 보여주는 창 이외에 사용자가 컨트롤 할 수 있는 부분이다. (주소표시줄, 이전/다음, 새로고침 ...) - Browser Engine: 주소표시줄에 URI를 요청하는 등의 사용자 인터페이스를 렌더링 엔진에 전달해주고 동작을 제어한다. 또는 Data Persistence(자료저장소)에서 필요한 정보를 가져온다. - Rendering Engine : 요청한 URI를 브라우저엔진에게 받아서 server에 요청한다. 이후 데이터를 받아 파싱한 후 렌더링한다. (렌더링 과정은 2장에!) ..

자바스크립트의 비동기 처리 동작 원리 | 콜스택, 이벤트루프, Promise, fetch, async/await

Computer Programming/Javascript 2023. 6. 14. 자바스크립트의 비동기 처리 동작 원리 | 콜스택, 이벤트루프, Promise, fetch, async/await 목차 비동기처리의 필요성 1-1. 실행컨텍스트 스택 1-2. 싱글스레드 비동기처리의 동작 원리 2-1. 브라우저의 이벤트 루프 2-2. 왜 싱글스레드일까? 콜백 비동기 처리의 문제점 3-1. 콜백 헬 (Callback hell) Promise 4-1. 상태 4-2. fetch와 axios async/await 5-1. async/await 5-2. Promise 메소드 1. 비동기처리의 필요성 1-1 . 실행컨텍스트 스택 (=콜스택, Execution context) - 자바스크립트의 동작 원리를 담고 있는 핵심 개념으로서 이를 통해 식별자&값 메모리 관리 방식, 호이스팅 발생 이유, 이벤트 핸들러(테스트 큐), 비동기 처리의 동작 방식을 이해할 수 있습니다. - V8의 구조: Memory Heap (메..

이전 1 ··· 6 7 8 9 10 11 12 13 다음

Archives

Recent Posts

Tags

더보기

Calendar

티스토리툴바