어제보다 더 나은 오늘

Tab 컴포넌트 구현 중 현재 어떤 탭이 선택되었는지 알기 위해 클릭 이벤트 핸들러에 index를 전달해야 했다. 이벤트 핸들러에 인자를 전달할 때는 화살표 함수를 이용해 이벤트 핸들러를 감싸고, 전달하고자 하는 인자를 첫번째 인자로 넣어서 호출해 준다. event 객체가 필요한 경우 두번째 인자 자리에 넣어주면 된다. [2022. 12. 27. 추가 수정] event 객체와 전달하고자 하는 인자를 같이 사용하고 싶은 경우, 전달인자의 순서는 크게 중요하지 않다. 가령 click 이벤트의 경우 onClick={(e) => handlerFunc(e, 전달하고싶은값)} 으로 event 객체를 먼저 넣어줘도 핸들러 함수의 파라미터와 핸들러 함수를 호출하는 위치에서 파라미터에 따른 인자의 순서만 잘 지키면 상관..

'하노이의 탑' 이해하기 '하노이의 탑' 문제를 이해하고 문제 해결을 위한 핵심 통찰을 살핀 뒤 코드로 작성합니다. 이후 탑의 개수에 따른 총 이동 횟수를 구하는 일반항까지 수학적으로 유도합니다. shoark7.github.io 💡 재귀 문제의 핵심 1. 문제 정의: 재귀 함수의 입출력값 정의 2. 문제를 작게 만들어 해결하기 3. 작게 쪼갠 문제를 재귀식으로 표현하기 4. 재귀식을 그대로 코드로 구현 function _move(N, start, to) { return console.log(`${N}번 원반을 ${start}에서 ${to}로 이동시킨다`); } function hanoi(N, start, to, via) { if (N === 1) _move(1, start, to); else { hano..

📍 목표: 모달창이 켜진 상태에서 모달창 영역을 클릭할 때는 모달창이 유지되고, 박스 바깥 영역(dimmed layer)을 클릭할 때는 모달창이 닫히게 하기 코드 컴포넌트 설명 - : 컨테이너 - : Open Modal 이라고 써진 버튼. 클릭시 모달창 열리고 버튼 안의 텍스트 opend! 로 변경됨 - : 모달창 오픈 시 화면 전체 배경에 깔리는 dimmed layer - : 모달창 영역(흰색 박스) - : 모달창의 x자 버튼. 클릭시 모달창 닫힘 export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const openModalHandler = () => { setIsOpen((cur) => !cur); }; return (..

📍 목표: 아래 캡처 이미지와 같이 화면의 컴포넌트가 구성되어 있는 상황에서 상단 컴포넌트의 입력값 3개(작성자 이름(author), 제목(title), 본문(bodyText))를 서버에 보낸 후, 하단 컴포넌트의 제일 위쪽에 form에서 보낸 새로운 데이터가 뜨게 하기 create-react-app으로 만든 폴더 구조는 다음과 같다. |--- /fe-sprint-my-agora-states-react-client | |--- /public | |--- /img ## icon 등 assets 이미지 파일이 들어있는 폴더 | |--- index.html | |--- /src | |--- App.js | |--- index.css | |--- index.js | |--- /components | |--- D..

1. 순수 함수(pure function)란? : 같은 입력 값을 받으면 항상 같은 출력 값을 반환하는 함수 (순수 함수는 입력으로 전달된 값을 수정하지 않는다.) 순수 함수의 특징: - side effect가 없다. - 예측가능하고, 신뢰할 수 있고, 테스트하기 쉽다. 2. side effect(부수 효과)란? : 함수 내에서 어떤 구현이 함수 외부의 상태에 의존하거나 외부의 상태를 변경하는 경우, 해당 함수는 side effect가 있다고 이야기한다. 1) 외부 상태에 의존: 외부에 있는 변수의 값에 따라 함수의 결과가 달라진다. 2) 외부 상태를 변경: 힘수가 외부에 있는 변수의 값을 변화시킨다. 순수 함수의 예시: React의 컴포넌트 리액트의 컴포넌트는 props가 입력으로, JSX Elemen..

아래 포스팅에 쓴 것처럼 바닐라JS로 DOM을 조작해서 더미데이터를 화면에 뿌려주던 것을 fetch API로 서버에 데이터를 요청해 받아오는 방식으로 리팩토링을 해보았다. fetch로 서버에 데이터를 요청해서 응답으로 받은 데이터를 agoraStatesDiscussions 라는 변수에 담는 것이 목표였다. 1. 1차 시도 const agoraStatesDiscussions = []; fetch("http://localhost:4000/discussions/") .then((res) => res.json()) .then((data) => { agoraStatesDiscussions.push(...data); console.log(agoraStatesDiscussions); // 데이터 담김 }); cons..

지난달 바닐라JS와 DOM을 사용해 구현했던 페이지를 React로 리팩토링을 해보았다. 하드코딩된 더미데이터를 가져다 만들었던 지난달과 다르게 서버를 구축해서 해당 서버에 fetch API로 데이터를 요청해서 받아온 데이터를 props로 컴포넌트로 내려보내주었다. 그러던 중에 데이터에 담긴 시간 정보가 toISOstring() 형태의 string이었는데, 이 정보를 가공해서 아래와 같이 다른 날짜 형식으로 표현하고 싶었다. 결론부터 이야기하자면 날짜 문자열 구문을 분석해서 1970년 이후의 ms초를 반환(Date.now()와 동일한 형태)해주는 Date.parse() 를 쓰면 된다. '2022-05-15T23:57:43Z' 형태로 들어온 날짜 데이터를 Date.parse()에 넣어보면 다음과 같다. 리액..

개발자로 커리어 전향을 꿈꾸는 이들 각자의 동기가 있을 것이고, 이 동기라는 것이 꼭 한 가지가 아니라 복합적일 테지만 나는 개인적으로 더 나은 세상을 만드는 데 구체적인 기여를 할 수 있는 직무라는 생각이 큰 원동력으로 작용했다. 기존 서비스 중에 이런 공공의 가치를 구현한다고 생각하는 서비스를 종종 소개해 볼까 한다. 오늘 처음으로 소개하고 싶은 서비스는 시각장애인들에게 손쉽게 도움을 줄 수 있는 Be My Eyes이다. Be My Eyes 소개글: https://www.bemyeyes.com/language/korean 앱을 설치하고 내가 커뮤니케이션을 할 수 있는 언어를 선택하면 해당 언어를 구사하는 시각장애인에게 도움이 필요할 때 전화벨이 울린다. 2022년 12월 현재 Be my eyes 커뮤..

지난 포스팅에 이어 컴퓨터가 사칙연산을 하는 법을 찾아보았다. 예상했던 대로 컴퓨터가 하는 연산의 기본은 덧셈이다. 뺄셈은 음수를 더하는 방식으로 계산한다. 다시 말해 컴퓨터가 4-2를 수행하는 과정은 4+(-2)를 연산하는 것이다. 컴퓨터에게 음수를 알려주는 방식으로는 최상위 비트(가장 왼쪽의 비트)를 이용해 최상위 비트가 0일 때는 양수, 1일 때는 음수라고 약속하면 된다. (이 방법으로 연산한 경우 overflow - 서로 부호가 다른 정수의 덧셈, 뺄셈 연산에서 발생 가능 - 가 생길 수 있다고 하는데 여기까지는 파고들지 않기로 한다...) 곱셈은 덧셈을 반복 수행하면 되고, 나눗셈은 곱셈과 달리 나머지라는 것을 처리해줘야 하고, 0으로 나눌 수 없다는 예외가 있기에 곱셉만큼 간단하지는 않다. 일..

앞선 포스팅에서 얘기한 것처럼 부트캠프에서 매일 하루에 한 문제씩 알고리즘 문제를 풀게 하면서 하루 일과를 시작한다. (a.k.a. Daily Coding) 이제까지 문제를 딱 보고 pseudo code를 하나도 적지 않고 바로 푼 문제도 있고, 1, 2, 3 번호를 매겨가며 pseudo code를 적은 다음 푼 문제도 있지만 어...? 하고 2초 간 얼었던 문제는 어제가 처음이었다. 나눗셈(/)과 나머지(%) 연산자를 사용하지 않고 두 수의 나머지를 구하는 함수를 작성하는 것 잠시 삼천포를 건널테니 이 포스팅을 읽는 여러분도 위의 함수를 어떻게 짤 지 한 번 생각해 보시면 좋겠다. 개인적으로 부트캠프에서 이제까지 했던 과제 중 가장 인상적인 과제를 꼽으라면 두 가지를 들 수 있겠다. (섹션이 끝날 때마..