들어가며 프로젝트를 진행하다 보니 이제는 기본적인 UI작업을 끝내고 실질적인 기능구현이 필요한 차례가 되었다. 가장 기본적으로 로그인을 구현해야 하는데 폼 요소를 컨트롤 하는 것에서 막히고 말았다. React에서는 사용자 입력값을 관리하기 위해서 useState를 줄줄이 만들어야 하기 때문에 이전에 써본 react-hook-form을 냅다 설치하긴 했는데 지금 프로젝트에는 MUI와 TypeScript를 사용하고 있고 TextField를 스타일링 해서 공통 컴포넌트로 빼버렸기 때문에 Props로 어떻게 주고 받을지,,, 특히 MUI에서 제공하는 Props가 있고 react-hook-form을 쓰면 거기서 필요한 Props가 있을텐데 이걸 어떻게 관리해야 좋을지 고민이 많이 되었다. 그러다가 정말 친절한 포..

최종 후원 금액이 올라감. https://unho94.tistory.com/242 [React] 숫자 증가 애니메이션 만들기 (with. TypeScript) 여러 웹 서비스를 이용하다 보면 숫자를 강조하는 방법 중 하나로 숫자가 빠르게 올라가는 애니메이션을 확인할 수 있습니다. 리액트를 이용하여 어떻게 구현할지에 대해 작성해보도록 하겠습 unho94.tistory.com https://namhandong.tistory.com/93 React | number count 기능 구현하기 , onScroll 스크롤에 따라 animation 실행 먼저 react-spring을 사용해서 숫자 Count 애니메이션을 구현할 것이다. react-spring은 React에서 여러 애니메이션을 구현하기 위해 사용하는 애..

Intro 자동 배포를 공부하니 정말 알아야 할 것들이 산더미다. 그중에서도 핵심적인 부분이 프로젝트를 JAR 파일로 빌드하여 이미지로 생성하고, 그것을 가상의 컴퓨터에서 실행시키는 것인데, 자동 배포를 구글링을 하여 어찌어찌 성공했으나 이미지 빌드로 Jib 라이브러리를 사용하니 그 과정에 대한 부분은 전혀 모른 채 사용하게 됐다. 어차피 회사마다 CI/CD의 의미가 다르다고 하니 도커 이미지 빌드 과정도 배울 겸 오늘은 dockerfile에 대해서 글을 써보고자 한다. Dockerfile 이란? Dockerfile이란 도커 이미지를 만들기 위한 스크립트 파일이다. 내부에는 도커 이미지를 만들기 위한 명령어들이 순서대로 기술되어 있다. Dockerfile을 이용하지 않고 도커 이미지를 만들 수 있는 방법..

Automatic Batching이란 무엇일까? [[React]] 18에서 나온 새로운 기능, Automatic Batching에 대한 문서이다 여기서 Batching이란, 이벤트 핸들러나 hooks 안에서 상태 업데이트를 묶어서 동작하도록 만들어준다. 즉, 렌더링을 한 번만 일어나도록 해주는 것이다 따라서 Automatic Batching = 자동화된 일괄 렌더링 이라고 생각할 수 있다 사실 생각해보면 이상하다. 기존의 함수 내부에서 여러 setState()를 실행시키면 이미 Batching이 이루어졌을까? 그 이유는 React에는 여러 번의 state update 작업을 Queue에 몰아넣고 일정 주기마다 Queue에 등록된 작업을 순차적으로 일괄 시행하면서 불필요한 리렌더링을 방지하는 특징이 있기..

1. Flutter SDK 설치하기 https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems. docs.flutter.dev C드라이브에 압축 풀기. 2. Flutter 환경변수 설정하기 ‘환경’으로 검색 ‘환경변수’ 클릭 Path – 편집 클릭 찾아보기 클릭 C:\flutter\bin 찾아서 클릭하고 확인 맨위에 환경변수가 잘 등록되었으면 연이어 확인클릭하고 환경변수 등록 완료! 3. 안드로이드 스튜디오 설치 https://developer.android.com/stud..

