개발자가 되고싶은 개린이의 공부일지

React-Hook-Form

라이브러리 없이 제어 컴포넌트로 폼(form)을 다루기 위해서는 하나 하나당 state를 선언해주고, 해당 state를 다루기 위해 그에 맞는 핸들링 함수를 만들어야 하고 검증을 위한 함수나 에러를 뱉어내는 코드 등 유효성 검증이 추가 될 때마다 코드는 더 더욱 길어집니다. 코드 길이 뿐만 아니라 랜더링 측면에서도 하나의 값이 변할때 마다 여러개의 자식 컴포넌트가 리랜더링이 발생하여 불필요한 리랜더링이 일어날 수도 있습니다. 이 불필요한 리랜더링을 막고 성능 최적화와 간편한 폼(form) 관리를 목표로 나온 라이브러리가 비제어 컴포넌트 방식을 활요한 React-Hook-Form 라이브러리 입니다. React-Hook-Form 이란?React 애플리케이션에서 폼 관리를 간편하고 효율적으로 할 수 있게 해주..

Redux / Redux Toolkit(RTK) 란?

Redux란리액트 애플리케이션에서 상태 관리(State Management)를 효율적으로 하기 위한 상태관리 라이브러리입니다. Redux 핵심 : Store + Reducer + Action  전역 상태를 보관하는 Store 저장소: Private 필드 전역 상태를 제공하는 Provider: 어떤 범주에 제공할지 지정 ( 일반적으로 전 영역에 적용하나 특정 영역에도 적용 가능) 전역 상태를 조회하는 Selector : 전역 상태에 대한 접근, Getter 전역 상태를 조작하는 Reducer : Store 내 상태 변경, SetterReducer 호출을 위한 Action : Reducer ParameterAction = Type(타입 속성) + Payload(데이터)Dispatch : Reducer 를 A..

Web Server , Web Application Server

웹 서버(WS) : 정적 웹 리소스 반환미리 만들어진 웹 페이지를 단순히 사용자의 요청에 따라 반환하기 때문에 정적 웹 페이지라고 합니다. 만약 문서의 양이 많아져서 웹 서버의 용량이 많이 필요해지면 어떡할까요?만약 유저 정보페이지처럼 템플릿에 일부 정보만 변경된다면 어떡할까요?ex) 1000명의 유저 정보 페이지가 있으면 정적 웹 페이지가 1000개가 만들어지기 때문에 웹 서버의 용량도 많이 필요해지게 됩니다. 그래서 반복되는 템플릿(View)과 유저 정보(data)를 분리하여 웹 페이지 1개에, 1000명의 유저 정보는 데이터 베이스에 저장하여 동적으로 처리를 하기위해 WAS가 등장하였습니다. 웹 애플리케이션 서버(WAS) : 정적 + 동적 웹 리소스 반환웹 서버는 미리 만들어진 것을 반환했다면 WA..

웹 검색 엔진 SEO와 웹 페이지 렌더링 방식(SSG, SSR, CSR)

검색엔진 만약 모든 웹 서버의 페이지 정보들에 접근(조회)하고 싶다면 모든 웹 서버의 도메인 네임(IP 주소)를 통해 직접 일일히 웹 페이지 정보들에 접근을 해야하는것인가? 물론 가능은 합니다. 그치만 모든 웹서버의 IP 주소를 알아내는 것은 어렵고 번거롭고 모든 웹 서버에 일일이 요청을 보내야하므로 수많은 요청을 처리해야하는 까다로움이 있습니다. 이런 문제점을 해결하기 위해 검색 엔진 서비스가 등장하였습니다. => 무언가 나 대신 모든 웹 서버의 웹 페이지들을 미리 다 찾아놓고, 분류 및 정리한 뒤에 검색어에 따라 그에 적합한 웹 페이지들만 골라 전달해준다. 무언가 = 구글, 네이버, 다음과 같은 서비스 : 검색 엔진다 찾아놓기 = 웹 크롤링 : 세계 모든 웹 서버의 웹 페이지 정보 수집 (봇)분류 및..

웹의 본질과 등장, DNS

웹의 본질웹의 본질은 클라이언트가(웹 브라우저)가 요청(Request)을 주고 웹 서버가 그에 맞는 결과(Response)를 받는 그 사이의 모든 것을 의미합니다.요청 - 반환의 주체는 웹 브라우저, 웹 서버로 구성되어있습니다. 요청 - 반환 방법에는 REST API와 GraphQL이 있는데 이것들은 밑에서 자세히 알아보도록 하겠습니다. 웹 브라우저와 서버간의 요청과 반환은 일반적으로 우리가 생각하는 프론트엔드와 백엔드 사이의 데이터나 웹 페이지 교환이라고 볼 수 있습니다. 또, 웹 서버 개수에 따라 Monolithic(단일)인지 MSA(다중)인지 나뉘어 집니다. Monolithic 모놀리딕 : 단일 웹 서버로 다수 서비스 제공하나의 서버가 모든 서비스를 관리하고 지휘합니다.한쪽 서비스가 문제가 생기면 ..

JAVA 동작원리

Java 코드 실행 과정JavaScript,Python 같은 언어들은 스크립트 언어로 이런 언어들은 컴파일 과정없이 기계어로 번역되는 즉시 동작을 합니다. 하지만 Java나 C, C++ 같은 언어들은 컴파일 언어이며 실행되기 위해서는 반드시 컴파일 과정을 거쳐야 합니다. 그림을 보면서 Java 코드 실행 과정을 보겠습니다. 1. 개발자가 자바코드를 작성합니다 .2. java 파일을 자바 컴파일러(javac)를 통해 바이트 코드로 컴파일을 합니다.3. 컴파일된 바이트 코드를 JVM 내부에서 Class Loader, Runtime DataArea, Execution Engine의 단계를 거쳐 바이트코드를 기계어로 변환합니다. (JVM에 내용은 밑에서 좀 더 자세히 설명)  JVM(Java V..

함수형 프로그래밍 패러다임

함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해줍니다. 일급함수 일급함수는 함수가 변수에 할당할 수 있고, 다른 함수의 인자로 들어갈 수 있고, 함수를 반환할 수 있다는 특징을 가지고 있습니다. 함수를 변수 할당 var expression = function(){ console.log('hello') } expression() 함수를 다른 함수의 인자로 들어감 var array = [1, 2, 3, 4] var parameter = (element) =>{ return element * 10 } var calcarray = array.map(parameter) console.log(calc..

JavaScript 엔진과 수행방식

자바스크립트 런타임 자바스크립트 런타임은 자바스크립트코드가 실행되는 환경으로, 자바스크립트 엔진(언어를 실행하는 것)에 API(언어가 필요로하는 주변부들)를 합친것입니다. 자바스크립트는 웹 브라우저(프론트)에서만 쓰이는게 아니라 웹 서버(백엔드)에서도 쓰입니다. 웹 브라우저(예 : Chrome) = V8 자바스크립트 엔진 + Web APIs 웹 서버(예 : Node.js) = V8 자바스크립트 엔진 + Node APIs + LIBUV(비동기 I/O) 자바스크립트 엔진 싱글 스레드 Stack + Heap(메모리 영역) stack : 함수 호출에 필요한 영역을 마련해주는 것 heap : 변수, 객체, 함수 들을 적재해주는 것 자바스크립트 엔진에서 비동기 지원 자바스크립트는 싱글 스레드이기때문에 비동기적으로 ..