본문 바로가기

Computer Programming

[리액트를 다루는 기술] 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 (메..
JavaScript 숫자야구 - slice(), splice(), filter()의 차이와 문제점
Computer Programming/Javascript 2023. 6. 13. JavaScript 숫자야구 - slice(), splice(), filter()의 차이와 문제점 영어로 하면 Bulls and Cows라고 한다고 한다... 컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요! 1번째 시도 : 134 0B0S 2번째 시도 : 238 1B1S 3번째 시도 : 820 2B1S 4번째 시도 : 028 3B 5번째 시도 : 280 3S 4번만에 맞히셨습니다. 게임을 종료합니다. 1. 문제점 자바스크립트로 간단한 숫자야구 프로그램을 개발하던 중, 컴퓨터가 생성한 랜덤 수와 유저가 입력한 랜덤 수 중에 동일한 숫자가 있는지 확인하는 함수에서 잠깐 막혔었다. 그 이유가, ball인지 확인할 때 그 해당 숫자를 제외한 다른 배열을 또 만들어 비교하고 싶어서 splice를 사용했더니 배열의 원본이 변경되어 원하는 결과를 얻지 못했기 때문이었다. 콘솔 계속 찍어보니 그게 문제였다. 아래..
자바스크립트 자료구조 Map과 Set Object의 사용
Computer Programming/Javascript 2023. 6. 12. 자바스크립트 자료구조 Map과 Set Object의 사용 1. Map이란? - key / value pair - key 또는 value에 어떠한 데이터타입도 다 들어올 수 있으며 정렬된 순서로 저장된다. - 한 맵에서의 키는 오직 단 하나만 존재한다. (Map 집합의 유일성) - 검색, 삭제, 제거, 여부 확인 등 제공 const myMap = new Map(); myMap.set('key', 'value') console.log(myMap.get('key')); //value에 접근 -맵에서의 반복은 keys(), values(), entries()의 메소드 사용으로 이루어진다. (키, 값 및 키-값 쌍 반복) => Map Iterator를 반환한다. - for~of 문을 통한 Iterator의 반복 (keys(), values(), entries()) - ..
자바스크립트의 일급 객체(First-class Function)로서의 함수
Computer Programming/Javascript 2023. 6. 12. 자바스크립트의 일급 객체(First-class Function)로서의 함수 1. 일급객체(First-class Object)란? 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 즉 프로그래밍 언어의 함수가 다른 변수처럼 다루어질 때 일급함수를 가진다고 한다. 일급함수를 가진 언어에서 함수는 다른 함수들에 전달인자로 제공되고, 다른 함수에 의해 반환될 수 있으며, 변수의 값으로서 할당될 수 있다. 자바스크립트는 함수를 객체로 취급하기 때문에, 함수를 매우 유연하게 사용할 수 있다. first-class 라는 단어 그대로 자유롭게 다른 객체들에게 적용 가능한 연산을 지원한다. 일급 객체의 조건은 아래와 같다. 1) 변수나 데이터 구조 안에 객체를 담을 수 있다. 2) 파라미터로 전달할 수 있다. 3) 리턴 값으로 사용할 수 있다. 2. 일급객..
JavaScript의 발전 및 특징(+ AJAX | XML 용어 정리)
Computer Programming/Javascript 2023. 6. 12. JavaScript의 발전 및 특징(+ AJAX | XML 용어 정리) 1. 자바스크립트의 발전 자바스크립트는 웹 브라우저에서 동작하기 위해 나타난 언어이다. (아래 특징 설명 참고!) AJAX(Asynchronous Javascript And XML)란? - 자바스크립트의 라이브러리 중 하나이다. 전체 페이지를 새로고침 하지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간의 XML데이터를 주고받는 기술이다. XML (eXtensible Markup Language) - XML은 다목적 마크업 언어로 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해 준다. - HTML과 같은 Markup Language라 생긴건 비슷하지만 차이점이 존재한다. HTML 은 이미 약속된 태그만 사용이 가능..
CSS 미디어쿼리로 반응형 웹 디자인하기 (with flex-box)
Computer Programming/CSS 2023. 6. 8. CSS 미디어쿼리로 반응형 웹 디자인하기 (with flex-box) 1. 미디어쿼리 (Media Queries)란? 미디어 쿼리는 웹 화면을 보는 디바이스 (휴대폰, 태블릿, 데스크탑 등)에 따라 웹사이트나 앱의 스타일을 수정할 때 사용하는 툴이다. 각각의 디바이스에 어떤 특성이나 수치(화면 해상도, 뷰포트, 너비 등)에 따라 스타일 및 레이아웃을 수정할 수 있기 때문에 반응형 웹사이트를 제작할 때 사용된다. 2. 미디어쿼리 사용 방법 미디어 쿼리는 @media 규칙을 사용해서 정의된다. @media media-type and (media-feature) { /* 스타일 및 레이아웃 규칙 */ } /* 600px 이상의 너비를 가진 뷰포트에 적용되는 스타일 */ @media screen and (min-width: 600px) { /* 스타일 및 레이아웃 규칙 */ } ..

티스토리툴바