[React] React Ref란
Posts by Tag
- react 32
- error 21
- js 16
- java 6
- css 5
- blog 4
- react-router-dom 4
- algorithm 4
- git 3
- project 3
- intellij 2
- List 2
- jsx 2
- bootstrap 2
- queue 2
- idol_collector 2
- 회고 2
- formatter 2
- prettier 2
- eslint 2
- typescript 2
- 맛이 어때 2
- mysql 1
- jquery 1
- thymeleaf 1
- media 1
- continue 1
- break 1
- Math 1
- Set 1
- frontend 1
- Comparator 1
- ArrayList 1
- node 1
- selector 1
- hash 1
- routing 1
- yarn 1
- sass 1
- switch 1
- useHistory 1
- useParams 1
- styled-components 1
- useEffect 1
- ajax 1
- axios 1
- useContext 1
- redux 1
- reducer 1
- dispatch 1
- import 1
- path 1
- tab 1
- etc 1
- devcourse 1
- box-shadow 1
- image 1
- useRef 1
- 연결리스트 1
- 시간복잡도 1
- 정렬 1
- 그래프 1
- 이진트리 1
- BFS 1
- DFS 1
- 그리디 1
- 백트래킹 1
- html 1
- DOM 1
- editorconfig 1
- cs 1
- CORS 1
- flex 1
- Debounce 1
- Throttle 1
- grid 1
- 자료형 1
- xss 1
- cookie 1
- session 1
- github 1
- linter 1
- setting 1
- WS 1
- WAS 1
- rest 1
- GC 1
- ref 1
- Hidden Class 1
react
[react] useref()
자바스크립트에서 DOM을 조작할 땐 queryselector나 getElementById, getElementByClassName DOM Selector메소드를 사용했죠. 하지만 리액트에서 그런식으로 DOM을 조작하면 안 됩니다. 대신 useRef() 훅을 사용해야 합니다.
[react] 탭메뉴 만들기
오늘은 부트스트랩을 사용해 텝메뉴 만드는 법을 알아보도록 하겠습니다. 먼저 아래 처럼 react-bootstrap을 설치후 import해주세요.
[react] 상대경로 vs 절대경로
상대경로
[error] react Scripts 에러
평소처럼 npm start로 리액트 프로그램을 실행하려는데 다음과 같은 오류를 만났습니다. 😫
[react] 데이터 바인딩 ③ redux
redux는 index.js에서 Provider태그를 가지고 상위 컴포넌트 App에 state를 전송하고 reducer를 통해 데이터를 관리하기 떄문에 여러 컴포넌트에서 반복적으로 나타나는 데이터를 전송할 때 사용하면 편리합니다.
[react] 데이터 바인딩 ② usecontext
App 컴포넌트에서 생성한 state를 다른 컴포넌트에서 쓰려고 할 떄 전엔 props를 통해 전달해줬습니다. 간단한 데이터를 내보내기엔 편하지만 관리가 필요한 복잡한 데이터, 또는 여러번 props해줘야 되는 데이터의 경우엔 props를 여러번 사용하는 게 불편합니다. 이럴 때 ...
[react] axios(ajax)
ajax는 서버에 새로고침 없이 요청이 가능하게 해주며 다음과 같은 방법으로 사용합니다.
[react] useeffect
컴포넌트엔 인생주기 lifecycle가 있습니다. 마운트, 언마운트시 (등장 업데이트), 재렌더링되고 퇴장하는 모든 순간인데요. 이 각각의 순간마다 훅을 걸면 특정 순간에 작동되는 명령을 만들 수 있습니다.
[react] styled Components
컴포넌트가 많아지면 일일이 css 만들기 복잡합니다. 실수로 className을 중복 사용하는 경우도 있죠 그래서 styled-component를 사용합니다.
[react] useparams & 경로설정
저번 시간에 반복문으로 하나의 component를 여러번 출력 하는 방법에 대해 알아봤습니다.
[react] component + 반복문
쇼핑몰의 메인페이지엔 상품 수 만큼의 상품컴포넌트들이 출력됩니다. 그런데 이 코드들을 일일이 입력한다면… 😱 너무 일이 많아질 것입니다.
[react] react Router Dom ④ usehistory
useHistory는 방문기록을 저장할 수 있는 기능으로 훅으로 객체를 초기화해서 사용하는데 뒤로가기 같은 기능에 사용하기 좋습니다.
[react] react Router Dom ③ switch
리액트 라우터는 “/” 나 “/:id” 로 경로가 설정된 경우 모든 경로의 페이지를 라우팅합니다. 그게 싫고 정확히 매칭된 컴포넌트만 보이게 하고 싶다면 Switch를 사용하면 됩니다.
[react] react Router Dom ② link
원래 지정 경로 페이지로 라우팅을 하려면 href를 사용했습니다.
[react] 모듈화
리액트는 싱글페이지로 화면 개발합니다. App.js 내부에 컴포넌트들을 렌더링하기 때문에 현재 모든 컴포넌트들을 한페이지에 작성해뒀는데요.
[react] route에서 이미지 깨짐 오류
상세페이지를 라우팅하고, 해당 페이지에 보낸 props의 state 값을 이용해 img src를 지정하려고 했습니다.
[react] link
리액트로 작업을 하다가 터미널에 다음과 같은 메세지를 받아보신적이 있을 것입니다.
[react] sass
Sass는 css를 프로그래밍언어스럽게 작성하도록 도와주는 preprocessor 패키지입니다. 예로 sass를 사용하면 css 파일 내에서 변수, 연산자, 함수, extend import등을 사용해 코딩이 가능합니다.
[react] react Router Dom ① route
리액트는 알시다시피 하나의 페이지만을 사용하죠. 그런데 여러페이지를 띄우고 싶다면 어떻게 해야 할까요?
[react] bootstrap 적용
프론트엔드 작업을 할 때 직접 css를 하기 귀찮다면, css 라이브러리 bootstrap을 이용하면 됩니다. 리액트에도 마찬가지로 적용가능한데요. 다음과 같은 방법으로 사용하시면 됩니다.
[react] create React App 에러
npx create-react-app 프로젝트명
[react] props
App이란 컴포넌트에 아래 변수가 있습니다.
[react] input
저번 시간엔 event.target 속성을 이용해 input 값을 state에 저장하는 법을 알아봤는데요. 오늘은 그 값을 기존 state 배열에 저장해 화면해 출력하도록 해보겠습니다.
[react] component 옛날 작성법
요즘엔 함수로 컴포넌트를 생성하고 useState를 이용해 값을 저장하지만 옛날엔 클래스로 컴포넌트를 생성하고 생성자함수안에 this.state에 값을 저장했습니다.
[js] event.target
addEventListener 함수로 이벤트 핸들러를 등록할 때 객체를 전달해야 하는 경우가 있습니다.
[react] component
component를 사용하면 여러줄의html을 한 단어로 줄여서 쓸 수 있습니다. 리액트에선 하나의 주제값을 보여주는 div를 만들 때 컴포넌트형태로 만드는데요. 쇼핑몰 화면 각각의 상품칸이 이런 형태를 띄고 있다고 생각하시면 됩니다.
[react] react 웹페이지 만들기 1
React 프로젝트 생성 및 node.js 서버에 연결
[react] jsx
JSX는 JavaScript XML의 줄임말로 자바스크립트에 XML을 추가한 확장형 문법입니다.
error
[error] react Dom.development.js13231 uncaught error objects are not valid as a react child (found object with keys 복사본
리액트에서 jxs 페이지에 값을 입력하는데 다음과 같은 에러를 만났습니다.
[error] non Js module files deprecated
crbug/1173575, non-JS module files deprecated.
[error] react Scripts 에러
평소처럼 npm start로 리액트 프로그램을 실행하려는데 다음과 같은 오류를 만났습니다. 😫
[react] route에서 이미지 깨짐 오류
상세페이지를 라우팅하고, 해당 페이지에 보낸 props의 state 값을 이용해 img src를 지정하려고 했습니다.
[error] arithmeticexception
``` public static void main(String[]args){ Scanner sc = new Scanner(System.in); int [] arr ={1,2,3,4,5}; for(int i=0;i<arr.len...
[error] unmappable character for encoding ms949 에러
오늘 만난 에러는 다음과 같습니다.
[error] ‘java경로’ finished with non Zero exit value 1 오류
Process 'command 'C:/Program Files/Java/jdk1.8.0_301/bin/java.exe'' finished with non-zero exit value 1
[error] error cannot find symbol
단위테스트를 하다가 다음과같은 오류를 만났습니다. 😥
[error] 타임리프 could not parse as expression~
오늘 만난 에러 원인은 무엇이었을까요?
[error] git 에러(index.lock)
어느날 git을 사용하던 중 다음과 같은 에러메세지를 만났습니다. fatal: Unable to create '레포지토리로컬경로/index.lock': File exists. Another git process seems to be running in this repository,...
[error] mysql workbench error code1175 해결
1. edit - preferences
[error] intellij start failed오류
IntelliJ가 실행이 안될 때 cmd 창에 cd 인텔리제이가 있는 파일 주소명을 입력 - idea.bat을 입력해줍니다. 그랬을 때 다음과 같은 메세지가 뜬다면
[error] intellij 한글 깨짐 인코딩
IntelliJ로 작업을 하다가 console창에 한글이 깨져 나오거나
js
[react] input
저번 시간엔 event.target 속성을 이용해 input 값을 state에 저장하는 법을 알아봤는데요. 오늘은 그 값을 기존 state 배열에 저장해 화면해 출력하도록 해보겠습니다.
[react] component 옛날 작성법
요즘엔 함수로 컴포넌트를 생성하고 useState를 이용해 값을 저장하지만 옛날엔 클래스로 컴포넌트를 생성하고 생성자함수안에 this.state에 값을 저장했습니다.
[js] event.target
addEventListener 함수로 이벤트 핸들러를 등록할 때 객체를 전달해야 하는 경우가 있습니다.
nodeWeb
오늘은 node.js를 사용해 웹페이지를 구현하는 방법에 대해 알아보도록 하겠습니다. 😉
java
[java] priorityqueue
저번에 Queue 메소드에대해 알아봤는데요. 오늘은 이어서 Queue에 우선순위를 부여하고 해당 순서에 따라 출력순서를 정해주는 PriorityQueue 클래스에 대해 알아보도록 하겠습니다. 객체 생성
[java] queue method
Queue는 Stack의 LIFO(LastInFirstOut) 선입후출 방식과 반대로 FIFO(FirstInFisrtOut) 선입선출 방식을 따릅니다.
[java] hash
코딩테스트를 하다보면, 해시방법을 쓰라는 힌트를 볼 때가 있습니다.
Stack
stack은 ‘쌓다’, ‘더미’를 의미합니다.
[java] list를 int[] 배열로 바꾸는 법
다음과 같은 int[] nums를 List형으로 바꿨다가 다시 int[]형태로 바꾸려고 합니다.
Math클래스와 함수
Math 클래스는 수학과 관련된 일련의 작업들을 쉽게 처리해주는 api들로 구성돼있습니다. java.lang 패키지에 포함된 클래스이기 때문에 import가 필요없고 메소드가 전부 static형태라 따로 객체를 생성할 필요가 없습니다. 오늘은 그중에서도 자주 쓰는 메소드들에 대...
css
[css] box Shadow
box-shadow는 선택한 요소에 그림자 효과를 만들어 주는 css 속성입니다. 기본값은 none으로 그림자 효과가 없는 상태입니다.
[react] sass
Sass는 css를 프로그래밍언어스럽게 작성하도록 도와주는 preprocessor 패키지입니다. 예로 sass를 사용하면 css 파일 내에서 변수, 연산자, 함수, extend import등을 사용해 코딩이 가능합니다.
[css] selector
css에서 특정 요소의 디자인과 레이아웃을 바꾸고 싶을 때 해당요소를 선택하기 위해 selector를 사용합니다.
[java]@media
반응형 웹사이트 만들기위해 화면 크기마다 css달리 적용해줍니다.
blog
[blog] sidebar 만들기
오늘은 블로그에 다음과 같이 sidebar를 추가해보도록 하겠습니다.
[blog] 블로그 댓글 utterances
github에 올린 페이지에 댓글달기 기능을 추가하고 싶다면, utterance를 사용하시면 됩니다. utterances는 github의 이슈를 만드는 방식으로 댓글을 생성합니다. 사용법
blog 검색 등록
저번 Google 검색 등록에 이어서 네이버,다음 검색 등록을 해보도록 하겠습니다.
[blog] google 검색 등록
블로그 제작 사이트를 통해 블로그를 생성한 경우 웹페이지가 자동으로 공개되지만 직접 블로그를 만들어 배포한 경우라면 그렇지 않습니다. 😢
react-router-dom
[react] react Router Dom ④ usehistory
useHistory는 방문기록을 저장할 수 있는 기능으로 훅으로 객체를 초기화해서 사용하는데 뒤로가기 같은 기능에 사용하기 좋습니다.
[react] react Router Dom ③ switch
리액트 라우터는 “/” 나 “/:id” 로 경로가 설정된 경우 모든 경로의 페이지를 라우팅합니다. 그게 싫고 정확히 매칭된 컴포넌트만 보이게 하고 싶다면 Switch를 사용하면 됩니다.
[react] react Router Dom ② link
원래 지정 경로 페이지로 라우팅을 하려면 href를 사용했습니다.
[react] react Router Dom ① route
리액트는 알시다시피 하나의 페이지만을 사용하죠. 그런데 여러페이지를 띄우고 싶다면 어떻게 해야 할까요?
algorithm
맨 위로 이동 ↑git
[git] 명령어 정리
remote
[git] commit 변경
만약 commit시 메세지를 잘못 입력했다면 아래 방법으로 수정하시면 됩니다.
[error] git 에러(index.lock)
어느날 git을 사용하던 중 다음과 같은 에러메세지를 만났습니다. fatal: Unable to create '레포지토리로컬경로/index.lock': File exists. Another git process seems to be running in this repository,...
project
nodeWeb
오늘은 node.js를 사용해 웹페이지를 구현하는 방법에 대해 알아보도록 하겠습니다. 😉
intellij
[error] intellij start failed오류
IntelliJ가 실행이 안될 때 cmd 창에 cd 인텔리제이가 있는 파일 주소명을 입력 - idea.bat을 입력해줍니다. 그랬을 때 다음과 같은 메세지가 뜬다면
[error] intellij 한글 깨짐 인코딩
IntelliJ로 작업을 하다가 console창에 한글이 깨져 나오거나
List
[java] list를 int[] 배열로 바꾸는 법
다음과 같은 int[] nums를 List형으로 바꿨다가 다시 int[]형태로 바꾸려고 합니다.
[java] set vs list
아래와 같이 int[] 배열이 있을 때, 서로 다른 두 인덱스의 합을 저장한 뒤 오름차순 정렬을 하려고 합니다.
jsx
[error] react Dom.development.js13231 uncaught error objects are not valid as a react child (found object with keys 복사본
리액트에서 jxs 페이지에 값을 입력하는데 다음과 같은 에러를 만났습니다.
[react] jsx
JSX는 JavaScript XML의 줄임말로 자바스크립트에 XML을 추가한 확장형 문법입니다.
bootstrap
[react] 탭메뉴 만들기
오늘은 부트스트랩을 사용해 텝메뉴 만드는 법을 알아보도록 하겠습니다. 먼저 아래 처럼 react-bootstrap을 설치후 import해주세요.
[react] bootstrap 적용
프론트엔드 작업을 할 때 직접 css를 하기 귀찮다면, css 라이브러리 bootstrap을 이용하면 됩니다. 리액트에도 마찬가지로 적용가능한데요. 다음과 같은 방법으로 사용하시면 됩니다.
queue
[java] priorityqueue
저번에 Queue 메소드에대해 알아봤는데요. 오늘은 이어서 Queue에 우선순위를 부여하고 해당 순서에 따라 출력순서를 정해주는 PriorityQueue 클래스에 대해 알아보도록 하겠습니다. 객체 생성
[java] queue method
Queue는 Stack의 LIFO(LastInFirstOut) 선입후출 방식과 반대로 FIFO(FirstInFisrtOut) 선입선출 방식을 따릅니다.
idol_collector
[team] idol Collecttor ① 백엔드 쪽 수정
다른 분이 백엔드를 개발한 뒤 프론트엔드 작업을 하게됐는데 다음과 같은 오류를 만났다. 오류 1 ) 개발자서버 작동 에러
회고
맨 위로 이동 ↑formatter
맨 위로 이동 ↑prettier
맨 위로 이동 ↑eslint
맨 위로 이동 ↑typescript
맨 위로 이동 ↑맛이 어때
맨 위로 이동 ↑mysql
[error] mysql workbench error code1175 해결
1. edit - preferences
jquery
맨 위로 이동 ↑thymeleaf
[error] 타임리프 could not parse as expression~
오늘 만난 에러 원인은 무엇이었을까요?
media
[java]@media
반응형 웹사이트 만들기위해 화면 크기마다 css달리 적용해줍니다.
continue
Continue vs break
반복문을 사용할 때 모든 경우를 다 돌아야 할까요? 🤔
break
Continue vs break
반복문을 사용할 때 모든 경우를 다 돌아야 할까요? 🤔
Math
Math클래스와 함수
Math 클래스는 수학과 관련된 일련의 작업들을 쉽게 처리해주는 api들로 구성돼있습니다. java.lang 패키지에 포함된 클래스이기 때문에 import가 필요없고 메소드가 전부 static형태라 따로 객체를 생성할 필요가 없습니다. 오늘은 그중에서도 자주 쓰는 메소드들에 대...
Set
[java] set vs list
아래와 같이 int[] 배열이 있을 때, 서로 다른 두 인덱스의 합을 저장한 뒤 오름차순 정렬을 하려고 합니다.
frontend
맨 위로 이동 ↑Comparator
[java]comparator compare()
아래와 같은 값을 가진 Map 클래스 객체 map이 있습니다.
ArrayList
맨 위로 이동 ↑node
nodeWeb
오늘은 node.js를 사용해 웹페이지를 구현하는 방법에 대해 알아보도록 하겠습니다. 😉
selector
[css] selector
css에서 특정 요소의 디자인과 레이아웃을 바꾸고 싶을 때 해당요소를 선택하기 위해 selector를 사용합니다.
hash
[java] hash
코딩테스트를 하다보면, 해시방법을 쓰라는 힌트를 볼 때가 있습니다.
routing
[react] react Router Dom ① route
리액트는 알시다시피 하나의 페이지만을 사용하죠. 그런데 여러페이지를 띄우고 싶다면 어떻게 해야 할까요?
yarn
Yarn
yarn은 자바스크립트 의존성 관리 패키지 매니저입니다. Java의 gradel이나 Python의 pip를 생각하시면 이해하기 쉬울 텐데요. npm과 같이 자바스크립트 패키지의 저장소를 제공할 뿐만 아니라 시스템에서 의존 패키지를 설치하거나 업데이트하는 등의 명령을 제공합니다. ...
sass
[react] sass
Sass는 css를 프로그래밍언어스럽게 작성하도록 도와주는 preprocessor 패키지입니다. 예로 sass를 사용하면 css 파일 내에서 변수, 연산자, 함수, extend import등을 사용해 코딩이 가능합니다.
switch
[react] react Router Dom ③ switch
리액트 라우터는 “/” 나 “/:id” 로 경로가 설정된 경우 모든 경로의 페이지를 라우팅합니다. 그게 싫고 정확히 매칭된 컴포넌트만 보이게 하고 싶다면 Switch를 사용하면 됩니다.
useHistory
[react] react Router Dom ④ usehistory
useHistory는 방문기록을 저장할 수 있는 기능으로 훅으로 객체를 초기화해서 사용하는데 뒤로가기 같은 기능에 사용하기 좋습니다.
useParams
[react] useparams & 경로설정
저번 시간에 반복문으로 하나의 component를 여러번 출력 하는 방법에 대해 알아봤습니다.
styled-components
[react] styled Components
컴포넌트가 많아지면 일일이 css 만들기 복잡합니다. 실수로 className을 중복 사용하는 경우도 있죠 그래서 styled-component를 사용합니다.
useEffect
[react] useeffect
컴포넌트엔 인생주기 lifecycle가 있습니다. 마운트, 언마운트시 (등장 업데이트), 재렌더링되고 퇴장하는 모든 순간인데요. 이 각각의 순간마다 훅을 걸면 특정 순간에 작동되는 명령을 만들 수 있습니다.
ajax
[react] axios(ajax)
ajax는 서버에 새로고침 없이 요청이 가능하게 해주며 다음과 같은 방법으로 사용합니다.
axios
[react] axios(ajax)
ajax는 서버에 새로고침 없이 요청이 가능하게 해주며 다음과 같은 방법으로 사용합니다.
useContext
[react] 데이터 바인딩 ② usecontext
App 컴포넌트에서 생성한 state를 다른 컴포넌트에서 쓰려고 할 떄 전엔 props를 통해 전달해줬습니다. 간단한 데이터를 내보내기엔 편하지만 관리가 필요한 복잡한 데이터, 또는 여러번 props해줘야 되는 데이터의 경우엔 props를 여러번 사용하는 게 불편합니다. 이럴 때 ...
redux
[react] 데이터 바인딩 ③ redux
redux는 index.js에서 Provider태그를 가지고 상위 컴포넌트 App에 state를 전송하고 reducer를 통해 데이터를 관리하기 떄문에 여러 컴포넌트에서 반복적으로 나타나는 데이터를 전송할 때 사용하면 편리합니다.
reducer
[react] 데이터 바인딩 ③ redux
redux는 index.js에서 Provider태그를 가지고 상위 컴포넌트 App에 state를 전송하고 reducer를 통해 데이터를 관리하기 떄문에 여러 컴포넌트에서 반복적으로 나타나는 데이터를 전송할 때 사용하면 편리합니다.
dispatch
[react] 데이터 바인딩 ③ redux
redux는 index.js에서 Provider태그를 가지고 상위 컴포넌트 App에 state를 전송하고 reducer를 통해 데이터를 관리하기 떄문에 여러 컴포넌트에서 반복적으로 나타나는 데이터를 전송할 때 사용하면 편리합니다.
import
[react] 상대경로 vs 절대경로
상대경로
path
[react] 상대경로 vs 절대경로
상대경로
tab
[react] 탭메뉴 만들기
오늘은 부트스트랩을 사용해 텝메뉴 만드는 법을 알아보도록 하겠습니다. 먼저 아래 처럼 react-bootstrap을 설치후 import해주세요.
etc
맨 위로 이동 ↑devcourse
맨 위로 이동 ↑box-shadow
[css] box Shadow
box-shadow는 선택한 요소에 그림자 효과를 만들어 주는 css 속성입니다. 기본값은 none으로 그림자 효과가 없는 상태입니다.
image
맨 위로 이동 ↑useRef
[react] useref()
자바스크립트에서 DOM을 조작할 땐 queryselector나 getElementById, getElementByClassName DOM Selector메소드를 사용했죠. 하지만 리액트에서 그런식으로 DOM을 조작하면 안 됩니다. 대신 useRef() 훅을 사용해야 합니다.