기록하는 습관.

[Docker] React, 격리환경 구성과 핫 리로딩(hot reloding)

팀에서 Docker를 사용하면 운영체제와 상관없이 일관성있는 개발환경을 유지할 수 있습니다.이번 포스팅에서는 로컬 환경 React코드가 실시간으로 반영(핫리로드)되는 Docker 격리환경(빌드환경) 구성을 목표로 합니다.STEP 1. Dockerfile Docker는 Dockerfile을 기반으로 이미지를 생성하고, 이 이미지를 Docker 컨테이너로 실행하는 흐름을 갖습니다.** 하나의 도커 이미지로 여러 개의 도커 컨테이너를 만들 수 있고, 각각의 컨테이너는 독립적으로 실행됩니다.DockerfileFROM node:18# Set working directoryWORKDIR /app# Install dependenciesCOPY package*.json ./RUN npm install# Copy all..

React의 기본적인 데이터 전달 흐름은 부모 컴포넌트(상위 컴포넌트)에서 자식 컴포넌트(하위 컴포넌트)로 전달합니다. 계층적인 컴포넌트 구조가 있을 때, 가장 하위 레벨의 컴포넌트가 가장 상위 레벨의 컴포넌트의 데이터 값을 필요로 한다면 이 값을 중간 레벨의 컴포넌트들이 넘겨줘야합니다.이는 단순히 중간 레벨의 컴포넌트가 하위 레벨 컴포넌트로 넘겨주는 역할로만 사용된다면 코드의 복잡성을 증가시켜 차후의 유지보수가 어렵게 됩니다. 이를 보완하고자 사용할 수 있는 것이 Context API입니다.STEP 1. Context APISTEP 1-1. 사용이유 및 용도, 유의사항 Context를 사용하면 기존에 props로 데이터를 전달하는 방법이 아닌 useContext()로 전달받아 하위 컴포넌트에서 사용합..

STEP 1. List와 Key일상생활에서 우리가 사용하는 키로는 주민등록번호, 학번, 핸드폰 번호, 여권번호가 있습니다. 모두다 고유하다는 값의 특징을 가지고 있습니다. 하지만 고유하다는 범위가 “대한민국”으로 한정되어 있습니다. 이는 특정 범위에서 고유하다는 말입니다.리액트에서는 고유하다는 것(고유성)을 “key”로 나타내며 이는 고유한 문자열입니다. 리액트에서의 특정 범위는 “List” 입니다. List는 key를 가지며 이는 ⭐List에서 어떤 아이템의 변경, 추가, 제거의 구분을 위해 사용합니다. 즉, 서로 다른 List에서 key값이 같더라도 영향이 없음을 말합니다.List 내에서만 고유한 값이면 됩니다.STEP 1-2 예시코드코드는 키값으로 숫자의 값을 사용합니다. 현재는 numbers 값..

React에서 클래스형 컴포넌트를 학습하며 bind() 학습에 많은 시간이 들었습니다.bind()를 학습하며 해소한 어려움을 잊지 않기 위해 기록합니다.STEP 1. 클래스형 컴포넌트의 bind()class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true }; // 초기 상태 설정 // 이벤트 핸들러에서 `this`를 바인딩 this.handleClick = this.handleClick.bind(this); } handleClick() { // prevState를 사용해 상태를 업데이트 ..

