코딩일상

리액트를 공부하는이유 내가 백엔드 포지션을 선택하면서 java와 node를 고민중에 node를 선택한 이유중 하나가 프론트를 좀더 쉽게 접근을 할 수있었기 때문이다. 이제 항해라는 프로그램도 끝난만큼 그 이유를 실천해보고자 리액트를 개인적으로 공부를 진행하고있다. 처음에는 역시 이것들이 뭐지 html과 css도 오랜만에 다시 보니 어색한 친구같았지만 그래도 한번 봤던 친구들이라고 그렇게 까지 어색하지는 않았다. 얼마 안 한 공부지만 느낀 점 프론트와 협업을 하면서 항상 useState, useEffect등의 용어를 많이들었는데, 이제서야 아 이런 말들이구나 이해를 하며 적용을 하고있다. 근데 아직까진 역시 어쩔수 없듯이 머리속으로 이해하는듯 했으나 실제로 써먹으려고하니 머리가 잘굴러가지 않았다. (아직 ..

JSX사용법 Babel을 맨날 말로만 들어보다가 하는역할의 일부를 알게되었다. React가 JSX방식을 이해할수있도록 React.creatElement로 바꿔주는 역할을 하고있었다. 확실히 createElemnet보다는 JSX방식이 간단했는데 이를 변환해주는 것도 있다니.. 여긴 뭐 천재들의 세상인거 같다. React의 역할은 state가 바뀌면 다시 리렌더링을 해준다는것 React. memo 한번 렌더링이되었는데 바뀌지도 않은것에대해 다시 렌더링하지않도록 React에게 알려주는기능 React Top-Level API – React A JavaScript library for building user interfaces reactjs.org Props Components와 Props – React A J..

코테를 하다가가 진법 변환이 있어서 JS에서는 어떻게 하면되는지 찾아보고 이를 정리한 글이다. 생각보다 간단하다. 45를 3진법으로 바꾸면 1200 125를 3진법으로 바꾸면 11122이다. //10진법 45를 3진법으로 변환 let num = 45 let change = num.toString(3) console.log(change);//1200 //3진법으로 1200을 10진법으로 변환 let num2 = 1200 let change2 = parseInt(num2, 3); console.log(change2);//45 Object.prototype.toString() - JavaScript | MDN The toString() 은 문자열을 반환하는 object의 대표적인 방법이다 developer.m..

오늘 내가 백엔드로써 node.js를 선택한 이유중 하나가 프론트또한 해보고 싶었기 때문이다. 프론트에서 React는 현업 대부분에서 사용하는 만큼 React가 뭐가 좋길래 다들 사용하나 싶어서 한번 공부를 해보았다. 다수가 사용하는데는 그만한 이유들이 있다고 생각하기 때문이다. 일단 가장 특이했던점은 내가아는 html과 js의 관계는 html의 요소와 내용을 우선 만들어 뼈대를 잡아 두고 그 뼈대를 유동적으로 움직일수있게 만들어주는게 JS의 역할로써 배웠는데 React는 이를 반대로 해주게 만들어주는 엔진인것이다. 즉 JS만으로 HTML을 다루겠다는것이다. 과연이게 얼마나 도움이 될지 모르겠지만 일단 조금은 흥미롭다. 여튼 조금씩조금씩 React도 하면서 나만의 전체 웹서비스를 만들어 내가 생각하는 문..

객체지향 프로그래밍을 공부를 하고 있는데 코드의 재활용성을 위해 상속을쓰게 되었는데 상속 만을 사용하다보면 수직적인 관계에서생기는 문제인 부모요소가 바뀌게 되면 자식요소들이 전부 바뀐다는 점이 문제이며 부모별로 가지고 있는 요소들을 가져다 쓰려고 하면 하나의 부모에게서만 상속을 받을수 있어 뭔가 게륵 같은 느낌이다 분명 나쁜것을 아니지만 지속 적으로 사용하다보면 나중에 유지 보수에서 머리가 아플것 같은 느낌.. 다 갈아 엎어야 할수도.. 그래서 이러한 문제를 해결해 줄수 있는 방법중 하나가 Composition을 이용하다는것이다. 내가 이해 한부분에 대해 설명을 하자면 그냥 각각의 클래스를 블럭처럼 가져와서 그 블럭으로 또다른 블럭을 만드는것이다. 근데 여기서 또 문제는 이렇게 만들어진 블럭은 결속력이 ..

트랜젝션?? 여러작업들을 하나로 묶은 단위입니다. 한 덩어리의 작업들은 모두 실행되거나, 실행되지 않습니다. (all-or-nothing) 트랜잭션은 수행중에 한 작업이라도 실패하면 전부 실패하고, 모두 성공해야 성공이라고 할 수 있습니다. 트랜젝션이 필요한 이유?? 예를 들면, A 은행 → B은행으로 돈을 보내기 위하여 출금하고 송금한다고 가정합니다. A은행에서 돈을 출금하고나서 B은행으로 송금하려고 하는데 갑자기 시스템이 멈추면 어떻게 될까요? 돈은 출금되었지만, 송금되지 않고 증발하게 되는 끔찍한 상황이 발생합니다. 트랜젝션은 이런 상황이 일어나지 않도록 보장해줍니다. 트랜젝션 commit & rollback commit commit 연산은 하나의 트랜잭션이 성공적으로 끝났고, 데이터베이스가 일관성..

결론 데이터베이스에서 인덱스를 사용하는 이유는 검색성능을 향상시키기 위해서 이다. 하지만 검색성능을 실질적으로 향상시키기 위해서는 해당 쿼리가 index를 사용하는지 카디널리티, Selectivity 같은 요소들이 고려된 인덱스가 생성되어야 합니다. 일반적인 경우의 장점으로는 빠른 검색 성능을 들 수 있습니다. 일반적인 경우의 단점으로는 인덱스를 구성하는 비용 즉, 추가, 수정, 삭제 연산시에 인덱스를 형성하기 위한 추가적인 연산이 수행됩니다. 따라서, 인덱스를 생성할 때에는 트레이드 오프 관계에 놓여있는 요소들을 종합적으로 고려하여 생성해야합니다. *트레이드오프: 객체의 어느 한부분의 품질을 높이거나 낮추는게, 다른 부분의 품질을 높이거나 낮추는데 영향을 끼치는 상황을 이야기한다 Index란? 사전 의..

절차지향 프로그래밍 { type CoffeeCup = { shots: number; hasMilk: boolean; }; const BEANS_GRAMM_PER_SHOT: number = 7; let coffeeBeans: number = 0; function makeCoffee(shots: number): CoffeeCup { if (coffeeBeans < shots * BEANS_GRAMM_PER_SHOT) { throw new Error("Not enough coffee beans!"); } coffeeBeans -= shots * BEANS_GRAMM_PER_SHOT; return { shots: shots, hasMilk: false, }; } coffeeBeans = 3 * BEANS_GRA..

계산기 함수 만들기 console.log(calculate('add', 1, 3)); // 4 console.log(calculate('substract', 3, 1)); // 2 console.log(calculate('multiply', 4, 2)); // 8 console.log(calculate('divide', 4, 2)); // 2 console.log(calculate('remainder', 5, 2)); // 1 위 조건을 이뤄낼수 있는 함수를 만들어내는것이었다. 어려운것이 아니지만 강사님이 작성한것과 내가 작성한것에 차이를 적으면서 비교를 기록으로 남기려고한다. 내가 만든함수방식 type Tool = 'add' | 'substract' | 'multiply' | 'divide' | 're..

OSI 7 계층이란? OSI 7 계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다. 국제표준화기구(ISO, International Organization for Standardization)에서 네트워크 간의 호환을 위해 OSI 7 계층이라는 표준 네트워크 모델을 만들었다. 그렇다면 왜 계층을 나누었을까? 분명 이유 없이 계층을 나누지는 않았을 것이다. 계층을 분리함으로써 각 계층은 독립적인 역할을 할 수 있다. 역할이 분리가 되면서 문제 발생 시 문제의 현상응 보았을 때 어떤 계층에서 문제가 발생했는지도 파악이 가능하다. 각계층은 하위계층을 사용하고 현계층의 기능을 포함하여 상위 계층에 제공한다. 그래서 계층구조는 위에서 바라보았을 때 아래층이 안 보이는 구조라고 볼 수 있다. 결..