despiteallthat의 등록된 링크

키자드에 등록된 총 260개의 포스트를 확인하실 수 있습니다.

Tistory

Git commit message는 어떻게 작성해야 할까?

오늘은 Git commit message에 대한 이런저런 얘기를 나눠보겠습니다. :) [ commit은 원자적으로 유지하자 ] 원자적? 작다? 네 Git 공식 문서에 따르면 commit은 가능하다면 단일 기능이나, 단일 변화, 수정을 포함해야 하며 각각의 커밋은 한 가지에만 집중하는 게 좋다고 합니다. ️ GitHub에 올려진 내 프로젝트 혹은 공부하던 작업물을 올리려고 할 때, 수도 없이 commit을 하고는 하는데요. 혹시, commit은 어떤 기준으로 하는 것이 좋은지 생각해보신적 있으신가요? 한 가지 예시를 들어보도록 하겠습니다. 예시 어떤 쇼핑몰을 만드는 프로젝트를 작성하고 있다고 할 때, 쇼핑몰 안에 있는 물건들의 목록이 있는 파일이 있습니다. 그 파일에는 50가지의 물품이 저장되어 있는..

원문보기 내부링크
Tistory

[Git, GitHub] commit, commit message 수정하는 법

오늘은 git commit과 commit message를 수정하는 법에 대해 알아보겠습니다. [ commit 수정 ] git으로 작업할 때, 새 커밋을 실행한 다음 그 커밋에 관련 파일을 포함시키는 것을 잊었거나, 커밋 메시지를 읽었을 때 오타가 있는 것을 뒤늦게 깨달을 때가 있습니다. 이를 해결하는 방법에 대해 알아보겠습니다. 전제 조건: local에서 commit을 하고 push를 하지 않아 remote에 올라가지 않은 상태여야 한다. 1. git commit --amend $ git status ---- modify: **/js 등등 ---- $ git add. $ git commit -m "Upload filename" $ git commit --amend 위와 같이 amend를 이용하면 ..

원문보기 내부링크
Tistory

[Router] loader의 error 처리 with useRouterError & json

오늘은 loader 함수의 error 처리에 대해 알아보겠습니다. 현재 "events" path를 가진 페이지에서 사용되는 loader는 다음과 같습니다. loader 함수에서는 에러가 발생하면 JSON 형태의 error message와 status 500 상태를 전송하고 있습니다. events path에서 발생한 오류는 상위 컴포넌트(라우트)인 ErrorPage에서 다루고 있습니다. ErrorPage에서는 loader로 인해 발생한 error뿐만 아니라 page 전체에서 발생한 에러를 모두 다루고 있습니다. 여기서 useRouteError 기능을 사용하면 loader에서 throw new Response로 발생시킨 error data를 받아올 수 있습니다. 또한 발생한 error의 status에 따라 ..

원문보기 내부링크
Tistory

[Router] action과 Form, useActionData 그리고 redirect

action과 Form, useActionData 그리고 redirect에 대해 알아보겠습니다. [ action ] react router dom에서 action을 배울 때 주목해야 할 부분은 HTML form입니다. HTML form은 특정 url에 데이터를 전송해서 처리하는 요청 과정입니다. 그리고 그 요청을 처리할 주소 값은 보통 action에 정의합니다. 클라이언트 사이드에서 form을 처리하기 위해 리액트 라우터는 Form이라는 것을 사용합니다. 그리고 이는 html form을 모방하여 클라이언트 측에다가 request를 보냅니다. // html 폼 // react router의 폼. 클라이언트 사이드에서 처리합니다. 즉 을 사용하면 서버에다가 request를 보내는 것이고, 을 사용하면 클라이..

원문보기 내부링크
Tistory

[Router] useFetcher

useFetcher에 대해 알아보겠습니다. [ useFetcher ] HTML/HTTP에서 데이터 변형 및 로드의 경우 또는 탐색으로 모델링 됩니다. 둘 다 브라우저에서 탐색을 유발하며, 이는 React Router에서 와 에 해당합니다. 그러나 때로는 탐색 외부에서 로더를 호출하거나 URL을 변경하지 않고 작업을 호출(혹은 유효성을 다시 검사할 페이지의 데이터 가져오기)을 원할 수 있습니다. 또는 동시에 여러 변이를 수행해야 할 수 도 있습니다. 이럴 때 useFetcher 훅을 사용하면 UI를 작업 및 로더에 연결할 수 있습니다. 이 기능은 데이터 라우터를 사용하는 경우에만 작동합니다. 그리고 useFetcher는 다음과 같은 경우에 유용합니다. 1. UI 경로와 연결되지 않은 데이터 가져오기 (팝오..

원문보기 내부링크
Tistory

[Router] useNavigation과 useSubmit

useNavigation과 useSubmit에 대해 알아보겠습니다. [ useNavigation ] useNavigation은 useNavigate와는 다릅니다. 헷갈리면 안 됩니다. :) 예를 들어, useNavigation은 어떤 폼을 작성해서 제출하는데 현재 진행 상황을 저장하는 것과 같을 경우 사용하기에 좋습니다. 즉, 현재 폼에 대한 정보를 받을 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 폼 제출 시 true를 받는 상수를 선언 후 HTML 삽입 미리보기할 수 없는 소스 return에서 조건적으로 받아보면 폼이 제출 중일 때는 버튼이 Submitting...로 바뀝니다. 혹은 data를 넘기기 위해서 useNavigation을 이용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소..

원문보기 내부링크
Tistory

[Git, GitHub] .gitignore가 작동하지 않을때 대처하는 법

.gitignore가 작동하지 않을때 대처하는 법에 대해 알아보겠습니다. .gitignore가 제대로 작동되지 않아서 .gitignore에 게시된 파일이 github에 계속 올라가 있는 경우가 있습니다. git의 캐시가 문제가 되는거라 아래 명령어로 캐시 내용을 전부 삭제 후 다시 add All해서 commit하면 됩니다. git rm -r --cached . git add . git commit -m "fixed untracked files" ref: https://stackoverflow.com/questions/11451535/gitignore-is-ignored-by-git

원문보기 내부링크
Tistory

[React] Server Side Rendering이란?

오늘은 Server Side Rendering에 대해 알아보겠습니다. [ Server Side Rendering (SSR) ] 서버사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로 UI를 서버에서 렌더링 하는 것을 의미합니다. 즉, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것입니다. 서버 사이드 렌더링의 장점 서버 사이드 렌더링에는 어떤 장점이 있을까요? 일단 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않습니다. 따라서 서버에서 ..

원문보기 내부링크
Tistory

[React] quill Editor bold체, italic체 적용 안됨 에러 해결

quill Editor에서 bold 체와 italic 체가 적용 안 되는 에러에 대해 알아보겠습니다. 전체 코드 HTML 삽입 미리보기할 수 없는 소스 quill HTML 삽입 미리보기할 수 없는 소스 결론적으로 text를 작성하는 화면에서는 bold채와 italic 체가 적용되었지만 게시글이 작성된 후에 게시글 리스트에서 보이는 게시글에는 bold 체와 italic 체가 적용되지 않았습니다. 게시글 작성 화면 게시글 리스트 화면 HTML 삽입 미리보기할 수 없는 소스 코드에 아래와 같이 추가하여 해결하였습니다. var bold = Quill.import('formats/bold'); bold.tagName = 'b'; Quill.register(bold, true); var italic ..

원문보기 내부링크
Tistory

[Git, GitHub] Git이란 무엇인가 ?

Git에 대해 알아보겠습니다. [ Git이란 무엇인가? ] Git을 버전관리 시스템으로 알려져 있고, VCS로 줄여서 말하기도 합니다. 유일한 VCS는 아니지만, 전 세계에서 가장 인기 있는 버전관리 시스템입니다. 버전관리는 파일의 변화를 시간에 따라 추적하고 관리하는데 도움을 주는 소프트 웨어입니다. 어마어마한 소스 코드와 수천 개의 파일 그리고 엄청난 수의 개발자들이 있는 페이스북이나 구글 같은 회사를 생각해 보면, 그들은 모두 병행해서 작업을 하고 있고 매일매일 변화를 만들어내고 있습니다. 그런 변화들을 추적하고 조합하며 때론 되돌리기도 하는데, 그것이 바로 깃같은 버전관리프로그램의 역할입니다. 대부분의 버전관리시스템은 이전 버전의 파일을 다시 볼 수 있게 해주고 버전들 간의 또는 파일들 간의 변화..

원문보기 내부링크
Tistory

[Git, GitHub] Git과 GitHub의 차이점은 무엇인가?

