평가 - 코드가 계산되어 값을 만드는 것 일급 - 값으로 다룰 수 있다. - 변수에 담을 수 있다. - 인자로 사용될 수 있다. - 반환값으로 전달할 수 있다. 일급 함수 일급함수란 함수를 일반 값처럼 다룰 수 있는 함수를 말합니다. 함수를 매개변수, 반환값, 변수 등으로 사용할 수 있습니다. 이러한 특징은 함수형 프로래밍에서 중요한 역할을 합니다. - 함수를 변수나 데이터 구조에 저장할 수 있습니다. - 함수를 매개변수로 전달할 수 있습니다. - 함수를 반환값으로 사용할 수 있습니다. const a = 100; const add = (test) => test + 100; const result = add(a); console.log(result) // 200 위 코드가 가능한 이유는 함수를 반환값으로 ..
CSR Client-Side Rendering, SSR (Server-Side Rendering), SSG (Static Site Generation)은 모두 웹 개발에서 사용되는 다양한 렌더링 방법입니다. 각각의 방법은 웹 페이지를 어떻게 구성하고 브라우저에 표시할지에 대한 접근 방식에 차이가 있습니다. CSR (Client-Side Rendering) CSR은 웹 페이지를 동적으로 생성하는 방법으로, 서버로부터 초기 HTML, CSS, JavaScript 파일을 받아와 웹 페이지를 그린 후에, 클라이언트에서 JavaScript를 사용하여 추가적인 데이터를 가져와서 화면을 갱신합니다. 이를 통해, 사용자에게 더욱 빠르게 웹 페이지를 보여줄 수 있습니다. 대표적으로 React, Vue, Angular 등..
투두리스트란? 말 그대로 투두리스트이다. 다만 우리가 개발 공부를 할 때 TodoList를 투두리스트는 개발의 기본인 CRUD를 전부 구현해야 하기 때문에 공부용 예제 및 연습으로 많이 사용한다. 우선 styled-components를 이용해서 UI부터 구현해보자. TodoList.js import React, { useState } from "react"; import styled from "styled-components"; const TodoListContainer = styled.div` display: flex; flex-direction: column; width: 30rem; margin: 10rem auto; height: 50rem; border: 1px solid black; h2 { ..
TDD (Test-driven development) 테스트를 하는 이유? QA팀이 있다면 회사입장에서도 리소스 ( 병목현상, 인건비, 시간) 가 발생한다. 개발팀도 QA팀이 뒤늦게 발견한다면 에러를 나중에 수정해야한다. 테스트 자동화 에러 발생확률 낮음 꼼꼼히 작성한다면 다시 코드를 안봐도 되는 불안감 해소효과?? 리팩터링하기 부담스럽지 않음 유지보수가 용이해짐 코드의 품질향상 코드의 문서화 테스트 피라미드 Unit Test (단위 테스트){함수, 클래스, 모듈} => Integration Test(통합 테스트){상호작용 테스트} => End to End Test (UI 테스트){사용자 테스트} 피라미드라고 부르는 이유? 밑에서 위로 올라갈 수록 리소스가 많이 든다. 가장 쉬운것이 Unit 테스트 이므..
실행컨텍스트란? 실행컨텍스트란 자바스크립트의 실행하는 환경정보들을 모아놓은 객체이다. 이 실행컨텍스트에 대해서 알게된다면 호이스팅에 대해서도 바로 이해할 수 있다. 콜스택은 Stack구조로 되어있는 FILO 이다. 코드가 실행된다면 실행 할 코드를 콜스택에 넣는다. const context = () => { inner(); // inner함수 실행 2 console.log('inner'); // inner출력 8 const inner = () => { inner2(); // inner2함수 실행 3 console.log('inner1'); // inner1 출력 7 } const inner2 = () => { inner3(); // inner3함수 실행 4 console.log('inner2'); // ..
변수의 타입 변수의 동작 방식을 알려면 우선 변수의 타입을 먼저 알아야한다. 자바스크립트의 변수에는 크게 원시형, 참조형 두 가지가 있다. 타입이 필요한 이유 값을 저장할 때 확보해야 하는 메모리공간의 크기를 결정하기 위해 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해 출처:모던 자바스크립트 Deep Dive 원시형이란? 식별자가 데이터가 들어있는 주소값을 갖고 있다. Number String Boolean nulll undefined Symbol 참조형이란? 식별자가 데이터들이 들어있는 주소값들을 갖고있는 주소를 갖고 있다. 즉, 참조형이란 데이터들의 집합을 갖고있는 주소의 주소를 갖고있는것이다. 아래의 타입은 ..
NodeJS란? 2009년 라이언 달이 발표한 Node JS는 구글 V8엔진으로 빌드된 자바스크립트 런타임 환경입니다. NodeJS는 단순 런타임 환경! 입니다. 간혹 NodeJS를 JS로 백엔드 언어를 사용 할 수 있게 만들어주는 라이브러리나 프레임워크 정도로 생각하는 사람이 많습니다. - 저도 그랬고.. NodeJS는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 외에 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경입니다. 독립적인 모듈, 파일 시스템, HTTP등 많은 빌트인 API를 제공합니다. Node.js 는 이벤트 기반의 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰..
자바스크립트 엔진 자바스크립트 코드를 해석하고 실행시켜주는 것이 자바스크립트 엔진이고, 가능한 짧은 시간내에 최적화된 코드를 생성해내는것 이 목표입니다. 즉, 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 말합니다. 여러 목적으로 사용 될 수 있지만 보통 웹 브라우저를 위해 사용됩니다. V8엔진은 오픈소스로 구글에서 개발했습니다. C++로 작성되었고, 구글 크롬과 Node.JS에서 사용됩니다. 과거 느린 엔진에 비해 V8엔진으로 인해 클라이언트에서도 빠른 속도로 로직을 수행 할 수 있게되어 많은 로직들을 클라이언트단에서 작성할 수 있게 되었고 이는 프론트엔드 영역이 주목받는 계기가 되었습니다. 출처: https://hceaan.tistory.com/79
AJAX란 이전의 웹 페이지는 오직 HTML코드를 서버로부터 전달받아 웹페이지 전체를 렌더하는 방식이였다. 화면의 값이 바뀌면 서버로부터 새로운 HTML을 전송받아 화면 전체를 다시 re-render하는 방식으로 동작했지만 이는 매우 비효율적인 방식이다. 값이 바뀐 부분만 부분적으로 서버에서 받아오는것이 데이터 통신면에서도 클라이언트쪽에서도 불필요한 비용이 발생하는것이다. 이로 인해 값이 바뀌면 서버에서 다시 HTML전체를 받아 리렌더하기 때문에 화면이 깜빡이는 이슈도 있고 당연히 성능면에서도 불리하다. 그러나 AJAX의 등장으로 이러한 문제를 해결 할 수 있다. 웹페이지에서 변경할 필요가 없는 부분은 다시 리렌더하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링 하는 방식이 가..
공공 데이터 포털 open API 이란? 아무래도 아직 백엔드 공부를 못해서 혼자 프로젝트를 할 때 모든 정보를 클라이언트에 담아서 해야하는 불편함이 있다. 아무리 토이프로젝트지만 API를 활용하고 싶어서 구글에 open API를 검색해봤는데 꽤나 쓸만한 open API를 갖고있는 사이트가 있었다. 공공 데이터 포털 이라는 사이트다. 정말 갖가지 open API가 다 있었다. 앞으로 꽤나 자주 이용하게 될 것 같다. 우선 유행이 지나긴 했지만 만만한게 코로나 확진수에 대한 api를 제공해준다는게 눈에 들어와 한번 사용해봤다. 그러나.. 테스트 하던 도중 잘 되다가.. 알고보니 일일 요청 횟수라는게 있었다.. 그래서 우선 하다 말았지만.. 리팩토링도 못하게 되었다.. 우선 부끄럽지만.. 대충 짠 코드다. ..
