모달창을 열었을 때 모달 바깥 화면을 드래그할 경우 외부 스크롤이 되어 사용자에게 깔끔하지 못한 사용감을 줄 수 있다. document.body 객체를 이용하여 모달창을 열었을 땐 scroll을 없애고, 닫았을 때 다시 scrollbar를 생성시킨다. onModalOpen은 모달창을 켰을때 이벤트 함수이며, onModalClose는 끌때의 이벤트 함수이다. 중복모달을 사용할 경우에는 조금 꼬일 수 있기때문에 고려해서 사용해야 한다. const [modalOpen, setModalOpen] useState(false); const onModalOpen = useCallback(() => { document.body.style.overflow = "hidden"; setModalOpen(true); }, [..

CODING/React.js 2022. 12. 22. 15:59

textarea로 작성된 data를 불러올 때, 글 중간에 URL 링크 삽입시 바로 링크로 연동될 수 있도록 하는 함수입니다. 정규표현식을 통해 http, https, www 등의 프로토콜 여부를 체크한 후에 해당 부분을 a태그로 변형해준다. const parseLinkTextToHTML = (text) => { const regURL = new RegExp("(http|https|ftp|www|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)", "gi"); const regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+.[a-z0-9-]+)", "gi"); return text ?.replace(r..

CODING/React.js 2022. 12. 22. 15:53

가끔 컴포넌트 작동시 특정 이벤트 없이 초기에 데이터를 불러모으기 위해서 firebase 명령을 시행할 때 갑작스럽게 많이 시행되는 경우가 있다. 방심하다가는 firebase에 쿼리 요청이 과다하게 반복되어 하루동안 firebase 사용이 중지될 수 있다. 이를 방지하기 위한 useEffect를 통해 비동기처리 한 번만 실행하는 방법이다. const [data, setData] = useState("") useEffect(() => { async function fetchAndSetUser() { setData([]); setLoading(true); const result = await getUserInformations(userID); setData(result); } fetchAndSetUser()..

CODING/React.js 2022. 12. 21. 22:12

배포시에 자꾸 새로고침하면 root페이지로 이동하는 에러... firebase 설정시 rewrites를 추가해주면 root페이지로 이동하고 그렇지 않으면 404 에러가 난다. SPA관련해서 발생하는 에러라고 하는데 나는 해결방법만 알면 된다. firebase 설정에서 해당 내용을 추가해주었다. firebase.json "hosting": { "public": "out", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "cleanUrls": true, "appAssociation": "AUTO", "rewrites": [ { "source": "/**", "destination": "/index.html", "dynamicLinks": true ..

CODING/etc. 2022. 10. 24. 15:54

앱 개발을 해야 하는 상황에서 리액트 네이티브와 플러터 중 고민하면서 써치를 좀 해본 결과 러닝커브가 괜찮고 부담이 덜 하다는 플러터를 배우기로 선택했다. 주변인들을 통해, 그리고 인터넷을 통해 몇가지 무료강의를 추천받았다. 인프런 무료강의 자주 애용하는 인프런에서 플러터 무료 강의를 찾아보았다. 양질의 무료 강좌들이 몇개 있었다. 일단 dart언어 문법을 빠르게 학습하고 무언가를 만들어 볼 수 있는 클론코딩을 배우는 게 가장 좋다. [무료] [코드팩토리] [입문] Dart 언어 4시간만에 완전정복 - 인프런 | 강의 이 강의를 통해 Dart 언어를 배우면 Flutter를 시작할 수 있을 정도의 수준으로의 업그레이드가 가능합니다!, - 강의 소개 | 인프런... www.inflearn.com [무료] 플..

CODING/etc. 2022. 6. 7. 14:53

package encap.bad; public class MainClass { public static void main(String[] args) { MyBirth my = new MyBirth(); my.year = -200084; my.month = 110; my.day = 13; my.birthInfo(); // 쓰레기값도 출력됨 --> 직접 year에 작성하지 못하게 하기 위해서 은닉을 써야 함 } } package encap.bad; public class MyBirth { int year; int month; int day; void birthInfo() { System.out.printf("내 생일은 %d년 %d월 %d일입니다.", this.year, this.month, this.day)..

CODING/Java 2022. 6. 1. 16:42

//설계용 클래스(라이브러리 클래스)에서는 메인메서드를 작성하지 않습니다. public class a_Pen { //객체의 속성을 필드(클래스 멤버변수)라고 부릅니다. String color; int price; //객체의 기능들을 메서드라고 부릅니다. void write() { System.out.println(color + "색 글을 씁니다."); } void priceInfo() { System.out.println(color + "펜의 가격은" + price + "원 입니다."); } } public class b_PenFactory { public static void main(String[] args) { // 펜의 기능과 속성을 사용하려면 설계도(class)를 바탕으로 펜 객체를 생성해야 합..

CODING/Java 2022. 6. 1. 16:39

[0720] package java0720; import java.util.Arrays; public class arrayBasic { public static void main(String[] args) { //1. 배열 변수의 선언. int[] arr; // java style. int arr2[]; // c style. // int arr3[5]; 자바에서는 선언시 크기 명사가 불가합니다. //2. 배열 객체의 생성 - 실제 값들이 저장될 공간을 생성. arr = new int[5]; System.out.println(arr); // 이렇게 해서 출력해보면 배열의 객체의 주소값이 들어감 추후설명예정 //3. 배열의 초기화 - 배열 내부에 실제 값을 저장하는 행위. //배열의 초기화는 인덱스를 통해 ..

CODING/Java 2022. 6. 1. 16:36

자바 표준 입/출력(IO: Input/Output) - IO란 입력과 출력을 뜻합니다. - Input: 1. 파일의 데이터를 읽는다. (loading) 2. 키보드의 입력데이터를 읽는다. 3. 네트워크상의 데이터를 읽는다. - Output 1. 파일에 데이터를 쓴다.(save) 2. 모니터에 데이터를 쓴다.(모니터에 데이터를 출력한다.) 3. 네트워크상에 데이터를 쓴다.(파일 전송) - C언어에서는 문자열을 출력할 때 printf() 함수를 이용하고, 입력받을 때 scanf() 함수를 이용합니다. - 자바에서 데이터를 출력하는 명령은 System.out이고, 데이터를 입력받을 때는 System.in을 이용합니다. - 데이터를 입력받을 때는 표준 JAVA API인 Scanner클래스를 사용하며, 이 Sca..

CODING/Java 2022. 6. 1. 16:32

형 변환(type casting) ■ 데이터의 크기 # byte(1) < short(2) < int(4) < long(8) < float(4) < double(8) - float은 4바이트인데 long보다 큰 타입인 이유는 표현할 수 있는 값의 경우의 수가 float이 더 크기 때문입니다. - 크기가 작은 데이터 타입을 크기가 큰 데이터 타입으로 변환할 때는 캐스트 연산자를 사용하지 않아도 컴파일러에 의해 자동으로 형 변환이 일어납니다.(자동 형 변환: Promotion) - 크기가 큰 데이터 타입을 크기가 작은 데이터 타입으로 변환할 때는 반드시 캐스트 연산자를 사용하여 변환할 데이터 타입을 명시해야 합니다.(강제 형 변환: Type Casting). 그렇지 않으면 컴파일시 오류가 발생합니다. - 서로..

CODING/Java 2022. 6. 1. 16:24

주석문과 식별자 - 주석문(Comment): 1. 주석은 프로그램의 실행에는 전혀 영향을 미치지 않습니다. 2. 코드를 입력한 후 그 코드를 이해하기 쉽도록 첨언하는 기능입니다. 3. 코드에 주석을 달아 프로그램을 수정하거나 변경할 때 시간과 노력을 절감할 수 있습니다. * 주석의 종류 1. 한줄 주석(//): 주석 내용이 한줄일 때 사용. // 다음부터 그 줄의 끝까지의 내용이 주석으로 간주됩니다. 2. 여러 줄 주석(/* ~~~~~ */): 여러 줄의 주석이 필요할 때 사용. /* ~~ */ 사이의 내용이 모두 주석처리됩니다. 3. document 생성용 주석(/** ~~~ */) : API 문서 생성용 주석입니다. * 세미콜론(;), 블록({}), 공백(whitespace) - 논리적인 한 문장이 ..

CODING/Java 2022. 6. 1. 16:16

자바의 특징 1. 객체지향 언어 2. 플랫폼 독립적(아키텍처 중립적) 3. 멀티스레드 지원 4. 분산 환경 5. 간단한 코드 6. 뛰어난 보안성 7. 고성능 8. 모듈화 절차 지향 vs 객체 지향 1. 절차 지향 프로그래밍 - ex) 자동차를 만들 때 전체를 하나의 몸체로 만든다. - 바퀴, 엔진, 핸들... 등이 하나로 뭉쳐져 있다. - 단점: a. 한 부분이 고장나면 전체가 동작하지 않는다. b. 그리고 유지 보수에 어려움이 있다. c. 개발 기간이 오래 걸리고 비용이 많이 든다. d. 협업이 어려움 - 장점: a. 섬세한 코딩 가능. b. 메모리 사용이 적다. c. 작은 규모의 프로그램에 적합. 2. 객체 지향 프로그래밍 - ex) 자동차를 만들 때, 부품 별로 미리 만들어 두고, 나중에 한번에 조..

CODING/Java 2022. 6. 1. 16:09