티스토리

태어난김에 개발자

검색하기

블로그 홈

태어난김에 개발자

born-dev.tistory.com/m

서영의 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

Nextjs Boilerplate 만들기 - 6 [React Hook Form 도입] React Hook Form 은 폼 밸리데이션 라이브러리입니다. 성능, 유연성, 확장성이 우수합니다. 사용성도 쉬우며 직접 작성한 Component 의 입력 요소에도 사용가능 합니다. 또한 재렌더링 수를 최소한으로 억제합니다. 우선 라이브러리를 설치합니다. yarn add react-hook-form TEST 용으로 TestForm 파일을 작성합니다. import { SubmitHandler, useForm } from 'react-hook-form' import { styled } from 'styled-components' type MyFormData = { firstName: string lastName: string category: string } export default function Te.. 공감수 0 댓글수 0 2023. 7. 20.
Nextjs Boilerplate 만들기 - 5 [Jest - 컴포넌트 단위 테스트] 애플리케이션 개발에서 테스트는 코드의 품질을 높이고, 코드의 변경에 예상치 못한 버그를 방지할 수 있습니다. 테스트 환경 구축 yarn add -D jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom 프로젝트 루트에 jest.setup.js 파일 생성 import '@testing-library/jest-dom/extend-expect' 프로젝트 루트에 jest.config.ts 파일 생성 테스트 파일을 Typescript 로 작성하기 위해 ts-node를 설치합니다. yarn add -D ts-node typescript jest import type { Config } from 'jest' import nextJes.. 공감수 0 댓글수 0 2023. 7. 16.
Nextjs Boilerplate 만들기 - 4 [Storybook 설정] 스토리북 설정 스토리북을 설치합니다. 스토리북은 UI 컴포넌트 개발용 지원 도구 입니다. 톡립적인 환경에서 UI 컴포넌트의 형태나 작동을 확인할 수 있고 디자이너도 함께 사용하며 협업에도 도움을 줍니다. npx storybook@latest init 설치가 완료되고 실행을 해봅니다. yarn storybook 예시 컴포넌트를 생성하여 스토리북을 테스트해봅니다 components/StyledButton.tsx 생성 import { css, styled } from 'styled-components' const variants = { primary: { color: '#ffffff', backgroundColor: '#1D3461', border: 'none', }, success: { color: '#ff.. 공감수 0 댓글수 0 2023. 7. 11.
CSR? SSR? SSG? ISR ? NextJS 에서 구현해 보자 SSG [ Static Stie Generation ] 빌드시에 HTML 에 데이터를 담아서 미리 파일을 만들고 유저에게 보여줍니다. 장점 : 이미 만들어진 페이지를 보여주는 형식이여서 서버 부담이 적고 응답 속도가 빠릅니다. 활용 : 보통 마케팅 페이지나 블로그 글 등 변화가 거의 없는 사이트에 적합합니다. 단점 : 데이터가 바뀐다면 빌드와 배포 과정을 다시 해야합니다. DB에서 데이터가 바뀐다해도 다시 빌드과정을 거치지 않는다면 이미 만들어진 페이지에는 변화를 줄 수 없습니다. 그래서 동적 컨텐츠를 포함한다면 SSG 를 사용하지 않습니다. 그렇다면 동적 컨텐츠를 만들 때 어떤 방식을 사용해야 될까요? CSR , SSR , ISR 를 사용하면 됩니다. 하지만 이 세가지 방법에도 차이점이 있습니다. CS.. 공감수 0 댓글수 0 2023. 7. 5.
성능 최적화 - 메모이제이션 ( React.memo, useMemo, useCallback ) useMemo 와 useCallback 은 불필요한 자식 요소의 재렌더링이나 계산을 억제하기 위해 사용합니다. 설명에 앞서 리액트의 컴포넌트의 재렌더링되는 시점을 보면 props 값이나 state(상태값) 이 변경 되었을 때 컴포넌트에서 참조되는 Context 값이 변경 되었을 때 부모 컴포넌트가 렌더링 되었을 때 이렇게 크게 세가지로 인해 자식 컴포넌트에서 불필요한 재렌더링이 일어납니다. React.memo 함수 컴포넌트를 메모이제이션할 수 있다. 부모의 컴포넌트가 제렌더링 되었을 때 자식 컴포넌트도 재랜더링이 일어나게 되어있습니다. 하지만 React.memo를 사용하면 props의 값이 변하지 않는 이상 자식 컴포넌트의 재렌더링을 방지 할 수 있습니다. 아래 예시를 보면 Child_1 컴포넌트는 메모.. 공감수 0 댓글수 0 2023. 7. 2.
Typescript - 고급 기능 타입스크립트를 사용할 때 편리한 기능을 소개합니다. Optional Chaining interface MyInfo { name: string, friends?:{ friend1: boolean, friend2: boolean } } const myInfo = { name:"개발자" } /* age의 값이 undefinded 이거나 null인경우를 체크하여 age를 출력해보자 */ // 옵셔널체이닝 미사용 - &&(논리연산자)를 이용 // myInfo.friends 값이 null, undefined, ‘’, 0, -0, NaN 이 아니라면 true 이고 아니면 false function funTest1 (myInfo) { if(myInfo.friends && myInfo.friends.friend1){ /.. 공감수 0 댓글수 0 2023. 6. 27.
기본 타입 외 여러 종류의 타입 Enum 타입 열거형으로 Enum를 사용하면 이름이 붙은 상수 셋을 정의합니다. enum타입을 사용하게 특수한 변수를 사용하게 되는경우 가독성이 좋아집니다. enum MyInfo { Name = '개발자', Age = 32 } console.log(MyInfo.Name) // result => '개발자' console.log(MyInfo.Age) // result => 32 Generic 타입 제네릭은 클래스와 함수에서 사용하는 타입을 추상화해 외부로부터 구체적인 타입을 지정합니다. 외부에서 지정된 타입이 달라도 작동하도록 범용적인 클래스나 함수를 정의할 때 편리합니다. // T는 클래스안에서 임시 타입이다. class Queue { private arr: T[] = [] push(item:T){ thi.. 공감수 0 댓글수 0 2023. 6. 25.
타입 Alias, Interface, Class 타입을 지정할 때 인라인으로 표기하는 방법외에도 Type, Interface, Class 을 이용하여 타입을 지정할 수 있다. 이 방법을 사용하면 재사용성이 높아지게 된다. Type Alias type Info = { name: string, age: number } function printMe(param: Info){ console.log(`${param.name} 의 나이는 ${param.age} 입니다.`) } printMe('개발자',32) // result => '개발자 나이는 32 입니다.' /* 함수 자체의 타입도 정의 가능 */ type FunTest = (name:string) => string function test(name: string, funParam: FunTest){ con.. 공감수 0 댓글수 0 2023. 6. 25.
타입 Assertion (명시적으로 타입을 정의) 타입스크립트가 구체적인 타입을 알 수 없는 경우가 있습니다. 이런 경우 Any를 사용해도 되지만 타입이 정해진 인수에 해당 값을 사용하려면 타입의 강제 정의가 필요합니다. 코드에서 자바스크립트의 내장 함수를 사용하여 값을 도출한경우를 예를 들어 설명드리겠습니다. function funTest(param:string){ return param } funTest(param) // param의 값이 string이 아니라면 type error 발생 funTest(param as string) // param의 값을 string으로 명시한다. 공감수 0 댓글수 0 2023. 6. 25.
Typescript - 함수 타입스크립트의 함수에서는 인수와 반환값의 타입을 정의 할 수 있습니다. // name 이라는 string 타입과 age라는 number Optional 타입을 파라미터로 받으며 // string 타입으로 반환하는 함수 function funTest(name: string, age?: number) : string { return 'Hello' + name } // function을 인수로 받아 사용할 수도 있습니다. funtion funTest2(name:string, format: (name:string) => string){ return format(name) } funTest2('개발자',funTest) // result => 'Hello 개발자' 공감수 0 댓글수 0 2023. 6. 25.
Typescript - 변수 타입스크립트의 변수 선언은 자바스크립트와 동일합니다. 변수 선언할 때 종류는 var, let, const 를 사용합니다. 차이는 변수를 선언하고 바로 뒤에 타입을 적어주는 것 입니다. // var temp1: 타입 = '값' // let temp2: 타입 = '값' // const temp3: 타입 = '값' let, const의 경우 블록 스코프 안에서만 사용할 수 있는 반면 var의 경우는 블록 스코프 밖에서도 사용할 수 있습니다. 또한 const 의 경우 상수를 선언할 때 주로 사용하므로 값을 변경하면 error가 발생합니다. function funTest(){ let temp1: string = 'letTest1' if(temp1 typeof 'string'){ let temp2: string =.. 공감수 0 댓글수 0 2023. 6. 25.
Typescript - 타입 정의 타입스크립트의 가장 큰 기능인 타입 정의에 대해서 공부해보도록 하겠습니다. 타입스크립트는 자바스크립트의 문법을 기본으로 작성하며 타입, 클래스 등 일부 코드의 작성법에 차이가 좀 있습니다. /* 파라미터로 받는 name 뒤에 string 타입을 붙여서 string값만 받을 수 있음을 명시합니다 */ function funTest (name : string){ console.log(name) } let name:string = '개발자' funTest(name) 만약 name 값에 string 타입이 아닌 다른 타입을 주입하면 타입스크립트 에러가 발생하게 됩니다. let num: number = 32 funTest(num) // error 또한, 변수를 호출해둔 값을 함수로 호출하는 경우 컴파일 에러가 발.. 공감수 0 댓글수 0 2023. 6. 25.
Javascript 와 Typescript 차이 타입스크립트는 자바스크립트를 확장한 상위 호환 언어입니다. 즉, 타입스크립트는 자바스크립트와 전혀 다른 언어가 아닌 자바스크립트를 기반으로한 언어입니다. /* Javascript 예시 */ function javascriptTest (name) { console.log('Hello' + name) } const name = '개발자' javascriptTest(name) /* Typescript 예시 */ function typescriptTest (name:string) { console.log('Hello' + name) } const name:string = '개발자' typescriptTest(name) 위 예시를 보면 두개의 코드는 큰 차이가 없고 변수를 선언할 때 Type을 지정하여 사용한다는.. 공감수 0 댓글수 0 2023. 6. 25.
마이크로 서비스란? 마이크로 서비스란? : 마이크로서비스는 소프트웨어가 잘 정의된 API를 통해 통신하는 소규모의 독립적인 서비스로 구성되어 있는 경우의 소프트웨어 개발을 위한 아키텍처 및 조직적 접근 방식입니다. 참고 : https://aws.amazon.com/ko/microservices/ 모놀로식 아키텍처 마이크로서비스 아키텍처 장점 - End-to-End 테스트가 용이 (MSA 경우 테스트에 필요한 서비스들을 모두 동작시켜야함) - 빠르게 간단한 서비스를 만들 수 있다 (환경이 같아서) - 쉽게 고가용성 서버 환경을 만들 수 있다 (같은 어플리케이션으로 하나 더 만들면 된다) - 유지보수 용이(일부분의 오류만 수정 가능) - 거대한 서비스도 빠르게 수정 가능하다 - 각 기능에 따라 다른 언어를 선택할 수 있음 - .. 공감수 0 댓글수 0 2022. 4. 6.
Mulesoft - Anypoint Platform 이란? [ Mulesoft 소개 영상 ] https://www.youtube.com/watch?v=jKMwe92_vvs Mulesoft 소개 영상 [ MuleSoft 사용이유 ] 기술이 발전하면서 오늘날 기업들은 약 900개의 애플리케이션을 가지고 있고 그중 29%만이 서로 연결되어 있다고 한다. 작년 2020년 IT 프로젝트는 32% 증가할 것으로 예측되었으나 대다수의 IT팀은 10% 미만의 예산 증가를 보였고, 이로 인해 각 회사의 IT팀이 혁신에 집중하지 못하게 되었으며 전 세계 IT 리더들을 대상으로 한 최근 연구에 따르면 대부분의 IT팀이 업무시간의 70%가 혁신에 투자하기보단 유지보수에 전념하고 있다고 한다. 고객의 요구가 빠르게 변화하고 있는 상황에서 4차 산업혁명의 경쟁력을 유지하기 위해 기업들은.. 공감수 0 댓글수 1 2021. 8. 24.
클라우드 컴퓨팅이란? 클라우드 이전에 기존 서버 구축방식( On-Premise )의 단점을 해결하고자 등장한 클라우드에 대해서 알아보자 [ On-Premise VS 클라우드 ] On-Premise Cloud 초기 도입 비용 일회성 비용으로 구매시 많은 비용예산이 소요됨 월정액 기반으로 사용한만큼 요금 지불 인력 운영비 시스템 엔지니어의 업무 증대 (서버 운영 및 관리 / 전산실 유지관리 등) 시스템 엔지니어 업무 감소 활용성 / 효율성 최대용량을 산정하여 시스템 설계가 이루어지므로 자원낭비 요소가 있음 운영상에 맞게 시스템 증설이 가능 구축기간 장비의 수급, 기타 인프라 조건에 의해 최소 2주 이상 늦어도 1일이면 시스템 변경,구축 가능 확장성 / 민첩성 클라우드에 비해 느림 원하는 만큼 쉽게 시스템 증설 가능 트래픽 비용 .. 공감수 0 댓글수 1 2021. 6. 29.
컨테이너 vs 가상머신 [가상머신 ( Virtual Machine , VM )] 클라우드 서비스 형태로는 기본 엔진 (AWS : EC2 , GCP : CGE 등) 으로 제공된다. VM의 구현 방법에 따라 다르지만, 기본적으로 하이퍼바이저가 여러개의 VM을 띄우고 실행한다. 이때 중요한 것은 각 VM마다 독립된 실행 환경을 제공한다는 것이다. 즉 VM1과 VM2가 동일한 OS를 사용한다고 하더라도, 데이터는 물론이고 코드도 전혀 공유하여 사용하지 않는다. 이로 인해 각 VM마다 최소 GB 단위의 공간이 필요하며, VM 수에 비례해서 늘어나게 된다. 퍼포먼스 오버헤드도 상당하다. 하드웨어까지 가상화하는 전가상화(full-virtualization)이냐 그렇지 않은 반가상화(para-virtualization)이냐에 따라 다르지만,.. 공감수 5 댓글수 2 2021. 6. 28.
하이퍼바이저란? [ 하이퍼바이저 (Hypervisor) 란? ] 물리적 하드웨어에 설치된 소프트웨어 계층으로, 물리적 머신을 다수의 가상 머신(Virtaul Machine, VM)으로 분할할 수 있도록 해준다. 즉, 호스트 컴퓨터에서 다수의 운영 체제(operating system)를 동시에 실행하기 위한 논리적 플랫폼을 말한다. - 하이퍼바이저는 단일 하드웨어에서 여러 다른 가상 머신을 호스팅할 수 있는 프로그램이다. - 시스템에서 호스트 하드웨어의 프로세서, 메모리 및 리소스가 있는 것처럼 보이기 때문에 가상 머신 또는 운영 체제 각각은 자체 프로그램을 실행 할 수 있다. 이러한 리소스를 가상 시스템에 할당 하는 것이 하이퍼바이저이다. - 가상 머신에 설치된 운영 체제는 게스트 OS 라고 부르며 경우에 따라 인스턴스.. 공감수 0 댓글수 0 2021. 6. 28.
가상화란 ? 클라우드 컴퓨팅에 대해 이해하려면 먼저 클라우드 컴퓨팅의 기반이 되는 주요 개념 중 하나인 가상화를 이해 해야된다. [ 가상화란? ] 클라우드 컴퓨팅에서 가상화란 운영 체제(OS) 내에서 가상 머신을 생성해주는 하드웨어 가상화를 의미한다. [ 가상화를 사용하는 이유 ] 1개의 OS, 1개의 태스크를 실행하기 위해서는 물리적 서버가 1대가 필요하다. 가상화를 이용하면 1대의 물리적 서버에 여러개의 OS를 마이그레이션할 수 있다. 위와 같이 가상화를 하여 한 서버에 여러개의 OS(=게스트 OS),태스크를 마이그레이션하여 사용하게 된다면 장점은 1. 비용 절감 : 필요한 물리적 서버가 줄어들면서 비용절감이 크게 된다. 게다가 마이그레이션이 쉽기 때문에 빈 서버를 재사용하거나 서버를 중지시켜 냉각 및 유지관리가.. 공감수 1 댓글수 0 2021. 6. 23.
SSR(서버사이드랜더링) vs CSR(클라이언트사이드랜더링) [ 렌더링이란 ? ] 현재 페이지를 그리기전 DOM tree + CSSOM을 결합해 만들어진 렌더링 트리를 이용해 레이아웃단계를 거쳐 페인팅(화면에 그려주는 것)되는 과정을 말한다. 브라우저 동작 과정 에 렌더링 관한걸 적어두었다 참고하면 좋을꺼같다 ㅎㅎ 렌더링 방식에는 2가지가 있다. 1. SSR - Server Side Rendering - Client에서 요청시마다 페이지가 새로고침되며, 화면이 어떻게 보여질지 Server에서 해석하여 Client에게 보내주는 방식 - 웹의 초기부터 SPA에 대한 구현체들이 나오기 전까지는 전통적인 웹사이트들은 모두 MPA 형태로 서비스해 왔다. MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형.. 공감수 1 댓글수 0 2021. 6. 9.
Babel과 Webpack을 이용한 ES6 환경 구축(1) - Babel 이란? React로 개발하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것 입니다. create-react-app 에도 기본으로 들어가있고 react 관련 튜토리얼을 따라 하다보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 javascript를 사용한다면 babel를 사용해주는것이 좋다. [ babel 이란 ? ] babel은 javascript 컴파일러다 . 입출력 모두 javascript 코드이다. [ babel을 사용하는 이유 ] 최신 버전의 javascript 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6 , ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다. [ babel-pol.. 공감수 0 댓글수 0 2021. 6. 3.
Babel과 Webpack을 이용한 ES6 환경 구축(2) - Webpack 이란? WebPack5는 build콘솔에 여러 warning이 발생, 각종 plugin에서 아직 webpack5대응이 완벽하게 되어 있지 않은 것 같습니다. [ WebPack 이란? ] 모듈 번들링이라고 한다. 모듈 번들링이란 html 파일에 들어가는 필요한 다수의 의존관계에있는 모듈들을 하나의 Javascript 파일로 만들어주는 방식이다. [ WebPack을 사용하는 이유 ] 1. 여러개의 파일을 하나로 묶어줌 Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 Javascript 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다. 옛날에는 페이지마다 새로운 html을 .. 공감수 0 댓글수 0 2021. 6. 3.
[React] lodash _.merge 가 안된 경우 21번 라인을 보면 lodash 문법중 하나인 _.cloneDeep()를 사용하여 깊은 복사를 한뒤에 22번 라인에서 _.merge를 해주니 잘됫다. 사실 아직도 원인은 잘 모르겠다....원인을 찾아보려고 Object.getOwnPropertyDescriptors()를 사용하여 읽기쓰기 가능여부를 체크한결과 enumerable : true 또는 false, 열거 가능한지 여부 configurable : true 또는 false, 제거 가능한지 여부 value (선택) property의 값, 기본은 undefined writable : true 또는 false, true이면 읽기 쓰기 가능이고 false이면 읽기만 가능 모두 True 였다....원인은 뭔지는 모르겠으나 깊은복사로 해결을 했고 lodash에.. 공감수 0 댓글수 0 2021. 5. 21.
클로져(Closure)는 무엇이며, 어떻게/왜 사용하는가? 클로져를 제대로 이해하기 위해서는 javascript 의 scope, scope chain, context 에 대한 이해가 선행 되어야 한다. [scope] : 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있다 자바스크립트에선 2가지의 스코프가 있다 1. global (전역) : 어느 곳에서든지 해당 변수에 접근가능. 2. local (지역) : 해당 지역에서만 접근 가능 자바스크립트는 함수를 선언할 때마다 새로운 스코프를 생성한다. 함수 안에서 선언한 변수는 해당 함수 안에서만 접근할 수 있는데 이걸 함수 스코프(function-scoped)라고 한다.(함수스코프는 local scope의 예라고 할 수 있다.) EX) pri.. 공감수 2 댓글수 0 2021. 5. 6.
반응형 웹과 적응형 웹 차이점 [반응형 웹] 화면의 크기에 따라 홈페이지의 사이즈가 변화한다. PC / 태블릿 / 모바일 각각의 전용 홈페이지를 만들 필요가 없음 장점 : 1. 유지보수가 효율적이다. -> 하나의 소스를 수정하면 모든 기기 사이즈에 맞추어 콘텐츠가 최적화 2. 사용자가 기기에 구애를 받지 않는다 단점 : 1. 비용이 높다 해상도별로 출력될 화면을 정의하는데 소요되는 공수가 있어 제작비용이 높다 2. 접근성이 떨어지거나 , 비효율적일 수 있다. -> 쇼핑몰과 같이 많은 양의 정보를 한 화면에서 보여주는 경우 3. 코드가 복잡하다. (적응형 웹보다 가격이 비싼이유이다.) -> 고정된 픽셀값 대신 백분율 값을 사용하고 기기화면 크기에 따라 조정해야 되기 때문 [적응형 웹] 적응형 홈페이지는 기준이 되는 기기의 사이즈가 되면.. 공감수 1 댓글수 0 2021. 5. 6.
Broken pipe 오류 원인, 해결 방법 직접 경험해 본 것은 아니지만 공부도중 적어볼 필요가 있어 끄적여 봅니다. ㅎㅎ [java.net.SocketException : Broken pipe] [원인] - 잦은 입출력 호출로 발생한다. 처리 중인 요청(또는 응답)을 사용자가 기다리지 않고 '새로고침(또는 종료, 연속 클릭)' 을 자주 실행하게 되면 소켓이 끊어져서 발생한다. EX ) 동작원리 : 웹브라우저에서 서버에 연결을하면 accept된 soket을 HttpThread에 넘기고, ThreadPool에서 조건에 맞으면 해당 HttpThread를 기동하게 되어있다. 오류원인 : HttpThread가 완료되기 전까지 다시 재요청을 하지 않는다면 문제가 되지 않지만, HttpThread가 완료되지전에 재요청을 하게 되면 문제가 된다. 이유는 처음.. 공감수 5 댓글수 1 2021. 5. 6.
함수형 컴포넌트와 클래스형 컴포넌트의 차이 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. [함수형 컴포넌트를 선호하는 이유] 요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트+Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면, 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어.. 공감수 10 댓글수 1 2021. 5. 4.
컴포넌트 반복 : map() [map() 함수] arr.map(callback, [thisArg]) 1) callback : 새로운 배열의 요소를 생성하는 함수이며, 파라미터는 다음 3가지 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 2) thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 [컴포넌트 map 예시 1 - key가 없는 경우] : 하단의 예시대로 한다면 키값이 없어 콘솔창에 경고를 출력하게 된다. key • 리액트에서 key는 배열을 렌더링 했을 때 어떤 엘리먼트에 변동이 있었는지 알아낼 때 사용합니다. 1) key가 없으면 - 가상 DOM을 비교하는 과정에서 리스트를 .. 공감수 0 댓글수 0 2021. 4. 26.
ref: DOM [ref:DOM 이란?] jquey에서 이런 식으로 ID값을 가져와 DOM를 직접 핸들링한다. React에서도 DOM를 직접 접근하고 싶을때 사용하는것이 ref DOM 이다. [예시] 컴포넌트에 ref 사용 : 스크롤 박스 조작하기 ( this.scrollBox=ref } } this.scrollBox.scrollToBottom() HTML DOM 에 ref 사용 : 특정 input 에 focus 주기 this.input=ref } /> this.input.focus() : 하단 예시를 보면 input에 입력한 값이 0000이면 텍스트필드의 색상을 lightgreen 아니면 lightcoral 으로 변경한다. 우선 CSS를 만들어준다. [ref 사용 전] [ref 사용 후] 공감수 0 댓글수 0 2021. 4. 26.
Collection 이란? 자바에서 컬렉션 프레임워크(collection framework)란 다수의 데이터를 쉽고 효과적으로 처리할 수 있는 표준화된 방법을 제공하는 클래스의 집합을 의미합니다 즉, 데이터를 저장하는 자료 구조와 데이터를 처리하는 알고리즘을 구조화하여 클래스로 구현해 놓은 것입니다. java.util.Collection 인터페이스 그룹 java.util.List : List 자료 구조 ( ordered, sequential ) java.util.Set : Set 자료 구조 ( unique element ) java.util.SortedSet : 정렬된 set java.util.NavigableSet java.util.Queue : Queue 자료 구조 (한쪽에서 삽입, 반대에서 추출) java.util.Deque.. 공감수 0 댓글수 0 2021. 4. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.