전체 글 (364) 썸네일형 리스트형 코드숨 Spring 10주차 회고 1. 한 것 개인 프로젝트 REST API 구축 블로그에 글 정리 - Hook 소개 - Hook 개요 - State Hook 사용하기 - Effect Hook 사용하기 - HTTP - 정규표현식 - 정규표현식 사용하기 - 코딩테스트 풀기 2. 느낀 것 별로 없다. 아니 엄청나게 많은 걸 느껴서 오히려 뭘 느꼈는지 모르겠다. 그냥 최대한 코딩에 집중하려 애썼다. 그런데 왜 주위에서 나를 가만 냅두지 않지? 집 밖에 안나가고 코딩만 하려고 해도 헤어져서 힘든 것보다 더 힘든 일들이 자꾸만 더 생긴다. 정신 똑바로 안차리면 나락으로 떨어질 것 같은 느낌이다. 사람이 너무 무섭다. 발을 조금만 헛디디면 돌이킬 수 없을 정도로 내 인생이 파괴될 것이다. 내가 나를 보호해야지. 신앙 근본으로. 멘탈이 너덜너덜하다... 정규표현식 사용하기 정규식 사용하기 정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다. 이 메소드는 JavaScript reference에서 잘 설명되어 있습니다. Method Description exec 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다. test 대응되는 문자열이 있는지 검사하는 RegExp 메소드입니다. true나 false를 반환합니다. match 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다. search 대응되는 문자열이 있는지.. 정규표현식 정규표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드, 그리고 String의 match 메소드, replace 메소드, search 메소드, split 메소드와 함께 쓰입니다. 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다. 정규표현식 만들기 정규식을 만드는 방법에는 두 가지가 있습니다. 정규식 리터럴(슬래쉬"/"로 감싸는 패턴)을 사용하는 방법은 다음과 같습니다. var re = /ab+c/; 정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다. 다른 방법으로는 RegExp 객체의 .. HTTP HTTP 하이퍼텍스트 전송 프로토콜(HTTP)은 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜입니다. 웹 브라우저와 웹 서버간의 커뮤니케이션을 위해 디자인되었지만, 다른 목적으로도 사용될 수 있습니다. HTTP는 클라이언트가 요청을 생성하기 위한 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델을 따릅니다. HTTP는 무상태 프로토콜이며, 이는 서버가 두 요청간에 어떠한 데이터(상태)도 유지하지 않음을 의미합니다. 일반적으로 안정적인 전송 레이어로 UDP와 달리 메세지를 잃지 않는 프로토콜인 TCP/IP 레이어를 기반으로 사용합니다. RUDP - 안정적인 업데이트인 UDP의 적합한 대안입니다. HTTP 개요 HTTP는 HTML 문서와 같은 리소스들.. [React] Effect Hook 사용하기 Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다. document.title = `You clicked ${count} times`; }); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 위의 코드는 이.. [React] State Hook 사용하기 Hook 소개에서 아래 예시를 통해 Hook과 친해졌습니다. import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 아래의 클래스 예시와 비교하며 Hook의 특징에 대해 배울 예정입니다. Hook과 같은 기능을 하는 클래스 예시 React에서 클래스를 사용해봤다면, 아래의 코드는 익숙할 겁니다. class Example extends React.Component { constructor(p.. [React] Hook 개요 Hook은 하위 호환성을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hook에 대해 간략히 소개합니다. State Hook 버튼을 클릭하면 값이 증가하는 간단한 카운터 예시가 여기 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 여기서 useState가 바로 Hook입니다. Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추.. [React] Hook 소개 Hook의 개요 Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } useState라는 새로운 함수는 우리가 "Hook"에서 처음 배우게 될 함수입니다. 이 페이지에서는 왜 우리가 Hook을 React에 추가했는지, 그리고 어떻게 Hook이 어떤 도움을 주는지 설명할 것입니다. Hook의 특징은.. 이전 1 ··· 25 26 27 28 29 30 31 ··· 46 다음
