React + express(node.js) + Docker 프로젝트 AWS EC2 배포 후기 | Web IDE 구축하기 - 5 요 근래 제가 백수기간에 만들었던 프로젝트들을 하나씩 배포하고 있습니다myCafe Map service 같은 경우에는 vercel로 배포하면서 어려움이 크게 없었습니다(오히려 너무 쉬워서 당황했을 정도)근데 이번에 web-ide 플젝을 배포하려면서 엄청 고난과 역경을 겪었습니다이번 포스팅에 배포법을 설명하지 않습니다배포법이 복잡하고, 다른 블로그 글에 설명이 잘 되어있어서..건너뛰고 마주쳤던 이슈들만 다뤄보려고 합니다 프로젝트의 핵심 기능제 프로젝트는 단순 CRUD가 아닌, 조금은 특이한 경우라고 생각합니다(난이도가 마냥 높은건 아니지만 주니어가 하기엔 어려울 수 있다고 생각합니다)클라이언트 - React (CRA)서버 - express.js (Node.js)그 외 핵심 - Docker, Socket... Remix.js V2 살펴보기 | Map Service 구축하기 - 1 전회사에서 사내 어드민 프로젝트로 Remix.js + React-query 환경에 작업을 했었습니다 그때 처음 알게 된 Remix.js는 좀 독특하다고 느껴졌었는데요 이번에 토이 프로젝트로 Remix.js로 풀스택 개발을 해보자고 결심했습니다 근데 웬걸... 버전 2가 나왔더라고요? 또한 Remix.js를 온전히 써보려고 하니 생각보다 제가 Remix.js 생태계 자체를 잘 이해한 건 아니구나 라는 생각이 들었습니다 이번 글에서는 Remix.js를 써보면서 신기하다고 생각했던 점을 쭈욱 써볼까 합니다 파일 시스템 규칙 Remix.js는 React Router 위에 구축이 되었다고 합니다 그래서 React Router 가 기본으로 내장되어있고, 우린 Nested Routes를 구성할 수 있습니다 V1에서는.. Javascript 코드를 서버에서 안전하게 실행시키는 방법 (feat. isolated-vm) | Web IDE 구축하기 - 1 사용자에게 받은 코드를 서버단에서 어떻게 실행시켜야 할까? 제가 이번에 개발하려는 Web IDE는 React + Node.js 환경으로 구축하려고 합니다 가장 먼저 Javascript 환경인 만큼, Javascript 코드를 클라이언트에게 받아서 서버에 어떻게 실행시켜야 할까요? eval() 함수 또는 new Function이 가장 먼저 떠오를 수 있을 겁니다 하지만 이 함수들은 절대로 사용합니다 보안상의 큰 문제를 야기시키기 때문입니다 그럼 어떻게 안전한 환경에서 코드를 실행시킬 수 있을까요? 개인적으론 그다음에 떠오른 생각이 좋~은 인터프리터가 있지 않을까? 였는데요ㅋㅎ... 당연 없습니다... 허허 일단 가장 먼저 가상환경(가상머신)에서 코드를 실행시켜야 합니다 그리고 안전성이 보장된 샌드박스 환경.. React Query 사용기 안녕하세요! 오늘은 제가 실무에서 쓰고 있는 react-query에 대해 글을 써볼까 합니다 지금 실무에서 쓰고는 있지만 늘 같은 형태로만 쓰고 있고, 아무것도 모른 상태에서 다른 동료가 작성한 코드를 토대로만 공부(?) 했기 때문에 모자른 부분이 굉장히 많아서... 공부 겸 내용 정리를 해보려고 합니다 블로그 글 중에 react-query에 대해 잘 정리해주신 분이 계셔서 링크 남깁니다 https://maxkim-j.github.io/posts/react-query-preview React-Query 살펴보기 React의 Server State 관리 라이브러리 React Query를 살펴봅니다. maxkim-j.github.io 1. react-query와 redux 차이점 사실 저는 redux만 알고.. React Hook Form | 내가 실무에서 쓰는 법 안녕하세요. 오늘은 정말! 유용한 라이브러리 React Hook Form에 관해 기본적인 내용들을 정리해보려고 합니다 이젠.. 이거 없으면 개발하기 정말 귀찮을 정도로... 너무 유용한 라이브러리입니다 거의 리액트 개발에선 필수가 아닐까 싶을정도! 공홈 자체에서도 한국어를 지원해주고 있지만 필드가 많아지거나 하면 복잡해지는게 꽤나 있더라고요 그래서 제가 실무에서 써먹던 방법도 담아볼까합니다 공홈의 있는 모든 내용들을 다루진 않고 제가 실무에서 썼던 API 위주로 설명하겠습니다 1. React Hook Form 이란? 폼, 양식을 만들때 사용하는 라이브러리 해당 라이브러를 사용하지 않더라면? import React, { useState } from 'react'; const InputSample = () .. React | Hook 정리 + 18 버전 새로운 Hook 안녕하세요. 오랜만에 블로그에 글을 써보네요! 제가 개인 노션에서 계속 써왔던 내용들을 차근차근 블로그로 옮겨볼까 합니다. 그 중 예~전에 열심히 정리했던 react hook에 관한 내용부터 쓰려고해요 근데 저도 글을 정리하면서 검색해보니.. 새로운 hook들이 나왔더라고요! 저도 맨날 쓰던것만 쓰다보니 새로운 hook을 알아본다거나 쓸 일은 없었는데, 이 참에 저도 새로운 hook을 알아보고 기회가 될때마다 써보려고 합니다 혹시 내용이 틀리다면 댓글 부탁드립니다 (전에 써둔 내용이라 틀린 부분도 있을 듯 해요🙄) 1. 앞서 알고있어야 할 것들 1-1. 리액트가 마운트 시에 하는 작업들 props로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청(REST API 등) 라이브러리 사용 (D3, V.. react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법) 불과 몇 달전만 해도 문제없이 잘 쓰고 있었던 react-router-dom 리액트 공부를 다시 시작하면서 router 파트를 복습삼아 진행했는데 분명 그대로! 평소에 썼던거처럼 작성했는데 에러가 뜨는거다! 보니까 그 사이에 v6으로 업데이트 되었던 것... 생각보다 너무나도 많은게 달라져서 기록해보려고 합니다 1. Switch -> Routes 네이밍 변경 여러개를 감싸는 부모 컴포넌트 네이밍이 변경됨 Switch란? 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜줌 (아무것도 일치하지 않으면 Not Found 페이지를 구현할 수 있었다) // v5 // v6 2. exact 옵션 삭제 기존에 루트 ('/') 페이지 같은 경우 모든 페이지들이 다 불러오는 현상이 있었는데.. 로그인 시 header에 Authorization이 안 뜨는 현상 | React, JWT, Spring Boot 오늘은 이번 사이드 프로젝트에서 동료랑 오지게 삽질한........ 에러에 대해 기록하려고 합니다 문제를 궁극적으로 해결했다기 보다는 결국 조금 수정해서 다른 방식으로 우회(?) 했습니다 혹시... 제 코드를 보고 제가 잘 못 알았거나 이유를 아신다거나 하면 설명 부탁드립니다😅 1. 로그인 방식 React 로그인이라고 검색하면 상위에 뜨는 벨로그 게시물입니다 https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0 🍪 프론트에서 안전하게 로그인 처리하.. 🏃♀️React 컴포넌트 | LifeCycle (라이프 사이클, 생명주기 메서드) 안녕하세요 오늘은 리액트의 클래스형 컴포넌트에서만 사용할 수 있는 LifeCycle에대해 내용을 정리하려고 합니다 벨로퍼트님 강의를 토대로 제가 여기저기 살을 덧붙혀서 작성을 하려고 합니다! 1. React LifeCycle란? React에서 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며 이 메서드를 오버라이딩(상속하여 재정의)하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다 출처:https://ko.reactjs.org/docs/react-component.html 💥 여러분! 이 LifeCycle은 클래스형 컴포넌트에만 해당되는 내용입니다! (사실 저는 헷갈리는게 어디서는 LifeCycle API라고 하고 어디서는 LifeCycle Method라고 하고.. 어디는 LifeCycle Even.. 이전 1 다음
