김기지의 코딩노트

💛 Form vs fetcher Remix에서 개발하면 때로는 기능성에서 중복되어 신규 사용자에게 모호함을 줄 수 있는 풍부한 도구 세트가 제공된다. Remix의 효과적인 개발의 핵심은 각 도구의 뉘앙스와 적절한 사용 사례를 이해하는 것이다. - 중점을 두고 있는 API ▪︎ fetch를 통해 action에 데이터를 제출하고, 기본 HTML 형식 이상의 향상된 유저 인터페이스를 활성화하는 useNavigation에서 보류 상태를 활성화하는 점직적으로 향상된 HTML이다. form의 action이 완료된후, 페이지의 모든 데이터는 데이터와의 동기화에서 UI를 유지하기 위해 서버에서 자동으로 재검증된다. API로부터 HTML을 사용하기 때문에, 서버는 javaScript가 로드되기 전에 기본 수준에서 대화식..

💛 풀스택 데이터 흐름 Remix의 주요 기능 중 하나는 UI를 영구 서버 상태와 자동으로 동기화하는 방식이다. 이는 세 단계로 진행된다. Route loader는 UI에 데이터를 제공한다. 지속 상태를 업데이트하는 작업을 라우팅하기 위해 post 데이터를 형성한다. 페이지의 loader 데이터가 자동으로 재검증된다. - Route 모듈 내보내기 사용자 계정 편집 경로를 예시로 들어보자. 경로 모듈에는 작성하고 설명할 세 가지 내보내기가 있다. // routes/account.tsx export async function loader() { // provides data to the component } export default function Component() { // renders the UI ..

⇩ (주절주절) 더보기 작년 첫 번째 팀 프로젝트 이후 개인 프로젝트만 줄곧 해왔던 내가 두 번째 팀 프로젝트에 참여하게 되었다...! 첫 대면 회의에서 어떤 프레임워크를 사용할지에 얘기하다가 팀원분이 추천한 Remix!! React, Next만 알던 내게 Remix의 등장이라... Remix를 파헤져보자!! 🩵 Remix SSR만을 지원하는 풀스택 웹 개발 프레임워크 Web Fetch API를 기반으로 구축되어 Node.js가 아닌 환경에서도 실행할 수 있다. 1. Remix 주요기능 React Router를 기반으로 구축된 Remix는 네 가지 기능을 제공한다. 컴파일러 서버 사이드 HTTP 핸들러 서버 프레임워크 브라우저 프레임워크 - 컴파일러 Remix의 모든 것은 컴파일러로 시작된다! remix..

유투브를 보다가 코딩알려주는누나의 웹소켓 강의를 발견!! 마침 서버에 관심을 갖고 있던터라 바로 강의를 듣고 구현을 완료했다 👏👏👏👏👏 처음 node.js와 mongodb를 "제대로" 사용하는거라 중간에 node.js기초 강의도 듣고 mongodb를 사용하는 방법(예전에 배운것과 너무 달랐다..ㄷㄷ)도 제대로 알게된것 같다. https://www.youtube.com/watch?v=uE9Ncr6qInQ&t=0s 강의가 node.js에 대한 기초 지식을 어느정도 갖고있는 사람들을 위한 느낌이라 내가 구현하면서 추가로 진행한 부분을 정리하도록 하겠다. 🚀 웹 소켓 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 기술 웹 소켓 API를 통해 서버로 메세지를 보내고 서버의 응답을 위..

