코딩공부

자바스크립트에서 태그에 접근할 때getElementById(), getElementsByClassName 등을 이용한다.이와 다르게 React에서는 Ref를 이용한다.그리고 Ref는 클래스 컴포넌트와 함수 컴포넌트에서 이용 방법이 서로 다르다.클래스 컴포넌트에서는 cr

클래스 컴포넌트(class component)에서는 원하는 시점에 코드가 실행되고 종료되도록 설정을 할 수 있다.필요없는 코드가 종료되지 않고 계속 사용된다면 그만큼 리소스가 낭비되기 때문에 시작과 종료시점을 설정하는 것은 중요하다.랜더가 되고나면 먼저 마운트(comp

컴포넌트는 React애서 만든 기능을 한 번만 쓰고 말거나 코드를 복사해서 붙여넣기 할 필요 없이 각 기능을 작은 조각으로 만들어 필요할 때 마다 불러와 쓰는 것이다.그리고 그 컴포넌트의 종류는 2가지로 class component와 function component가

게시글이나 댓글 등 목록화 되어있는 데이터를 받아올 때 한꺼번에 모든 데이터를 받아올 수 없기때문에 일정 양만큼 나누어 받아와야 한다.예를 들어 게시판의 게시글이 999개가 있을 때, 한 페이지에 10개의 게시글씩 나눈다면 100개의 페이지가 생길 것이다.이런 작업을

React는 데이터의 흐름이 양방향이 아니라 단방향이다.한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다.그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각

React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다.아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다.하지만 실제로 작동

기본 값을 가지고 시간이 지나거나 조건이 변하면 그 값이 변하는 것.react-hooks에서 useState를 사용해 JS의 변수처럼 사용할 수 있다.state : 변수setState : 변수 변경properties의 줄임말로 컴포넌트를 구성할 때 사용할 수 있다.(필

Java Script의 타입을 강제시키는 언어..js와 .jsx 대신 .ts와 .tsx를 사용한다.JS에서는 let으로 변수를 선언했을때, 변수의 타입이 바뀌어도 문제가 없다.그런데 Type Script를 사용해 변수의 타입을 지정해주면 다른 타입으로 재할당이 불가능하

주어진 배열에서 조건에 맞는 요소를 모아서 새로운 배열로 반환한다.1~9까지 자연수 중 짝수만 반환하도록 해보면 다음과 같은 결과를 얻을 수 있다.이 때 num은 원하는 이름을 사용해도 상관없다.조건을 만족하는 요소가 하나도 없다면 빈 배열을 반환한다.그리고 당연한 얘

배열(array)이나 객체(object)의 속성을 해체해서 각각 변수에 담을 수 있게 하는 JS 표현식. ES6부터 적용되었다.기존에 다음과 같이 표현되던 식을구조분해할당을 이용하면 다음과 같이 표현이 가능하다.여기서 , 다음 바로 ,을 쓴 것은 1번째 index는 건

코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다.이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다.React

주어진 조건에 따라 보여주는(렌더링하는) 내용이 달라지는 것위 코드도 조건부렌더링의 예라고 볼 수 있다.하지만 흔히들 말하는 조건부렌더링은 삼항연산자, &&/||연산자, 옵셔널 체이닝(Optional-Chaining)을 사용하는 것을 의미한다.data에서 받아온 정보가

라우팅 = 페이지이동 const router = useRouter() <- use를 썼다? hooks router.push("이동할 페이지") <- push 말고도 명령어 많이 있음 라우팅은 정적라우팅과 동적라우팅이있다 정적라우팅은 라우팅할 페이지를 하나하나 설

로이 필딩(Roy Fielding)이 박사 학위 논문에 정의한 개념이다.REST는 Representational State Transfer의 약자이다.HTTP 기반의 웹에서 대부분 사용되었으며 이를 따르는 시스템을 RESTful이라고 표현하기도 한다.Google, Fa

공부를 하던 중 다음과 같은 값을 나타낼 필요가 있었다.return이나 console.log를 이용해 표현해보려고 했더니너무 복잡하고 번거로웠다.그러다 Template Literals 라는 좋은 방식을 알게 되었다.내장된 표현식을 허용하는 문자열 리터럴로 위에서 사용한

많은 사람들이 저장을 제대로 하지 않아, 혹은 저장한 파일이 날아가 충격과 스트레스를 받는 경험이 있을 것이다. 나 또한 문서작업을 할 때, 그리고 콘솔게임을 할 때 두 번 다시 겪고싶지 않은 그런 경험이 있다. 또 많은 사람들은 작업을 할 때, 최최최최최최종-찐막-

Try / Catch 는 실행할 코드에 문제 또는 예외가 생겼을 때 어떻게 반응할지를 정하는 코드이다.catch 뒤에 if를 사용하여 문제 상황에 맞는 결과를 안내받을 수 있다. Catch 뒤에 Finally 를 추가하여 오류 발생 여부와 관계없이 실행되기 원하는 코드

외부에서 내보낸 정보를 가져올 때 사용한다.(컴포넌트, 이미지 등)가져올 내용에 따라(한 개만 가져올 것인가, 여러 개를 가져올 것인가, 전체를 가져올 것인가)다음과 같이 분류된다.문서 전체를 가져오는 경우하나만 가져오는 경우여러 개를 가져오는 경우문서 전체를 가져올

JSX란? 'J'ava'S'cript + 'X'ML 의 줄임말로 JS를 확장한 문법이다. React에서 다음과 같이 HTML과 유사한 코드를 사용 할 수 있게 해준다. 이 때문에 가독성이 높아 편리하다. 위 내용처럼 각각의 부분이 가지고 있는 역할이 있다. retu

클래스 컴포넌트에서는 componentDidMount(), componentDidUpdate(), componentDidUnmount() 메서드를 이용해 life cycle을 조절했다.함수 컴포넌트에서는 클래스 컴포넌트처럼 나누어 사용하지 않고 useEffect라는 하

구글의 검색창을 매의 눈으로 살펴보면 검색어를 입력할 때 바로 연관 및 추천 검색어가 뜨는 것이 아니라 약간의 딜레이를 가지고 뜨는 것을 알 수 있다. 이는 디바운싱이라는 방식이 적용된 것으로 연속해서 일어나는 이벤트를 이벤트가 일어날 때 마다 처리하는 것이 아니라 한

Object객체는 자바스크립트의 데이터 유형 중 하나로 string, number와 다르게 그 안에 여러 데이터들을 저장할 수 있다.이 때 데이터의 key범주나 형식을 정하고 value내용을 저장할수도 있다.이 객체와 관련된 메서드 몇 가지를 알아보았다.예로 사용할 c

shallow routing 얕은 라우팅은 getServerSideProps, getStaticProps, getInitialProps 같은 fetch 메서드를 다시 실행하지 않아도 URL의 변경을 할 수 있는 라우팅이다.얕은 라우팅을 사용하면 현 상태 정보를 유지한

동기 - 앞의 작업이 끝나고 나서 실행해야하는 작업일 때 사용(예 : 게시물 등록 후 게시물 조회)비동기 - 기다릴 필요가 없는(순서 상관이 없는) 작업일 때 사용(예 : 쇼핑몰 상품 목록 불러오기)java script에서 비동기JS는 기본적으로 동기로 작동하지만 ax

권한분기는 가진 데이터(회원등급, 로그인여부)에 따라 주어지는 권한이 달라지는 것을 의미한다.예를 들어 로그인을 하지 않고 https&#x3A;//mail.naver.com/을 url창에 입력하면당연히 메일 목록이 뜨지 않고 로그인 요청 페이지로 라우팅된다.이 외에도

이전 포스팅에 이어서개발자모드를 켜고 디버깅을 하면서 어떤 차례와 구조로 함수가 실행되는지 좀 더 자세히 알아보았다.이전 포스팅에 작성한 함수식을 실행하고 개발자모드의 Sources창을 열었다.외부함수를 실행하는 outer();가 있는 14행을 클릭하고 새로고침하면 해

정규표현식 정규식이라고 하기도 한다. 원하는 문자의 조합을 찾거나 구성할 때 사용한다. 여기에 .test라는 메서드를 활용하면 탐색 후 포함 여부를 boolean값으로 반환한다.

부모 컴포넌트가 가진 데이터(state)를 자식의 자식의 자식의... 최하위 컴포넌트에게 넘겨주려면 사이의 모든 컴포넌트를 거쳐야 한다.global state를 사용해 최상위에서 모든 데이터(state)를 관리해 원하는 어떤 컴포넌트에서든 바로 가져다 쓸 수 있다.컨텍

브라우저에서 간단한 key와 value값을 저장해 놓을 장소로는 Cookie, Session Storage, Local Storage가 있다.이 중 Cookie는 기존부터 쓰이던 저장소이고 Session Storage, Local Storage는 HTML5에서 새로 추

1.HOC(High Order Component) HOC, 고차 컴포넌트는 컴포넌트 로직을 재사용하기위한 로직으로 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. Redux같은 라이브러리에서 흔히 보인다. 클로저 함수로부터 확장된 개념이다. 권한분기 개념을 이 HO

커링은 HOF 중에서 요소가 여러 개인 함수의 요소 중 일부를 고정시켜 새로운 함수를 만드는 방법이다.hello, cat 두개의 요소를 사용하는 HOF를 만들었다.그 다음 hello를 "안녕하세요"로 고정시켜주는 sayHello함수를 만들었다.그러면 이렇게 hello는

자바스크립트에서 =(등호)는 서로 같다는 뜻이 아니다.등호 왼쪽에 있는 상수나 변수에 오른쪽에 있는 데이터를 할당한다는 뜻이다.a라는 변수를 선언하고 1을 할당했다.같은 값을 가졌는지 아닌지 판단하려면 어떻게 해야 하지?등호를 연달아 2번== 사용하면 같은 값을 가졌다

재귀함수는 직접적 혹은 간접적으로 자기 자신을 호출하는 함수이다.이미지에 나와있는 함수는 주어진 값 x가 0이 될때까지 1씩 빼며 스스로를 반복해서 호출한다.이를 이용하는 케이스 중 팩토리얼(계승), 하노이 타워 등이 유명하다.재귀함수를 이용해 풀 수 있는 유명한 케이

객체 또는 배열은 그 안에 요소로 배열이나 객체를 또 넣을 수 있다.이렇게 다른 객체나 배열이 또 들어가 있는(깊이가 있는) 객체/배열을 unflatten object/array라고 한다.(이중배열같은 것)그리고 깊이가 없는 객체/배열을 flatten object/ar

다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수.다음은 콜백함수의 간단한 예시이다뿐만 아니라 그 동안 많이 써오던 onClick, onChange도 콜백함수의 일종이다.콜백함수는 동기적 함수와 비동기적 함수로 나뉘는데동기함수는 프로그램이 순서대로 일어

프로그래밍에서의 토큰 : 더 이상 나눌 수 없는(문법적으로) 기본적인 언어요소네트워크에서의 토큰 : 네트워크를 따라 돌아다니는 일련의 비트열(문자열)로 컴퓨터는 이 토큰을 잡았을 때만 네트워크에 메시지 전송이 가능하다. 각 네트워크에는 오직 하나의 토큰만 존재해 여러대

Observable ReactiveX에서 제공하는 기능 ReactiveX 관찰 가능한 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 구성하기 위한 라이브러리

비동기 동작 처리를 위해 promise를 사용한다.그런데 여러개의 처리를 한 번에 할 때 시간이 오래걸리는 경우가 있다.원래대로라면 3+2+1 총 6초의 시간이 걸려야 하는데PromiseAll을 사용하면 3초로 시간이 줄어든다.출처

이미지파일이 많은 페이지에 접속하면 정보를 불러오는데 많은 시간이 걸린다. 이미지를 불러올 때 스토리지에 저장되어있는 이미지의 url을 가지고 요청해 불러와 로드하는데 이 때 기기의 사양이나 네트워크 속도가 안좋을 때는 더더욱 많은 시간이 걸릴 것이다. 빠름이 최고의

한국 사람들은 빨리빨리를 좋아한다.하지만 요청을 주고 받다보면 항상 바로바로 처리되진 않는다.그렇다면 실패해도 리스크가 크지 않으면서 성공률이 상당히 높은(97%이상) 요청에 한해서 실제로 반영되기 전에 미리 브라우저상에서만 긍정적인(성공한) 결과를 보여줘도 괜찮지 않

(연산, 함수의)특정 값을 기억해놓고 화면이 rerender되어도 기존에 저장된 값이 날아가지 않고 계속 사용할 수 있는 기능이다.컴포넌트를 감싸주어 memoization 한다. 감싸진 컴포넌트의 결과를 저장하고 결과가 바뀌지 않는다면 rerender하지 않는다.연산된

JS에서 사용하는 메서드로 배열에 사용 가능하다.배열의 각 요소에 주어진 reducer함수를 실행하고 결과값을 반환한다.inV는 초기값으로 없어도 무방하다. 있을 경우 콜백함수를 인덱스 1부터 시작하고 없을 경우 0 부터 시작한다.사용하는 인자는 4개이다.acc - 누

누군가 배포한 특정 페이지에 접속하려면 원래는 ip주소를 입력하고 들어가야 하지만 ip 대신 입력해도 들어갈 수 있게 naver.com이나 puddingg.shop 처럼 (기억하기 쉬운 특징을 가진) 주소를 의미한다..뒤에 붙는 내용으로 사이트의 성격을 파악 할 수 있

하나의 페이지로 구성된 어플리케이션브라우저의 주소창에 url을 입력하고 어떠한 페이지에 접속했을 때 모든 데이터(HTML, CSS, JS 등)를 받아오고 페이지 이동 요청이 있을 때 그 전체 중 일부를 화면에 보여주는 방식.처음에 모든 데이터를 받아오기 때문에 초기로딩

구글이나 네이버 같은 검색엔진 회사에서는 웹사이트들의 정보를 수집하는 bot을 돌리고 수집된 정보를 기반으로 사람들이 무언가 검색했을 때 목록을 띄운다. 이 때 검색엔진에서 상단에 우선노출되도록 최적화하는 과정을 SEO라고 한다.최초의 페이지를 서버에서 불러와 랜더링하

HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜이미지, 영상, 텍스트 등의 데이터를 전송할 수 있다.출처HTTP에 Secure(안전함)가 추가되어 HTTPS이다. HTTP에서 주고 받는 데이터는 암호화가 되어있지 않기 때문에 중요한 개인정보

개발을 혼자 하는 경우도 있지만 당연히 여러 명이 파트를 나누어 작업하는 경우도 많다.개발자마다 쓰는 운영체제, 개발 프로그램의 버전 등이 다르면 여러 문제가 생길 수 있기 때문에 이걸 간편하게 통일해주는 프로그램인 Docker를 사용한다.Docker는 가상머신 안에

반응형 디자인은 접속하는 디스플레이의 크기, 종류에 따라 자동으로 변하게 만든 것이다.어떤 기기에서 접속하든 같은 화면을 보여주는 것은 적응형 디자인(Adaptive Design)이라고 한다.반응형으로 페이지를 구성하면 모바일용 페이지를 따로 만들고 url를 따로 설정

CI와 CD는 모두 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법이다.지속적인 통합애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되서 공유 repository에 통합되므로 여러 명의 개발자가 동시에 애