2주차 (27) 썸네일형 리스트형 함수형 프로그래밍 찍먹 2주차 세미나에서 일급객체, 고차함수에 대해서 들으며 함께 등장한 키워드 “함수형 프로그래밍”그래서 2주차 공유 과제에서는 함수형 프로그래밍에 대해서 알아보도록 하겠습니다.그전에 자바스크립트에서 함수가 어떤 특징을 가지고 있는지 복습해 보겠습니다! 자바스크립트의 함수는 일급 객체이기 때문에 값으로 취급할 수 있다.자바스크립트의 함수는 "일급 객체"입니다. 일급 객체는 “함수를 데이터 다루듯이 다룰 수 있다"는 의미입니다.일급 객체의 조건변수에 할당할 수 있다.다른 함수의 인자로 전달할 수 있다.다른 함수의 결과로 반환할 수 있다.즉 자바스크립트의 함수는 데이터처럼 다룰 수 있기 때문에 "일급 객체"라고 불리며 이러한 특성 덕분에 여러 프로그래밍 기법이 가능해집니다. 일급 객체의 특성으로 가능해지는 것들1.. [Javascript] Webpack & Babel 안녕하세요🌊 웹파트 OB 김건휘입니다. 이번 시간에는 구형 브라우저 호환성 문제와 파일 최적화 문제를 해결하고, 개발 생산성을 높이기 위한 도구 중 Babel과 Webpack에 대한 아티클을 작성해보는 시간을 가져보겠습니다. 프론트엔드 개발자 채용공고를 찾아보면 Webpack과 Babel에 대한 지식과 활용 경험을 요구하는 글을 종종 확인할 수 있다. 📌Webpack이란?"webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다."라고 webpack공식문서에 적혀있다. 🧐모듈이란?: 프로그램을 작은 단위로 나눈 독립적인 코드 조각.: 애플리케이션을 구성하는 모든 파일과 자원을 의미. 일반적으로 자바스크립트 코드뿐만 아니라 CSS, 이미지, 폰트, HTML 등 웹 애플리케.. 💥 브라우저 렌더링 과정에 대해 알아보자 ! 안녕하세요 김한서입니다.✏️ 브라우저 렌더링이란?웹 브라우저에서는 HTML, CSS와 그것의 동작을 수행하고 제어하는 자바스크립트가 함께 실행된다.브라우저 렌더링은 브라우저(크롬, 사파리 등)가 HTML, CSS, JavaScript로 작성된 텍스트 문서에 대해 파싱(해석)하고 이를 화면에 그리는(렌더링하는) 일련의 과정을 말한다. 중요 렌더링 경로(Critical Rendering Path, CRP)라고도 하며 이를 최적화 하는 것은 렌더링 성능을 향상시킨다.결국 렌더링 성능 최적화를 위해, 그리고 화면에 의도한대로 렌더링시키기 위해서는 렌더링 과정을 알아야 한다. 브라우저가 HTML, CSS, JS로 작성한 텍스트 문서를 어떻게 파싱하고 브라우저에 렌더링 하는지 알아보자. 전체적인 flow는 다음과.. 성능 좋게 DOM을 조작해보자! 안녕하세요! 웹파트 OB 김채현입니다. 자바스크립트의 기능 중 하나로 DOM을 조작하는 것이 있습니다.이번 2주차 과제에서도 반복적으로 DOM에서 노드를 추가해서 보여주는 기능을 구현해야 했습니다.그렇다면 효율적으로 DOM을 조작할 수 있는 방법으로무엇이 있는지 한번 알아보고 싶어서 아티클을 작성하게 되었습니다. DOM이란?DOM은 The Document Object Model로, HTML, XML 문서의 프로그래밍 인터페이스입니다.DOM은 nodes와 objects로 문서를 표현하는데,웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 합니다. 웹 페이지는 일종의 문서로, 웹 브라우저를 통해 그 내용이 해석되어웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도.. 🌐 브라우저 렌더링 과정과 DOM 안녕하세요! 물결웹팟 OB 박채연입니다. 😊 이번 주차 공유과제 주제로 '브라우저 렌더링 과정과 DOM'을 다루려고 하는데요!저는 평소에 자바스크립트 코드를 작성하면서 하면서 우리가 작성하는 이런 파일들 화면에 어떻게 그려지고, 또 다양한 브라우저에서 동작하는지 개인적으로 궁금했던 부분이라렌더링, DOM과 관련된 부분을 깊게 공부해보고자 해당 주제를 선정하게 되었습니다. 🔧 🏷️ 브라우저 렌더링 과정 우선, 브라우저 렌더링 흐름에 대해 살펴보겠습니다! (1) 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. (2) 그러면, 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSS 오.. 자바스크립트 - 함수 호스팅, 화살표 함수 자바스크립트 함수자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록이다. 함수를 사용하면 코드의 재사용성과 가독성을 높일 수 있다. 일반적으로는 functon 키워드를 사용하여 선언할 수 있다.function add(a, b) { return a + b;}console.log(add(2, 3)); * 함수는 선언하기 전에 호출할 수 있다. (함수 선언식은 호이스팅이 되기 때문이다.)* 선언된 함수는 해당 스코프 어디에서든 사용할 수 있다.* 호이스팅이란? 자바스크립트가 코드 실행 전에 함수 선언과 변수 선언을 최상위로 끌어올리는 것을 의미한다.그래서 함수 선언식으로 작성된 함수는 코드의 어디서든 호출이 가능하다. * 함수가 전역 스코프에서 선언되었다 -> 코드 전체에서 사용 가능* 함수가 특정.. 자바스크립트 reduce 메서드 알아보기 안녕하세요 ! 웹 YB 김가현입니다.2주차 공유과제로는 reduce 메서드에 대해 작성해보려고 합니다.문법이 복잡할 것 같고 …. 코드를 봐도 잘 와닿지 않아서 자주 손이 가는(?) 메서드는 아니었는데요 ,,저와 같이 하나 하나 뜯어봅시다 !!!! Array.prototype.reduce() reduce는 '줄이다' 라는 의미를 가지고 있다.이 의미에서 알 수 있듯 배열의 각 요소를 순차적으로 처리하며 하나로 줄이는(reduce) 작업을 수행한다. 기본 문법arr.reduce(callback[, initialValue]) 가장 기본적인 형태이다. callback -> 콜백함수에는 다음 4가지의 인수를 받을 수 있다.누적 값 (accumulator)현재 값 (currentValue)(optional) 현.. 동적 필터링 구현 안녕하세요 웹 OB 이예림입니다..! 과제를 구현하던 중, 아래와 같이 각각의 함수로 필터링하는 방식이 매우 비효율적으로 느껴졌는데요,🤔 필터링을 재사용한 것처럼, 동적으로 접근하는 방식이 있지 않을까? 라는 의문으로 해당 주제를 접하게 되었습니다. const selectedGender = getSelectValue("sel_gender"); const selectedRole = getSelectValue("sel_role"); const inputName = getInputName(); const inputEnName = getInputValue("enNameInput"); const inputGithub = getInputValue("githubInput"); const inputWe.. 이전 1 2 3 4 다음
