특정 값이 들어가 있고, 버튼을 눌렀을 때 값을 변경할 수 있게끔 하고, 저장을 누르면 그 값으로 바뀌는 inline text editor를 만들어 봤다. 함수형 컴포넌트로 진행했고, 로컬에서 진행했음을 먼저 말한다. 스타일링은 styled-components를 사용했는데, 여기서 스타일링은 중요한 부분이 아니므로 생략한다. 우선, useState로 두 가지 값을 정의한다 1. 수정 모드로 들어가는 useState (editMode로 정의했다.) 2. 텍스트 값에 대한 useState (text로 정의했다.) 연필 버튼을 눌렀을 때 editMode가 바뀌게 하기 위해서 editMode를 false로 지정해주었고, text는 현재 서버와 연결되어있지 않기 때문에 임의로 userState를 만들어서 그 안의..

기존의 checkbox 상태관리에서, 성별 및 연령대 select value 선택 시 버튼이 활성화되도록 기능을 추가했다. select는 Material-UI 라이브러리의 Select를 활용했다. 사용하고 싶은 것만 취사선택하여 코드 복붙을 하였고, option value를 그대로 적용시키기 위해 onChange 함수를 걸었다. 기본적으로 Material-UI에서 제공하는 것들을 import해준 뒤(앞 사진) handleChange 함수를 type에 따라 구분하였고, useState를 활용하여 현재 선택된 값(e.target.value)을 성별에 설정(setSearchSex), 연령대에 설정(setSearchAge) 해줬다(뒷 사진). isAllChecked라는 변수에, 기존의 checkbox 상태관리 ..

종합설계를 하면서 배우는 게 참 많다. 의무성이 생기니까 어떻게든 내가 맡은 부분을 책임감있게 끝내야 한다는 마음가짐을 갖고 하게 된다. 근데 또 하나하나 나중에 서비스를 만들 때도 꼭 필요한 것들만 한지라, 다행히 좋은 부분을 잘 맡았다는 생각이 들었다. 이 부분은, 서버에 토큰을 넘겨주는 방식은 아니고, 클라이언트 단에서 로그인 및 로그아웃을 해결하기 위한 방법이다. 서버와 합쳤을 때 토큰을 넘겨주는 부분은 따로 포스팅을 할 예정이다. 이번에는 카카오 로그인과, 로그인 여부에 따라 라우팅할 수 있는 페이지와 그렇지 않은 페이지를 구분하는 것을 구현했다. Kakao Developers에 들어가서 로그인을 한 뒤, 내 애플리케이션에 들어가서 애플리케이션 추가하기를 누른다. 그럼 이러한 페이지가 보일 것인..

종합설계 프로젝트에서, 체크박스의 상태관리 및 체크박스 전부 체크 시 버튼을 활성화하는 부분을 구현하는데 애를 먹었다. 여러 방법이 있지만, useState를 활용하여 상태관리를 하는 방법을 남겨보고자 한다. const SignupContents = ({ history }) => { const [checkedButtons, setCheckedButtons] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedButtons([...checkedButtons, id]); console.log(체크 반영 완료); } else { setCheckedButtons(checkedButtons.filter(button =>..

Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. - styled-component 사용 시 발생하는 문제로, input 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러이다. - 해결책: 안에 값을 제거해준다. - 기존에는 잘 몰라서 input 내에 label을 넣어줬다가, 해당 오류가 생겼기 때문에 하고 아래에 로 작성해줬다.

여느때와 마찬가지로 새로운 React 프로젝트를 설치하고, yarn start를 통해 시작하려던 와중에 생전 처음 보는 에러가 발생했다. There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.42.0" Don't try to install it manually: your package manager does it automatically...

프로미스 자바스크립트와 노드에서는 주로 비동기를 접한다. 특히 이벤트 리스너를 사용할 때 콜백 함수를 자주 사용한다. ES2015부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스(Promise) 기반으로 재구성되며, 악명 높은 콜백 지옥 현상을 극복했다는 평가를 받고 있따. 프로미스는 반드시 알아둬야 하는 객체이므로 여기뿐만 아니라 다른 자료들을 참고해서라도 반드시 숙지해야 한다. 프로미스는 다음과 같은 규칙이 있다. 먼저 프로미스 객체를 생성해야 한다. const condition = true; // true면 resolve, false면 reject const promise = new Promise((resolve, reject) => { if (condition) { resolve("성공"..

React 공부를 책을 통해 하고 있던 도중 (출처: 벨로퍼트 리액트를 다루는 기술) utils.scss 파일을 불러올 때 현재 수정하고 있는 scss 파일 경로가 어디에 위치하더라도 앞부분에 상대 경로를 입력할 필요 없이 styles 디렉토리 기준 절대 경로를 사용하여 불러올 수 있게 하기 위해 webpack.config.js에 커스터마이징 된 sass-loader를 webpack.config.js에 넣어주려고 하니 options has an unknown property 'includePaths'. These properties are valid 라는 오류가 발생했다. 이게 무슨 에러인고 하니 .. 현재 내가 내려받은 sass-loader의 버전이 호환 불가능한 버전이기 때문에 발생하는..

을 요약하고 동시에 제 나름대로의 생각이 담겨 있는 글입니다. Redux 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 리덕스를 이해하기 위해선 우선 Flux라는, 리덕스의 기반이 되는 개념을 알아야 한다. 여기에 Flux에 대한 설명을 최대한 쉽게 해 두었다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. 물론 리덕스를 사용하는 것이 유일한 해결책은 아니다. Context API를 통해서도 똑같은 작업을 할 수 있다. 리액트 v16..

을 요약하고 동시에 제 나름대로의 생각이 담겨 있는 글입니다. React의 기본 render 함수 render() { ... } render 함수가 컴포넌트의 생김새를 정의함. view가 어떻게 생겼는지, 그리고 어떻게 작동하는지에 대한 객체를 반환함 render 함수를 통해 내부의 컴포넌트를 렌더링 React의 특징 Virtual DOM DOM은 객체로 문서 구조를 표현하는 방법을 말한다. DOM 자체는 빠르지만 웹 브라우저의 규모가 커질 경우 DOM의 변화 -> 다시 CSS를 연산 -> 레이아웃 구성 -> 페이지 리페인트의 과정에서 로딩되는 데이터가 많아지므로 느려짐. -> 어떻게 할까? 에서 출발함. Virtual DOM의 동작 방식 실제 DOM에 접근하는 대신에, 해당 DOM을 추상화한 자바스크립..