티스토리

choi-dev-story

검색하기

블로그 홈

choi-dev-story

choidevvv.tistory.com/m

choi-dev 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

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으로 기본적으로 할당되어있다. 값을 증가시켜주는.. 공감수 1 댓글수 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 ( .. 공감수 0 댓글수 0 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 ( 리.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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: [/*#__.. 공감수 1 댓글수 0 2024. 11. 27.
DOM 리액트를 공부해보기 전에 DOM이라는 구조를 전부터 이해해보고 싶었고 찍어보기 시작하면서 리액트에서는 Virtual DOM이라는 걸 사용해 변화에 맞게 바꾸어주는 것을 알게 되었다. DOM이 그래서 뭔데?브라우저가 HTML 문서를 이해할 수 있도록 만든 거라고 생각하면 된다. 이런 태그로 웹 페이지가 만들어지면 브라우저는 이를 DOM이라는 트리 구조로 변환하게 된다. 트리라는 것은 이미 어떤 것인지 따로 알고 있긴하지만 간략하게 요약하면 다음과 같다. 가장 최상위에 존재하는 루트가 있고 그에 대한 자식 노드들로 이어져 있으며 이 때 자식 노드와 연결된 노드는 부모 노드라고도 부른다. 가장 최하위 단의 노드의 경우에는 자식 노드가 없을 것이고 이는 리프 노드라고도 한다. 즉, 흔히 알고 있는 태그들이 .. 공감수 0 댓글수 0 2024. 11. 27.
그냥 재미삼아 만든 메이플식 복권 움직이기 귀찮은데 자꾸 부르는 친구를 위한 메이플식 복권 function getRandomItemWithProbability(obj) { const entries = Object.entries(obj); const items = entries.map(entry => entry[0]); const probabilities = entries.map(entry => entry[1]); const totalProbability = probabilities.reduce((sum, prob) => sum + prob, 0); // 랜덤 수 let random = Math.random() * totalProbability; for (let i = 0; i 플래티넘 애.. 공감수 2 댓글수 0 2024. 10. 4.
마이그레이션 관리 예전에 장고를 배웠을 때는 마이그레이션 로그들이 자동으로 생성되었던 기억이 있는데 스프링부트와 express.js를 사용해본 이 기점에서 마이그레이션 관리는 따로 해주지 않고 있는 것으로 보였다. 스프링부트는 개인 프로젝트에서 Flyway라고 하는 의존성을 설치해 사용해봤고 이번 회사에서는 knex ORM을 활용해서 마이그레이션 관리 라이브러리를 사용해보았다. 마이그레이션 관리를 왜 해야되지?실제로 신입 개발자 때 팀 프로젝트를 진행했던 적이 있었는데 당시 깃을 관리하던 팀원이 마이그레이션 소스를 깃 이그노어 처리했었다. 한 회사의 면접에서 왜 이그노어 처리했냐고 물었을 때 우물쭈물 대답했던 기억이 났다. 물론 그건 정답도 아니었고. 돌이켜 생각해보면 어차피 오픈소스로 공개하지 않는 이상 코드는 외부로 .. 공감수 3 댓글수 0 2024. 9. 24.
함수에서 변수를 명시하지 않았는데 할당됐다 작업 내용에 대해 코드 리뷰를 진행하던 도중에 함수를 통해 얻은 객체의 데이터로 바인딩하지 않고 아무것도 초기화되지 않은 값을 넣어버리는 실수를 했다. 당연히 undefined일 것이라 생각했고 데이터를 찍어보았는데 값이 제대로 넘어오는 이상한 상황이 연출되었다. 그냥 넘어가기에는 상당히 미심쩍은 부분들이 많아 수석님과 찾아보았고 원인은 예상치 못한 곳에 있었다. 함수를 통해 얻은 부분에서 해당 함수를 다시 점검해보니 객체를 리턴해주기 전에 내가 변수를 초기화해주질 않았었다. 타입스크립트가 아닌 자바스크립트 기반의 노드로 운영되다보니 발생한 문제였고 이는 자바스크립트의 특성에서 비롯되었다. 암묵적 전역변수 발생자바스크립트에서는 var, let 또는 const로 변수를 선언하지 않고 값을 할당한다면 해당 .. 공감수 1 댓글수 0 2024. 9. 13.
jest jest 모듈을 사용해서 테스트 코드를 작성했다. jest 외에도 mocha 등이 있는데 commonJS 스타일을 유지하면서 작성하기 위해 jest를 사용하기로 했다. 설치npm install --save-dev jest실제로 운영에서는 테스트 코드를 작성하지 않기 때문에 개발환경에서만 동작할 수 있도록 설치를 진행한다. 근데 난 잘 모르겠다. { "scripts": { "test": "jest" }}package.json에 test를 jest로 변경한다. 사용법사실 이건 정확하다고 볼 수는 없지만 테스트 코드는 꼭 성공한 케이스만을 작성하지는 않는다. 여러 케이스를 두고 실패하는 케이스를 적용해야 휴먼 에러를 피할 수 있다고 생각하기 때문이다. describe('테스트 네임', () => {.. 공감수 0 댓글수 0 2024. 8. 26.
콜백함수 및 비동기, 동기 처리 시간이 있을 때마다 모던 자바스크립트를 공부하고 더 나아가 타입스크립트를 진행하여 이를 사용하고 있는 nest.js 프레임워크까지 직접 경험해보려고 한다. 실무에서 이미 자바스크립트를 사용하고는 있는데 정확히 자바스크립트가 어떻게 구동되고 있는지 학습이 필요해보였다. 콜백함수콜백함수는 다른 함수의 인자로 전달되어 그 함수 내부에서 호출되는 함수이다. 솔직히 말하면 이해를 못했다. 비동기, 동기 처리에 대한 부분을 어느 정도 이해해야 전달이 쉬운데 언어의 시작을 동기 처리로 대부분 진행되는 것을 하다보니 아무리 해도 이해가 안갔었다. 그래서 무작정 코드로 부딪혔다. function taskA(callback) { setTimeout(() => { console.log('Task A com.. 공감수 0 댓글수 0 2024. 7. 15.
객체의 value 값을 다른 객체의 key 값으로 호출 상황은 다음과 같다. 프론트엔드 측에서 백엔드로부터 받은 데이터를 엑셀 처리해주는 모듈을 이행해주고 있어 이를 확인하던 중, 모듈의 리턴값에 객체로써 key-value로 전달하고 이를 엑셀 처리해주고 있다. 하지만 i18n을 적용하면서 또 다른 JSON 객체에서 값을 빼와 이를 언어별로 이름을 구분해주어야 하는 상황이 생겼다. 즉, { '한글' : '한글' } 이라고 리턴하여 엑셀로 변환했을 때 무조건 시트에는 한글이 나오던 상황을 영어인 상황에서는 'hangeul' 이라고 보여주어야 되는 상황이다. 어찌보면 하드코딩된 영역을 동적으로 처리해주어야 하는 상황이기에 나는 언어별로 내려주는 값을 JSON을 통해 미리 받아 선언해주고 리턴값에 바인딩해주는 걸 고려했다. JSON을 통해서 key-value 형태.. 공감수 0 댓글수 0 2024. 7. 10.
동기 처리와 비동기 처리 처음엔 단순히 비동기 처리는 뭐다! 하고 자바스크립트에선 setTimeout, Promise, async/await이 있다라고 이해하고 넘어가려 했다. 하지만 스프링 부트를 가지고 공부를 했을 당시에 내부에서 비동기 처리를 해본 적이 없으니 명확한 차이를 알고 싶어졌다. 스프링부트에서 처리했던 방식 내가 스프링부트를 사용해 서버 단에서 데이터를 처리했던 방식은 대부분 동기적인 방식이었다. 동기 처리에 대한 개념은 순차적으로 데이터를 처리하는 것이라 생각하면 되는데 순차적으로 처리하기에 처리하던 부분이 완료될 때까지 기다려야되는 상황이 생긴다. 그러면 동기 처리는 별로인가? 그렇다는 것은 아니다. 상황에 따라서 동기 처리가 좋을지 비동기 처리가 좋을지는 경험을 통해서 알아가야 할 것이라고 생각하고 있다. .. 공감수 0 댓글수 0 2024. 3. 21.
비동기 처리 자바스크립트를 사용하는 회사로 이직을 하게 되면서 그 전부터 정리가 안되있던 개념 중 한 가지인 비동기 처리에 대한 부분을 정리하려고 한다. 동기 처리부터 알아보자. '비'동기 처리니까 동기 처리에 대한 부분도 있을 것이다. 이것부터 코드로 먼저 알아보자. function sync() { console.log("처리를 시작한다."); let startTime = new Date().getTime(); while (new Date().getTime() 처리를 시작한다 -> 처리를 완료.. 공감수 0 댓글수 0 2024. 3. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.