본문 바로가기
도커로 MySQL 컨테이너 생성 중에 있던 일 사내에서는 온프레미스 구조로 서비스를 제공하고 있으나 서버 다운을 대비하여 클라우드 시스템을 미리 구축해두자는 의견이 나와 시작하게 되었다. 차후에 도커로 MySQL을 어떻게 컨테이너 생성할 수 있었는지는 다시 작성할 예정이고 이 글은 이해한 바를 기록해두려고 한다. 도커?도커... 이름만 들어봤다. 신입 개발자 시절 도커를 알아야 한다!!라는 말을 수 백번 들었지만 그게 뭐지 싶었다. 일단 데이터베이스 관련해서는 도커가 아닌 클라우드 DB를 많이 사용했다. 이를 테면... AWS RDS 같은 것? 물론 클라우드 DB를 사용한다고 해서 도커를 사용하지 않는다는 것은 아니지만, 내가 생각하기에 모두 일관된 데이터베이스를 사용할 수 있음때문에 굳이굳이 사용하지 않아도 되지 않을까라는 생각이 들었다.  본론으.. 2024. 12. 9.
state 동적인 데이터를 다룰 때는 state라는 개념을 사용한다. 빠르게 예시를 통해 넘어가보자. import React, { Component } from 'react';class Counter extends Component { state = { number: 0 }; handleIncrease() { } handleDecrease() { } render() { return ( 값 올려보기 값: {this.state.number} + - ); }}export default Counter;새로운 컴포넌트를 하나 생성해보자. state 객체 안에는 number가 0으로 기본적으로 할당되어있다. 값을 증가시켜주는.. 2024. 12. 8.
props 리액트 컴포넌트에서 다루는 데이터이자, 가장 중요한 props를 정리하겠다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값을 의미한다. 자식은 이를 받아오기만 하고 수정할 수 없다.  클래스형 컴포넌트 생성import React, { Component, Fragment } from 'react';import './App.css';class App extends Component { sayResult(name) { if (name === 'c') return '한 글자'; if (name === 'cs') return '두 글자'; if (name === 'csd') return '맞음'; } render() { const name = 'csd'; return ( .. 2024. 12. 5.
JSX - style과 주석 앞서 다룬 JSX 문법의 마지막을 정리해보려고 한다.  Style - 객체 활용기본적인 CSS를 활용한 스타일은 이미 익히 들어왔다. 리액트에서는 조금 다르게 스타일을 적용할 수 있다고 하는데 확인해보자. import React, { Component, Fragment } from 'react';class App extends Component { sayResult(name) { if (name === 'c') return '한 글자'; if (name === 'cs') return '두 글자'; if (name === 'csd') return '맞음'; } render() { const name = 'csd'; return ( 리.. 2024. 12. 5.
var, let, const 자바스크립트를 한 번이라도 사용해보았더라면 변수 선언에서 var, let, const를 본 적이 있을 것이다. 셋의 차이를 조금 명확히 기록해 남겨두려고 한다. 자바스크립트를 ES6 기준으로 ES6 이전에는 var를 많이 사용하였고 let, const ES6 이후로 사용되어지는 변수 선언식이다. 일반적으로는 var는 이제 쓰지말고 let, const를 쓰자!로 시작하여 let은 변할 수 있는 수, const는 변하지 않는 상수로 사용하자! 라고 들어보았을 것이다. 뭐.. 나도 이렇게 알고는 있지만 육안으로 확인해보고 싶었다. function test() { var a = 10; if (true) { var a = 20; console.log(a); } con.. 2024. 12. 5.
JSX - JSX가 무엇인지와 규칙 그리고 간단한 값 넣어보기 Babel · BabelThe compiler for next generation JavaScriptbabeljs.io앞서 babel이라고 하는 자바스크립트로 변환해주는 도구를 확인해보겠다. ( Welcome to React To get started, edit src/App.js and save to reload. )이와 같은 형태의 코드들을 보면 흔히 HTML 같아 보일 수도 있다. 하지만 이건 자바스크립트이다.  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";/*#__PURE__*/_jsxs("div", { className: "App", children: [/*#__.. 2024. 11. 27.

티스토리툴바