[React/Hooks] useContext에 대하여

useContext context이용시, 트리 단게마다 명시적으로 props를 넘겨주지 않고도 컴포넌트가 값을 공유할 수 있다 useContext는 Context.Provider과 같이 사용된다 context를 써야하는 경우 예를 들어, 로그인한 유저, 테마, 선호하는 언어 등의 전역적 데이터를 공유할 때 (아래는 테마를 통한 예시) 기존 방식: 테마 인수를 명시적으로 넘겨주기 정보를 일일이 넘겨주고 있음 App > Toolbar > ThemedButton class App extends React.Component { render() { return ; } } function Toolbar(props) { return ( ); } class ThemeButton extends React.Componen..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 5.
• textsms

[React/Hooks] useEffect에 대하여

useEffect함수 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록함 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 되었음 useEffect() 작성법 useEffect(funtion, deps) fuction: 수행하고자 하는 작업 deps: 검사하고자 하는 특정 값에 대한 배열 혹은 빈 배열 *deps = dependency Component가 mount되었을 때 mount란 component가 가장 처음 렌더링 될 때다 deps위치에 [ ] 표기 혹은 배열표시 생략 예시코드 import React, {useEffect} from 'react'; useEffect( () => { //컴포넌트 화면에 가장 처음 렌더링 될 때, 한 번만..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 5.
• textsms

[React/Hooks] useState에 대하여

1. useState() 함수형 컴포넌트에서 상태를 관리하기 2. 사용법 리액트 패키지에서 useState 함수를 불러온다 import Ract, {useState] from ‘react’; useState함수 호출을 통해 배열을 반환시킨다 const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값); 상태 값 갱신 함수, setNumber 라고 지정해줬다고 치자. 여기엔 업데이트 할 새로운 값을 넣어줄 수 있다. setNumber(number+1) 기존 값을 업데이트 하는 함수를 넣어줄 수 있다. setNumber(preNum ⇒ preNum +1) 3. 예시 import React, {useState} from 'react'; function InputTest() { c..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 4.
• textsms

[CSS] 반응형 Header 만들기

초기 코드index.html Co-kgyury Home Tistory Github Velog Youtube   1️⃣ 목록 만들기ul:UnOrdered List목록화 되어있음을 나타내기 위함.이 안에 카테고리 목록이 될 리스트들을 작성해주자아무 의미 없는 div로 각 영역을 나타내기보다, ul로 나타내주자(li>a)*5 로 단축시켜 다섯 개를 불러낼 수 있다. ..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 2. 3.
• textsms

[JAVA] Stream 기술

자바를 자바바Stream: 함수 여러 개를 조합하여 필터링, 맵핑된 결과를 얻게 할 수 있도록 함   1️⃣ 배열의 원소를 가공하는 방법 map: 요소들을 특정 조건에 해당하는 값으로 변환함filter: 요소들을 조건에 따라 걸러내는 작업을 함sorted 요소들을 정렬하는 작업을 함위와 같은 가공이 끝나면, 리턴해줄 결과를 collect를 통해 만들어준다 2️⃣ 실전test SETArrayList list = new ArrayList(Arrays.asList("KIM", "GYU", "RY"));1. maplist.stream().map(s->s.toUpperCase());list.stream().map(String:toUpperCase);System.out.print(list.stream() .m..

• format_list_bulleted ✏️ 개발 공부/SpringBoot
• · 2022. 2. 2.
• textsms

[리팩토링] 1: backend와 Mysql 연동 확인

아니 그러니까 말이에요 제가, 로컬에서 도커 파일 만들고 깃으로 올려서 aws서버를 jupyter로 접속한 뒤 docker build를 했더니 화면이 멈춘 게 아니에요? 보니까 도커파일에 주석을 제 맘대로 적은 게 원인인 것 같았죠. 일단 build 행위를 멈추기 위해 서버를 재시작한다는 걸 인스턴스 종료를 해버린 게 아니에요? 다시 인스턴스 생성부터 해야겠죠. 그래서 다시 시작했어요. 그러다가 backend 파일을 구동시키려고 보니까 지금 진행하는게 도커를 쓰는 의미를 잃어버렸네요? 결론은. 어떻게 되었냐면요. 1️⃣ 리팩토링, backend>App.js 현재 파일 구조 ~ backend ~ 📁 config - 🗄️ config.js 📁 models - 🗄️ index.js - 🗄️🗄️🗄️🗄️🗄️🗄️🗄..

• format_list_bulleted 🐶🐾 개발/ETC
• · 2022. 2. 2.
• textsms