드리프트의 코-자-경(코딩, 자동차, 경제)

자바스크립트 Execution Context, Synchronous Single Thread Language 안녕하세요? 오늘은 자바스크립트를 처음 배울 때 한 번쯤은 배우고 지나가면 큰 도움이 될만한 기초 개념을 알아볼 예정인데요. 바로 자바스크립트가 작동하는 방식, 작동 원리에 대해 간단히 알아보겠습니다. 자바스크립트를 가장 잘 표현한 영어 문구는 위와 같이 "동기식 싱글 스레드 언어(Synchronous Single-Threaded Language)"가 아닐까 싶은데요. 동기식이란 현재의 명령어가 실행 완료가 다돼야 다음 행으로 이동한다는 뜻이며, 동기식이란 말은 특정 순서에 의해 한번에 하나의 명령어만 수행한다는 뜻입니다. 지금은 자바스크립트로 비동기식 프로그래밍이 유명한데 무슨 말씀이냐고 하실 ..

안녕하세요? 오늘은 자바스크립트에서 가장 많이 쓰이는 객체인 배열의 연산 관련 함수인 map, filter, reduce에 대해 알아보겠습니다. React로 웹 프로그래밍할 때 가장 많이 쓰는 게 아마 map 함수 일 건 대요. 자바스크립트는 배열을 이용하여 쉽게 데이터를 가공할 수 있게 하는 헬퍼 유틸을 많이 가지고 있습니다. 위의 첫 그림을 보시면 find, findIndex, indexof 같은 함수는 딱 봐도 쉽게 이해할 수 있는데요. 오늘은 자바스크립트 코딩 초창기에 느꼈을 법한 map, filter, reduce에 대해 아주 쉽게 알아보겠습니다. Map 먼저, map 함수입니다. MDN에 나와있는 문법인데요. 읽어보면 너무 어렵습니다. map함수를 쉽게 이해하려면 예제를 들어서 이해하면 쉽습니..

Remix Framework, 리믹스 프레임워크, 한 화면에 네스티드 라우츠 구현하기, 한 화면에 Nested Routes 구현하기 한 화면에 Nested Routes 설정하기 이제 리믹스 프레임워크의 가장 강력한 기능인 Nested Routes에 대해 알아보겠습니다. 제목 그대로 한 화면에 Nested Routes를 만들 수 있는데요. 일단 지난 시간에 배웠던 글을 참고해서 이번 글을 쓰도록 하겠습니다. https://cpro95.tistory.com/680 Remix 프레임워크 Nested Routing 파헤치기 Remix Framework File-base Routing and Nested Routing ( 리믹스 프레임워크 파일 베이스 라우팅, 네스티드 중첩 라우팅) 안녕하세요? 오늘은 지난번에 ..

Visual Studio Code, Vim, VSCode Vim, NeoVim, NVim 안녕하세요? 프로그래머라면 자신만의 텍스트 에디터를 쓰고 계실텐데요. 그 텍스트 에디터 중에서 아마 가장 많이 쓰이는게 VSCode라고 생각합니다. 마이크로소프트가 대인배답게 Visual Studio 같은 텍스트 에디터를 무료로 개발해 주고 있어 너무 좋은데요. 그런데 그 이전에는 VIM을 능숙하게 써보고 싶은 욕구가 많았습니다. 왜냐하면 유투브에서 해외 유명 프로그래머들이 VIM을 아주 능숙하게 쓰면서 마우스에는 손을 안 갖다대는게 너무 부러웠거든요. 그래서 VIM에 대한 기초 교육을 끝내고 VSCode에서 VIM을 사용해볼까하고 VIM 확장프로그램을 설치했는데 한글 타이핑이 영 에러였습니다. 물론, 윈도우 시스템..

Remix framework useTransition, 리믹스 프레임워크 useTransition UI 개선 안녕하세요? 지난 시간에 작성한 다중 Form을 이용한 action 함수 사용하기 글에서 아쉬웠던 게 계속 생각이 나서 바로 다음 글을 쓸려고 합니다. 바로 UI 부분인데요. 노트를 생성하고 노트를 지울 때 화면에 아무것도 표시가 되지 않아 지금 제대로 작동하고 있는지 아니면 에러가 났는지 도저히 모르는 상태인데요. 리믹스에서는 useTransition 훅을 제공하고 있어 이 부분을 해결하는데 도움을 주고 있습니다. 먼저, 지난 시간에 잠깐 언급했던게 있는데 바로 아래 코드입니다. 지난 시간의 코드처럼 Form에 reloadDocument를 지정하면 input 창이 깨끗하게 비워지게 되는데요. 그..

