🥬 상추의 공간

Intro최근부터 팀 프로젝트를 할 일이 점점 생기고 있다. 그런데 만났던 사람들 중 대부분이 프로젝트를 처음하거나 체계적으로 한 경험이 없었다.곧 나와 프로젝트를 함께 할 팀원들을 위해, 혹은 팀 프로젝트를 처음 하는 사람들에게 도움이 되고자 나의 협업 방법을 풀어나가고자 한다. 비록 나도 아직 완벽하다고 할 순 없지만, 이 글을 참고해서 본인의 프로젝트에 맞게 수정 및 보완하면 좋을 것 같다. 대상해당 글은 프로젝트를 처음 해보거나, 체계적으로 해본 경험이 없는 누구나 당장 협업에 참여할 수 있도록 작성하였다! 참고로 초심자 대상으로 작성한거라 작은 프로젝트 기준으로, 필요 없어도 될 것 같은 것은 생략했다. 다 알려고 하면 너무 복잡하고.. 막막해서 시작도 못할 수 있기 때문이다! (일단 시작하는게..

학교 전공 공부와 더불어 이전부터 네트워크 공부의 필요성을 느껴서 널널한 개발자님의 네트워크 강좌를 듣고 정리하고자 한다. 해당 강좌는 사전 지식으로 운영체제 지식을 알고 있어야하는데, 운영체제도 이제야 막 전공으로 배우기 시작해서 그냥 맨 땅에 해딩하면서 알아가보고자 한다. 완전히 이해가 되지 않아도 일단은 다 기록할거라 글이 좀 더러울 수 있다.. 이 나중에 한번 싹 공부하고 복습할 때 글을 다듬을까 한다. 들어가기 전... 다음 용어들은 다 같은 의미이다. 네트워크 = Internet = IP 프로토콜 = 인터넷 프로토콜 기반으로 작동하는 네트워크 이 중에서 가장 유명한게 4계층 프로토콜인 TCP/IP다. 해당 강좌는 TCP/IP를 이해하는 것을 목표로 두고 있다. 이해가 안돼도 일단 외워서 끝내도..

활동 내용활동 기간: 23/02/09 ~ 23/03/06주 2회 총 8회차 진행1~4회차 - 제시한 React 키워드를 클래스 전에 학습해오고 관련 미션을 수행5~8회차 - 팀 프로젝트 진행 활동 자료팀 프로젝트 Github 저장소미션 정리 글미션 Github 저장소 팀 프로젝트에서의 역할, 기여한 부분, 성과팀장을 맡았고, 이전에 팀 프로젝트 경험이 있어서 활발한 소통이 이루어지고 협업을 진행하는데 많은 도움을 준 것 같다.소통을 중요시하게 생각해서 톡방에 자주 진행 상황을 여쭤 보았고, 구현한게 있으면 PR을 올려달라고 했다. 이렇게 계속 팀원들 간 코드를 업데이트를 했고, 그 덕에 프로젝트 진행하면서 충돌과 같은 문제가 발생한 일이 별로 없었던 것 같다.그리고 막히는 점, 궁금한 점을 계속해서 물어..

나는 지금까지 순서도를 그릴 일이 있으면 아이패드에 손으로 그렸다. 하지만 그려할 순서도가 많아지면 점점 지쳤고, 글씨를 쓰는 것도 힘들었다. 시중에 나와있는 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를 사용해 비밀번호 재확인이 올바르지 않으면 올바르지 않다는 문구 추가 심화 미션필수 항목을 입력하지 않았을 때와 비밀번호 재확인이 올바르지 않을 때 가입하기 버튼이 클릭할 수 없도록 비활성화클릭했을 때 폼 내용이 모두 지워지는 초기화 버튼 만들기 결과물    코드먼저, 클래스 시간 때 멘토님이 몇가지 팁을 알려주셔서 그것에 대해 적용을 했다.멘토님은 파일 확장자를..