Git과 GitHub의 차이점에 대해 알아보겠습니다. [ GIt vs GitHub ] Git과 GitHub는 밀접한 관련이 있지만 같은 것은 아닙니다. Git Git은 버전관리 소프트웨어이고 누군가의 컴퓨터에서 실행됩니다. 제 컴퓨터에서 실행될 수도 있고, 여러분의 데스크톱에서 실행될 수도 있습니다. 하지만, 인터넷은 필요하지 않습니다. 프로그램이 없으면 다운로드해서 컴퓨터에서 사용하면 됩니다. 인터넷이 없어도 깃을 사용할 수 있는데, 마치 텍스트 에디터나 MS Word, Excel과 같은 문서 프로그램을 사용하는 것과 마찬가지입니다. 인터넷도 필요없고, 회원가입을 할 필요도 없습니다. 즉, 아무 때나 문서를 작성할 수 있습니다. GitHub GitHub는 웹서비스 입니다. 그리고 GitHub는 ..

원문보기 내부링크
Tistory

[Node.js] npm 패키지 매니저와 설치모드

npm 패키지 매니저와 설치모드에 대해 알아보겠습니다. npm install, yarn add 명령어는 Node.js 패키지(라이브러리)를 설치할 수 있는 명령어입니다. 설치 모드는 크게 네 가지입니다. npm install [패키지명1] [패키지명 2] npm install [패키지명1] [패키지명2] 이 명령어는 '로컬 모드'로 설치합니다. 로컬 모드는 현재 디렉터리의 node_module 디렉터리에 패키지를 설치하는 것입니다. npm install -g [패키지명 1] [패키지명 2] npm install -g [패키지명1] [패키지명2] -g 옵션은 패키지를 전역(global)에 설치합니다. 전역으로 설치한 패키지는 현재 컴퓨터 내의 모든 프로젝트에서 이용할 수 있습니다. npm in..

원문보기 내부링크
Tistory

[Git, Github] 기본적인 터미널 명령어

ls list의 축약어이며, 현재 디렉터리 또는 폴더에 있는 콘텐츠를 나열하는 명령어 + ls - a : 숨어있는 파일까지 전부 다 보여줌 open 현재 파일이 있는 경로상의 폴더를 열어준다. pwd 현재 작업하고 있는 디렉토리를 출력하는 명령어 cd 경로를 옮겨 다닐 수 있는 명령어 touch 파일을 생성해주는 명령어 touch test.js mkdir 폴더를 생성해주는 명령어 rm 파일을 삭제해주는 명령어 ( 파일을 영구적으로 삭제함, 휴지통을 거치지 않음 ) rm -rf 폴더를 삭제해주는 명령어 ( 폴더를 영구적으로 삭제함, 휴지통을 거치지 않음 )

원문보기 내부링크
Tistory

[React with TS] Vite란? ( 사용하면 리액트 10배 빨라짐 )

오늘은 Vite에 대해 알아보겠습니다. [ Vite란? ] Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프런트엔드 개발 도구입니다. 이름처럼 빌드와 개발 서버 구동 시간이 매우 빠릅니다. 기존에 자주 사용하던 webpack, rollup 등의 빌드 도구는 자바스크립트 언어로 만들어졌지만, Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 아주 빠릅니다. Webpack, Parcel등과 비교하면 10배 이상의 빠른 속도를 자랑합니다. ( 안쓸 이유가? ) 또한 개발 서버를 이용할 때도 아주 빠릅니다. 기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오..

원문보기 내부링크
Tistory

[React] dangerouslySetInnerHTML이란?