Remix Framework multiple form, 리믹스 프레임워크 다중 form의 action 함수 처리하기 안녕하세요? 지난 시간에 리믹스의 서버사이드 처리 함수인 action 함수에 대해 자세히 살펴봤는데요. 오늘은 한 페이지에서 action 함수로 전달해야 할 데이터가 많을 경우에는 어떻게 하는지 알아보겠습니다. 리믹스에서는 서버사이드 함수로 데이터를 보낼 때 action 함수를 지정해서 사용한다고 했고, 그 방식은 PHP 시절 쓰던 form-submit 방식인데, 만약 보내야 할 데이터가 여러 form에 걸쳐 있을 경우 action 함수에서 어떻게 처리하는지 쉽게 생각이 나지 않는데요. 지난 시간에 배웠던 Post 생성과 관련하여 오늘은 Note라는 DB를 새로 만들어서 알아보겠습니다. 먼..

Remix framework action function, 리믹스 프레임워크 action 함수 자세히 알아보기 안녕하세요? 지난 시간까지 배웠던 Remix 프레임워크의 서버사이드 담당 함수인 loader와 action 중에서 오늘은 action 함수를 좀 더 자세히 알아볼까 합니다. 지난 시간에 배웠던 loader, action 함수의 동작 방식을 복습해 보면, 1. 리액트 UI 부분의 form 엘러먼트에서 디폴트 옵션인 method="get" 상태에서 form을 submit 했고, 2. form을 submit 하면 브라우저는 자동으로 새로고침 하는데, 이때 form의 method가 "get"이기 때문에 input 엘레먼트의 name 부분이 현재 URL의 Params으로 추가되면서, 3. 새로고침 된 브..

Remix Framework loader, action Function, 리믹스 프레임워크 서버사이드 loader, action 함수 안녕하세요? 지난 시간에 배웠던 리믹스 프레임워크의 다이내믹 라우팅에 더해서 오늘 시간에 배울 부분은 리믹스 프레임워크의 가장 강력하고 편리한 기능이라고 할 수 있는 loader, action 함수입니다. loader, action 함수는 NextJS를 이용해서 취미용 프로젝트를 많이 만들었던 저로서는 리믹스 프레임웍의 서버사이드 함수의 간결하면서 편리한 형식에 감탄을 금치 못했는데요. 이제 본론에 들어가 보도록 하겠습니다. 먼저, NextJS에서의 서버사이드 코딩인데요. 예를 들어 보겠습니다. import { useState, useEffect } from "react"..

Remix Framework Dynamic Routing, 리믹스 프레임워크 다이내믹 라우팅 안녕하세요? 이번 시간에는 Remix 프레임워크의 다이내믹 라우팅에 대해 살펴보겠습니다. 지난 시간까지 배운 Nested Routing에 더해서 웹 앱에서는 라우팅으로 정보를 교환해야 할 때가 있습니다. 예를 들어 페이지 넘버나, 제품 ID, 포스트 목록 번호가 대표적이죠. Next.JS에서는 어떻게 했는지 비교해서 살펴보는 것도 좋을 듯싶습니다. 먼저, Next.JS의 예를 살펴보겠습니다. 아래 예를 보시면 prisma를 이용해서 id에 해당하는 포스트를 얻는 함수인데요. /post/[id]. tsx export const getServerSideProps: GetServerSideProps = async ({..

Remix Framework File-base Routing and Nested Routing ( 리믹스 프레임워크 파일 베이스 라우팅, 네스티드 중첩 라우팅) 안녕하세요? 오늘은 지난번에 간단하게 알아봤던 Remix 프레임워크에 대해 좀 더 심도 있게 들어가 보도록 하겠습니다. NextJS가 처음 나왔을 때 리액트쪽에서는 굉장한 반향이 일어났었는데요. 바로 NextJS의 파일 베이스 라우팅이 그 주인공이었습니다. 물론 Static Site Generating과 Server Side Rendering도 중요한 기능이었지만요. 일반적으로 리액트 라우터를 쓰는 SPA 수준의 리액트에서는 라우팅 하는데 꾀나 고달팠는데요. NextJS의 파일 베이스 라우팅의 소개로 그 수고스러움이 싹 사라졌다고 생각합니다. 리..