🥬 상추의 공간

나는 지금까지 순서도를 그릴 일이 있으면 아이패드에 손으로 그렸다. 하지만 그려할 순서도가 많아지면 점점 지쳤고, 글씨를 쓰는 것도 힘들었다. 시중에 나와있는 UI 툴을 이용해보기도 했는데, 도형을 일일이 가져와 위치를 맞추는 과정에서 불편함을 느껴서 사용하지 않았다. 그러다 최근에 글또 슬랙에서 ‘flowchart 툴로 무엇을 쓰는지’에 대한 고민 글이 올라왔었다. 몇몇 분들께서 mermaid 툴을 언급하셔서 이에 대해 찾아봤는데, 코드로 순서도를 작성하는 것이 정말 간편해 보였다. 혹시나 나와 같은 문제를 겪어본 경험이 있는 분들도 알면 좋을 것 같아 Mermaid 공식 문서를 참고하여 공부할 겸 정리해보고자 한다. Mermaid 란? Mermaid는 Markdown 문서에서 다이어그램을 생성하기 위..

리스트의 중간 값을 찾아 원하는 값과 비교해서 진행하는 알고리즘이다. 이 알고리즘을 이용하려면 먼저 정렬이 되어있어야한다. 중간값 = (최솟값 + 최댓값) / 2 중간값 위치에 해당하는 값과 검색하고자 하는 값과 비교한다. 만약 찾고자 하는 값이 중간 값보다 크다면 중간 값 이하는 검색하지 않고, 작다면 중간 값 이상은 검색하지 않는다. 이렇게 원하는 값 찾을 때까지 검색 범위를 반씩 쪼개며 찾는다. 이분 검색의 시간 복잡도는O(logN)이다. 아래는 예시 문제 및 풀이코드다. [인프런] Node.js / 섹션7-정렬과 그리디, 결정알고리즘 / 10. 이분검색 문제 임의의 N개의 숫자가 입력으로 주어집니다. N개의 수를 오름차순으로 정렬한 다음 N개의 수 중 한 개의 수인 M이 주어지면 이분검색으로 M이..

선택 정렬 가장 작은 것을 선택해서 제일 앞으로 보내는 알고리즘이다. 제일 작은 원소를 찾아서 탐색 기준점으로부터 가장 앞 원소와 바꾸고 이를 끝까지 반복한다. 시간복잡도는 O(N^2)이다. 데이터 커질수록 엄청 커지므로 최대한 피해야할 시간복잡도다. 아래는 예시 문제 및 풀이방법이다. [인프런] Node.js / 섹션7-정렬과 그리디, 결정알고리즘 / 1. 선택정렬 문제 N개이 숫자가 입력되면 오름차순으로 정렬하여 출력 풀이 function solution(arr) { let answer = arr; let min, tmp, index; for (let i = 0; i < answer.length; i++) { min = Number.MAX_SAFE_INTEGER; for (let j = i; j < ..

Introduction state를 변경하면 모든 component는 다시 실행되고 모든 code들도 다시 실행된다. const App = () => { const [counter, setCounter] = React.useState(0); const onClick = () => setCounter((current) => current + 1); console.log("call an api"); return ( {counter} Click me ); }; 리렌더링 될 때마다 반복 실행되어도 괜찮은 코드도 있을 테지만, 컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 수도 있다. 예를들어, API로 외부 데이터를 가져올 때 컴포넌트 처음 렌더링되는 그 순간에만 API 요청을 하고 이후에 stat..

Props 아래 코드는 그닥 효율적인 코드가 아니다. 버튼 개수를 늘릴수록 복붙해야하는 양이 많아지기 때문이다. const SaveBtn = () => { return ( Save Changes ); }; const ConfirmBtn = () => { return ( Confirm ); }; const App = () => { return ( ); }; 컴포넌트를 새로운 정보를 props 인자로 전송하면서 재사용하자. props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 객체가 들어가게 된다. (컴포넌트는 단지 어떤 JSX를 반환하는 함수다.) props는 자식으로 전달되는 유일한 인자이며, 부모에서 전송한 ..

배웠던걸 기반으로 useState를 이용해 단위변환 기능을 만들어보자. 먼저 input에 입력한 값이 화면에 실시간으로 보이도록 만들어보자. onChange를 통해 사용자가 다른 값을 입력할 때마다 value 업데이트 시킨다. const App = () => { const [minutes, setMinutes] = React.useState(0); const onChange = (e) => { setMinutes(e.target.value); }; return ( Super Converter Minutes You want to convert {minutes} Hours ); }; input의 value를 연결시켜주는 이유는 input 값을 외부에서 수정해주기 위해서다. label에서 for은 js용어가 ..

Understanding State state는 기본적으로 데이터가 저장되는 곳이다. 아래 코드는 별로 좋지 않은 방법이다. const root = ReactDOM.createRoot(document.getElementById("root")); let counter = 0; function countUp() { counter += 1; } const Container = () => ( Total clicks: {counter} Click me ); root.render(); // 렌더링 컴포넌트는 화면 페이지를 처음 로드했을 때 딱 한번 렌더링되므로 그 이후로는 어떤 작업을 해도 UI가 업데이트되지 않는다. 그래서 button을 눌러도 counter 변수 자체는 증가하지만 UI는 계속해서 0을 표시한다...

학습 키워드props, state, event handling, useState, useEffect 미션 저번 미션을 통해 만든 회원가입 폼을 학습 키워드 기반으로 다음과 같이 기능을 추가해야 한다.이메일, 비밀번호, 비밀번호체크, 이름, 나이를 useState로 작성하고, input 컴포넌트에서 이벤트를 통해 state를 변경useEffect를 사용해 비밀번호 재확인이 올바르지 않으면 올바르지 않다는 문구 추가 심화 미션필수 항목을 입력하지 않았을 때와 비밀번호 재확인이 올바르지 않을 때 가입하기 버튼이 클릭할 수 없도록 비활성화클릭했을 때 폼 내용이 모두 지워지는 초기화 버튼 만들기 결과물    코드먼저, 클래스 시간 때 멘토님이 몇가지 팁을 알려주셔서 그것에 대해 적용을 했다.멘토님은 파일 확장자를..