어제보다 더 나은 오늘

📍 목표: 모달창이 켜진 상태에서 모달창 영역을 클릭할 때는 모달창이 유지되고, 박스 바깥 영역(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()에 넣어보면 다음과 같다. 리액..

상태 변경 함수(setState)를 써서 상태 갱신을 할 때 데이터 확인을 위해 아래 예시 코드의 6번 라인과 같이 console.log(state)를 해보면 다음과 같이 실제 입력값보다 한 개씩 밀려서 출력이 되는 걸 알 수 있다. const [username, setUsername] = useState(""); const handleChangeUser = (event) => { setUsername(event.target.value); console.log(username); }; return ( // ... // ... ) 이는 setState 함수가 이벤트 핸들러 내에서 비동기적으로 작동하기 때문이다. 이게 무슨 뜻일까? 위의 문장을 이해하려면 React가 상태 업데이트를 실시간으로 처리하는 것이..

변하지 않는 상태를 유지하는 방법, 불변성(Immutable) 이번 포스팅에서는 순수 함수에 이어 함수형 프로그래밍에서 중요하게 여기는 개념인 에 대한 이야기를 해보려고 한다. 사실 순수 함수를 설명하다보면 불변성에 대한 이야기가 꼭 한번은 나오 evan-moon.github.io - 실제 프로그램을 짤 때 함수형 프로그래밍과 객체지향 프로그래밍의 차이 - 값에 의한 호출(call by value) vs. 참조에 의한 호출(call by reference) - 상태 관리의 개념과 어려움 - React에서 setState 메소드를 써서 상태를 변경할 때 뒷단에서 일어나는 일 너무나 훌륭한 포스팅이다. 이 포스팅 말고 블로그 전반적으로 포스팅 퀄리티가 훌륭해서 어제 이 블로그 탐독하다가 원래 하려던 건 하나..

전자정부 프로젝트로 첫 출장을 갔던 튀니지에서 서버 개발자들을 대상으로 연수 프로그램 통역을 했을 때 '화면에 뿌려준다'는 말을 처음 들었다. 당시 IT 프로젝트 통역을 처음 맡았던 거라 Apache, 라우터, 게이트웨이, L4 스위치, 데이터베이스 서버 등 알 수 없는 말들이 난무했는데 저런 기술 용어들은 만국 공용어인지라 정작 통역을 하는 나는 무슨 말인지 몰라도 그냥 그대로 통역을 하면 엔지니어들끼리는 찰떡 같이 알아들었다. 하지만 '화면에 뿌린다'는 건 무슨 말인지 몰라서 그대로 직역을 했더니 튀니지 개발자들도 못 알아듣더라고 😇 결국 연사(speaker)였던 한국 개발자 분에게 화면에 뿌린다는 게 무슨 의미인지 조금 더 구체적으로 설명해 주실 수 있냐고 요청드렸고, 서버에서 받아온 데이터를 화면..

지난주 금요일 리액트에 입문하고 리액트를 학습한지 D+6일차가 되었다. 지금까지 React intro / SPA / state & props 총 3개의 과제를 하면서 바닐라 JS를 쓰는 것보다 리액트를 쓸 때의 간편함을 경험할 수 있었다. 마이 아고라 스테이츠 과제를 할 때 삽질했던 기억들이 좋은 반면교사가 되어주었다. 컴포넌트로 설계하면 편했을 것을... 😇 지금까지 배운 React의 핵심은 : 1. 데이터를 가져온 다음, 2. map() 메소드를 돌려서 받은 데이터를 화면에 뿌려준다. 1번 데이터를 받는 과정은 아직 서버와 통신하는 걸 배우지 못해서 더미 데이터로 하고 있다. 새로운 데이터가 생성되었을 때 기존 데이터와 합치는 것이 역시 관건인데 이 부분은 과제하면서 역시나 삽질을 많이 했고, 결론은..