본문 바로가기
반응형

분류 전체보기117

React에서 폼 form을 다루는 방법 1. 참조를 이용하는 방법 useRef() 훅은 컴포넌트 생명주기 동안 사용할 수 있는 ref 객체를 반환해 줍니다. 이 객체는 current 프로퍼티에 렌더링에 필요하지 않은 값을 저장해 두고, 필요할 때마다 참조할 수 있도록 해줍니다. CreateForm.js는 아이디와 패스워드를 저장할 수 있는 ref 객체(loginId, password)를 엘리먼트의 ref 속성에 추가해주고 있습니다. submit 이벤트가 발생하면 ref 객체의 current.value에 있는 값을 id, pw에 각각 저장한 다음 onAccess 함수를 통해서 상위 컴포넌트로 올려 보내고 다시 초기화시켜 줍니다. 만약 입력한 아이디를 유지하고 싶으면 loginId.current.value = ""; 부분을 삭제하면 됩니다. 이 .. 2023. 5. 25.
Github에 올릴 파일을 선별하는 방법(gitignore, update-index, rebase) 1. 로컬 전용 보통 github에 올라가면 안 되고 오로지 로컬에서만 사용하는 파일의 경우 아래와 같이 .gitignore에 적어놓고 git이 해당 파일을 추적하지 않도록 합니다. *.zip # 모든 zip 파일 temp/ # temp 디렉토리와 하위의 모든 파일 /log # 최상위 디렉토리 아래에 있는 log 하지만 이미 git add로 staging area에 추가되었거나 repository에 올라가버린 경우 git rm로 삭제한 다음 commit을 해야합니다. $ git rm 파일명 2. 개별 설정 파일 github에 업로드는 되어있으나, 이를 다운받아서 개인별로 환경에 맞게 수정해 사용하는 설정 파일의 경우 git이 추적하지 않도록 막아야 합니다. 예를 들어, 서버에 있는 설정 파일에 /home.. 2023. 5. 22.
AJAX를 왜 사용하는가 AJAX란 무엇인가 AJAX(Asynchronous Javascript And XML)는 비동기 자바스크립트 그리고 XML이란 뜻을 가지고 있으며 XMLHttpRequest라는 객체를 이용해서 서버와 통신하는 방법을 말합니다. 웹 화면단에서 서버와 통신하는 전통적인 방법은 폼 태그 를 사용하는 것입니다. 그런데 폼을 제출 할 때에는 페이지 전체의 새로고침이 발생하게 됩니다. 회원가입이나 로그인, 게시글 작성과 같은 일회성 이벤트는 폼으로도 충분하지만, 현재 페이지의 상태를 유지하면서 수시로 서버와 데이터를 주고 받아야하는 경우 한계에 부딪힐 수 있습니다. 현대의 웹에서 가장 중요한 키워드가 '동적인 페이지'와 'UX'라는 점을 고려하면 비동기 통신은 선택이 아닌 필수라고 할 수 있습니다. 이런 요구에 부.. 2023. 5. 8.
[HTTP] User-Agent를 읽는 법 웹 개발을 하다보면 접속 환경과 관련된 이슈가 종종 발생합니다. 그럴 때는 로그에 남아 있는 클라이언트의 정보를 유용하게 활용할 수 있습니다. 사용자의 접속 환경 정보는 요청 헤더 Request header 의 User-Agent, UA가 가지고 있습니다. UA는 클라이언트의 브라우저, 운영체제 종류에 따라 다른 웹 페이지를 보여주거나, 통계를 내는 등 다양한 용도로 활용할 수 있습니다. 브라우저를 열고 개발자 도구의 콘솔에서 navigator.userAgent 를 입력하면 다음과 같은 결과를 출력해 줍니다. Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.3.. 2023. 5. 2.
[MySQL] SELF JOIN 셀프 조인을 쓰는 이유 JOIN 1) 우리에게 다음과 같은 MONKEYS 테이블과 FRUITS 테이블이 주어졌습니다. create table MONKEYS ( id, tutor_id, favorite_fruit_id, type, monkey_nm, training_status ); create table FRUITS ( id, fruit_nm, origin, price ); 이로부터 원숭이의 이름과 원숭이가 가장 좋아하는 과일의 이름을 찾으려면 어떻게 해야 할까요? 여러 개의 테이블을 동시에 참조하려고 할 때, ON절에 주어진 조건으로 테이블을 결합할 수 있는 JOIN을 사용합니다. m 테이블의 favorite_fruit_id와 f 테이블의 id가 일치하는 경우를 조건으로 걸어 JOIN 한 다음, 결합된 테이블로부터 검색을 하.. 2023. 5. 2.
프로그래밍 패러다임 - 구조적, 객체 지향, 함수형 프로그래밍 프로그래밍 패러다임 은 어떻게 코드를 작성할 것인가? 에 대한 답이라고 할 수 있습니다. 시대의 흐름에 따라 이 질문에 대한 대답은 계속 달라지고 있고, 그에 따라 새로운 언어와 도구가 인기를 끌고 대세로 등극하거나 점차 쇠퇴해 가기도 합니다. 프로그래밍 패러다임을 다루는 위키 문서에는 수십 가지의 패러다임을 소개하고 있고, 구글에 검색을 해보면 복잡한 계층도 그림이 제일 먼저 눈에 들어옵니다. 간단히 소개해 보자면 옛날에는 코드가 순차적으로 실행되는 절차 지향 프로그래밍으로 개발을 했지만 JAVA와 C++ 등과 함께 객체 지향이란 개념이 등장하면서 크게 판도가 바뀌었습니다. 이 절차 지향이니 객체 지향이니 하는 것은 '어떻게' 문제를 해결할 것이냐에 초점을 맞춘 명령형 프로그래밍이고, 나는 관점 자체를.. 2023. 4. 27.
반응형