💚 Context 컴포넌트 트리를 통해 컴포넌트에 곧바로 데이터를 전달하는 방식 props를 사용하지 않아도 곧바로 데이터를 전달할 수 있어 코드가 깔끔해지고 데이터를 한곳에서 관리하므로 디버깅에 유리하다. 💡 언제 context를 사용하는게 좋을까? 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우 사용하는 것이 좋다. Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 context의 데이터를 읽을 수 있어 props를 사용하지 않고도 데이터에 접근할 수 있다. context를 사용하기 전에 고려할 점 context는 다양한 레벨에 걸쳐진 많은 컴포넌트에게 데이터를 전달하기 위한 용도로 컴포넌트와 context가 연동되면 재사용성이 떨어지게 된다. (컴포넌..

🪝 HOOK 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수가 실행되도록 정해진 함수 hook의 규칙 1. 무조건 최상위 레벨에서만 호출해야 한다. 반복문이나 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안된다. 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 hook이 호출되어야 하기 때문에 함수의 최상위 레벨에서 호출해야 한다. 이는 컴포넌트의 state를 올바르게 관리할 수 있어야 하기 때문! 2. 리액트 함수 컴포넌트에서만 hook을 호출해야 한다. hook은 리액트 함수 컴포넌트 또는 직접 만든 커스텀 훅에서만 호출이 가능하다. ☝️ hook의 이름은 모두 use로 시작한다. 커스텀훅의 경우 개발자 마음대로 이름을 지을 수 있지만 규칙에 따라 앞에 use를 ..

💜 React 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 SPA 방식을 사용해 복잡한 사이트를 쉽고 빠르게 만들고 관리할 수 있다. 더보기 라이브러리 vs 프레임워크 - 라이브러리 : 특정 프로그래밍 언어어세 자주 사용되는 기능을 모아 정리해 놓은 것 -> 제어 권한이 개발자에게 있음 - 프레임워크 : 애플리케이션의 구조를 정의하고 사용자 관리 등의 기능을 빠르고 쉽게 구현할 수 있도록 환경을 제공해 주는 것 -> 제어 권한이 프레임워크에 존재 React의 장점 1. 빠른 업데이트와 렌더링 속도 Virtual DOM을 사용해 DOM을 직접 수정하지 않고 업데이트해야할 최소한의 부분만 업데이트 한 후 렌더링한다. 따라서 변경된 내용을 빠르게 사용자에게 보여줄 수 있다. - Virtual DOM..

이력서 작성을 위해 그동안 묵혀둔 프로젝트를 배포하기 시작한 김기지쿤,,, 그러나 React로 Github에서 배포하기란 생각보다 만만치 않았는데,,,!!!! 프로젝트를 배포하는 방법 중 가장 간편한 방법인 Github에서 gh-pages로 배포하기를 도전해보았다!! 사실 저번 협업 프로젝트 연습에서도 같은 방법으로 배포를 했었지만 팀장님이 배포를 하셨기 때문에 그 때의 기억을 더듬어,,,차근차근,,,, gh-pages브랜치로 배포를 하기 전, main브랜치에서 페이지 생성을 미리 해주어야 한다. 더보기 레포지토리의 settings에 들어가 page에서 배포할 파일이 들어간 브랜치에서 page배포를 해준다!! 1. package.json파일 script에 predploy와 deploy를 추가한다. "pr..

◉ HTTP Hyper-Text Transfer Protocol 서버와 클라이언트가 메세지를 교환하기 위한 프로토콜 더보기 🔍 프로토콜 서로 다른 하드웨어 기기간의 데이터 동신 규약 즉, HTTP는 인터넷상의 커뮤니케이션에 시용되는 형식들 중 하나이다. 구글에 검색어를 입력할 시, URI를 보면 아래와같이 입력되어있다. https://www.google.com/search?q=http 이는 'www.google.com/search?q=http' 를 HTTPS형식으로 보낸다는 의미이다. ◉ HTTPS 기존의 HTTP에 Secure(보안)이 추가된 것 HTTPS는 기존의 HTTP보다 안전하다는 것을 의미한다. 어떤 부분에서 안전한걸까? 1. 사용자가 사이트에 보내는 정보들을 제 3자가 보지 못하게한다. 더보..

📍 window.localStorage localStorage속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 도와주는 속성이다. 로컬 저장소는 웹 브라우저에서 각 도메인에 대해 할당해주는 저장공간으로, 데이터를 영구적으로 보관할 수 있다. 데이터 보관시에는 데이터의 이름(key)과 데이터의 실제 값(value)을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용된다. 더보기 🔍 영구적으로 보관한다는 것은? 브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아있도록 할 수 있다는 것 💡 로컬 스토리지는 어디에서 확인할 수 있을까? 크롬의 경우 개발자도구의 application 하위 폴더에서 Local Storage를 확인할 수 있다. 📍 로컬 스토리지 사용법 로컬스토리지로부터..