자바스크립트6 JavaScript | 스프레드 연산자, forEach, map 기본 개념 만일 다음과 같은 코드가 있다면, const str = 'abcde'; [...str].map((e)=>console.log(e)); [...str].forEach((e)=>console.log(e)); map을 이용한 출력문과 forEach를 이용한 출력문은 각각 같은 결과를 낼 것이다. a b c d e 여기에 쓰인 스프레드 연산자, map 함수, forEach 함수는 자바스크립트 개발에서 아주 유용하게 쓰이는 것들이다. 스프레드 연산자 [... OO]에 대하여 [... OO] 구문에서 '...'에 해당하는 부분은 자바스크립트에서 '스프레드(spread) 연산자'라고 불린다. 이 연산자는 이터러블(iterable) 객체의 개별 요소를 분리하여, 각 개별 요소들을 새로운 배열에 담아 반환한다. 위 예제.. 2024. 1. 9. React | State(상태) 관리, Props 전달의 기본 개념 State(상태)의 기본 개념 리액트의 내장 훅(Hook)인 useState 를 통해 상태관리가 가능하다. const [state, setState] = useState(초기 상태); 의 형태로 선언한다. 상태가 변할 때마다 해당 컴포넌트는 return을 다시 하며, 이에 따라 리렌더링 된다. 예를 들어 버튼과 상태 변화를 연동하고, 해당 컴포넌트 내부에 console.log() 를 찍어보면, 버튼을 누를 때마다 로그가 계속 출력되는 것을 알 수 있다. 즉, 계속 return 된다는 뜻이다. 이때 Strict mode(React.StrictMode)가 세팅되어 있다면 두번씩 호출될 수 있다. 이는 Strict mode가 컴포넌트를 두번 마운트하고, 언마운트 하는 등 두번씩 렌더링해보면서 잠재적인 문제를 .. 2024. 1. 2. React | 리액트 프로젝트의 기본 실행구조 분석 드디어 리액트 라이브러리를 익힐 때가 왔다! 처음 리액트를 구동시켜보고, 파일을 이리저리 훑어보는데 동작 원리가 궁금해졌다. 그래서 잠깐 리액트의 기본적인 실행구조를 파보는 시간을 가져보았다. 우선 리액트를 설치하면 다음과 같은 디렉토리와 파일들이 생성된다. package.json 파일을 보니, 루트 디렉토리 가서 npm start 해보면 react가 실행될 것 같다. 그렇게 했더니 App.js 파일이 다음과 같이 성공적으로 실행이 됨을 확인할 수 있다. 자바스크립트 파일이 어떻게 와 같이 JS 파일을 로드하는 문장이 보이지 않는다. 그럼 대체 어떻게 App.js의 변화가 index.html에 반영되고 렌더링될 수 있는거란 말인가?? 일단 리액트를 띄운 화면의 개발자 도구>Network 탭을 보면, 보이.. 2024. 1. 2. JavaScript | 비동기 처리 | async & await 키워드 비동기 처리 발전과정 요약 현대의 프론트엔드 개발에서 비동기 프로그래밍은 필수적이다. 서비스는 사용자의 요청에 신속하게 응답하고, 동시에 백그라운드에서 데이터를 로드하고 처리하는 등의 복잡한 작업을 수행해야 하기 때문이다. 초기의 자바스크립트에서는 이러한 비동기 작업을 주로 콜백 함수를 통해 처리했다. 그러나 서비스의 규모가 커지고 로직이 복잡할수록 콜백 지옥이라는 부작용이 발생했으며, 이는 가독성 저하와 유지 보수 난이도 상승으로 이어졌다. 이러한 문제를 해결하기 위해 ES6(ECMAscript 2015)에서 Promise가 도입되었다. Promise를 통해 비동기 작업 완료 실행될 작업을 연기하는 것이 수월해졌고(Promise 객체 리턴값을 변수에 담은 후에 나중에 활용하는 식으로), 또한 체이닝을 .. 2024. 1. 1. JavaScript | 비동기 처리 | Promise 객체 동기 처리, 비동기 처리 자바스크립트는 기본적으로 싱글 스레드 언어이다. 따라서 하나의 작업 흐름을 따라 처리한다. 그러므로 이전 작업이 진행 중이라면, 다음 작업을 수행하지 않고 기다린다. 이를 동기적 방식, 혹은 blocking 방식 이라고 부른다. 이렇게 했을 때의 문제점이 있는데, 바로 실행 시간이 긴 하나의 함수를 뒤의 함수가 계속해서 기다리는 경우가 생긴다는 것이다. CPU 스케줄링에서 FIFO 방식의 부작용을 그대로 상상하면 된다. 사용자 경험을 위한 언어인 자바스크립트 특성상 이는 치명적인 단점이다. 따라서 비동기적 방식, Non-blocking 방식이 도입되었다. 싱글 스레드이지만 마치 병렬처리를 하는듯한 착시를 일으키자는 것! 비동기식 프로그래밍에서는 특정 작업이 백그라운드에서 실행되며.. 2024. 1. 1. JavaScript | V8 엔진과 런타임 환경의 기본 개념 자바스크립트 런타임 환경 자바스크립트 런타임 환경은 자바스크립트 코드가 실행되는 환경을 말하며, 크게 1) 브라우저와 2) 브라우저 밖(Node.js) 으로 구분할 수 있다. 본래 브라우저가 자바스크립트의 고향이고, Node.js 덕에 브라우저 밖에서도 자바스크립트를 구동할 수 있게 되었다. 1. 웹 브라우저 웹 브라우저는 자바스크립트의 가장 전통적인 런타임 환경이다. 여기서 자바스크립트의 목적은 HTML과 CSS로 된 정적인 웹 페이지를 동적 웹 페이지로 조작할 수 있도록 하는 것이다. (대표적으로 이벤트 처리, 실시간 화면 전환, 시각 효과 등) 이를 위해 브라우저 내에는 자바스크립트 코드를 파싱하는 자바스크립트 엔진이 내장되었는데, 이 엔진은 파싱 외에도 DOM API, 이벤트 핸들링, AJAX 통.. 2024. 1. 1. 이전 1 다음
