이번 글을 통해 배워갈 내용 TypeScript와 함께 useReducer를 사용하는 방법 UseReducer 6가지 꿀 정보 1. useReducer Hook은 useState Hook과 비슷한 성질을 가집니다. 2. 필요시 initFunction 도 받아서 쓸 수 있습니다. const [state, dispatch] = useReducer(reducer, initialState) const [state, dispatch] = useReducer(reducer, initialState initFunction) 3. useReducer Hook은 reducer, initialState을 인자로 받습니다. reducer 함수는 state의 로직을 포함하고 initialState 말 그대로 초기 상태입니다...
이번 글을 통해 배워갈 내용 json-server Invoke-WebRequest문제를 해결하는 한 가지 방법 백엔드 서버를 프론트에서 간편하게 테스트해보고 싶은 경우 json-server를 많이들 애용합니다. npm install -g json-server 으로 설치 후에 json-server --watch json-server/db.json --port 3001 으로 json 서버를 포트 3001에 시작하고 디비 파일을 만든 다음 디비에 값을 넣는 경우 아래와 같이 "Invoke-WebRequest : 'Headers' 매개 변수를 바인딩할 수 없습니다. "System.String" 유형의 "Content-Type: application/json" 값을 "System.Collections.IDicti..
리액트에서 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기 Handle multiple checkbox components in React 이번 글을 통해 배워갈 내용 ( What you will learn) 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기 ( Handle multiple checkbox components in React) 출력될 화면은 아래와 같습니다. (below screenshot will be shown if you git clone my project below) 아래의 시점이 해당 스터디에 시작지점입니다. below git shows checkbox before the start of study https://github.com/songk1992/react-examples..
이번 글을 통해 배워갈 내용 자바스크립트 없이 카드를 뒤집는 방법을 배워보겠습니다. 아래와 같은 card flipping을 구현해보겠습니다. 리액트와 module.css를 사용하였지만 html과 css만을 사용하였기 때문에 조금 바꿔서 다른 라이브러리를 쓰셔도 무방합니다. body는 아래와 같이 정의했습니다 * { box-sizing: border-box !important; } body{ margin: 0; padding: 0; background: #c4c3ad; height: 100vh; display: flex; justify-content: center; align-items: center; } 그리고 card.module.css는 아래와 같이 정의했습니다 .card { width: 300px;..
이번 글을 통해 배워갈 내용 리액트 함수의 인자 값에 숫자 리액트에서 함수 인자 타입 확인하기 메시지를 보내는 함수가 있다고 합니다. sendMessage('kimc', 'hello@test.com', '2A@DAVBSE') 위와 같이 인자의 수가 3개 이상이고 메시지 보내는 것 같은데 직관적이지 않은 코드를 쓰는 건 다른 개발자들이 코드를 이해하는데 불편하게 되고 결국 유지보수가 힘들게 합니다. 반면 아래 코드는 어떨까요? sendMessage(user) 유저 정보 메시지를 보내는 함수라는 게 명확합니다. 따라서 김 씨는 인자를 하나 쓰는 것을 좋아합니다. 김 씨의 꿀팁을 대방출합니다. 김 씨는 유저 객체처럼 객체를 만드는 것을 좋아합니다. class User { constructor(userData)..
이번 글을 통해 배워갈 내용 V8 엔진 Garbage Collection(GC) v8 Minor GC (Scavenger) v8 Major GC (full mark-compact) V8 엔진 V8은 Chrome 및 Node.js 등에서 사용되는 Google의 오픈 소스 고성능 JavaScript 및 WebAssembly 엔진이며 C++로 작성되었습니다. Garbage Collection(GC) Gabage Collection은 동적으로 할당된 메모리가 필요 없게 되었을 때 정리해주는 기능입니다. 유효하지 않은 포인터, 이중 해제, 메모리 누수 등을 막는데 도움이 되나 어떤 메모리를 해제할지 결정하는데 비용이 들며 할당된 메모리가 해제되는 시점을 찾기가 힘듭니다. V8 엔진은 크게 두 가지 GC를 가지고 ..
이번 글을 통해 배워갈 내용 HTML tag 안에 data- prefix로 시작하는 attribute 저장하기 일반적으로는 자바스크립트 안에 데이터를 저장해서 쓰지만 혹시 HTML 안에 데이터를 저장하고 불러오는 경우가 간혹 있을 수 있습니다. 이때는 자바스크립트보다는 속도가 떨어지지만 HTML 태그 안에 "data-" 로 시작하는 속성 값을 아래와 같이 작성해주고
이번 글을 통해 배워갈 내용 Azure Functions 설명 Azure Functions 로컬 설치 Azure Functions 로컬 Template 실행 1. Azure Functions 설명 Azure Functions는 Microsoft Azure에서 제공하는 클라우드 서비스로서 Serverless Computing을 제공합니다. 이를 통해 사용자는 데이터 베이스에 반응하는 웹 API를 구축하거나 Iot 스트림을 처리하거나나 메시지 대기열을 관리하는 등의 작업을 할 수 있습니다. https://youtu.be/8-jz5f_JyEQ 간단하게 풀어서 설명하자면 "Run code on Demand" 필요할 때만 코드를 실행하는 기능이라고 생각하시면 됩니다. 실제로 Azure Functions의 요금제 ..
