FE/React 8

[React] 무결성을 유지하면서 const 변수 값 수정하기

지금까지 나는 const 변수의 값은 어떠한 방법으로도 수정할 수 없는줄 알았는데 방법이 있긴 있었다...!! 일단 먼저 알아야할 불변 변수의 특징으로는 1. 값을 재할당 할 수 없다 2. 값의 변경은 가능하다 이게 무슨 소리야... push()나 splice()같은 JS 내장함수을 사용하면 const 변수의 값 변경이 가능하다 ...(중략)... const insa = ["hi"]; insa.push("hello"); return ( {insa} // hihello 출력 ); } 하지만 이런 방법은 무결성을 유지하지 못한다는 문제점이 있다 그렇다면 어떻게 무결성을 유지하면서 변수의 값을 바꿀 수 있을까? 원본값을 바로 수정하는게 아닌, 기존의 값을 이용해 만든 새로운 값을 새 변수에 할당하는 것!! 그..

FE/React 2021.08.31

[React] 틱택토 추가 기능 구현하기 (2)

잠깐!✋ 이 포스팅은 React 자습서를 따라해보고 복습을 목적으로 하는 포스팅입니다 틀린 부분이 있으면 정정 부탁드립니다! 리액트 자습서(틱택토 만들기) 링크: https://reactjs.org/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org 4. 오름차순이나 내림차순으로 이동을 정렬하도록 토글 버튼을 추가해주세요. (Add a toggle button that lets you sort the moves in either ascending or descending order.) 이게 제일 어려웠다 (내 기준🥲) 첫번째로 생각했던건 정렬 방식..

FE/React 2021.08.17

[React] 틱택토 추가 기능 구현하기 (1)

잠깐!✋ 이 포스팅은 React 자습서를 따라해보고 복습을 목적으로 하는 포스팅입니다 틀린 부분이 있으면 정정 부탁드립니다! 리액트 자습서(틱택토 만들기) 링크: https://reactjs.org/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org 리액트 자습서 마지막 부분을 보면 연습을 위해서 추가 기능을 제시해 놓았다 1. Display the location for each move in the format (col, row) in the move history list. (이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시..

FE/React 2021.07.29

[React] 틱택토 게임으로 알아보는 props와 state

잠깐!✋ 이 포스팅은 React 자습서를 따라해보고 복습을 목적으로 하는 포스팅입니다 틀린 부분이 있으면 정정 부탁드립니다! https://ko.reactjs.org/tutorial/tutorial.html#passing-data-through-props 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 오늘은 props와 state에 대해서 알아보도록 하겠습니다 먼저 둘의 특징을 요약하자면 props 1. 읽기 전용 데이터(수정 불가능) 2. 부모 컴포넌트에서 자식 컴포넌트로 전달하는 단방향 데이터 state 1. 컴포넌트가 가지는 동적인 값(변경 가능) 버튼 눌렸는지 여부...값이 몇인지 등등..

FE/React 2021.07.28

[React] 이벤트가 두번 실행되는 오류 해결하기

//SignupForm 오류 코드 회원 가입 회원가입 폼을 만들고 있던 중 button의 이벤트가 두 번으로 중복돼서 실행되는 오류가 생겼다 열심히 구글링해서 찾아낸 결과 이유는 1) React.StrictMode (실질적인 해결방법은 아니였지만...ㅎ) //index.js ReactDOM.render( , , document.getElementById("root") ); 리액트의 공식 문서를 살펴보면 Strict 모드 StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. ! Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. * 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 * 레거시 문자열 ref 사용에 대한 경고 * 권장되..

FE/React 2021.03.16

[React]리액트에서 링크 기능 사용하기

일반적으로 html에서 링크를 걸어줄 때는 a 태그를 많이 사용하지만 react 환경에서는 추천되지 않는다 사용은 가능하지만...! 리액트에서 a 태그로 작성하면 링크를 누를때마다 리액트가 죽고 새 페이지가 열리는 문제가 발생한다(화면 전체가 새로고침됨) a 엘리먼트의 href 속성은 페이지 전체를 다시 그리기 때문인데...🤔 이러면 필요한 부분만 빠르게 다시 그려주는 리액트의 장점을 활용하기 어렵다 리액트에선 a 태그 대신 Link 태그를 사용하자! // html // JSX a 태그는 href 속성을 이용해서 경로를 설정하지만 link 태그는 to 속성으로 경로를 설정해준다

FE/React 2021.03.10

[React-native] 개발 환경 구축하기

부제: 에러 코드 수집하기ㅎ...ㅎㅎ ( ᵕ̩̩ㅅᵕ̩̩ ) - MacOS 기준, RN 공식문서 버전 0.63 기준으로 작성했습니다 1. node와 watchman을 homebrew를 통해 설치한다 brew install node brew install watchman node가 미리 설치되어 있다면 10 이상의 버전으로 설치되어 있는지 확인해주기 2. JDK를 homebrew를 통해 설치한다 brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 JDK가 미리 설치되어 있다면 8 이상의 버전으로 설치되어 있는지 확인해주기 3. Xcode 설치하기 Xcode를 설치하지 않으면 error Error: Failed to install CocoaPods dependen..

FE/React 2021.01.08