https://developerjjh.tistory.com/197 (DevOps) Jenkins 설치 및 환경설정(Local) https://developerjjh.tistory.com/196 (DevOps) CI/CD란 ? CI/CD CI/CD란 무엇인가 (Feat. DevOps 엔지니어) 안녕하세요. 개발자의 용어를 쉽고 명확하게 설명해드리는 개발자 김모씨입니다. CI/CD ?! 개발자로 밥먹고 developerjjh.tistory.com 우리는 이미 Local환경에서 Jenkins를 설치해서 과정을 조금은 익숙해졌다!! 한걸음 나아가서 AWS EC2 인스턴스를 생성하여 Jenkins를 실행하고 이후 gitHub에 webhook이라는 기능을 통해서 연동을 시켜보려고 한다! AWS 연동 Jenkins를..

// 페이지(컴포넌트) 임포트 import Home from “./public/pages/Home.js”; import Design from “./public/pages/Design.js”; import Board from “./public/pages/Board.js”; import Submit from “./public/pages/Submit.js”; // 경로 문자열을 정규 표현식으로 변환하는 함수 const pathToRegex = path => new RegExp(“^” + path.replace(/\//g, “\\/”).replace(/:\w+/g, “(.+)”) + “$”); // 매개변수와 일치하는 값을 추출하는 함수 const getParams = match => { const values..

오늘은 기본적인 용어에 대해서 간략하게 살펴보도록 하겠습니다. 1. 컴파일러 (위키백과에 따르면) 컴파일은 고급 프로그래밍 언어를 실행 프로그램으로 만들기 위해 저급 프로그래밍 언어로 변환하는 과정을 의미합니다. 컴파일러는 개발자가 작성한 소스 코드를 컴퓨터가 수행하기 위한 코드로 변환해주는 일종의 툴 입니다. 대표적으로 자바 컴파일러를 예로 들 수 있습니다. 이때 고급/저급 언어는 아래와 같이 이해하시면 됩니다. 고급언어 : 사람이 이해하고 작성하기 쉽게 만들어진 언어로, 개발자들의 소스 코드가 이에 해당되고요. (C/C++언어) 저급언어 : 컴퓨터가 이해하고 실제 동작을 수행하기 위한 언어로, 작성된 소스 코드가 변환되어야 합니다. (0, 1 조합의 기계어) 특징으로는 컴파일 단계를 반드시 거쳐야하며..

리버스 프록시란? 클라이언트 요청을 대신 받아 내부 서버로 전달해주는 것을 리버스 프록시(Reverse Proxy) 라고 한다. 그렇다면 프록시란? 프록시란 대리라는 의미로, 정보를 대신 전달해주는 주체라고 생각하면 되는데, 만약 이 프록시 없이 웹 서버를 운영한다고 가정해보자. localhost:3000 라고 하는 웹서버를 열어서 운영했을 때, 사용자가 갑자기 많아지거나, 웹서버가 그대로 노출되어 있기 때문에 보안적으로 위험성이 증가한다. nginx를 사용하면 로드 밸런싱으로 부하를 줄여줄 수 있고, 분산 처리 또한 가능하며 웹서버의 SSL 인증도 적용할 수 있다. (SSL이란?) 따라서 아래와 같이 사용자 -> nginx -> 웹서버로 구성해서 사용자의 요청을 nginx가 대신 웹서버로 전달해주도록 ..

=============================================1: 지도 서비스와 관련된 기술들을 소개하는 글입니다. 글에서는 지도 오버레이, 행정구역 코드, 마커 클러스터링, 지도 SDK의 사용법 등을 설명합니다. 또한, 다양한 지도 기능을 최적화하기 위한 방법 등을 다루고 있습니다. 네이버 지도 SDK의 특징과 활용법, 그리고 지리 정보와 관련된 다양한 기능들에 대해 알아봅니다.키워드: 지도 오버레이, 행정구역 코드, 마커 클러스터링, 네이버 지도 SDK, 지리 정보출처: https://ravenkim97.tistory.com/482 [Google I/O GDG] 웹 4 – 위치 및 지리 정보의 모든것지도각종 오버레이 두개의 지검의 길이,  반경을 보고 겹치는 부분을 확인클러스트링 ..