dangerouslySetInnerHTML에 대해 알아보겠습니다. 다음과 같이 msg에 "Hello World"를 넣고 react를 실행시켰습니다. HTML 삽입 미리보기할 수 없는 소스 출력되는 화면 실행한 서버에서 웹 브라우저의 개발자 도구를 열고 콘솔 화면에서 다음과 같이 스크립트를 실행해 보겠습니다. 브라우저 화면에서 태그의 문자열이 그대로 출력됐습니다. 그 이유는 웹 애플리케이션에서 흔히 발생하는 XSS(Corss Site Scripting) 같은 공격에 대비하기 위해서 가 <i>로 HTML 인코딩 됐기 때문입니다. 만일 HTML 마크업 형태의 값을 보간하려고 한다면 두 가지 방법을 사용할 수 있습니다. 첫 번째 방법은 dangerouslySetInnerHTML 특성을 사용하는 것입니다. [ d..

원문보기 내부링크
Tistory

[React with TS] PropTypes란?

PropTypes를 이용하여 리액트 컴포넌트의 유효성을 검증하는 방법에 대해 알아보겠습니다. [ 속성의 유효성 검증 방법 ] 리액트 컴포넌트의 유효성을 검증하는 방법은 여러 가지가 있습니다만 타입스크립트를 사용한다면 타입스크립트의 정적 타입 지원 기능을 이용할 수 있습니다. 이 방법은 컴파일(빌드) 시에 타입을 검사하며, IDE를 통해서 코드 자동완성 기능을 지원받을 수 있습니다. 또 다른 유효성 검증 기능으로는 PropTypes가 있습니다. PropTypes는 리액트가 지원하는 기능이며, 컴파일할 때가 아닌 실행 중에 속성에 대한 유효성 검증을 수행합니다. 따라서 속성으로 전달하는 값과 타입에 따라 경고를 발생시킵니다. 일반적으로는 타입스크립트의 정적 타입을 이용한 유효성 검증만으로도 충분하지만, 좀 ..

원문보기 내부링크
Tistory

[알고리즘 with JS] 빅 오 표기법(Big O Notation)이란?

빅 오 표기법(Big O Notation)에 대해 알아보겠습니다. 우선, 문제 하나 풀고 가실까요? quiz. 1부터 특정한 N 값과 그 사이에 있는 모든 숫자들을 더하는 함수를 만들어보세요. 해답 1 function addUpTo(n) { let total = 0; for (let i = 0; i O(n) 앞의 상수는 중요하지 않습니다. 2. O(500) => O(1) O(500)은 쉽게 말하면 연산 갯수가 어떤 상황에든 500개가 있다는 것입니다. 즉, 변동이 없습니다. 3. O(13n²) => O(n²) 13n²이 무진장 많이 커진다면, 정말 셀 수 없이 커진다면 앞에 있는 13이 큰 의미가 있을까요? n² 보다?? ※ 더 작아지는 것도 중요하지 않습니다. 1. O( n + 10 ..

원문보기 내부링크
Tistory

[Redux] Redux createStore 취소선이 그어지는 이유

redux를 사용하다 보면 스토어를 만들기 위해 createStore를 사용합니다. 하지만 직접 사용해 보면 아래와 같이 밑줄이 그어집니다. 왜 그럴까요? 취소선이 그어진 곳에 마우스를 갖다대면 @reduxjs/toolkit에서 제공하는 configureStore를 쓰라고 합니다. 결과적으로 deprecated로 나오지만, 기능에 문제없이 잘 동작합니다. 하지만 RTX(Redux Tookit)을 쓰는 것을 권장하고 있습니다. redux github에 따르면 https://github.com/reduxjs/redux GitHub - reduxjs/redux: Predictable state container for JavaScript apps Predictable state container for Jav..

원문보기 내부링크
Tistory

[React] SWAPI 이용하기

오늘은 SWAPI를 이용한 애플리케이션을 만들어보겠습니다. [ SWAPI ] SWAPI에는 각종 실습을 할 수 있는 더미데이터가 존재합니다. https://swapi.dev/ SWAPI - The Star Wars API What is this? The Star Wars API, or "swapi" (Swah-pee) is the world's first quantified and programmatically-accessible data source for all the data from the Star Wars canon universe! We've taken all the rich contextual stuff from the universe and formatted swapi.dev App.j..

원문보기 내부링크
Tistory

[React] firebase 이용하기

오늘은 firebase를 이용하여 react와 연동된 애플리케이션을 만들어 보겠습니다. [ 브라우저와 데이터베이스는 직접 소통하면 안 됩니다. ] 브라우저에서 실행되는 자바스크립트 코드가 데이터베이스와 직접 통신하면 안 됩니다. 리액트 앱이 있고, 어떤 종류의 데이터베이스가 있다면 이런 데이터베이스를 데이터베이스 서버에서 실행하는 것은 문제가 되지는 않습니다. 하지만, 매우 불안정하거나 잘못 작성된 애플리케이션이 아니고서야 앱으로 직접 데이터를 가져오거나 저장하고, 연결을 맺는 행위는 외부 환경에서는 절대 해서는 안 되는 일 중 하나입니다. 기술적으로는 어려울 수 있겠지만, 클라이언트 내부에서 데이터베이스에 직접 연결을 하거나, 브라우저의 자바스크립트 코드를 통해 직접 연결을 한다면 이는 이 코드를 통해..

원문보기 내부링크
Tistory

[CleanCode] 배열 다루기

오늘은 배열에 대한 여러 가지 특징에 대해 알아보겠습니다. [ JavaScript의 배열은 객체다. ] JavaScript의 배열은 객체와 마찬가지입니다. 그렇기 때문에 내가 확인하고 싶은 값이 정말 배열인지 확인하고 싶을 때는 Array.isArray() 메서드를 사용하는 게 좋습니다. 위와 같이 array를 arr.length와 같이 비교해서 그 값이 배열인지 확인하는 경우가 종종 있는데 배열뿐 만 아니라 문자열의 경우도 length로 비교할 수 있으니 오류를 유발할 수 있습니다. 그렇기에 2번과 3번의 방법으로 비교하는 방법도 있는데 2번보다는 3번이 가장 확실한 비교 방법입니다. [ Array.length는 배열의 길이를 보장하지 못한다. ] 배열은 내가 원하는 index에 값을 자유롭게 넣을 수..

원문보기 내부링크
Tistory

[CleanCode] 객체 다루기

오늘은 객체를 다루는 여러 가지 방법에 대해 알아보겠습니다. [ Shortan Properties Name ] 객체를 사용하여 key : value를 지정할 때 변경 전과 같이 지정하는 경우를 종종 볼 수 있는데요. ( 저만 그런가요..? ㅎㅎ ) 변경 후와 같이 더 깔끔하게 지정해 줄 수 있습니다. 그리고 ES2015 이후부터는 key와 value의 이름이 같다면 한 번만 써도 된다는 거 잊지 말아 주세요!! 예시 HTML 삽입 미리보기할 수 없는 소스 [ Computed Property Name ] HTML 삽입 미리보기할 수 없는 소스 react에서 자주 사용하는 구문의 예시를 가져와봤습니다. handleChange 메서드의 setState안에 지정하는 객체의 값을 보면 key를 [e.targe..

원문보기 내부링크
Tistory

[CleanCode] 함수 다루기

[ 함수, 메서드, 생성자 ] HTML 삽입 미리보기할 수 없는 소스 [ argument & parameter ] 매개변수: 함수 정의에 나열된 이름을 말한다. 인수: 함수에 전달된 실제 값을 의미한다. 매개변수는 제공된 인수 값으로 초기화된다. HTML 삽입 미리보기할 수 없는 소스 [ 복잡한 인자 관리하기 ] 매개변수의 개수는 몇 개가 적당한가? 보통 2개까지를 적절하다고 보지만, 명시적으로 그 쓰임의 용도가 명확하다면 그 이상도 상관없습니다. 맥락과 흐름을 파악할 수 있다면, 많다고 무조건 나쁜 건 아닙니다. HTML 삽입 미리보기할 수 없는 소스 [ Default Value ] HTML 삽입 미리보기할 수 없는 소스 [ Rest Parameters ] HTML 삽입 미리보기할 수 없는 소스 [ v..

원문보기 내부링크
Tistory

[CleanCode] 추상화하기

[ Magic Number ] HTML 삽입 미리보기할 수 없는 소스 숫자를 직접 기입하는 것보다는 변경 후와 같이 상수를 만들어서 쓰는 것이 유지보수하는데 훨씬 용이합니다. HTML 삽입 미리보기할 수 없는 소스 // 변경 전 const PRICE = { MIN: 1000000, // 1백만원 MAX: 100000000, // 1억원 }; // 변경 후 const PRICE = { MIN: 1_000_000, // 1백만원 MAX: 100_000_000, // 1억원 }; 변경 전의 수치를 보면 0의 개수가 많아질수록 실수할 확률이 높아집니다. 이럴 때는 _를 이용하면 숫자를 보기 편하게 입력하여 사용할 수 있습니다. [ 네이밍 컨벤션 ] 저장소, 폴더, 파일, 함수, 변수, 상수, 깃 브랜치, 커..

원문보기 내부링크
Tistory

[CleanCode] 에러 다루기

[ 유효성 검사 ] 사용자의 입력 값이 유효한지 검증하는 것 유효성 검사는 할 수 있는 모든 곳에서 다 처리하는 게 좋다. 사용자의 입력 => 클라이언트 (HTML, JavaScript) => 백엔드에서 처리 사용자와 상호작용 => 사용자의 입력을 받거나 그것을 통해서 무언가 하게 된다. 이메일인 경우 - 사용자의 입력이 이메일 포맷에 맞는지 검증한다. - 이메일 포맷이 맞는 경우 **그때서야 서버와 통신을 한다.** ※ 어떻게 할까? - 정규식 - JavaScript 문법 (문자열 검사) - 웹 표준 API (Browser API) [ try - catch ] try-catch를 사용할 때 가장 많이 실수하는 경우 중 하나가 예상하지 못한 에러가 발생할 수 있는 부분을 try {} 안에 넣지..

원문보기 내부링크
Tistory

[JavaScript] NodeList란?

오늘은 NodeList에 대해 알아보겠습니다. [ NodeList ] NodeList 객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll와 같은 메서드에 의해 반환되는 노드의 컬렉션입니다. ※ 참고: NodeList가 Array는 아니지만, forEach()를 사용하여 반복할 수 있습니다. 또한 Array.from()을 사용하여 Array로 변환할 수도 있습니다. 그러나 일부 오래된 브라우저는 아직 NodeList.forEach() 또는 Array.from()를 사용할 수 없는데 이럴 때는 Array.prototype.forEach()를 사용하면 됩니다. 경우에 따라 NodeList는 라이브 컬렉션으로, DOM의 변경 사항을 ..

원문보기 내부링크
Tistory

[Redux] Redux Toolkit - A non-serializable value was detected in an action 오류 해결

리덕스 미들웨어를 사용하던 도중 다음과 같은 에러가 발생했습니다. 오류의 내용은 Redux에서 값을 주고, 받을 때 object 형태의 값을 string 형태로 변환(JSON.stringfy)하는데, 이 상황에서 변환이 불가능한 값을 전달했다는 에러입니다. 좀 더 자세히 들여다보면, action에 직렬화가 불가능한 값을 전달했다는 뜻입니다. 여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringfy) 역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것입..

원문보기 내부링크
Tistory

[Redux] Redux-logger 사용하기

Redux-logger를 사용하는 법에 대해 알아보겠습니다. 설치 yarn add redux-logger // yarn 사용시 npm install redux-logger // npm 사용시 index.js HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[Redux] redux-thunk와 redux-saga란?

오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. [ 비동기 작업을 처리하는 미들웨어 사용 ] 오픈 소스 커뮤니티에 공개된 미들웨어를 사용하면 리덕스를 사용하고 있는 프로젝트에서 비동기 작업을 더욱 효율적으로 관리할 수 있습니다. 비동기 작업을 처리할 때 도움을 주는 미들웨어는 다양하지만, 오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. redux-thunk: 비동기 작업을 처리할 때 가장 많이 사용되는 미들웨어입니다. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해 줍니다. redux-saga: redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리입니다. 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다..

원문보기 내부링크
Tistory

[Router] RouterProvider와 CreateBrowserRouter

React에서 RouterProvider와 CreateBrowserRouter를 이용하여 다중 페이지를 구현하는 법에 대해 알아보겠습니다. [ 기존 방식 ] HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 [ React Router v6.4 이후 추가된 방식 ] RouterInfo.js HTML 삽입 미리보기할 수 없는 소스 App.js HTML 삽입 미리보기할 수 없는 소스 기존의 방식처럼 BrowserRouter로 감싸지 않고 RouterProvider를 이용하여 구성요소들을 전달하고 활성화합니다. ref: https://reactrouter.com/en/main/start/overview

원문보기 내부링크
Tistory

[Router] Link와 Outlet

오늘은 Link와 Outlet을 이용하여 간단한 다중 페이지를 만들어보겠습니다. App.js HTML 삽입 미리보기할 수 없는 소스 RootLayout이라는 요소에 MainNavigation이라는 요소와 children으로 지정된 나머지 요소들을 렌더링 하는 과정입니다. Root.js HTML 삽입 미리보기할 수 없는 소스 Outlet: 자녀 라우트 요소들이 렌더링되어야 할 장소를 표시하는 역할을 합니다. MainNavigation.js HTML 삽입 미리보기할 수 없는 소스 MainNavigation에서는 Link를 통해 원하는 페이지로 이동합니다. a 태그와 다르게 Link는 to에 주소를 지정합니다. Home.js HTML 삽입 미리보기할 수 없는 소스 Products.js HTM..

원문보기 내부링크
Tistory

[React-Router-Dom] Link와 NavLink, useNavigate

오늘은 Link와 NavLink, useNavigate에 대해 알아보겠습니다. [ Link vs NavLink ] Link Link 컴포넌트의 경우 html의 태그와 기능이 유사하지만, 페이지 전환을 방지하는 기능이 내장되어 있습니다. 요소를 클릭 시 /로 바로 이동하는 로직 구현 시에 용이한 컴포넌트입니다. HTML 삽입 미리보기할 수 없는 소스 NavLink NavLink는 Link의 special version으로, isActive 속성을 이용하여 특정 링크에 스타일을 넣어줄 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 NavLink는 자체적으로 isActive라는 boolean값을 가지고 있어 활성화시키고 싶은 스타일에 css를 적용할 수 있습니다. 또한, NavLink에는 end..

원문보기 내부링크
Tistory

[Router] useParams 사용하기

오늘은 useParams 사용하는 법에 대해 알아보겠습니다. [ useParams란? ] useParams이란 react-router-dom에서 제공하는 Hooks 중 하나로 Parameter(파라미터) 값을 URL을 통해서 넘겨받은 페이지에서 사용할 수 있도록 해주는 것을 말합니다. 예를 들어, 특정 제품 리스트에서 제품을 클릭 시 제품의 세부 정보를 나타내는 페이지로 이동하고 싶다면 제품의 id 값을 URL로 넘겨 세부 페이지에서 id 값에 해당하는 제품만 보여줄 수 있습니다. 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams를 사용하면 됩니다. createBrowserRouter를 통해 다음과 같이 코드를 작성한다고 가정했을 때, ProductDetailPage로 ..

원문보기 내부링크
Tistory

[Router] loader와 useLoaderData

오늘은 loader와 useLoaderData에 대해 알아보겠습니다. [ loader ] 서버에 요청하지 않고 데이터를 가능한 한 빨리 가져오기 위해 react router dom 6.4v 부터는 client side browser를 제공하고 있습니다. 즉, 서버에 요청하지 않고 클라이언트 사이드에서 처리하기 때무넹 속도 면에서 엄청난 이점이 생기게 됩니다. 여기서 추가된 기능 중 하나인 loader는 컴포넌트가 생성되기 전에 컴포넌트에 데이터를 전달하는 역할을 수행합니다. loader의 특징 - loader의 호출 시점은 컴포넌트가 렌더링 되기 전 입니다. - 각 파일에 loader라는 함수를 만든뒤 이를 export하여 사용하는 것이 일반적입니다. - loader 함수가 값을 return하면 useL..

원문보기 내부링크
Tistory

[TypeScript] 리터럴 타입이란?

오늘은 리터럴 타입에 대해 알아보겠습니다. [ 리터럴 타입 좁히기 (Literal Narrowing) ] var 또는 let으로 변수를 선언할 경우 이 변수의 값이 변경될 가능성이 있음을 컴파일러에게 알립니다. 반면, const로 변수를 선언하게 되면 TypeScript에게 이 객체는 절대 변경되지 않음을 알립니다. HTML 삽입 미리보기할 수 없는 소스 무한한 수의 잠재적 케이스들 (문자열 값은 경우의 수가 무한대)을 유한한 수의 잠재적 케이스 (helloWorld의 경우: 1개)로 줄여나가는 것을 타입 좁히기 (narrowing)라 합니다. [ 문자열 리터럴 타입 (String Literal Types) ] 실제로 문자열 리터럴 타입은 유니언 타입, 타입 가드 그리고 타입 별칭과 잘 결합됩니다. 이런..

원문보기 내부링크
Tistory

[TypeScript] 유니온 타입이란?

오늘은 유니온 타입에 대해 알아보겠습니다. [ 유니온 타입 (Union Types) ] 가끔, number나 string을 매개변수로 기대하는 라이브러리를 사용할 때가 있습니다. 예를 들어, 다음과 같은 함수를 사용할 때입니다. HTML 삽입 미리보기할 수 없는 소스 위 예제에서 padLeft의 문제는 매개변수 padding이 any 타입으로 되어있다는 것입니다. 즉, number나 string 둘 다 아닌 인수로 함수를 호출할 수 있다는 것이고, TypeScript는 이를 무리 없이 받아들입니다. HTML 삽입 미리보기할 수 없는 소스 전통적인 객체지향 코드에서, 타입의 계층을 생성하여 두 타입을 추상화할 수 있습니다. 이는 더 명시적일 수는 있지만, 조금 과하다고 할 수도 있습니다. 기존 방법의 pa..

원문보기 내부링크
Tistory

[TypeScript] TypeScript Classes란?

TypeScript의 Classes에 대하여 알아보겠습니다. [ 클래스 (Classes) ] 간단한 클래스-기반 예제를 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 C#이나 Java를 사용해 봤다면, 익숙한 구문일 것입니다. 새로운 클래스 Greeter를 선언했습니다. 이 클래스는 3개의 멤버를 가지고 있습니다: greeting 프로퍼티, 생성자 그리고 greet 메서드 입니다. 클래스 안에서 클래스의 멤버를 참조할 때 this.를 앞에 덧붙이는 것을 알 수 있습니다. 이것은 멤버에 접근하는 것을 의미합니다. 마지막 줄에서, new를 사용하여 Greeter클래스의 인스턴스를 생성합니다. 이 코드는 이전에 정의한 생성자를 호출하여 Greeter 형태의 새로운 객체를 만들고, 생성자를 실행해 초기..

원문보기 내부링크
Tistory

[TypeScript] 제네릭 타입(Generic Types) 이란?

오늘은 제네릭 타입에 대해 알아보겠습니다. [ 제네릭의 Hello World (Hello World of Generics) ] 먼저 제네릭의 "hello world"인 identity 함수를 해봅시다. identity 함수는 인수로 무엇이 오던 그대로 반환하는 함수입니다. echo 명령과 비슷하게 생각할 수 있습니다. 제네릭이 없다면, identity 함수에 특정 타입을 주어야 합니다: function identity(arg: number): number { return arg; } 또는 any 타입을 사용하여 identity 함수를 기술할 수 있습니다: function identity(arg: any): any { return arg; } any를 쓰는 것은 함수의 arg가 어떤 타입이든 받을 수 있다..

원문보기 내부링크
Tistory

[Webpack] 웹팩의 4가지 주요 속성

오늘은 웹팩의 4가지 주요 속성에 대해 알아보겠습니다. 1. Entry 2. Output 3. Loader 4. Plugin [ Entry ] entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로입니다. HTML 삽입 미리보기할 수 없는 소스 위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.js를 대상으로 웹팩이 빌드를 수행하는 코드입니다. [ Entry 파일에 어떤 것이 들어가야 하는가 ] entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨 있어야 합니다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨 있어야 합니다. ..

원문보기 내부링크
Tistory

[Webpack] Webpack Dev Server란?

오늘은 Webpack Dev Server에 대해 알아보겠습니다. [ Webpack Dev Server ] 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다. [ Webpack Dev Server의 특징 ] 웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있습니다. 먼저 명령어를 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 웹팩 데브 서버를 실행하여 웹팩 빌드를 ..

원문보기 내부링크
Tistory

[Webpack] 소스 맵(Source Map)이란?

[ 소스 맵 (Source Map) ] 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. [ 소스 맵 설정하기 ] 웹팩에서 소스 맵을 설정하는 방법은 아래와 같습니다. HTML 삽입 미리보기할 수 없는 소스 devtool 속성을 추가하고 소스 맵 설정 옵션 중 하나를 선택해 지정해주면 됩니다.

원문보기 내부링크
Tistory

[React] propTypes를 통한 props 검증

오늘은 propTypes를 통한 props 검증에 대해 알아보겠습니다. [ propTypes를 통한 props 검증 ] 컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다. 우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 합니다. HTML 삽입 미리보기할 수 없는 소스 PropTypes를 불러왔다면 코드 하단에 다음과 같이 입력해 보세요. HTML 삽입 미리보기할 수 없는 소스 이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다. App 컴포넌트에서 name 값을..

원문보기 내부링크
Tistory

[React] input 개수에 따른 useState 활용법

오늘은 input 개수에 따른 useState 활용법에 대해 알아보겠습니다. 아래에는 다음과 같은 코드가 있습니다. 이 코드는 input에 사용자명과 메시지를 입력할 수 있는 text란이 2개 있고 확인 버튼을 누르면 alert 메서드로 내가 입력한 사용자명과 메시지를 알려줍니다. App.js HTML 삽입 미리보기할 수 없는 소스 EventPractice2.js HTML 삽입 미리보기할 수 없는 소스 EventPractice2에는 인풋이 두 개 밖에 없기 때문에 이런 코드도 나쁘지는 않습니다. 하지만 인풋의 개수가 많아질 것 같으면 e. target.name을 활용하는 것이 더 좋을 수 있습니다. 예를 들어 HTML 삽입 미리보기할 수 없는 소스 위와 같이 객체 안에서 key를 [ ]로 감싸면 ..

원문보기 내부링크
Tistory

[TypeScript] 데코레이터(Decorator)란?

오늘은 데코레이터에 대해 알아보겠습니다. [ 데코레이터 (decorator) ] 데코레이터(Decorator)는 타입스크립트에서는 실험적으로 도입된 기능입니다. 타입스크립트의 데코레이터는 자바(Java)의 어노테이션이나 파이썬(Python)의 데코레이터와 유사한 기능을 합니다. 그러나 자바 어노테이션은 컴파일 타임에 영향을 받지만, 타입스크립트 데코레이터는 컴파일 타임에 영향을 받지 않기 때문에 오히려 파이썬(Python)의 데코레이터와 거의 비슷하다고 합니다. 데코레이터는 일종의 함수로 코드 조각을 장식해 주는 역할을 하며, 타입스크립트에서는 그 기능을 함수로 구현한 것입니다. 메서드, 클래스, 프로퍼티, 등 위에 @로 시작하는 데코레이터를 선언하여 장식하면 코드가 실행됐을 때, 데코레이터 함수가 실행..

원문보기 내부링크
Tistory

[TypeScript] 유틸리티 타입(Utility Type)이란?

오늘은 유틸리티 타입에 대해 알아보겠습니다. [ 유틸리티 타입 ] TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공합니다. 이런 유틸리티들은 전역으로 사용이 가능합니다. [ Partial ] T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다. 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다. HTML 삽입 미리보기할 수 없는 소스 [ Readonly ] T의 모든 프로퍼티를 읽기 전용(readonly)으로 설정한 타입을 구성합니다. 즉 생성된 타입의 프로퍼티는 재할당할 수 없습니다. HTML 삽입 미리보기할 수 없는 소스 이 유틸리티는 런타임에 실패할 할당 표현식을 나타낼 때 유용합니다. (예, frozen 객체의 프로퍼티에 재..

원문보기 내부링크
Tistory

[TypeScript] JSX란?

오늘은 JSX에 대해 알아보겠습니다. [ JSX ] JSX는 내장형 XML 같은 구문입니다. 변환의 의미는 구현에 따라 다르지만 유효한 JavaScript로 변환되어야 합니다. JSX는 React로 큰 인기를 얻었지만, 이후 다른 구현도 등장했습니다. TypeScript는 임베딩, 타입 검사, JSX를 JavaScript로 직접 컴파일하는 것을 지원합니다. [ 기본 사용법 (Basic usage) ] JSX를 사용하려면 다음 두 가지 작업을 해야 합니다. 1. 파일 이름을. tsx 확장자로 지정합니다. 2. jsx 옵션을 활성화 합니다. TypeScript는 preserve, react 및 react-native라는 세 가지의 JSX 모드와 함께 제공됩니다. 이 모드들은 방출 단계에서만 영향을 미치며, ..

원문보기 내부링크
Tistory

[CleanCode] 변수에 대하여

CleanCode를 작성하기 위한 과정 중 변수에 대해 알아보겠습니다. [ var를 지양하자 ] var : 함수 단위 스코프 let & const : 블록 단위 스코프 let과 const의 경우 블록 단위 스코프와 + TDZ (Temperal Dead Zone)으로 안전한 코드 작성이 가능합니다. https://despiteallthat.tistory.com/46 [JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당 오늘은 변수 선언 / 변수 호이스팅 / 값의 할당에 대해 알아보자 [ 변수 선언 ] 변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공 despiteallthat.tistory.com ht..

원문보기 내부링크
Tistory

[CleanCode] 타입 검사

자바스크립트 내에서 유효성 검사를 할 때 흔히 타입 검사를 하고는 합니다. 타입 검사에 대해 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 위의 결과 값, 모두 납득이 가시나요? [ PREMITIVE vs REFERENCE ] PREMITIVE value의 경우 typeof로 잘 구분할 수 있지만 REFERENCE value의 경우는 typeof로 구분하기가 어렵습니다. 자바스크립트는 동적으로 변하는 언어이기 때문에 타입도 동적입니다. 이로 인해 동적인 타입까지 검사하기가 어려워서 주의를 해야 합니다. 따라서 REFERENCE value를 검사할 때는 typeof 보다는 instanceof를 사용하는 것이 객체를 확인하는 데 있어 더 용이합니다. 하지만 instanceof도 완벽하게 검사를 해내..

원문보기 내부링크
Tistory

[CleanCode] undefined와 null의 차이

오늘은 undefined와 null의 차이에 대해 알아보겠습니다. [ Undefined & Null ] 위의 사진은 JavaScript의 헷갈리는 타입들에 대해 나타내는 대표적인 사진입니다. Undefined와 Null 잘 구분하고 계신가요? 위의 console.log의 값, 전부 납득이 가시나요? null과 undefined를 보이는 그대로 해석하면 '빈 값'과 '없는 값'을 의미하는 것처럼 보이지만 사실 큰 차이가 있습니다. 간단하게 말하자면 저는 다음과 같이 정의 내리고 있습니다. undefined: 무언가 만들어 놓고 정의하지 않음 null: 없다는 것을 명시적으로 표현함 [ undefined와 null의 공통점 ] 둘 다 각각의 타입명(undefined, null)의 값이 유일하다. => und..

원문보기 내부링크
Tistory

[CleanCode] isNaN? is Not A Number?

오늘은 isNaN (is Not A Number)에 대해 알아보겠습니다. ???????????? NaN은 Not A Number를 뜻합니다. 직독직해하면 "숫자가 아니다."를 뜻하는데요 실제로 이런 결과가 나와요 c NaN은 Not A Number이고 isNaN은 is Not A Number입니다. NaN은 숫자가 아닌데, 타입은 숫자이지만 숫자가 아닌...? isNaN에 대해 같이 알아보겠습니다. [ isNaN ] isNaN() 함수는 어떤 값이 Not A Number인지 판별해줍니다. 자바스크립트의 다른 값들과 달리, NaN은 동등 연산자 (==, ===)을 통해 판별할 수 없기 때문에, NaN을 판별할 수 있는 무언가가 필요했고 이로 인해 탄생한 것이 isNaN이라고 합니다. 위에서 말했듯이 NaN..

원문보기 내부링크
Tistory

[CleanCode] 경계 다루기

오늘은 경계를 다루는 법에 대해 알아보겠습니다! [ 경계 다루기 ] 1. 명확하게 최소와 최댓값을 다룬다. 2. 최솟값과 최댓값 포함 여부를 확실하게 결정한다. (이상-초과 / 이하-미만) 3. 혹은 네이밍에 최솟값과 최댓값 포함 여부를 표현한다. 4. 누가봐도 명시적인 코드를 작성하자 아래의 예시를 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 이 코드의 경우 매개변수로 최솟값과 최댓값을 넣어주면 그 사이에서 무작위로 숫자를 선정해 주는 함수입니다. min 값과 max 값을 직접적으로 숫자를 기입해서 적는 방식은 여러 가지 단점이 있습니다. 첫 번째로 만약 min과 max가 바뀐다면, 직접 숫자를 바꿔야 합니다. 두 번째로 이 함수를 여러 곳에서 사용한다면 사용하는 곳마다 찾아가서 min과 m..

원문보기 내부링크
Tistory

[React] Single Page Application란?

오늘은 SPA(Single Page Application)에 대해 알아보겠습니다. [ SPA (Single Page Application) ] SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 HTML을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 주었습니다. 이렇게 사용자에게 보이는 화면은 서버 측에서 준비했습니다. 사전에 HTML 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 HTML을 생성해 주는 템플릿 엔진을 사용하기도 했..

원문보기 내부링크
Tistory

[CleanCode] 분기다루기

오늘은 분기 다루는 법에 대해 알아보겠습니다. [ 값식문 ] 1. () : 함수와 관련되어 있습니다. 주로 함수를 호출할 때 사용합니다. 2. {}: 중괄호 내부에는 값과 식만 넣어야 합니다. 3. 값과 식을 이용하면 if문을 대체할 수 있습니다. 4. 함수의 인자 안에는 값과 식만 넣을 수 있습니다. 다음 예시를 보겠습니다. 예시 1 HTML 삽입 미리보기할 수 없는 소스 변경 전의 코드를 보면 중괄호 안에서 for문을 이용해 rows라는 객체에 값을 초기화시키고 있습니다. 이는 변경 후의 코드와 같이 map 함수를 이용하면 리팩토링 할 수 있습니다. 예시 2 HTML 삽입 미리보기할 수 없는 소스 변경 전의 코드에서는 조건문을 이용하여 conditionOne, conditionTwo의 여부에 ..

원문보기 내부링크
Tistory

[Redux] Redux란?

오늘은 Redux에 대해 알아보겠습니다. :) [ Redux ] Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포넌트 내부에서 사용하는 데이터라고 할 수 있습니다. 요즘은 웹 사이트를 구성할 때, 사용자에게 보이는 UI들을 하나의 파일로 몽땅 구현하지 않고, 요소들을 컴포넌트 단위로 구성하여 조합하는 식으로 만듭니다. [ Redux의 원칙 ] 1. Single source of truth - 동일한 데이터는 항상 같은 곳에서 가져옵니다. - 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미입니다. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태..

원문보기 내부링크
Tistory

[TypeScript] TypeScript란?

오늘은 TypeScript에 대해 알아보겠습니다. [ TypeScript ] 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. 요즘은 대형 SI 프로젝트에서 흔하게 사용되고 있으며 개발자 구인 시 우대사항 기술로도 자주 언급되고 있습니다. 또한, 타입스크립트는 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있으며, 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수도 있습니다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍하면 자바스크립트로 컴파일되어 실행할 수 있습니다. 타입스크립트는 ES5의 Superset이므로 기존의 자바스크립트 (ES5) 문법을 그대로 ..

원문보기 내부링크
Tistory

[TypeScript] TypeScript의 기본 타입

TypeScript의 기본 타입에 대해 알아보겠습니다. [ 타입스크립트 기본 타입 ] 타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. 타입스크립트의 기본 타입에는 크게 다음과 같이 12가지가 있습니다. Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never String 자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다. HTML 삽입 미리보기할 수 없는 소스 Tip 위와 같이 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기 (Type Annotation)이라고 합니다. Number 타입이 숫자이면 아래와 같이 선언합니다. HTML 삽입 미..

원문보기 내부링크
Tistory

[React] props의 defaultProps란?

props의 defaultProps에 대해 알아보겠습니다. App.js HTML 삽입 미리보기할 수 없는 소스 App 컴포넌트에서 MyComponent의 props 값을 Zenghyun으로 지정한 상태입니다. MyComponent.js HTML 삽입 미리보기할 수 없는 소스 MyComponent 컴포넌트에서는 name이라는 props를 렌더링 하도록 설정되어 있습니다. c 결과 여기서 만약, app.js에서 props의 값을 지정하지 않으면 어떻게 될까요? HTML 삽입 미리보기할 수 없는 소스 위와 같이 이름란은 공백이 나오게 됩니다. 이를 방지하기 위해 부모 컴포넌트에서 props의 값을 지정하지 않아도 자식 컴포넌트의 props에서 default value를 설정할 수 있습니다. [ .def..

원문보기 내부링크
Tistory

프론트엔드 개발자를 위한 점핏 북 콘서트 후기

2023년 4월 30일에 강남 모나코 스페이스에서 열린 점핏 북 콘서트를 다녀왔습니다!! 강의 세션은 총 4개로 이루어져 있었습니다. 다들 어디서 한 번씩은 들어본 적 있는 유명한 분을 만나 뵙게 되어 영광이었습니다! ( 특히 캡틴판교님 인강을 보고 있는데 더 반가웠습니다 ㅎㅎ ) 콘서트는 오프라인 추천과 온라인 추천이 동시에 이루어졌는데 오프라인 추천은 200명을 추첨하였는데 무려 2천 명 이상이 지원했다고 하네요. 거기에 운이 좋게 제가 선정되어 다녀오게 되었습니다. 됐으면 좋겠다 싶었는데 진짜 돼버렸다. 자리도 운 좋게? 앞자리에 앉게 되어서 좋았습니다. 그리고 각종 이벤트도 진행되었는데 참여하는 재미도 있었습니다. 개발 관력 서적을 한 사람당 한 권씩 가져갈 수 있게 해 준 부분도 좋았던 것 ..

원문보기 내부링크
Tistory

[TypeScript] 각종 실행 명령어

[ install ] npm install -g typescript [ TypeScript => JavaScript ] tsc 바꿀 파일 이름.ts [ 파일 수정시 서버에서 자동 갱신 ] npm install --save-dev lite-server [ TypeScript 관찰 모드 ] tsc 파일이름.ts --watch or tsc 파일이름.ts --w [ 특정 파일을 지정하지 않은 전체 관찰 모드 ] tsc --init 후 tsc --watch or tsc --w [ 컴파일 과정에서 포함시킬 파일을 타입스크립트에 알리는 법 ( 관찰할 파일을 추가하고, 여기 없으면 관찰 모드에서 제외 )] tsconfig.json "include": [ "app.ts", "analytics.ts" ] [ 특정 파일을 ..

원문보기 내부링크
Tistory

[TypeScript] interface란?

interface에 대해 알아보겠습니다. :) [ Interface ] 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙 (파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 간단한 예제를 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 logAge 함수의 인자에 personAge라는 타입을 가져야 한다고 선언하였습니다. 그리고 위 코드를 보고 다음과 같이 추론할 수 있습니다. 인터페이스를 인자로 받아 사용할 때 항상 인터페이스의 속성 개수와 인자로 받는 객체의 속성 개수를 일치시키지 않아도 된다. 즉, 인터페이스에 정의된 속..

원문보기 내부링크
Tistory

[TypeScript] extends와 implements의 차이

extends와 implements의 차이에 대해 알아보겠습니다. 자바스크립트에서 어떤 클래스를 상속받고 싶을 때 하위 클래스에 extends 키워드를 사용하면 상속받을 수 있습니다. 그리고 타입스크립트에서는 implements 키워드를 통해서, interface와 class를 동시에 확장할 수 있습니다. [ extends ] extends 키워드는 class 선언문이나 class 표현식에서 만들고자 하는 class의 하위 클래스를 생성할 때 사용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 [ implements ] implements 키워드는 class의 interface에 만족하는지 여부를 체크할 때 사용됩니다. implements 한 interface의 타입이 없다면 에러를 반환합니다...

원문보기 내부링크
Tistory

[React] immer란?

오늘은 immer에 대해 알아보겠습니다. :) [ immer ] immer는 React에서 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트하기 위해 사용하는 라이브러리입니다. 불변성이란? 쉽게 말해 상태를 변경하지 않는 것입니다. [ install ] yarn add immer [ immer를 사용하지 않고 불변성 유지 ] 아래 예시는 immer를 사용했을 때와 비교하기 위해 작성된 코드입니다. HTML 삽입 미리보기할 수 없는 소스 폼에서 아이디와 이름을 입력하면 하단 리스트에 추가되고, 리스트 항목을 클릭하면 삭제되는 컴포넌트입니다. 이렇게 전개 연산자와 배열 내장 함수를 사용하여 불변성을 유지하는 것은 어렵지 않지만, 상태가 복잡해진다면 조금 귀찮은 작업이 될 ..

원문보기 내부링크
Tistory

[React] react-router-dom v6에 대해 알아보자

오늘은 react-router-dom v6에 대해 알아보겠습니다. react-router-dom v6의 경우 이전 버전과 달라진 점이 있습니다. 본 게시물은 v6을 기준으로 작성하였습니다. [ install ] yarn add react-router-dom [ 프로젝트에 라우터 적용 ] 프로젝트에 리액트 라우터를 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5 dml History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다. index.js HTML..

원문보기 내부링크
Tistory

[Redux] Redux middleware란?

오늘은 Redux middleware에 대해 알아보겠습니다. 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어(middleware)'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 다음은 리덕스를 적용한 간단한 리액트 프로젝트를 준비후, 이 프로젝트를 통해 리덕스 미들웨어에 대해 알아보겠습니다. 1..

원문보기 내부링크
Tistory

[TypeScript] TypeScript로 Google Maps API 사용하기

오늘은 TypeScript로 Google Maps API 사용해 보겠습니다. 기능적인 측면에 목적을 두었기 때문에 외적인 모습은 딱히 꾸미지 않았습니다 :) index.html HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 발급받은 API KEY를 채워주시면 됩니다. https://developers.google.com/maps?hl=ko Google Maps Platform | Google Developers Google Maps Platform 설명 developers.google.com app.ts HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[TypeScript] 이넘(Enum)의 특징

오늘은 Enum의 특징에 대해 알아보겠습니다. [ 숫자형 이넘 ] 타입스크립트에서 숫자형 이넘은 아래와 같이 선언합니다. enum Direction { Up = 1, Down, Left, Right } 위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가합니다. Up - 1 Down - 2 Left - 3 Right - 4 만약 아래와 같이 초기 값을 주지 않으면 0부터 차례로 1씩 증가합니다. enum Direction { Up, // 0 Down, // 1 Left, // 2 Right // 3 } [ 숫자형 이넘 사용하기 ] 이렇게 선언한 이넘은 아래와 같이 사용할 수 있습니다. enum Response { No = 0, Yes = 1, } function respond..

원문보기 내부링크
Tistory

[TypeScript] 인터페이스의 선택적 프로퍼티

인터페이스의 선택적 프로퍼티에 대해 알아보겠습니다. [ 선택적 프로퍼티 (Optional Properties) ] 인터페이스의 모든 프로퍼티가 필요한 것은 아닙니다. 어떤 조건에서만 존재하거나 아예 없을 수도 있습니다. 선택적 프로퍼티들은 객체 안의 몇 개의 프로퍼티만 채워 함수에 전달하는 "option bags" 같은 패턴을 만들 때 유용합니다. HTML 삽입 미리보기할 수 없는 소스 선택적 프로퍼티를 가지는 인터페이스는 다른 인터페이스와 비슷하게 작성되고, 선택적 프로퍼티는 선언에서 프로퍼티 이름 끝에?를 붙여 표시합니다. 선택적 프로퍼티의 이점은 인터페이스에 속하지 않는 프로퍼티의 사용을 방지하면서, 사용 가능한 속성을 기술하는 것입니다. 예를 들어, createSquare안의 color 프로퍼티 ..

원문보기 내부링크
Tistory

[Webpack] NPM 설치 명령어

NPM에서 가장 많이 사용되는 명령어인 npm install에 대해 알아보겠습니다. [ NPM 지역 설치 ] NPM 초기화 명령어로 package.json 파일을 생성하고 나면 해당 프로젝트에서 사용할 자바스크립트 라이브러리를 설치하게 됩니다. 이 때 명령어는 아래와 같습니다. npm install "내가 설치할 라이브러리" --save-prod 그리고 지역 설치 명령어의 경우 명령어 옵션으로 --save-prod를 붙이지 않아도 동일한 효과가 납니다. 또한, install 대신 i를 사용해도 됩니다. # 위 명령어와 동일한 효과 npm i "내가 설치할 라이브러리" [ NPM 지역 설치 경로 ] 위 명령어로 라이브러리를 설치하면 해당 프로젝트의 node_modules 라는 폴더가 생깁니다. 그리고 그 ..

원문보기 내부링크
Tistory

[Webpack] dependencies와 devDependencies의 차이

dependencies와 devDependencies의 차이에 대해 알아보겠습니다. [ 배포용 라이브러리 ] dependencies에 설치되어 있는 라이브러리의 경우 배포용 라이브러리입니다. 아래의 사진은 예시입니다. 이렇게 설치된 배포용 라이브러리는 npm run build로 빌드를 하면 최종 애플리케이션 코드 안에 포함됩니다. npm i "내가 설치할 라이브러리" [ 개발용 라이브러리 ] devDependencies에 설치되어 있는 라이브러리의 경우 개발용 라이브러리 입니다. npm i "내가 설치할 라이브러리" -D 설치 옵션에 -D를 주었다면 해당 라이브러리는 빌드하고 배포할 때 애플리케이션 코드에서 빠지게 됩니다. 따라서, 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 ..

원문보기 내부링크
Tistory

[Webpack] Webpack이란?

Webpack에 대해 알아보겠습니다. [ Webpack ] Webpack이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원 (HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 그럼 모듈과 모듈 번들링에 대해서 조금 더 살펴보겠습니다. [ 모듈이란? ] 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // math.js function sum(a, b) { return a + b; } function substract(a, b) {..

원문보기 내부링크
Tistory

[JavaScript] DOMContentLoaded, load의 차이

오늘은 DOMContentLoaded과 load의 차이점에 대해 알아보겠습니다. [ HTML 생명주기 ] HTML 문서의 생명주기에는 다음과 같은 3가지 주요 이벤트가 관여합니다. DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다. load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다. 세 이벤트는 다음과 같은 상황에서 활용할 수 있습니다. DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하..

원문보기 내부링크
Tistory

카메라 기능 사용하기

카메라 기능을 사용하는 웹 페이지를 만들어보자 웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때 웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용한다. 웹 카메라는 getUserMedia()를 사용한다. video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, video 요소에는 autoplay 속성을 지정한다. autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 포기가 지연되는 경우가 있다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[Git, GitHub] Mac Git clone 사용하기

Mac에서 Git clone 사용해 보자 최근에 Window에서 Mac으로 바꾸면서 기존에 작업하던 프로젝트를 Mac에 옮겨야 할 상황이 생겼다. 기존 컴퓨터에서 Git에 올린 프로젝트를 Mac으로 옮겨봤다. 굉장히 간단한 작업이었는데 내가 저장하고 싶은 폴더를 생성 후, 터미널로 그 경로에 접속한 다음에 git clone과 내가 가져올 프로젝트의 url 주소를 입력하면 끝이였다. git에서 위 사진의 프로젝트 주소를 복사해서 입력하는 것이다.

원문보기 내부링크
Tistory

[React] state란?

오늘은 state란 무엇인지 알아보겠습니다. [ prop / state ] React 공식 문서에 따르면 prop와 state를 다음과 같이 정의하고 있습니다. prop(properties의 줄임말)와 state는 일반 자바스크립트 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 걸 말한다 state와 prop을 정리하면 아래와 같습니다. 둘 다 일반 자바스크립트 객체이다. state는 컴포넌트 안에서..

원문보기 내부링크
Tistory

[Styled Component] Styled Component란?

오늘은 Styled Component에 대해 알아보겠습니다. :) [ Styled Component ] React, Vue, Angular와 같은 라이브러리, 프레임워크가 인기를 끌면서 재활용 가능한 컴포넌트 기반 개발이 주류가 되고 있습니다. 여러 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모두 담는 코드를 많이 사용하고 있습니다. React는 이미 JSX를 통해 HTML을 포함하고 있고, Styled Component 라이브러리를 사용하여 CSS를 JavaScript에 삽입할 수 있습니다. [ 설치 방법 ] npm install --save styled-components [ SASS는 불충분한가요? ] CSS 클래스명에 대한 고민 문제 가이드가 없으면 복잡해지는 구..

원문보기 내부링크
Tistory

[JavaScript] scrollIntoView()에 대해 알아보자

오늘은 scrollIntoView()에 대해 알아보겠습니다. 가끔 웹페이지를 보다 보면 화면 바깥으로 빠져나가있어 스크롤해야만 볼 수 있는 메뉴 탭이 있습니다. 살짝 화면을 빠져나간 메뉴를 클릭하면 메뉴 탭은 빠져나간 그 자리 그대로 있고, 내용만 바뀌게 됩니다. 하지만, 메뉴를 누르게 되면 자연스러운 애니메이션과 함께 스크롤되는 동작을 보이는 웹페이지도 있습니다. [ scrollIntoView() ] scrollIntoView() 메서드는 특정 요소가 화면에 보이도록 스크롤을 이동시키는 메서드입니다. 이 메서드는 요소의 상위 컨테이너를 스크롤하는 것이 아니라, 요소 자체를 스크롤합니다. 이 메서드를 호출하면 해당 요소가 현재 뷰포트에 보이도록 스크롤됩니다. scrollIntoView() 메서드는 인수를..

원문보기 내부링크
Tistory

[React] htmlFor란?

React에서 input에 연결시킬 태그에 for 속성을 넣으면 다음과 같은 에러가 발생한다. 이럴 때는 for 대신 'htmlFor'를 사용하면 해결된다.

원문보기 내부링크
Tistory

[React] Portal이란?

오늘은 Portal에 대해 알아보겠습니다. :) [ Portal ] React 공식 문서에 따르면 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이라고 합니다. 현재 와 은 부모 자식 관계로 속해있습니다. [ 사용 이유 ] 일반적으로 react는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트가 렌더링 되는 tree 구조를 가지고 있습니다. 하지만 때때로 이런 tree구조가 불편함을 가져다주기도 해서, 이럴 때 부모-자식 관계를 유지하지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있습니다. 대표적인 예로 modal은 부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야합니다. 이러한 상황에서 portal..

원문보기 내부링크
Tistory

[React] useRef란?

오늘은 useRef에 대해 알아보겠습니다. [ useRef ] useRef는 current 프로퍼티로 전달된 인자 (initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지 useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻합니다. 우리가 자바스크립트를 사용할 때에는, 우리가 특정 DOM을 선택하기 위해서 querySelector 등의 함수를 사용했습니다. React를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 필요합니다. 그럴 때 우리는 useRef라는 React Hook을 사용합니다...

원문보기 내부링크
Tistory

[React] useEffect란?

오늘은 useEffect()에 대해 알아보겠습니다. [ useEffect ] useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기..

원문보기 내부링크
Tistory

[React] useReducer란?

오늘은 useReducer에 대해 알아보겠습니다. [ useReducer ] React 공식 문서에 따르면 useReducer는 useState의 대체 함수라고 합니다. 위와 같이 React 공식 문서에서 언급된 것처럼, useReducer는 State(상태)를 관리하고 업데이트하는 Hook에만 useState를 대체할 수 있는 Hook 훅입니다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트할 수 있는 Hook입니다. useReducer의 묘미는, 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해 준다는 것입니다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가..

원문보기 내부링크
Tistory

[React] Context API란?

오늘은 Context API에 대해 알아보겠습니다. [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능입니다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하는데, 꼭 전역적인 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트 간에 값을 전달하는 방법이다"라고 접근을 하시는 것이 좋습니다. [ Context API ] React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기 위해 사용됩니다. 이 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트, 즉 위에서 아래, 한쪽으로 데이터가 흐르게 됩니다. 만약 다른 컴포넌..

원문보기 내부링크
Tistory

[JavaScript] Cookie란?

오늘은 Cookie에 대해 알아보겠습니다. [ Cookie ] 쿠키는 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다. 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. 사용자가 동일 도메인에..

원문보기 내부링크
Tistory

[JavaScript] webpack-dev-server can not GET 오류 해결

webpack-dev-server 서버를 사용하다 오류가 발생했습니다. package.json { "name": "eslint_webpack_study", "version": "1.0.0", "description": " ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "build:dev": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "eslint": "^8.38.0", "eslint-config-google": "^0.14.0", "webpack": "^5.78..

원문보기 내부링크
Tistory

[JavaScript] 폴리필(Polyfill)과 바벨(Babel)이란?

폴리필(Polyfill)이란 무엇인지 알아보겠습니다. [ 폴리필 Polyfill ] 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환환 코드를 의미합니다. 즉, 최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드를 말합니다. 아래는 pollyfill.io의 공식 레퍼런스입니다. 해당 사이트에선 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주고 있습니다. 아래 글은 해당 사이트에서 Pollyfill에 대해서 말해주고 있습니다. 세계적으로 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다릅니다. 이것은 브라우저용 개발을 어려운 작업으로 만들 수 있습니다. 인기 있는 브라우저의 최신 버전은 이전 브..

원문보기 내부링크
Tistory

[React] useMemo와 useCallback 이란?

오늘은 useMemo와 useCallback에 대해 알아보겠습니다. :) [ 메모이제이션 (memoization) ] 메모이제이션 (memoization)이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. momoization을 잘 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. [ useMemo ] useMemo는 React 컴포넌트에서 계산 비용이 큰 연산을 최적화하는 데 사용되는 Hook입니다. useMemo는 이전에 계산된 값을 기억하고, 해당 값이 변경되지 않은 경우에는 이전 값을 재사용합니다. 즉 , 메모이제이션된 '값'을 반환합니다. useMemo(() => ..

원문보기 내부링크
Tistory

Google maps platform API 사용하기

Google maps platform API 사용하여 내 위치 찾기, 위치 검색, 위치 공유 할 수 있는 페이지를 만들어보겠습니다. Google Maps Platform 문서 | Google Developers Google Maps Platform 문서 developers.google.com API Key 발급받기: https://developers.google.com/maps/gmp-get-started?hl=ko index.html HTML 삽입 미리보기할 수 없는 소스 구글 Maps API 스크립트 불러오기 원격에 있는 구글 서버로부터 Google Maps API의 코드를 내려받기 위함입니다. 에는 내가 발급받은 고유 API 키를 넣어주시면 됩니다. HTML 삽입 미리보기할 수 없는 소스 Share..

원문보기 내부링크
Tistory

[JavaScript] Jest란?

오늘은 Jest에 대해 알아보겠습니다. [ Jest란? ] Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리입니다. 출시 초기에는 프런트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해 주기 때문에 현재 대세라고 말할 수 있습니다. [ Jest 설치 ] // 설치 npm install jest --save-dev package.json HTML 삽입 미리보기할 수 없는 소스 test 커맨드 지정하기 package.json 파일을 열고 test ..

원문보기 내부링크
Tistory

[JavaScript] Puppeteer란?

오늘은 Puppeteer에 대해 알아보겠습니다. [ Puppeteer ] puppeteer은 구글에서 만든 노드 라이브러리로 Headless Chrome 또는 Chrominum을 제어할 수 있습니다. * headless 백그라운드에서 작동하는 브라우저입니다. 때문에 일반 사용자가 브라우저를 사용할 때처럼 화면에 창이 시각적으로 보이지 않습니다. 보이는 화면은 없지만, 실제로 띄워진 화면에서 화면 테스트를 하듯이 테스트를 할 수 있습니다. puppeteer에서는 옵션 설정을 통해 headless모드와 non-headless모드 둘 다 사용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 [ Puppeteer의 용도 ] 1. 화면을 스크린샷 하거나 PDF를 생성할 수 있습니다. 2. SPA(Singl..

원문보기 내부링크
Tistory

[Visual Studio Code] Accordion 만들기

Accordion을 만들어보자 accordion.html HTML 삽입 미리보기할 수 없는 소스 accodion.css HTML 삽입 미리보기할 수 없는 소스 accordion.js HTML 삽입 미리보기할 수 없는 소스 arrow_black.svg ※ 화살표 아이콘의 경우 이 소스 코드를 그대로 사용해도 되고, 다른 걸 사용해도 무방합니다 :) HTML 삽입 미리보기할 수 없는 소스 REF: https://stickode.tistory.com/504

원문보기 내부링크
Tistory

[CSS] 스크롤 앵커링에 대해 알아보자

스크롤 앵커링에 대해 알아보자 [ 스크롤 앵커링 / overflow-anchor ] 스크롤 앵커링이란 데스크톱 혹은 모바일 기기를 통해 웹 페이지를 볼 때, 이미지 로딩 등으로 화면이 갑자기 다른 곳으로 스크롤링되어 버리는 현상을 해소하기 위해 도입된 기능이다. 데스크톱이나 모바일 기기를 이용해서 인터넷 뉴스나 블로그 같은 웹 페이지들을 보다 보면, 갑자기 웹 페이지의 다른 곳으로 화면이 스크롤되어 버리는 현상이 나타나고는? 했다. ( 이제는 그러지 않는다. 적어도 크롬에서는!!! ) 이는 웹 페이지를 로딩하는 방식에서 용량이 작은 텍스트를 먼저 로딩하고, 고해상도의 이미지나 비디오 같은 오브젝트들을 나중에 로딩해서 발생하는 문제이다. 사용자가 웹 페이지를 스크롤 다운로드 하면서 보고 있을 때, 이미 스..

원문보기 내부링크
Tistory

[CSS] CSS 배경 패턴 만들어주는 사이트

내가 사용하고 싶은 패턴을 클릭하여 사용하면 된다, :) https://projects.verou.me/css3patterns/ CSS3 Patterns Gallery CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for ex projects.verou.me

원문보기 내부링크
Tistory

[JavaScript] 프로미스(Promise)란?

프로미스에 대해 알아보자 [ 프로미스 (Promise) ] 프로미스는 비동기 처리를 위한 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제가 있기에, 이를 극복하기 위해 ES6에서 도입되었다. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다. ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다. HTML 삽입 미리보기할 수 없는 소스 Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다. 이때 비동기 처리가 성공..

원문보기 내부링크
Tistory

[JavaScript] 모듈 / import / export에 대해 알아보자

모듈 / import / export에 대해 알아보자 [ 모듈 ] 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태이다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 하지만 애플리케이션과 완전히 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없다. 모듈은 ..

원문보기 내부링크
Tistory

[JavaScript] importNode()란?

importNode()에 대해 알아보자 [ importNode() ] 현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해준다. var node = document.importNode(externalNode, deep); node : 문서에 추가될 새로운 노드를 말한다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null이다. externalNode : 다른 문서에서 가져올 노드를 말한다. deep : 불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정한다. 실제 사용한 예제를 보자 index.html HTML 삽입 미리보기할 수 없는 소스 app.css HTML ..

원문보기 내부링크
Tistory

[Visual Studio Code] 요소 밝기 및 채도 조절하기

요소의 밝기와 채도를 조절해 보자 [ 요소 밝기 조절하기 ] 밝기를 조절하여 요소를 눈에 띄게 만들고 싶을 때 포커스 상태 효과를 주고 싶을 때 밝기 조절은 CSS의 filter 속성에 brightness() 메서드를 사용하여, brightness(100%)가 기본 상태다. 인수가 100% 보다 크면 밝아지고 작으면 어두워진다 CSS Transitions와 Web Animations API의 샘플을 확인해 보자 ※ CSS Transitions를 사용한 샘플 HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 클릭 전 클릭 후 ※ Web Animations API를 이용한 샘플 참고 :) https..

원문보기 내부링크
Tistory

[JavaScript] Element.closest()에 대해 알아보자

Element.closest()에 대해 알아보자 [ Element.closest() ] Element의 closest() 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다. 구문 closest(selectors) 매개변수 selectors: Element와 그 조상 요소들에 테스트할, 유효한 CSS 선택자 문자열을 말한다. 반환 값 selectors에 일치하는 가장 가까운 조상 Element 또는 자기 자신, 일치하는 요소가 없으면 null을 발생 예제 HTML Here is div-01 Here is div-02 Here is div-03 JavaScript const el = document.getElement..

원문보기 내부링크
Tistory

[JavaScript] innerHTML, innerText, textContent 차이 + insertAdjacentHTML

innerHTML, innerText, textContent 차이와 insertAdjacentHTML에 대해 알아보자 innerHTML, innerText, textContent 속성은 텍스트를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만, 조금씩 다른 차이가 있다. 그 차이에 대해 알아보자 :) [ innerHTML ] innerHTML은 'Element'의 속성으로, element내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있는 것이다. HTML 삽입 미리보기할 수 없는 소스 innerHTML은 유용한 메서드이고, 자주 사용..

원문보기 내부링크
Tistory

[JavaScript] lodash library란?

lodash library에 대해 알아보자 [ lodash ] lodash는 JavaScript의 인기 있는 라이브러리 중 하나입니다. 보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다루기 위해 사용합니다. JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용합니다. 이런 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 됩니다. 특히 frontend 환경에서 많이 쓰입니다. ㅡ. (변수) 이런식으로 작성할 경우 lodash wrapper로 변수를 감싸게 되면서 해당 변수에 대한 chaining을 시작합니다. _라는 기호를 이용해서 사용하기 때문에 명칭 또한 lod..

원문보기 내부링크
Tistory

[JavaScript] find와 findIndex에 대해 알아보자

ES5에서는 배열 내의 검색을 위해서 indexOf()라는 배열 메서드를 사용했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메서드를 지원합니다. 기존에 indexOf가 배열 내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다. [ Array.prototype.find() ] find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다. 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다. find()는 호출되는 배열을 변경하지 않습니다. HTML 삽입 미리보기할 수 없는 소스 Parameter Descri..

원문보기 내부링크
1 2 3