본문 바로가기

What would life be If we had no courage to attemp anything?

전체 글271

[axios] axios 1 axios란? 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 특징 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 설치 npm install axios 사용 예시 // POST 요청 전송 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); // node.js에서 GET 요청으로 원격 이미지 가져오기 axios({ method: 'ge.. 2023. 1. 21.

[JavaScript] Event-onFocus, onBlur focus, blur? //예시 코드 이메일: focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생 blur 핸들러에선 필드에 이메일이 잘 입력되었는지 확인하고, 잘 입력되지 않은 경우에 에러를 보여줌 focus 핸들러에서는 에러 메세지를 숨김 focus와 blur 이벤트는 버블링 되지 않음. 캡처링이나 focusin ,focusout 을 사용하면 이벤트 위임 효과를 볼 수 있음 현재 포커스된 요소는 document.activeElement를 통해 확인할 수 있음 focus 가능한 HTML요소 대화형 요소 a button details input select textarea 이외의 요소는 비대화형 요소로 칭함. 💡 비대화형 요소에도 강제로 tabindex를 사용해 포커싱.. 2023. 1. 20.

[baekjoon]python #5635 생일 [baekjoon]python #5635 생일 https://www.acmicpc.net/problem/5635 5635번: 생일 어떤 반에 있는 학생들의 생일이 주어졌을 때, 가장 나이가 적은 사람과 가장 많은 사람을 구하는 프로그램을 작성하시오. www.acmicpc.net import sys input = sys.stdin.readline n = int(input()) #딕셔너리 생성 birth={} for _ in range(n): #공백 제거를 위해 strip() #이름,일,월,년 name,d,m,y = map(str,input().strip().split(' ')) #한자리 수 앞에 0붙이기 if len(d)==1: d='0'+d if len(m)==1: m='0'+m #딕셔너리에 추가 bir.. 2023. 1. 20.

[npm].npmrc npmrc 파일이란? 💡 npm에서 설정을 저장해두는 파일 내장(builtin), 전역(global), 사용자(user), 프로젝트(project) 4가지 범위의 npmrc 파일이 존재 내장 설정 npm이 설치된 경로에 있는 npmrc 파일에 명시됨 모든 기본 설정을 담고 있음 전역 설정 같은 컴퓨터를 사용하는 다른 사용자와 모든 프로젝트에 광범위하게 적용 일반적으로 잘 건들지 않음 보통, 사용자 범위와 프로젝트 범위에서 npmrc 파일을 다룸 ⇒파일 명 앞에 . 을 붙여 숨긴 파일로 사용 사용자 범위 운영 체제의 사용자 홈(home) 디렉토리에 위치 프로젝트 범위 프로젝트 최상위(root) 디렉토리에 위치 프로젝트 범위가 사용자 범위보다 좁음 ⇒ 프로젝트 설정이 사용자 설정보다 우선시 npm confi.. 2023. 1. 19.

[React] React Hook API Hook 개요 Hook은 class를 작성하지 않고도 state와 다른 React의 다른 기능들을 사용할 수 있게 해줌 Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌 기본 Hook useState useEffect useContext 추가 Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue useDeferredValue useTransition useId library hooks useSyncExternalStore useInsertionEffect 📌State Hook 여러 state 변수 선언하기 하나의 컴포넌트 내에서 state hook을 여러개 사용할 수 .. 2023. 1. 18.

[JavaScript] 비동기 동기 처리와 비동기 처리 JavaScript 엔진 싱글 스레드(signle thread) 방식 cf. 브라우저는 멀티 스레드로 동작! 한 번에 하나의 태스크만 실행 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생 동기 처리 방식 💡 현재 실행중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장됨 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 됨 /* 동기 처리 방식 * 현재 실행 중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식 */ //함수 sleep은 delay가 경과한 후에 콜백함수(func) 호출 function sleep(func, delay){ //Date.now()는 현재 시간을 .. 2023. 1. 17.

[JavaScript] API API 시스템이 만들어 놓은 서비스 창구 REST API REpresentational State Transfer 클라이언트와 서버가 주고 받는 메시지(데이터) 형식 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용 JSON Server를 이용한 REST API 실습 1. JSON Server 설치 mkdir json-server-exam && cd json-server-exam npm init -y npm install json-server --save-dev 2. db.json 파일 생성 /json-server-exam/db.json { "todos":[ { "id":1, "content":"HTML", "completed":true }, { "id".. 2023. 1. 16.

[JavaScript] AJAX & JSON AJAX Asynchronous JavaScript And XML (비동기식 JavaScript와 XML) 서버와 통신하기 위해 XMLHttpRequest 객체를 활용 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음 [참고] AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라 는 장점 때문에 JSON을 더 많이 사용함 |특징 페이지 전체를 reload(새로 고침)를 하지 않고서도 수행되는 “비동기성” 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음 AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌 페이지 새로 고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 |X.. 2023. 1. 15.

[React] React Life Cycle ; 리액트 생명주기 React란? javascript 라이브러리 React 파일들의 역할 index.js src 폴더에 포함 메인 프로그램 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하고 렌더링해 실제 표시 App.js src 폴더에 포함 컴포넌트를 정의하는 프로그램 실제로 화면에 표시되는 내용등이 정의 index.html public 폴더에 있음 메인 프로그램인 index.js에 대응되는 것 HTML 템플릿 파일 직접 표시되는 것은 아니고, index.js에 의해 일어나 렌더링 결과가 표시됨 React Life Cycle React lifecycle 용어 용어 설명 ~ will 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어 ~ did 어떤 작업을 수행한 이후에 실행되는 메서드와 관련된 용어 moun.. 2023. 1. 14.

[Electron] Electron + React 연동하기 1. React에 electron 적용하기 https://2ssue.github.io/programming/electron-react/ #create-react-app후 electron 집어넣기 npm init npm install create-react-app --save npx create-react-app {project_name} cd {project_name} npm install electron --save-dev 디렉토리 구조 {project_name} ├── public # 정적 파일. react를 사용하기 때문에 특별히 변경할 내용은 없다. ├── src # javascript 파일. react routing, electron로딩 등의 작업을 진행. │ ├── App.js │ ├── in.. 2023. 1. 13.

이전 1 2 3 4 5 6 7 8 ··· 28 다음

티스토리툴바