Javascript를 학습하다보면 객체를 빼놓을 수 없습니다.저는 주로 Java를 주로 사용합니다. Java에서도 객체는 빠질 수 없는 개념이며 객체 기반으로 동작하게 됩니다.이는 객체 지향 프로그래밍을 가능하게 합니다. 즉, 만들어진 객체를 서로 상호작용하게 하여 프로그래밍을 동작할 수 있도록 해줍니다.Javascript의 메커니즘도 같습니다. 객체를 만들어 여러 곳에서 사용할 수 있게 합니다. 하지만 Javascript는 proto type 기반 언어라고 이야기하는데 객체와 더불어 클래스를 이해하고 Java와 Javascript의 차이에 대해 정리하겠습니다. (호이스팅에 대해서는 다루지 않습니다.)STEP 1. 객체STEP 1-1. Java의 객체public class Person { priv..

React 학습을 통해 프로젝트를 만들려고 합니다.학습을 하며 useEffect()를 이해하는데 큰 어려움이 있었습니다.기록을 통해 학습한 내용을 잊지 않기 위해 작성합니다.useEffect()STEP 1. "useEffect는 Side effect를 분리하기 위해 사용한다." useEffect는 Side effect를 작업을 분리하기 위해 사용합니다. Side effect는 컴포넌트의 렌더링 과정 외부에서 발생하는 작업입니다. 대표적으로 API 호출(데이터를 가져오거나 보내는 작업), DOM(React 외부에서 DOM을 직접 변경하는 작업), 타이머 작업(setInterval, setTimeout을 사용하는 작업), 구독 설정 (이벤트 리스너를 등록하거나 소켓 연결 설정)이 있습니다.STEP 1-2. ..

프로젝트 기술Kotlin, Java(jdk21), Spring Boot(3.2.5), Spring Security(6.2.4), Firebase, miniO 개요 사이드 프로젝트에서 Google 로그인 사용자의 서비스 회원가입을 구현했습니다.코드리뷰를 거쳐 수정된 내용을 소개합니다.STEP 1. Refactoring리팩토링되기전 코드는 [project_feature](kts, java) Firebase와 miniO를 활용한 Google로그인 사용자 회원가입 진행하기에서 확인이 가능합니다.STEP 1-1 @ModelAttribute => @RequsetPart 변경AuthController.java @PostMapping(value = "/sign-up", consumes = MediaType.MUL..

프로젝트 기술Kotlin, Java(jdk21), Spring Boot(3.2.5), Spring Security(6.2.4), Firebase, miniO 개요 사이드 프로젝트에서 Google 로그인 사용자의 서비스 회원가입을 구현했습니다.이번 사이드 프로젝트에서 좋은 기회로 Firebase와 miniO를 사용할 수 있었습니다.사용하며 알게 된 내용을 잊지 않기위해 상세히 기록하게 되었습니다.해당 포스팅 Refactoring[project_refactoring](kts, java) Firebase와 miniO를 활용한 Google로그인 사용자 회원가입 진행하기STEP 1. Firebase와 miniO의 사용 목적STEP 1-1. Firebase인증은 Firebase에서 인가는 Server(Spring ..

문법 공부의 가장 좋은 방법은...php.net를 참고하기..!![작성중............]STEP1. ✅PHP 7 기준 문법정리1. 변수의 선언 // *------ ?>는 생략이 가능하다. ------*변수 선언시에는 $를 사용합니다.변수는 저장되는 값에 따라 추론이 되어집니다.변수는 대소문자를 구분합니다.2. echo의 사용 I love PHP*/3. 변수의 범위 변수 x의 값 ::PHP에서는 위의 코드는 찍히지 않습니다. 위의 값을 사용하기 위해서는 global 키워드를 이용해야합니다.예시는 아래와 같습니다."; }myTest();echo("한번 더 찍어보기 :: {$x}");/* [output] 변수 x의 값 :: 6 한번 더 찍어보기 :: 6*/ 4. 문자열 형태 확인 ..

작성개요현재 회사에서 Laravel을 기반으로 개발중에 있습니다. view단에서 blade템플릿 뿐만아니라 Javascript 도 적재적소에 맞게 사용하고 있는데 Javascript의 개념 또는 동작하는 방식등을 잊지 않기 위해 기록합니다.STEP 1. form 태그의 onSubmit={} First name: Last name: form 태그에 onSubmit 속성이 있습니다. onSubmit은 buntton의 submit 버튼이 눌린 직후 처리할 함수를 인자로 갖습니다. 위에서는 handleMyForm() 함수를 호출해 event를 처리합니다. handleMyForm()코드는 아래와 같습니다. event는 웹 브라우..