despiteallthat의 등록된 링크

 despiteallthat로 등록된 티스토리 포스트 수는 260건입니다.

[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를 이용하면 ..

Git commit message는 어떻게 작성해야 할까? [내부링크]

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

[알고리즘 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 ..

[React with TS] PropTypes란? [내부링크]

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

[React] dangerouslySetInnerHTML이란? [내부링크]

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

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

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

[Git, Github] 기본적인 터미널 명령어 [내부링크]

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

[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..

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

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

[Git, GitHub] Git이란 무엇인가 ? [내부링크]

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

[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 ..

[React] Server Side Rendering이란? [내부링크]

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

[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

[Router] useNavigation과 useSubmit [내부링크]

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

[Router] useFetcher [내부링크]

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

[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를 보내는 것이고, 을 사용하면 클라이..

[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에 따라 ..

[Router] loader와 useLoaderData [내부링크]

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

[Router] useParams 사용하기 [내부링크]

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

[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..

[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..

[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

[Redux] redux-thunk와 redux-saga란? [내부링크]

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

[Redux] Redux-logger 사용하기 [내부링크]

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

[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에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것입..

[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의 변경 사항을 ..

[CleanCode] 에러 다루기 [내부링크]

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

[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의 개수가 많아질수록 실수할 확률이 높아집니다. 이럴 때는 _를 이용하면 숫자를 보기 편하게 입력하여 사용할 수 있습니다. [ 네이밍 컨벤션 ] 저장소, 폴더, 파일, 함수, 변수, 상수, 깃 브랜치, 커..

[CleanCode] 함수 다루기 [내부링크]

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

[CleanCode] 객체 다루기 [내부링크]

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

[CleanCode] 배열 다루기 [내부링크]

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

[React] firebase 이용하기 [내부링크]

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

[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..

[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..

[CleanCode] 분기다루기 [내부링크]

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

[React] Single Page Application란? [내부링크]

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

[CleanCode] 경계 다루기 [내부링크]

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

[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..

[CleanCode] undefined와 null의 차이 [내부링크]

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

[CleanCode] 타입 검사 [내부링크]

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

[CleanCode] 변수에 대하여 [내부링크]

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

[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 모드와 함께 제공됩니다. 이 모드들은 방출 단계에서만 영향을 미치며, ..

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

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

[TypeScript] 데코레이터(Decorator)란? [내부링크]

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

[React] input 개수에 따른 useState 활용법 [내부링크]

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

[React] propTypes를 통한 props 검증 [내부링크]

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

[Webpack] 소스 맵(Source Map)이란? [내부링크]

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

[Webpack] Webpack Dev Server란? [내부링크]

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

[Webpack] 웹팩의 4가지 주요 속성 [내부링크]

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

[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가 어떤 타입이든 받을 수 있다..

[TypeScript] TypeScript Classes란? [내부링크]

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

[TypeScript] 유니온 타입이란? [내부링크]

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

[TypeScript] 리터럴 타입이란? [내부링크]

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

[Webpack] Webpack이란? [내부링크]

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

[Webpack] dependencies와 devDependencies의 차이 [내부링크]

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

[Webpack] NPM 설치 명령어 [내부링크]

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

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

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

[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..

[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 삽입 미리보기할 수 없는 소스

[Redux] Redux middleware란? [내부링크]

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

[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..

[React] immer란? [내부링크]

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

[TypeScript] extends와 implements의 차이 [내부링크]

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

[TypeScript] interface란? [내부링크]

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

[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" ] [ 특정 파일을 ..

프론트엔드 개발자를 위한 점핏 북 콘서트 후기 [내부링크]

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

[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..

[TypeScript] TypeScript의 기본 타입 [내부링크]

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

[TypeScript] TypeScript란? [내부링크]

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

[Redux] Redux란? [내부링크]

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

[JavaScript] Puppeteer란? [내부링크]

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

[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 ..

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..

[React] useMemo와 useCallback 이란? [내부링크]

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

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

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

[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..

[JavaScript] Cookie란? [내부링크]

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

[React] Context API란? [내부링크]

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

[React] useReducer란? [내부링크]

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

[React] useEffect란? [내부링크]

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

[React] useRef란? [내부링크]

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

[React] Portal이란? [내부링크]

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

[React] htmlFor란? [내부링크]

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

[JavaScript] scrollIntoView()에 대해 알아보자 [내부링크]

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

[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 클래스명에 대한 고민 문제 가이드가 없으면 복잡해지는 구..

[React] state란? [내부링크]

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

[Git, GitHub] Mac Git clone 사용하기 [내부링크]

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

카메라 기능 사용하기 [내부링크]

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

[JavaScript] DOMContentLoaded, load의 차이 [내부링크]

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

이미지 로딩 지연시키기 [내부링크]

이미지 로딩을 지연시키는 코드를 작성해 보자 이미지 로딩 중인 상태를 표시하고 싶을 때 사용 이미지 로딩 후 이미지 데이터에 액세스 하고 싶을 때 사용 웹 페이지 내 이미지 로딩을 지연시키기 위해서는 DomContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 보관한 뒤 요소의 속성 값을 비워야 합니다.. src가 아닌 data-src를 사용하는 이유는 src 속성에 공백 값이 들어가면 네트워크 통신이 발생하기 때문입니다. 로딩하고 싶은 시점에 Map에 보관한 값을 src 속성에 넣어 작업을 처리합니다. 해당 작업을 사용하여 버튼 클릭 시 이미지를 로딩하는 샘플을 확인해 보겠습니다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미..

[React] Components와 Props란? [내부링크]

오늘은 props에 대해 알아보겠습니다. React에서는 component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react element를 반환합니다. [ 함수 컴포넌트 ( Function Component ) ] component를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. HTML 삽입 미리보기할 수 없는 소스 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터입니다.) 객체 인자를 받은 후 react element를 반환하므로 ..

[React] React란? [내부링크]

오늘은 React에 대해 알아봅시다. [ 리액트 React ] 리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(Javascript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔 (Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다. 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다 보니, 싱글 페이지 애플리케이션을 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다. 예를 들어 리액트는 페이지 전환 기능을..

[JavaScript] weakMap과 weakSet [내부링크]

자바스크립트 엔진은 도달 가능한 (그리고 추후 사용될 가능성이 있는) 값을 메모리에 유지합니다. 예시: HTML 삽입 미리보기할 수 없는 소스 자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 대개 도달 가능한 값으로 취급되어 메모리에서 삭제되지 않습니다. 객체의 프로퍼티나 배열의 요소, 맵이나 셋을 구성하는 요소들이 이에 해당합니다. 만약 어떤 배열에 객체 하나를 추가한다면, 이때 배열이 메모리에 남아있는 한, 배열의 요소인 이 객체도 메모리에 남아있게 됩니다. 이 객체를 참조하는 것이 아무것도 없어도 남게 됩니다. 예시: HTML 삽입 미리보기할 수 없는 소스 맵에서 객체를 키로 사용한 경우 역시, 맵이 메모리에 있는 한 객체도 메모리에 남습니다. 즉, 가비지 컬렉터의 대상이 ..

[JavaScript] find와 findIndex에 대해 알아보자 [내부링크]

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

[JavaScript] lodash library란? [내부링크]

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

[JavaScript] innerHTML, innerText, textContent 차이 + insertAdjacentHTML [내부링크]

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

[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..

[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..

[JavaScript] importNode()란? [내부링크]

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

[JavaScript] 모듈 / import / export에 대해 알아보자 [내부링크]

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

[JavaScript] 프로미스(Promise)란? [내부링크]

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

[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

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

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

[Visual Studio Code] Accordion 만들기 [내부링크]

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

[JavaScript] Web Animation API란? [내부링크]

Web Animation API에 대해 알아보자 HTML 삽입 미리보기할 수 없는 소스 [ Web Animation API ] Web Animation API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. DOM 요소의 애니메이션과 같은 웹 페이지 표시에 대한 동기화 및 타이밍을 변경하는 것이 가능하다. 또한 타이밍 모델과 애니메이션 모델 두 가지 모델을 결합하여 수행할 수 있다. 또한, CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 하지만 Web Animation API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다. 첫 번째 인수는 시작과 종료 값을 포함하는 객체를, 두 번째 인수는 애니메이션 속성을 포함하..

[EJS] EJS에 대해 알아보자 [내부링크]

EJS에 대해 알아보자 [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. https://despiteallthat.tistory.com/152 [Png] Pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 ..

[Png] Pug layout 만들기 [내부링크]

Pug를 이용하여 공통된 layout을 만들어보자 shop.html HTML 삽입 미리보기할 수 없는 소스 add-product.html HTML 삽입 미리보기할 수 없는 소스 404.html HTML 삽입 미리보기할 수 없는 소스 위 3개의 html에는 공통된 부분을 main-layout.pug로 변환해 보자 HTML 삽입 미리보기할 수 없는 소스 위와 같이 공통된 부분을 하나의 파일로 저장해두면 다른 png 파일에서 이를 extends 하여 사용할 수 있다. title의 경우 #{pageTitle}과 같이 동적 렌더링을 위해 각각의 js 파일에 랜더링을 위한 pageTitle 키와 값을 설정해줘야 한다. app.js admin.js shop.js block styles 과 block content의 ..

[JavaScript] 비동기 프로그래밍 [내부링크]

비동기 프로그래밍에 대해 알아보자 [ 동기 처리와 비동기 처리 ] 실행 콘텍스트에 따르면 함수를 호출하면 함수 코드가 평가되어 함수 실행 콘텍스트가 생성된다. 이때 생성된 함수 실행 콘텍스트는 실행 콘텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 콘텍스트는 실행 콘텍스트 스택에서 팝 되어 제거된다. 함수 호출 -> 함수 코드 평가 -> 함수 실행 콘텍스트 생성 -> 실행 콘텍스트 스택(콜 스택)에 푸시 -> 함수 코드 실행 -> 함수 코드 실행 종료 -> 함수 실행 컨텍스트를 실행 콘텍스트 스택에서 팝 되어 제거 함수가 실행되려면 "함수 코드 평가 과정"에서 생성된 함수 실행 콘텍스트가 실행 콘텍스트 스택에 푸시되어야 한다. 다시 말해, 실행 컨텍스트 스..

[Png] 동적 콘텐츠 출력 [내부링크]

Pug를 이용하여 동적 콘텐츠를 출력해 보자 참고: https://despiteallthat.tistory.com/152 [Node.js] pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 / Pug ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기 despiteallthat.tistory.com shop.png HTML 삽입 미리보기할 수 없는 소스 app.js HTML 삽입 미리보기할 수 없는 소스 admin.js HTML 삽입 미리보기할 수 없는 소스 shop.js HTML 삽입 미리보기할 수 없는 소스 const products = adminData.products; res...

[Png] Pug에 대해 알아보자 [내부링크]

오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. 즉 Pug는, HTML을 Pug 문법으로 작성하여 HTML로 바꿔주는 기능을 한다. [ Pug 설치 & 사용법 ] Pug는 Express의 패키지 view engine이다. $ npm..

[Node.js] 외부에서 css 적용하기 [내부링크]

외부에서 css를 적용하는, 정적으로 파일 서비스하는 방법에 대해 알아보자 내가 관리하고 있는 node.js 폴더가 이런 구성을 갖고 있다고 해보자. 일반적으로 css를 html 파일에 외부에서 연결시킬 때는 경로를 따라가서 적용시킨다. 하지만 node.js에서 이 방식을 사용하면 다음과 같이 적용이 되지 않는다. 모든 스타일링이 적용이 되지 않는데 개발자 도구에서 볼 수 있듯이 파일 시스템에 엑세스 하지 못해 main.css 파일을 찾지 못한다. 이를 구현하려면 Express.js가 제공하는 기능이 필요하다. 바로, 파일을 정적으로 서비스하는 기능이다. 정적이란 의미는 express.Router이나 다른 미들웨어 소프트에서 처리되지 않고 파일 시스템으로 직접 포워딩된다는 것을 뜻한다. 이를 위해 app..

[JavaScript] REST API란? [내부링크]

REST API에 대해 알아보자 XMLHttpRequest 참고 :) https://despiteallthat.tistory.com/149 [JavaScript] XMLHttpRequest란? XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHt despiteallthat.tistory.com [ REST API ] REST(REpresentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩(Roy Fielding)..

[JavaScript] XMLHttpRequest란? [내부링크]

XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다. [ XMLHttpRequest 객체 생성 ] XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성한다. XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행된다. // XMLHttpRequest 객체의..

[JavaScript] JSON.stringify / JSON.parse란? [내부링크]

JSON.stringify와 JSON.parse에 대해 알아보자 [ JSON.stringify ] JSON.stringify 메서드 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 한다. HTML 삽입 미리보기할 수 없는 소스 JSON.stringify 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 변환한다. HTML 삽입 미리보기할 수 없는 소스 [ JSON.parse ] JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환한다. 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(de..

[Node.js] HTML 페이지 서비스 [내부링크]

HTML 페이지 서비스에 대해 알아보자 예를 들어 위와 같은 경로로 파일이 저장되어 있다고 가정해 보자. node.js를 이용해 HTML 페이지를 서비스하기 위해서는 어떻게 해야 할까? admin.js라는 파일에서 add-product.html을 서비스 해보자 res.sendFile을 사용하면 사용자에게 파일을 회신할 수 있다. 우선, join 메서드를 호출하기 위헤 path라는 코어 모듈을 임포트 해준다. const path = require('path'); path의 경우 Node.js가 기본적으로 제공하는 기능이므로 따로 설치할 필요는 없다. join메서드를 호출함으로서 생성한 경로로 파일을 보낼 수 있다. path.join('첫 번째 세그먼트', '두 번째 세그먼트', '세 번째 세그먼트'... ..

[Node.js] 오류 페이지 추가하기 [내부링크]

페이지 오류가 났을 때를 대비하여 오류 페이지를 추가하는 방법에 대해 알아보자 URL에 정해놓은 문자열이 아닌 무작위 문자열을 입력하면 오류가 발생한다. 일반적으로는 이런 경우 404 error 페이지가 나타나는데 express가 미들웨어를 사용해 요청을 처리하는 방법을 활용하면 해결할 수 있다. HTML 삽입 미리보기할 수 없는 소스 app.use((req, res, next) => { res.status(404).send("Page not found"); }); 다음과 같이 미들웨어 안에 res.status()를 사용하면 해결할 수 있다. status(??)처럼?? 에는 특정 오류코드가 발생했을 때 내가 처리하고 싶은 오류 코드를 넣으면 된다.

[Node.js] Router 사용하기 [내부링크]

Router를 사용해 보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 위의 소스 코드의 경우 간단하지만 이렇게 모든 코드를 하나의 app.js 파일에 기록하면 파일의 크기가 계속 커지게 된다. 물론 이 정도 규모의 앱에 대해서는 문제가 되지 않는다. 그러나 일반적으로는 라우팅 코드를 여러 파일로 나누는 것이 좋다. 현재 로직을 여러 파일로 내보내서 이 파일로 임포트 해보자. 내보낼 파일을 직접 만들 수도 있지만 Express.js는 라우팅을 다른 파일에 위탁하는 편리한 방법을 제공한다. routes라는 이름의 새로운 폴더를 만들어 보자 ( 다른 이름으로 만들어도 되지만 보통의 관행이라 한다, :) ) admin.js라는 파일과 shop.js라는 라우팅 파일을 생성했다. admin.js 에서는..

[Responsive web] max-(width/height)과 min-(width/height) 그리고 반응형 웹 [내부링크]

max-( width / height )과 min-( width / height )의 여러 쓰임새에 대해 알아보자 [ max- width / height ] max-width와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성이다. 반응형 웹 디자인에서 화면에 따라 스타일을 적용할 때 자주 사용한다. ※ max-width 속성 어떤 요소의 최대 너비를 지정하며, 요소의 너비값이 max-width 너비값보다 커지는 것을 방지한다. 즉, max-width는 width 속성값을 무효화시킨다. 예를 들어 이미지 가로 너비가 500px 일 때, max-width: 400px으로 설정하면 400px 이하로만 이미지가 보인다. ※ max-height 속성 요소의 최대 높이를 지정한다. max-he..

[JavaScript] data 어트리뷰트와 dataset 프로퍼티 [내부링크]

data 어트리뷰트와 dataset 프로퍼티에 대해 알아보자 data 어트리뷰트와 dataset 프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다. data 어트리뷰트는 data-user-id, data-role과 같이 data-접두사 다음에 임의의 이름을 붙여 사용한다. HTML 삽입 미리보기할 수 없는 소스 data 어트리뷰트의 값은 HTMLElement.dataset 프로퍼티로 취득할 수 있다. dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트의 정보를 제공하는 DOMStringMap 객체를 반환한다. DOMStringMap 객체는 data 어트리뷰트의 data-접두사 다음에 붙인 임의의 이름을 카멜 케이스로 변환한 프로퍼..

배경색 무작위 조작하기 [내부링크]

배경색을 랜덤으로 조작할 수 있는 버튼을 만들어 보자 조건 1. 버튼을 누르면 배경색을 두 가지 색이 섞인 색으로 변경시켜 준다. 2. linear-gradient로 지정되는 색깔 두 개는 같을 수 없다. 3. 만약 같은 색깔 두 개가 선정될 경우 두 번째 색상을 임의로 바꿔준다. 소스 코드 HTML 삽입 미리보기할 수 없는 소스 Script HTML 삽입 미리보기할 수 없는 소스 button을 클릭했을 때 변경할 수 있는 color를 배열로 담아놓고 랜덤함수를 통해 random1과 random2에 무작위로 0부터 5까지의 수를 초기화시킨다. 그리고 random1과 random가 같은 숫자일 경우를 검사하기 위해 checkNum 함수를 사용한다. 만약 checkNum 함수에서 확인결과 같을 경우 chan..

[Node.js] 애플리케이션 레벨 미들웨어 [내부링크]

[ 애플리케이션 레벨 미들웨어 ] app.use() 및 app.METHOD() 함수(*method: get, post 등등)를 이용해 app 오브젝트의 인스턴스에 바인드 시킨다. 미들웨어를 어플리케이션 영역에서 지정한 path대로 처리 가능하게 하도록 한다. HTML 삽입 미리보기할 수 없는 소스 첫 번째 미들웨어에서 'In the middleware!'를 출력하고 next()를 통해 다음 미들웨어로 넘어간다. 두 번째 미들웨어에서 'In another middleware!'를 출력하고 h1 태그와 그 안에 Hello from Express!를 출력한다. 서버를 생성하기 위해 기존에는 아래와 같이 작성하였다. const http = require('http'); const server = http.cre..

[Node.js] 미들웨어란? [내부링크]

미들웨어 (middleware)에 대해 알아보자 [ 미들웨어 (middleware) ] 미들웨어는 req(요청) 객체, res(응답) 객체, 그리고 애플리케이션 요청-응답 사이클 도중 그다음의 미들웨어 함수에 대한 액세스 권한을 next 인자로 갖는 함수를 말한다. 또한 next 호출을 통해 다음에 있는 미들웨어를 실행하도록 결정할 수도 있다. 즉 미들웨어란 클라이언트에게 요청이 오고, 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리하는, 거쳐가는 함수라고 할 수 있다. 다음 미들웨어 함수에 대한 엑세스는 next 함수를 이용해서 다음 미들웨어로 현재 요청을 넘길 수 있다. next라는 말에서 알 수 있듯이 next를 통해 미들웨어는 순차적으로 처리된다. (따라서 작성 순서가 매우 중요..

[Node.js] Express란? [내부링크]

Express란 무엇인가? [ Express ] Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다. Node.js는 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있다. Node.js와 Express는 무슨 관계일까? Node.js는 Chrome의 V8엔진을 이용하여 JavaScript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이다. Express는 이런 Node.js의 원칙과 방법을 이용하여 웹 애플리케이션을 만들기 위한 프레임 워크이다. 간단하게 말하자면, Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래..

[Node.js] Nodemon 설치하기 [내부링크]

Nodemon을 설치해 보자 [ Nodemon ] Nodemon이란 Node 서버를 이용하면서 코드를 변경하게 될 경우, 변경한 코드를 웹 상에서 확인하려면 서버를 내렸다가 다시 올려야 변화된 것을 확인할 수 있는데, Nodemon은 서버를 내리고 올리지 않아도 소스를 변경할 때 즉시 감지하여 자동으로 서버를 재시작해주는 도구이다. 즉, Nodemon은 자동 재시작 메커니즘을 위해 사용하는 도구이다. 자세한 사항은 아래의 링크에서 확인할 수 있다. https://www.npmjs.com/package/nodemon nodemon Simple monitor script for use during development of a Node.js app.. Latest version: 2.0.20, last pu..

[Node.js] npm script [내부링크]

npm script에 대해 알아보자 [ npm script ] NPM은 노드 패키지 매니저를 뜻하며 node.js 내부에 함께 설치되어 있다. NPM을 이용하여 노드 코어 (나의 패키지)에 포함되지 않은 패키지 즉 노드 코어 모듈의 일부가 아닌 패키지를 설치할 수 있다. npn init을 터미널에 입력하고 설치하면 되며 나오는 질문들에 답변을 하면 기본 값이 설정된다. 설정된 기본 값은 package.json에서 확인할 수 있으며 여기서 편집도 가능하다. 기본적으로 JavaScript 객체와 매우 유사해 보이는 특수한 종류의 데이터 형식인 JSON 형식을 사용하며, 이를 기반으로 한다. 위의 사진을 보면 scripts 구획이 있는데 여기에 다른 스크립트들을 추가할 수 있다. 현재는 "start" : "n..

[Node.js] 모듈 시스템 사용 [내부링크]

모듈 시스템을 사용하는 법에 대해 알아보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 저번에 작성한 코드를 보면 하나의 파일만 해도 많은 코드가 존재한다. 보통 이렇게 여러 파일을 작업하게 되는데 url 확인 등의 작업을 하는 라우팅 로직을 포함한 새 파일을 나누어 코드를 분산시킬 수 있다. [ routes.js ] routes.js라는 파일을 만들어 uf문과 기본 응답 코드를 분리해서 넣어주자 HTML 삽입 미리보기할 수 없는 소스 const fs = require('fs');을 먼저 추가해주고 기존 소스파일에서는 지워준다. 기존 소스파일과 routes.js를 연결하기 위해 requestHandler 함수를 생성해 req와 res를 인수로 갖게 만들어주고 아래에 있는 기존 소스파일의 htt..

[JavaScript] 요소 다루기 / 요소 추가하기 / 요소 삭제하기 [내부링크]

요소를 다루는 법에 대해 알아보자 [ 부모 / 자식 / 전 / 후 요소 읽어오기 ] ※ 특정 요소와 관련된 요소를 가져오고 싶을 때 사용! 속성 의미 타입 부모노드.children 자식 노드 요소군(HTMLCollection) 부모노드.firstElementChild 첫 번째 자식 노드 요소(Element) 부모노드.lastElementChild 마지막 자식 노드 요소(Element) 노드.nextElementSibling 다음 노드 요소(Element) 노드.previousElementSibling 이전 노드 요소(Element) 자식노드.parentNode 부모 노드 노드(Node) 소스 코드 HTML 삽입 미리보기할 수 없는 소스 [ 부모 요소에 자식 요소 추가하기 ] ※ 동적 표시 요소를 추가하고..

숫자 뽑기 게임 [내부링크]

숫자 뽑기 게임을 만들어보자 ※ 조건 1. 0부터 내가 선택한 숫자 범위 내에서 비교할 숫자를 입력해야 한다. 2. 비교할 숫자가 내가 선택한 숫자보다 클 수 없다. 3. 비교할 숫자는 0이거나, 음수일 수 없다. 4. 0부터 내가 선택한 숫자 범위 내에서 "Play!" 버튼을 누를 때마다 랜덤으로 숫자를 생성하여 비교할 숫자와 크기를 비교한다. 5, 비교 결과를 알려준다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

[JavaScript] 변수명 앞에 붙는 달러($)의 의미 (jQuery X) [내부링크]

jQuery가 아닌데 변수명 앞에 $를 붙이는 경우를 알아보자 예전부터 jQuery를 쓰지 않는데 $를 붙이는 경우가 있어서 궁금했었다. 그래서 이번 기회에 그 이유를 알아보고자 한다. 보통 구글에 검색하다 보면 변수명 앞에 $가 붙는다는 것은, jQuery에서 쓰는 변수명을 의미한다는 글이 많았다. $는 jQuery에서 매우 일반적인 사용으로 변수에 저장된 jQuery 객체를 다른 변수와 구별하는 것이다. 윗 말이 제일 많았다. 혹은, jQuery가 아닐 때에도 jQuery를 사용해서 받은 것을 변수에 넣었다는 것을 표시하기 위해서?라는 말이 있었다. (jQuery를 사용하지는 않는데, jQuery를 사용해서 받은 것??? (의문) 무슨 말인지 이해가 잘 안 되고, jQuery라는 단어를 써야만 대답할..

[Node.js] writeFile vs writeFileSync [내부링크]

fs.writeFile과 fs.writeFileSync에 대해 알아보자 https://despiteallthat.tistory.com/131 [Node.js] 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석에 대해 알아보자 [ 응답 헤더 ] const http = require('http'); // require 파일을 불러오는 방법 const server = http.createServer((req,res) => { res.setHeader('Content-Ty despiteallthat.tistory.com // 요청 본문 분석 // http 모듈 사용 const http = require('http'); // require 파일을..

[Node.js] 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석 [내부링크]

응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석에 대해 알아보자 [ 응답 헤더 ] const http = require('http'); // require 파일을 불러오는 방법 const server = http.createServer((req,res) => { res.setHeader('Content-Type', 'text/html'); }); // 서버를 생성할 때 꼭 필요한 메서드 res.setHeader란 뭘까? setHeader의 경우 새로운 헤더를 설정하는 것을 말한다. 예를 들면 Content-Type은 브라우저가 알고 이해하며 받아들이는 디폴트(default) 헤더이며, 인수로 setHeader 안에 이 헤더 키에 대응하는 값을 설정하고 text/html에 전송하거나 설정할 수 ..

Http 301 / 302 Redirect의 차이 [내부링크]

Http 301과 302 Redirect의 차이를 알아보자. HTTP Response Status Code는 요청에 대한 웹서버의 응답을 나타내는 코드를 말한다. 이 코드를 바탕으로 웹브라우저나 검색엔진 크롤러는 요청을 어떻게 처리해야 할지 판단한다. 이중 301과 302 코드는 사용자를 새로운 URL로 이동시키는 코드이다. [ 3XX Redirection ] HTTP 상태 코드는 보통 5개의 클래스로 구분된다. 우리가 많이 보는 404나 500 코드의 경우도 다 구분이 되어 있다!! HTTP 상태코드의 첫번째 자리 숫자는 이 코드가 어떤 클래스에 속하는지 나타내는다 301과 302는 "3XX Redirection" 클래스에 속하게 된다. Redirection 클래스에 속하는 상태코드들은 클라이언트를 지..

[Node.js] Node Life Cycle & Event Loop [내부링크]

Node Life Cycle & Event Loop에 대해 알아보자 ※ node app.js 실행 node app.js를 파일을 실행하면 스크립트가 시작되어 Node.js가 파일 전체를 살펴보고 코드를 분석한 후 변수와 함수를 등록한다. => 전체 코드를 읽고 실행 ※ 계속 작동하는 이벤트 리스너 전체 코드를 읽고 실행하는데 목적을 달성해도 프로그램을 끄지 않는다. 이는 Node.js에서 중요한 개념인 이벤트 루프 때문이다. Node.js가 관리하는 이벤트 루프는 작업이 남아 있는 한 계속해서 작동하는 루프 프로세스로, 이벤트 리스너가 있는 한 계속 작동한다. 등록 후 제거하지 않았던 이벤트 리스너로 createServer가 만든 요청 리스너가 있다. createServer에 계속되는 이벤트 리스너라는 ..

[Node.js] 서버생성 [내부링크]

Node.js로 서버 생성을 해보자 const http = require('http'); const server = http.createServer((req,res) => { console.log(req); }); server.listen(3000); Node.js에 탑재된 http 모듈의 기능을 전역에서 사용하기 위해 const로 변수를 생성해 준다. (var과 let으로도 생성이 가능하지만, 절대 변경하지 않을 값을 사용할 것이므로 const를 사용해서 다시 변경하지 못하게 할 것이다.) const http = require('http'); http라는 이름으로 변수를 선언하면, http 뒤에 =를 붙인 다음 값을 지정해야 한다. 이때, 특별한 키워드 및 기능을 사용할 수 있는데, Node.js는 전..

Drag & Drop 이용하여 이미지 올리기 [내부링크]

Drag & Drop 이용하여 이미지를 올려보자 HTML 이미지를 올려주세요 업로드한 이미지 CSS 더보기 body { display: block; overflow: scroll; width: 100%; height: 100vh; } .file-zone { background-color: rgba(0, 0, 0, 0.1); box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 400px); transition: 0.1s all ease-out; } .file-zone.on { background-color: rgba(97, 131, 209, 0.9)..

[Javascript] event.preventDefault() 와 event.stopPropagation() [내부링크]

event.preventDefault()와 event.stopPropagation()에 대해 알아보자 [ event.preventDefault() ] event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 주로 사용되는 경우를 나열하자면, 1. 페이지를 이동시키는 a 태그를 눌렀을 때 이동을 막음 2. form 태그 안에 submit 역할을 하는 버튼을 눌러도, submit은 작동하되 새로 실행되지는 않게 함 2번의 경우 내가 행한 event에 대해 (여기서는 submit) preventDEfault를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되서 초기..

[Javascript] Map이란? [내부링크]

Map에 대해 알아보자 [ Map ] Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size [ Map 객체의 생성 ] Map 객체는 Map 생성자 함수로 생성한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요..

[Node.js] 코드 실행방법 [내부링크]

Node.js에서 코드를 실행하는 방법에는 크게 2가지가 있다. [ REPL ] Read : Read User Input Eval : Evaluate User Input Print: Print Output (Result) Loop: Wait for new Input 터미널에 node를 입력 시 REPL에 진입할 수 있다. 이는 파일 시스템 패키지에서 한 줄씩 임포트가 가능하지만, 저장은 불가능하다. 즉, 일부 기능을 실행할 때 간단하게 사용할 수 있다. 터미널에 node라고 입력하고 내가 확인하고 싶은 간단한 내용을 타이핑하면 된다. ( Node.js 가 깔려있어야 함 ) [ 파일 실행 ( Execute Files) ] js 파일을 만들어서 그 안에 소스 코드를 입력하고 터미널에서 실행시키는 방법이다. ..

[Node.js] Node.js란? [내부링크]

Node.js란 무엇인가? Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 간단하게 말하면, Node.js의 사용 목적은 사용자에게 데이터를 회신하는 코드를 서버에 작성해서 클라이언트가 사용하게 하는 것을 말한다. ※ Node.js의 역할 Node.js로 서버 사이드 코드를 작성하고 서버에서 실행하게 한다. 브라우저를 사용하..

[Javascript] Set이란? [내부링크]

Set에 대해 알아보자 [ Set ] Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X [ Set 객체의 생성 ] Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set, 객체에 요소로 저장되지 않는다. const set1 = new ..

[Javascript] 디스트럭처링 할당 [내부링크]

디스트럭처링 할당에 대해 알아보자 [ 디스트럭처링 할당 ] 디스트럭처링 할당(destructuring assignment (구조 분해 할당))은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 이는 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. [ 배열 디스트럭처링 할당 ] 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. const arr = [1, 2, 3]; const [ one, two, three ] = arr; c..

[JavaScript] 스프레드 문법 [내부링크]

스프레드 문법에 대해 알아보자 [ 스프레드 문법 ] ES6에서 도입된 스프레드 문법(spread syntax)... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollection), arguments와 같이 for... of 문으로 순회할 수 있는 이 트러블에 한정된다. // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e ..

[Responsive web] 반응형 페이지 layout 만들기 Ver_5 [내부링크]

layout 만들기 Ver_5 소스코드 더보기 화면 너비 1220px 초과 section { clear: both; width: 100%; height: 200px; background-color: #bebee8; display: flex; justify-content: space-around; align-items: center; } section>div { width: 15%; margin: 5%; height: 80%; background-color: #9090ed; border-radius: 20px; } 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%; } .bottom-article {..

[Responsive web] 반응형 페이지 layout 만들기 Ver_4 [내부링크]

layout 만들기 Ver_4 width 1220px 초과 width 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%;} section > div { width: 23%;} section > div:nth-child(5n) { display: none;} } section 안에 div 5번째와 10번째를 display: none;으로 만들어 한 줄에 4개씩 표시 width 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 768px) { #wrap { width: 100%;} section > div { width: 31.333333%;} section > div:nt..

[Responsive web] cloneCoding Elarm Artists [내부링크]

Elarm Artists 사이트를 따라 해보자 https://elamartists.ac.nz/? year_select=2022&themes_select=all&practice_areas_select=all Elam Artists — The University of Auckland elamartists.ac.nz 따라 할 Elarm Artists main page 완성본 HTML 더보기 Year: 2022 2021 2020 2019 Programme: ALL BFA BFA(Hons) PGDipFA Themes: All Abstraction Affect Agency Practice: All Artist's Book Ceramics Comics Students Susu Ali senescall Alyssa K..

[JavaScript] for of 문과 for in 문 [내부링크]

여려가지 for문에 대해 알아보자 [ for .. of 문 ] for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. for...of 문의 문법은 다음과 같다. for (변수선언문 of 이터러블) { ... } for...of 문은 for...in 문의 형식과 매우 유사하다. for (변수선언문 in 객체) { ... } 하지만 두가지 for문에는 차이가 있다. for...in 문의 경우 객체 혹은 유사 배열 객체라면 사용할 수 있다. 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for문과 for...in 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형..

[JavaScript] 심벌이란? [내부링크]

심벌에 대해 알아보자 [ 심벌 (Symbol) ] 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않은 유일무이한 값이기 때문에 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 다른 값과 중복되지 않는 유일무이한 값 변경 불가능한 원시 타입의 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해서 사용 [ 심벌 값 생성 ] 심벌 값은 Symbol 함수를 호출하여 생성한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않은 유일무이한 값이다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); con..

[Responsive web] 반응형 페이지 layout 만들기 Ver_3 [내부링크]

layout 만들기 Ver_3 ※ 화면너비 1260px 초과 ※ 화면너비 1260px 이하 /* 화면 너비 0 ~ 1240px */ @media (max-width: 1260px){ #wrap{ width: 100%;} section:nth-of-type(1) { height: 300px;} section:nth-of-type(2) { height: 300px;} section:nth-of-type(3) { width: 100%; height: 300px;} article { width: 100%; height: 300px;} } 첫 번째 section과 두 번째 section의 높이를 300px로 수정 => aside의 높이가 600px이기 때문에 기존에 section의 높이가 200px 일 때는 se..

[Responsive web] 반응형 페이지 layout 만들기 Ver_2 [내부링크]

layout 만들기 Ver_2 ※ 화면 너비 1220px 초과 width 100%, 전체 영역 차지 ※ 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px){ aside { width: 40%; } section { width: 60%;} article { width: 100%; height: 300px; float: none; clear: both;} } aside 영역이 전체 너비의 40%, section 영역이 전체 너비의 60%를 차지하며, article은 아래로 내려간다. ※ 화면 너비 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 788px){ aside { width: 100%; } s..

[Responsive web] 반응형 페이지 layout 만들기 Ver_1 [내부링크]

layout 만들기 Ver_1 시맨틱 태그 참고 : https://despiteallthat.tistory.com/57 [HTML] 시맨틱 웹(Sementic Web) / 시맨틱 태그(Sementic tag) 오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 despiteallthat.tistory.com ※ 화면너비 1200px 초과 #wrap의 영역의 width 1200px ※ 화면 너비 0 ~ 1200px @media (max-width:1200px){ #wrap { width: 98%; } } #wrap 영역의 width 전체..

[Responsive web] 미디어쿼리란? [내부링크]

미디어쿼리에 대해 알아보자 [ 미디어쿼리 ] 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다. @media only all and (조건문) {실행문} @media : 미디어 쿼리가 시작됨을 표시한다. only : 미디어 쿼리 구문을 해석하라는 명령어이다. (생략가능) all : 미디어 쿼리를 해석해야 할 대상을 나타낸다. (생략가능) all : 모든 미디어 유형해서 사용할 CSS를 정의 print : 인쇄 장치에서 사용할 CSS를 정의 screen : 컴퓨터 스크린에서 사용할 CSS를 정의 aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의 tv : TV에서 사용할 CSS를 정의 handheld : 손에 들고 다니는 장치를 사용할 CSS를 ..

[CSS] 텍스트 세로로 표시하기 [내부링크]

텍스트를 세로로 표시하는 법을 알아보자 // 세로로 왼쪽 -> 오른쪽 writing-mode: vertical-lr; // 세로로 오른쪽 -> 왼쪽 writing-mode: vertical-rl; // 영어는 추가로 작성 text-orientation: upright; writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있다. 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시된다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하면 된다.

[Sass] 기본 작성법 익히기 [내부링크]

Sass의 기본 문법을 익혀보자 [ 중첩 ] 우리가 사용하는 CSS는 ( Cascading Style Sheet )로 가장 큰 특징은 "Cascading" 위에서 아래로 흐르는 특징을 갖고 있다. 그래서 CSS는 .grand-parent > .parent > .child와 같이 부모에서 자식 순서로 작성한다. 아래의 예시를 보자 .container-grand-parent { color: red; } .container-grand-parent .container-parent { color : orange; } .container-grand-parent .container-parent .container-child { color : yellow; } 부모에서 자식으로 내려가면서 CSS를 적용하고 있지만, 길..

[Sass] Sass란? [내부링크]

Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만, 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance CSS와 비교하여 Sass는 아래와 ..

딥링킹(Deep linking)이란? [내부링크]

딥링킹에 대해 알아보자 [ 딥링킹 (Deep linking) ] 딥링킹이란 URL 링크의 일종으로 사용자를 웹사이트나 스토어가 아닌 앱으로 직접 안내하는 것을 말한다. 딥링크는 사용자가 특정 페이지로 이동하는 시간과 노력을 줄여주어 사용자 경험을 크게 향상해 준다. 딥링크는 커스텀 URL 스킴(iOS Universal Link)이나 Intent URL(Android 기기)을 사용하여 설치된 앱을 시작한다. 또한 딥링크를 통해 특정 이벤트나 페이지로 사용자를 보내어 캠페인 효과를 높일 수 있다. [ 딥링크가 중요한 이유 ] 딥링크를 통해 원활한 사용자 여정을 구축하여 이탈율을 낮추고 앱의 설치를 증가시킬 수 있다. 또한, 고도화된 캠페인을 진행하면서 뛰어난 사용자 경험을 제공하고 한 번의 클릭으로 앱으로 ..

[Responsive web] flexbox와 main axis, class axis에 대해 알아보자 [내부링크]

flexbox flexbox에서 제일 중요한 것은 flex-direction이다. flex-direction이란 flex 속성을 부여했을 때 기준점을 잡는 것을 말한다. 기본값은 row로 되어있다. 여기서 중요한 점은 flex-direction이 row일때 main-axis이 가로 축이며, cross-axis는 세로 축이라는 것이다. flex-direction이 column이면 main-axis는 세로축이며, cross-axis는 가로축이다. ※ flex-direction : row (기본값) main-axis : 가로 cross-axis : 세로 ※ flex-direction : column main-axis : 세로 cross-axis : 가로 이 부분을 확실하게 알고나니 내가 자주하던 실수가 왜 일..

아날로그 시계 만들기 [내부링크]

아날로그 시계를 만들어보자 조건: 1. Date 함수를 이용한다. 2. Date 함수를 통해 각도를 구해서 사용한다. HTML 더보기 CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgba(15, 14, 14, 0.889); } .container { width: 600px; height: 500px; background-color: rgba(28, 27, 27, 0.829); border-radius: 60px; margin: 25vh auto; } .clock { width: 400px; height: 400px; border-radius: 50%; background-color: rgba(37, 36..

mousemove 이벤트로 색 변환하기 [내부링크]

mousemove 이벤트로 색 변환을 해보자 조건 1. 마우스를 움직일 때마다 화면의 색이 바뀜 2. 왼쪽, 오른쪽 여부 상관없이 바뀜 3. 화면의 색은 Math.random() 메서드 사용 box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 box18 box19 box20 HTML 삽입 미리보기할 수 없는 소스 ※ 화면 크기 및 확대, 축소 비율에 따라 event.pageX의 범위가 다르기 때문에 const num =parseInt(event.pageX / ? ); ? 는 개별 지정 필요

FileReader 객체 사용하여 image 올리기 [내부링크]

FileReader 객체 사용하여 image 올려보자 ref: [JavaScript] FileReader 객체에 대해 알아보자 FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, e despiteallthat.tistory.com 조건 1. 파일을 올릴 수 있는 버튼을 누르면 파일을 올린다. 2. 올릴 파일은 image로 제한한다. 3. 파일은 한 개만 올릴 수도 있고 다수도 가능하다. (여기서는 4개) 4. 각 파일마다 파일명, 사이즈, 파일타입을 알려준다. CSS 더보기 * { marg..

[JavaScript] FileReader 객체에 대해 알아보자 [내부링크]

FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장한다. 개발자는 result 속성을 통해 데이터에 접근할 수 있다. [ 비동기 동작 ] JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작한다. 비동기로 동작하면 H..

[Visual Studio Code] input type="file" [내부링크]

input type="file"에 대해 알아보자 code 이미지 미리보기 1. type을 file로 할 경우 파일을 선택할 수 있는 버튼이 생기고 원하는 파일을 넣을 수 있다. ( 단, 다중 선택 불가 ) 파일을 선택해서 넣으면 파일 이름을 보여준다. 2. type을 file로 하고 mutiple 속성을 지정하면 한 번에 여러 파일을 선택해서 넣을 수 있다. 3. accept 속성을 지정하면 내가 지정한 파일 형식만 올릴 수 있다. 위와 같이 "image/*"라고 지정하면 이미지 파일만 업로드 가능하고, 파일 형식은 상관없다는 뜻이다. 이렇게 파일 형식이 자동으로 지정되어 있다. 하지만 모든 파일로 바꾸면 accept 속성을 지정해도 올라간다는 단점이 있다. 4. accept 속성은 image뿐만 아니라..

[JavaScript] 정규표현식이란? [내부링크]

정규표현식에 대해 알아보자 [ 정규 표현식 ] 정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 예시 const cellphone = '010-1234-1224'; console.log( /^\d{3}-\d{3,4}-\d{4}$/.test(cellphone)); // true 위와 같이 핸드폰 번호를 입력받아 번호 양식에 맞는지에 대한 여부를 확인할 수 있다. 정규표현식을 사용하면 반복문과 조건문 없이 ..

[Figma] 디자인하기 전 알아야 하는 UI 기술 지식 [내부링크]

디자인하기 전 알아야 하는 UI 기술 지식에 대해 알아보자 용어 설명 스크린 사이즈 (screen size) 화면의 대각선 길이, 단위는 인치 해상도 (resolution) 화면의 총 픽셀 수 ppi (pixels per inch) 화소 밀도, 디스플레이에서 인치당 픽셀 수 dpi (dots per inch) 픽셀 밀도, 화면의 실제 영역 내에 있는 픽셀 수 dp (density-independent pixels) 안드로이드 사이즈 단위. 화면 크기와 해상도가 달라도 레이아웃을 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위 sp (scale-independent pixels) 안드로이드 텍스트에서만 사용하는 단위. dp와 동일한 비율 pt (point) iOS 사이즈 단위. dp와 같은 역할 해..

[Sass] 조건문 이용하여 반응형 웹 만들기 [내부링크]

조건문을 이용하여 반응형 웹을 만들어보자 [ _responsive.scss ] @mixin responsive($device){ @if $device == "maxDesktop" { @media screen and (min-width: 1024px){ @content; } } @else if $device == "minDesktop" { @media screen and (min-width: 768px) and (max-width: 1023px){ @content; } } @else if $device == "tablet" { @media screen and (min-width: 480px) and (max-width: 767px){ @content; } } @else if $device == "phone..

[Responsive web] Grid Garden [내부링크]

grid layout 연습을 할 수 있는 Grid Garden라는 사이트를 소개해보고자 한다. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS grid 속성을 이용하여 28문제를 풀어나가면 된다. 특별하게 어려운 건 없었지만 template를 row나 column으로 나눌 때 auto의 의미를 잘 파악해야 할 것 같다!

[Responsive web] Flexbox Froggy [내부링크]

flex layout 연습을 할 수 있는 Flexbox Froggy라는 사이트를 소개해보고자 한다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이 사이트에는 flex layout에 대한 각종 연습을 할 수 있다! justify-content, align-items, align-self, align-content, flex-direcion, order 등을 이용하여 단계별로 개구리를 배치하면 된다. 한국어로 번역해서도 볼 수 있으니 flex layout을 연습할 때 참고하길 바란다. :) 개인적인 리뷰로는 24단계까지 있는데 24단계에서 막혔다 ㅎ 막힌 이유는 내가 모르는 속성? ..

"selectstart" 글자 돋보기 만들기 [내부링크]

글자를 drag 하면 확대된 말풍선을 보여주는 코드를 만들어보자 조건 : 1. 내가 드래그한 단어 및 문단은 형광펜으로 처리한다. 2. 드래그한 단어를 확대해서 말풍선으로 드래그 영역 끝부분에 보여준다. 3. 말풍선을 누르면 말풍선이 꺼진다. HTML 더보기 가슴속에 그리고 피어나듯이 이름자를 있습니다. 우는 쉬이 추억과 노새, 어머님, 하나에 새워 청춘이 있습니다. 멀리 슬퍼하는 덮어 토끼, 하나에 아침이 위에 버리었습니다. 계집애들의 헤일 지나고 했던 내 노루, 위에 같이 흙으로 거외다. 이름과, 하나의 우는 벌써 책상을 봅니다. 내린 않은 하나에 별 내 잠, 보고, 봅니다. 하나에 별 토끼, 슬퍼하는 쉬이 까닭입니다. 없이 어머님, 위에도 까닭입니다. 자랑처럼 하나에 가을 무덤 나의 까닭이요, 없이..

[JavaScript] 마우스 이벤트란? [내부링크]

마우스 이벤트에 대해 알아보자 [ mousedown ] 마우스 버튼을 누르는 시점에 발생하는 이벤트 [ mouseup ] 마우스 버튼을 떼는 시점에서 발생하는 이벤트 [ mousemove ] 마우스를 움직이는 시점에서 발생하는 이벤트 [ mouseenter ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 [ mouseleave ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 ※ 포인팅 디바이스 마우스, 터치 패드 등을 가리킴 [ mouseover ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 (이벤트 버블링) [ mouseout ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 (이벤트 버블링) ※ mouseover와 mouseout 이벤트는 포인팅 디바이스(마우스..

[JavaScript] 이벤트 리스너 1회 실행 / 삭제 [내부링크]

이벤트 리스너를 1회만 실행하는 법과 삭제하는 법에 대해 알아보자 [ 이벤트 리스너 1회 실행하기 ] addEventListener()의 세 번째 인수에 옵션을 지정할 수 있다. 반드시 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다. 세 번째 인수로 지정할 수 있는 옵션은 다음과 같다. 옵션 의미 타입 capture 이벤트 캡쳐 여부 진릿값 once 리스너 1회 실행 여부 진릿값 passive 패시브 이벤트 여부 진릿값 다음 예제를 보자 버튼 버튼을 눌렀을 때 이벤트는 한 번만 발생하고 그 이후로는 발생하지 않는다. [ 이벤트 리스너 삭제하기 ] removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다. 버튼 페이지가 실행되고 3초까..

[Sass] mixin, extend, 모듈화(import/use) [내부링크]

mixin, extend, 모듈화(import/use)에 대해 알아보자 [ @ 문법 ] Sass는 작업을 편하게 해 줄 @으로 시작하는 At-Rules라는 문법이 있다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있다. (@font-face 또는 @counter-style, @media 등) Sass에서는 여기에 더해 추가적인 기능들을 제공하는 at-rules 들이 추가된다. 예를 들면 @mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있다. @extend : 여러 선택자가 스타일을 상속받도록 할 수 있다. @import / @use : 다른 스타일시트에 있는 변수, 함수, 믹스인 등을 불러와 결합해서 쓸 수 있다. @function : SassScript에서 사용할 수 ..

배열 무작위 섞기 (셔플) [내부링크]

배열을 섞을 수 있는 메서드를 만들어보자. 1. 기존 배열 값은 바꾸지 않는다. (복사해서 사용) 2. 메서드를 실행할 때마다 무작위로 섞인다. [ array [ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 피셔 예이츠(Fisher Yates) 알고리즘을 사용하며, 재사용할 수 있도록 처리 작업을 함수로 만든다. ※ 피셔 예이츠 알고리즘 [ array[ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 예를 들어, 5개의 요소 [0, 1, 2, 3, 4]를 가지는 배열을 생각해보자. for문 i에 4, 3, 2, 1, 0 을 대입했을 때 Math*random()은 0 이상..

array.sort() 오름차순, 내림차순 정렬하기 [내부링크]

배열 오름차순, 내림차순 정렬을 해보자 조건 1. 오름차순, 내림차순 버튼이 있고 버튼을 누르면 userDataList 배열에 있는 객체 값을 보여준다. 2. 오름차순 버튼을 누르면 id가 오름차순 된 순서대로 보여준다. 3. 내림차순 버튼을 누르면 id가 내림차순 된 순서대로 보여준다. 4. 최초에는 id가 오름차순 된 순서대로 보여준다. 오름차순 내림차순 div 태그 안에 오름차순 버튼과 내림차순 버튼을 만들고, 버튼을 누르면 ul태그 안에 li 태그로 객체 값을 출력한다. 결과 HTML 삽입 미리보기할 수 없는 소스 리뷰 특별하게 어려운 건 없었는데 sortByAscending과 sortByDescending에서 return 값을 설정하는데 시간이 좀 걸린 것 같다. sort() 메서드에서 sort..

Turbo Console Log 사용방법 [내부링크]

Turbo Console Log 사용법에 대해 알아보자 [ Turbo Console Log ] 이 확장은 의미 있는 로그 메시지 작성 작업을 자동화하여 디버깅을 훨씬 쉽게 만든다. console.log로 디버깅 작업을 할 때 매번 작성해야 하는 귀찮음이 있다. (다행이게도?) Turbo Console Log를 사용하면 수월하게 작성할 수 있다. :) [ 설치방법 ] 1. vscode extension에 Turbo Console Log 검색 2. 설치 [ 주요 기능 ] 1. 원하는 변수를 선택 후 ctrl+alt+L 누르기 2. 다중커서 지원 property TurboConsoleLog.wrapLogMessage(boolean): 로그 메시지를 래핑할지 여부. TurboConsoleLog.logMessag..

encodeURIComponent로 네이버 검색하기 [내부링크]

간단하게 encodeURIComponent로 네이버 검색을 해보자 조건 1. input text에 검색할 내용을 입력하고 버튼을 누르면 네이버 검색창에 자동 검색이 된다. + 추가기능 input text에 검색할 내용을 입력했을 때 기본적으로 합성되는 문자열을 만들어보자 ex) "포카"를 검색하면 자동으로 "칩"이 붙어 "포카칩" 검색 참고 [JavaScript] encodeURI / decodeURI란? encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유 despiteallthat.ti..

[JavaScript] encodeURI / decodeURI란? [내부링크]

encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다. URI의 하위 개념으로 URL, URN이 있다. URI / URL / URN 이란 무엇인가 오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. despiteallthat.tistory.com /** * 완전한 URI를 문자열로 전달받아 이스케이프 ..

시계 만들기 [내부링크]

시간, 분, 초를 나타낼 수 있는 시계를 만들어보자 조건: 1. 현재 시간에 맞는 시간을 출력한다. 2. 시간, 분, 초를 두 자리로 출력하되 10이 넘지 않는 (1~9)의 경우 앞에 0을 붙여서 출력한다. clock.html : : clocl.css *{ margin: 0; padding: 0; box-sizing: border-box; } .container { width: 400px; height: 200px; margin: 300px auto; background-color: skyblue; border-radius: 70px; border: 5px solid antiquewhite; } .current-time { font-size: 60px; font-weight: bold; color: wh..

[Git, GitHub] ! [rejected] master -> master (non-fast-forward) 해결 방법 [내부링크]

! [rejected] master -> master (non-fast-forward) 해결 방법에 대해 알아보자 작업한 것을 push 하는 과정에서 이런 에러가 발생했다. 상황 github에서 저장소를 생성 후 최초 commit에 성공했고 파일 수정 후 다시 commit를 하려다 발생 git add . => git commit -m "second commit" => git push origin master 입력 시 오류 발생 git remote -v로 연결 경로를 확인해보면 내가 설정한 경로로 연결이 되어있음 hint로 나온 문구를 해석해 보면, GitHub에 생성된 원격 저장소와 로컬에 생성된 저장소 간 공통분모가 없는 상태에서 병합하려는 시도로 인해 발생. 기본적으로 관련 없는 두 저장소를 병합하는..

[Git, GitHub] Git 설치, 업로드, 업데이트하는 법 [내부링크]

Git 설치, 업로드, 업데이트에 대해 알아보자 우선 Git을 사용하려면 Git을 설치해야 한다. Git git-scm.com Downloads를 누르고 실행 환경에 맞게 다운로드하면 된다. git bash를 열면 처음에 간단한 환경설정을 해야 한다. 1. 사용자 이름 설정 git config --global user.name "your_name" 2. 사용자 이메일 설정 git config --global user.email "your_email" 3. 정보 확인하기 git config --list 내가 입력한 email과 name을 확인할 수 있다! Github에 처음 코드 업로드하기 1. 초기화 git init 2. 추가할 파일 더하기 git add . .(점) 은 모든 파일이라는 뜻이다. 선택적으..

이미지 갤러리 (라이트 박스) 만들기 [내부링크]

이미지 갤러리를 만들어보자 조건 1. 사진 6개를 보여준다. 2. 각각의 사진을 클릭하면 화면 전환이 되고 내가 누른 사진의 크기를 조절하여 보여준다. 3. 크기가 조절된 사진을 누르면 다시 사진 6개를 보여주게 만든다. 방법 1 방법 2 방법 3 CSS .row { width: 420px; margin: 30px auto; } ul { list-style: none; margin: 0; padding: 0; } ul li { display: inline-block; } #lightbox { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.694); top: 0%; left: 0%; position: fixed; display: none; } ..

[JavaScript] this에 대해 알아보자 [내부링크]

오늘은 this에 대해 기록해보고자 한다. 이론적인 부분에서 공부할 때 너무 어려운 부분이 많았다. 그래서 이해가 안되는 부분이 많았는데 부족할 수 있지만 이번 계기로 확실히 정리해 보자 결론부터 말하자면 1. this는 함수가 호출될 때 결정이 된다. 2. 화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승받는다. 실습으로 내가 이해한 대로 적어봐야겠다. ver_1 car라는 객체는 name 값으로 "KIA"를 가지고 있다. 여기서 car.getName(); 으로 car라는 객체의 getName() 메서드를 호출했다. this는 함수가 호출될 때 결정이 된다. 즉, car.getName();는 car가 getName()을 호출한 것이다. 이때 getName() 안에 있는 this는 ..

[JavaScript] 문서 객체 모델 (DOM) [내부링크]

DOM(document object model)에 대해 알아보자 [ 문서 객체 모델이란 ] 웹이나 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. ※ 문서 객체 모델(DOM)의 정의 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체이다. 이처럼 DOM은 웹 문서와 그 안..

숫자 반환하기 [내부링크]

숫자를 반환하는 함수를 만들어보자 조건 1. 입력 값이 ''이거나 prompt에서 취소를 누르면 null 값 표시 2. 입력 값이 숫자가 아니면 다시 prompt 호출 후기 처음에는 do while을 사용할 생각을 못했다. 그래서 문자를 입력받으면 다시 호출해야 하는데 여기서 return readNumber();를 사용했다. 하지만, 함수 본인이 자신을 계속 호출하는 방법을 사용하고 싶지 않아서 고민하다 do while을 사용하니 해결이 됐다.

[JavaScript] Symbol.Toprimitive란? [내부링크]

오늘은 Symbol.Toprimitive에 대해 알아보자 [ 객체를 원시형으로 변환하기 ] obj1 + obj2처럼 객체끼리 더하는 연산을 하거나, obj1-obj2처럼 객체끼리 빼는 연산을 하면 어떤 일이 발생할까? 그리고 alert(obj)로 객체를 출력할 때는 무슨 일이 발생할까? 위의 두 가지 경우 모두 자동 형 변환이 발생한다. 즉, 객체는 원시값으로 변환되고, 그 후에 의도한 연산이 수행된다. 1. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 발생한다. 예를 들어 객체 Date 끼리 차감하면 (date1-date2) 두 날짜의 시간 차..

정규 표현식으로 특정 문자 검색하기 [내부링크]

오늘은 정규 표현식으로 특정 문자를 검색해 보자 [ 정규 표현 패턴의 표기 ] 문자열의 패턴은 내용의 앞뒤에 /를 삽입한다. /패턴/ 대표적인 패턴 패턴 의미 x 문자 x xyz 문자열 xyz [xyz] x, y, z 중 하나의 문자 [a-z] a ~ z 중 하나의 문자. [a-f]. [A-Za-z] 방식도 가능 [^xyz] x, y, z 외 하나의 문자 [^a-z] a ~ z 외 하나의 문자 abc|xyz 문자열 abc 혹은 xyz {숫자} 반복 횟수 ^x 시작 문자 x x$ 종료 문자 x . 하나의 문자(줄바꿈 코드 제외) x* 0개 이상 계속되는 x* \ 다음에 오는 문자를 이스케이프(escape) 처리 \d 숫자 [0-9] \D 숫자가 아닌 문자 [^0~9] \w 영문, 숫자, 언더바 [A-Za-..

[JavaScript] 자바스크립트 내장 객체 [내부링크]

오늘은 자바스크립트 내장 객체에 대해 알아보자 [ Array 객체 ] Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. 배열을 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다. [ Array 객체의 메서드 ] Array 개체에는 여러 가지 메서드가 있다. 종류 설명 concat 기존 배열에 요소를 추가해 새로운 배열을 만든다. every 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다. filter 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다. forEach 배열의 모든 요소에 대해 주어진 함수를 실행한다. in..

[Bootstrap] 부트스트랩이란? [내부링크]

오늘은 부트스트랩에 대해 알아보자 Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS JavaScript로 만들어진 typography, 입력양식(forms), 버튼, 테이블, 탭, 네이베이션, 이미지 캐러셀 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components..

[JavaScript] 이벤트와 각종 이벤트 처리기 [내부링크]

오늘은 이벤트와 각종 이벤트 처리기에 대해 알아보자 [ 이벤트 ] 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다. 하지만, 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 예를 들어 브라우저 창 맨 위의 제목 표시줄을 클릭하는 것은 이벤트라고 하지 않는다. 자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. [ 마우스 이벤트 ] 마우스 이벤..

지역 검색 구현하기 [내부링크]

오늘은 지역 검색을 할 수 있는 code를 만들어보자 조건 지역명의 첫 번째 글자만 받아서 검색한다. (한글, 영어) 검색된 지역명과 data에 있는 지역명이 일치하는 지역만 보여준다. 일치하지 않는 지역은 보여주지 않는다. ( display: none; 속성 이용 ) [ searchName.html ] 지역명의 첫번째 글자를 입력해주세요. 속초 부산 포항 상주 서울 제주 김해 대구 울산 창원 마산 인천 평택 의정부 고양 성남 용인 부천 안산 남양주 시흥 파주 김포 광명 군포 이천 하남 과천 전주 군산 목포 나주 광양 춘천 원주 사천 광주 구리 삼척 당진 공주 천안 부천 수원 세종 대전 충주 [ search.js ] const numberMaxLength = function (e) { const MAX_..

[CSS] 벤더 프리픽스란? [내부링크]

오늘은 벤더 프리픽스에 대해 알아보자 CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용해야 한다. Can I use? 에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-select 프로퍼티는 모든 브라우저에 벤더 프리픽스를 사용하여야 한다. 브라우저의 버전이 올라감에 따라 벤더 프리픽스를 사용하지 않아도 될 수 있다. 그러나 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용하여야 할 필요가 있다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com * { -webkit-user-select: none; /*..

[JavaScript] 변수 호이스팅 [내부링크]

지난번에 다뤄본 변수 호이스팅을 변수별로 알아보자 [ 변수 선언의 실행 시점과 변수 호이스팅 ] console.log(score); // undefined var score; // 변수 선언문 위의 예제에서는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행한다. 따라서 console.log(score);가 실행되는 시점에는 아직 score 변수의 선언이 실행되지 않았으므로 참조 에러(ReferenceError)가 발생할 것처럼 보인다. 하지만 참조 에러가 발생하지 않고 undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄..

[JavaScript] 전역 변수의 문제점 [내부링크]

오늘은 전역 변수의 문제점에 대해 알아보자 전역 변수에는 여러 가지 문제점이 있다. 우선 지역 변수는 (함수 내부에 선언되었다고 가정) 함수가 호출되면 생성되고 함수가 종료하면 소멸된다. 하지만 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 즉, 지역 변수에 비해 생명 주기가 길다. [ 전역 변수의 문제점 ] 1. 암묵적 결합 전역 변수를 선언한 의도는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 뜻이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용한다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다. 2. 긴 생명 주기 전역 변수는 생명 주기가 길다..

[Responsive web] CSS 그리드 레이아웃이란? [내부링크]

오늘은 CSS 그리드 레이아웃에 대해 알아보자 [ CSS 그리드 레이아웃 ] 그리드 레이아웃을 많이 사용하면서 플렉스 박스에 이어 CSS 그리드 레이아웃(CSS grid layout)이라는 새로운 CSS 표준이 만들어졌다. 플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어 수평이나 수직 중 하나를 기준으로 해서 요소를 배치한다. 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다. CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라 말한다. CSS 그리드 레이아웃은 가로 방향을 가리키는 줄(row)과 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성한다. 그리고 칼럼과..

[Responsive web] 플렉시블 박스 레이아웃이란? [내부링크]

오늘은 플렉시블 박스 레이아웃에 대해 알아보자 [ 플렉시블 박스 레이아웃 ] 플렉시블 박스 레이아웃(flexible box layout)은 그리드 레이아웃을 기본으로 하고, 각 박스가 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 플렉시블 박스 레이아웃은 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치한다. 예를 들어 아래의 그림처럼 주축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서대로 배치하는데, 화면 너비를 넘어가면 수직으로 이동해서 다시 순서대로 배치한다. ( 플렉시블 박스 레이아웃을 플렉스(flex) 박스 레이아웃이라고도 한다. 아래부터는 플렉스 박스 레이아웃으로 지칭하겠다.) 플렉스 박스 레이아웃에 ..

[Responsive web] 그리드 레이아웃이란? [내부링크]

오늘은 그리드 레이아웃에 대해 알아보자 [ 그리드 레이아웃 ] 반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다. 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃(grid layout)을 사용한다. 그리드레이아웃이란 웹 사이트를 여러 개의 칼럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다. 그리드 레이웃의 특징을 알아보자 시각적으로 안정된 디자인을 만들 수 있다. 그리드 레이아웃을 사용한 웹 사이트 디자인은 사용자에게 안정감을 준다. 이미 책이나 신문 등 여러 시각매체에서는 대부분 그리드 레이아웃을 사..

[Responsive web] 반응형 웹 알아보기 [내부링크]

오늘은 반응형 웹에 대해 알아보자 [ 반응형 웹 디자인이란? ] 요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많다. 그런데 PC와 스마트폰의 화면 크기는 다르므로 PC용으로 만든 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시된다. 데스크톱에서 보여주던 내용을 스마트폰의 작은 화면 안에서 보여줘야 하기 때문이다. 그래서 포털 사이트나 쇼핑몰 사이트의 경우 모바일 기기의 특성을 충분히 활용할 수 있도록 모바일 사이트를 별도로 제작한다. 하지만 스마트폰이나 태블릿, 스마트 TV 등 브라우저 환경이 다양하게 바뀌는데 그때마다 웹사이트를 각각 제작하는 것은 쉬운 일이 아니다. 그래서 반응형 웹 디자인 (Responsive web design)이 필요하다. 반응형 웹 디자인..

[HTML] noopener noreferrer란? [내부링크]

오늘은 noopener / noreferrer에 대해 알아보자 우선 noopenner와 noreferrer에 대해 살펴보기 전에 a 태그의 target 속성을 살펴봐야 한다. [ target ] a 태그의 속성 중에는 target이라는 속성이 있다. Value Description target = "_self " 연결할 페이지의 URL 클릭 시 현재의 탭에서 연결 target = "_blank " 연결할 페이지의 URL 클릭 시 새 탭에서 연결 즉, target은 "href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?"를 지정하기 위한 속성이다. target = "_self " _self의 경우 연결한 웹 페이지를 현재의 탭에서 연다. _self는 기본 설정이므로 target 속성을 생략하..

[JavaScript] 스코프(scope)란? [내부링크]

오늘은 스코프(scope)에 대해 알아보자 [ 스코프(scope) ] 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 하지만, 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다. 그리고 var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다. 아래의 예시를 보자. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.l..

[HTML] display 프로퍼티 / block / inline / inline - block 레벨 요소 [내부링크]

오늘은 display 프로퍼티 / block / inline / inline - block 레벨 요소를 배워보자 [ display 프로퍼티 ] display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 프로퍼티값 키워드 설명 block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는..

[CSS] 프로퍼티 값의 단위 [내부링크]

오늘은 CSS의 프로퍼티 값의 단위에 대해 알아보자 [ CSS 프로퍼티 ] CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. [ 키워드 ] 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 자세한 내용은 각각의 프로퍼티를 참조하기 바란다. [ 크기 단위 ] cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, % 이다. px은 절댓값이고 em, % 는 상대 값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 ..

[CSS] Viewport 단위 (vh,vw,vmin,vmax) [내부링크]

오늘은 Viewport 단위에 대해 알아보자 [ Viewport ] 반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다. Viewport 단위는 상대적인 단위로 Viewport를 기준으로 한 상대적 사이즈를 의미한다. 단위 Description vw viewport 너비의 1/100 vh viewport 높이의 1/100 vmin viewport 너비 또는 높이 중 작은 쪽의 1/100 vmax viewport 너비 또는 높이 중 큰 쪽의 1/100 예를 들어 viewport 너비가 1000px, 높이가 600px인 경우, 1vw : viewport 너비 1000px의 1%인 10px 1vh : v..

제곱 함수 구하기 [내부링크]

제곱 함수를 구하는 코드를 짜 보자 조건 1. prompt로 입력받는 두 개의 값 중 하나라도 1보다 작은 값을 받을 경우 다시 받는다. 2. 두 개의 값을 받을 때 함수를 사용한다. 3. 1 이상의 자연수를 받았다면 최종적으로 구하는 제곱 함수를 alert로 띄워준다. code 결과: HTML 삽입 미리보기할 수 없는 소스 개선점 1 checkNum() 함수는 오로지 파라미터 값이 1 이상인 자연수를 판단하는 기능을 하는 것만이 아닌, 새롭게 값을 받고 있다. ( 함수는 하나의 기능만 수행하게 바꾸기 위해 새로운 함수를 사용한다. ) code 결과 HTML 삽입 미리보기할 수 없는 소스 개선점 2 위의 코드는 함수 선언문으로 함수를 정의했다. 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가..

[JavaScript] Immutability와 mutable [내부링크]

오늘은 Immutability와 mutable에 대해 알아보자 [ Immutability(변경 불가성)] Immutability(변경 불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 객체는 참조(reference) 형태로 전달하고 전달받는다. 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이는 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 모든 장소에서 그 영향을 받기 때문인데 이것이 의도한 동작이 아니라면 참조를 가지고 있는 다른 장소에 변경 사실을 통지하고 대처하는 추가 대응이 필요하다. 의도하지 않은 객체의 변경이..

[JavaScript] Pass by Reference / Pass by Value 란? [내부링크]

오늘은 Pass by Reference와 Pass by Value에 대해 알아보자 [ Pass by Reference ] object type을 객체 타입 또는 참조 타입이라고 한다. 참조 타입이란 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다. 따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다. 이에 반해 원시 타입은 값(value)으로 전달된다. 즉, 복사되어 전달되..

[HTML] 시맨틱 웹(Sementic Web) / 시맨틱 태그(Sementic tag) [내부링크]

오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임 워크이자 기술이다. [ HTML5에서의 시맨틱 웹 ] HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었다. 예를 들어 기존에는 내용 로만 나타낼 수 있던 머리 부분을 내용 로 쉽게 더 의미론 적으로 나타낼 수 있게 되었다. 이는 div와 id = h..

[CSS] 여러가지 선택자 [내부링크]

오늘은 여러 가지 선택자에 대해 알아보자 [ 연결 선택자 ] 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. [ 하위 선택자 ] 하위 선택자(descendant selector)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택 자라고도한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다. 상위요소 하위요소 [ 자식 선택자 ] 자식 선택자(child selector)는 하위 선택자와 ..

day / night mode ver_2 [내부링크]

기존의 day / night mode의 코드를 업그레이드해보자 기존 코드 day mode / night mode 기존 코드는 기능 수행을 하는 데 있어 문제는 없지만 아쉬운 점이 있다. 바로 아래와 같은 문장이 반복된다는 것이다. // body.style.backgroundColor // body.style.color 지금은 코드가 짧아 간단하지만, 만약 엄청나게 긴 문장을 갖고 있었다면 유지 보수하기 어렵다. 그래서 객체를 만들고, 객체 안 메서드로 배경색과 글자 색을 바꿀 수 있게 만들기로 했다. 그리고 기존의 방식처럼 setAttrubute 메서드를 사용하지 않고, button을 onclick 했을 때 toggle 메서드 안에 this를 넣었다. 그 후 script구문 안 toggle메서드에 파라미..

[JavaScript] 단축 평가 [내부링크]

오늘은 단축 평가에 대해 알아보자 [ 논리 연산자를 사용한 단축 평가 ] 논리 합 (| |) 또는 논리 곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 다음 예제를 살펴보자 'Orange' && 'Grape' // -> "Grape" 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자 'Orange'는 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다. 논리곱(&&) 연산자에서는 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 ..

[CSS] linear-gradient / radial-gradient / border gradient [내부링크]

오늘은 그러데이션 효과에 대해 알아보자 [ 그러데이션 효과 ] 웹 문서의 배경을 꾸밀 때 배경색이나 이미지를 사용하는 것 외에 그러데이션 효과로 색 다른 느낌을 줄 수 있다. [ 선형 그러데이션 ] 선형 그러데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 함수 : linear-gradient linear-gradient( to 방향 / 각도, 색상 중지점, [색상 중지점.....]); [ 방향 ] 그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다. to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 여기서 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다. ex) 1..

day / night mode 구현하기 [내부링크]

day/ night mode를 만들어보자 [ 조건 ] 1. day / night mode를 만들 수 있는 버튼은 1개만 사용하자 2. 버튼을 누르면 body의 backgroundColor과 fontColor를 해당 모드에 맞게 바꾸자 3. 해당 모드에 맞는 버튼의 value를 변경하자 HTML 삽입 미리보기할 수 없는 소스 code day mode / night mode 핵심 [ element.setAttribute() ] Syntax : element.setAttribute(name, value) Parameters Parameter 설명 name 필수요건 속성의 이름 value 필수요건 새로운 속성의 값 ※ 주의사항 요소에 값이 있는 style 속성을 추가할 수 있지만 style 속성의 다른 속성을 ..

[CSS] 캐스케이딩 / 스타일 우선순위 [내부링크]

오늘은 캐스케이딩과 스타일 우선순위에 대해 알아보자 [ 캐스케이딩 ] CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석할 수 있다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이다. 스타일이 충돌되지 않게 하는 방법으로는 다음 2가지 방법이 있다. 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 스타일 상속: 태그의 포함 관계에 따라 부모 요소..

[HTML] form 태그 / input 태그 타입 정리 [내부링크]

자주 사용하는 form 태그와 input 태그의 타입을 정리해보자 [ form에서 사용하는 태그 ] 종류 설명 폼의 시작과 끝을 만든다. 폼 요소를 그룹으로 묶는다. 필드셋에 제목을 붙인다. 사용자가 내용을 입력할 필드를 삽입한다. , 드롭다운 목록을 삽입한다. 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 데이터 목록을 삽입한다. [ input 태그의 유형 ] 종류 설명 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 생성 password 비밀번호를 입력할 수 있는 필드 생성 search 검색할 때 입력하는 필드 생성 url URL 주소를 입력할 수 있는 필드 생성 email 이메일 주소를 입력할 수 있는 필드 생성 tel 전화번호를 입력할 수 있는 필드 생성 checkbox 주어..

[JavaScript] 데이터 타입 [내부링크]

오늘은 데이터 타입에 대해 알아보자 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 구분 데이터 타입 설명 원시타입 숫자(number) 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열(string) 타입 문자열 불리언(boolean) 타입 논리적 참(true)과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입 ES6에 추가된 ..

[JavaScript] 표현식과 문 [내부링크]

오늘은 표현식과 문에 대해 알아보자 어떻게 보면 당연할 수도 있다고 생각해 간과할 수 있는 내용이지만, 굉장히 중요하다고 생각한다. [ 값 ] 값(value)은 식(표현식 expression)이 평가(evaluation)되어 생성된 결과를 말한다. 평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 다음 예제를 살펴보자. 10 + 20; // 30 // 10 + 20은 평가되어 숫자 값 30을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 달리 해석될 수 있다. 예를 들어, 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만, 문자로 해석하면 'A'이다. 변수는 하나의 값을 저장하기 위해 확보한..

[Visual Studio Code] table 만들기 [내부링크]

오늘은 table을 만들어보자 [ 표의 구성 요소 알아보기 ] 표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다. 셀은 행과 열이 만나 이루어진 것으로 표의 내용이 들어가는 한 칸을 의미한다. [ 표 ] 4행 3열짜리 표 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 4행 1열 4행 2열 4행 3열 [ 표를 만드는 태그 ] 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 여기서 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 표 제목 [ 행을 만드는 태그와 셀을 만드는 , 태그 ] 태그만 작성하면 표가 만들어지지..

[JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당 [내부링크]

오늘은 변수 선언 / 변수 호이스팅 / 값의 할당에 대해 알아보자 [ 변수 선언 ] 변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 변수 선언에 의해 확보된 메모리 공간은 확보가 해제(release)되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다. 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 키워드가 도입되기 이전까지 var 키워드는 자바스크립트에서 변수를 ..

[JavaScript] 변수란 무엇인가? [내부링크]

오늘은 JavaScript의 변수에 대해 알아보자. [ 변수란 무엇인가? ] 애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력(input) 받아 처리하고, 그 결과를 출력(output)하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 변수란 무엇인지 그리고 왜 필요한지 살펴보자. 10 + 20 컴퓨터는 사람을 모델로 디자인되었기 때문에 사람과 유사하게 동작한다. 먼저 사람은 위 식을 어떻게 계산하는지 생각해보자. [ 사람 ] 사람이 위 식을 계산하려면 10, 20, +라는 기호의 의미를 알고 있어야 하며, 10 + 20이라는 식의 의미도 해석할 수 있어야 한다. 사람이 10 + 20이라는 식의 의미를 해석하면 + 기호의 의미대로 덧셈을 ..

[JavaScript] 컴파일러 언어 vs 인터프리터 언어 [내부링크]

오늘은 컴파일러 언어와 인터프리터 언어의 차이를 알아보자 우선, 컴파일러 언어와 인터프리터 언어의 이해를 돕기 위해 프로그래밍이란 무엇이며, 프로그래밍 언어가 무엇인지 짚고 넘어가자 [ 프로그래밍 ] 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 즉, 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 바로 코드이다. [ 프로그래밍 언어 ] 사람의 문제 해결 능력을 바탕으로 정의된 문제 해결 방안은 컴퓨터에게 전달되어야 한다. 이때 명령을 수행할 주체는 컴퓨터다. 따라서 사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계어(machine code)로 명령을 전달해야 한다. 하지만..

[Responsive web] break point / 반응형 페이지 만들기 [내부링크]

오늘은 브레이크 포인트를 이용하여 반응형 페이지를 만들어보자 웹을 만들 때는 웹을 이용하는 기기의 사이즈에 맞춰서 웹사이트를 배치해야 한다. 장비( 스크린: 모니터, 프린트, 빔프로젝트,. 스크린리더기)등의 가로 사이즈에 맞춰서 웹사이트를 배치해야한다. 즉, 브레이크 포인트를 사용하여 모니터 가로 너비 기준을 잡아야 한다. [ 브레이크 포인트 사용 방법 ] HTML 삽입 미리보기할 수 없는 소스 @media screen and (max-width:1200px){ } 위와 같이 사용하면 되는데 max-width의 부분이 사이트의 크기를 나타내며 min-width와 같이 최소에 초점을 맞춰 사용할 수 있다. 혹은, @media screen and (min-width:760px) and (max-width:1..

[Visual Studio Code] 여러가지 shadow 이용해보기 [내부링크]

여러 가지 shadow를 이용해보자 HTML HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

[Visual Studio Code] 가로 / 세로 메뉴바 만들기 [내부링크]

가로 / 세로 메뉴바를 만들어보자 [ 가로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 가로 상단 메뉴바 (모든 메뉴 나오게) ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 세로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스

URI / URL / URN 이란 무엇인가 [내부링크]

오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. 이들의 각 뜻은 다음과 같이 정의할 수 있다. URI (Uniform Resource Identifier) : 자원의 식별자 URL (Uniform Resource Locator) : 자원의 위치 URN (Uniform Resource Name) : 이름 [ URI ] 통합 자원 식별자 (Uniform Resource Identifier, URI)는 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본 조건으로서 인터넷 프로토콜에 항상 붙어 다닌다..

[JSP] JSTL (JavaServer Pages Standard Tag Library) [내부링크]

JSTL에 대해 알아보자 [ JSTL 이란? ] JSTL이란 자바서버 페이지 표준 태그 라이브러리를 뜻한다. 자바서버 페이지 표준 태그 라이브러리(JavaServer Pages Standard Tag Library, 약칭 JSTL)은 Java EE 기반의 웹 애플리케이션 개발 플랫폼을 위한 컴포넌트 모음이다. JSTL은 XML 데이터 처리와 조건문, 반복문,국제화와 지역화 같은 일 을 처리하기 위한 JSP 태그 라이브러리를 추가하여 JSP 사양을 확장했다. 즉, JSTL은 JSP 페이지 내에서 자바 코드를 바로 사용하지 않고 로직을 내장하는 효율적인 방법을 제공한다. HTML 코드 내의 Java 코드인 스크립틀릿 를 ${people}, 문을 , 문을 로 대체하여 사용한다. 예전에는 스크립틀릿을 많이 사용..

[JavaScript] JSON / XML [내부링크]

JSON에 대해 알아보자 [ JSON 이란? ] JSON은 JavaScript Object Notation의 약자로 name - value 한쌍으로 이루어진 네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식이다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 특히 용량이 적어서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용된다. JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었다. 또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있다. ※ XML이란? XML은 EXtensible Markup Language의 약자이다. 이런 XML은 HTML과 매우 비슷한 문자 기반의 마크..

[JavaScript] Ajax (Asynchronous JavaScript and XML) [내부링크]

Ajax에 대해 알아보자 [ Ajax란? ] Ajax란 Asynchronous JavaScript and XML(비동기식 자바스크립트와 xml)의 약자이다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. Ajax는 JavaScript 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고, 페이지의 일부만을 위한 데이터를 로드하는 기법이다. = Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉, JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다. 이때 서버와는 다음과 같은 다양한 형태의 데이터..

[Visual Studio Code] mask 이용한 로고 만들기 [내부링크]

mask를 이용하여 로고를 만들어보자 test.html WE MAKE YOUR MORE ATTRACTIVE .mask { width: 1000px; height: 500px; background-color: pink; font-size: 100px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; position: relative; left: 50px; top: 50px; } * mask라는 이름을 가진 div 클래스의 기본설정 .mask > p { position: absolute; left: 10px; bottom: 0; overflow: hidden; height: 0px; width: 1000px; animation:..

[Visual Studio Code] 애니메이션 반복하기 [내부링크]

애니메이션을 반복하는 코드를 짜 보자 test.html bgcolor: red -> blue -> orange -> pink tofrom: orange -> green 결과 HTML 삽입 미리보기할 수 없는 소스

[Visual Studio Code] 이미지 위에 글 띄우기 [내부링크]

이미지에 커서를 갖다 대면, 그 위로 글을 띄워보자 test.html Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore e..

[Visual Studio Code] transform-origin [내부링크]

transform-origin을 사용해보자 transform-origin이란? 왜곡의 중심점을 의미한다. 어떤 애니메이션을 주었을 때 그 애니메이션의 중심을 잡아주는 역할을 한다. ※ transform-origin 위치 보는 기준 left / top center / top right / top left / center center / center right / center left / bottom center / bottom right / bottom test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 결과 HTML 삽입 미리보기할 수 없는 소스

[Visual Studio Code] 여러가지 transform 이용해보기 [내부링크]

여러가지 transform을 이용해보자 test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 결과 HTML 삽입 미리보기할 수 없는 소스

[Servlet/JSP] EL (Expression Language) [내부링크]

EL에 대해 알아보자 [ EL : Expression Language) ] View를 위한 데이터 추출 표현식 우선, EL을 사용하기 전에 java file과 jsp file로 값을 출력해보자 spag.java package com.zenghyun.web; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.ser..

[Servlet] service / doGet / doPost [내부링크]

service/ doGet / doPost에 대해 알아보자 우선, service와 doGet, doPost를 사용하지 않고 두 개의 java을 이용하여 계산기를 만들어보자. calcPage.java package com.zenghyun.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax..

[Servlet/JSP] 내장 객체 [내부링크]

오늘은 내장 객체에 대해 알아보자 [ 내장 객체란? ] "JSP 내에서 선언하지 않고 사용할 수 있는 객체" JSP가 서블릿 형태로 자동 변환된 코드 내에 자동으로 포함되어 있는 멤버 변수, 메서드 매게 변수 등의 각종 참조 변수들을 말한다. 보통 스크립트 내부에서 사용하며 내장객체를 사용하면 클라이언트(사용자)의 요청을 컨트롤하거나 페이지 간의 데이터를 손쉽게 공유할 수 있다. 내장 객체들은 특정 클래스에 대한 인스턴스 형태로서, 컨테이너를 통해서 초기화되고 다양한 기능과 정보 등을 제공한다. [ 선언하지 않고 사용할 수 있는 이유 ] HTML 삽입 미리보기할 수 없는 소스 [ 내장 객체의 종류와 기능 ] 내장 객체의 대표적인 것들을 알아보자 request reponse out session appli..

[Servlet] 한글깨짐 해결 / Servlet Filter [내부링크]

게시글을 입력받을 수 있는 html 파일이 있다. post.html 제목 내용: post.java package com.zenghyun.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/notice-reg") public class post e..

[Servlet] get / post 사용하기 [내부링크]

html상에서 get과 post를 사용하여 출력에 미치는 영향을 알아보자. get을 이용한 출력 방식은 https://despiteallthat.tistory.com/26 [Servlet] @WebServlet() / web.xml 이용해보기 본격적으로 Servlet을 이용하여 코딩하고자 한다. 우선 보다좋은 이해를 위해 아래 내용을 참고해보자 https://despiteallthat.tistory.com/25 [Servlet] Servlet이란 무엇일까? 서블릿이란? 클라이언트의 요청을 despiteallthat.tistory.com 이 글에 사용된 예제를 확인해보자. 간단하게 요약하자면, 입력 값으로 7을 받으면, 안녕하세요가 7번 출력되게 만들었다. 하지만, 입력할 내용이 많을 경우 get의 경우 ..

[Servlet] @WebServlet() / web.xml 이용해보기 [내부링크]

본격적으로 Servlet을 이용하여 코딩하고자 한다. 우선 보다좋은 이해를 위해 아래 내용을 참고해보자 https://despiteallthat.tistory.com/25 [Servlet] Servlet이란 무엇일까? 서블릿이란? 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술이다. 자세히 말하자면, 클라이언트가 어떤 요청을 하면 그 결과를 despiteallthat.tistory.com html 파일과 java 파일을 이용하여 HttpServlet를 구현해볼것이다. hello.html "안녕하세요"를 몇 번 듣고 싶으세요? 여기서 중요한 점은 form 태그의 action 값이 hello로 지정되어 있다는 것이다. 출력 버튼을 누르면 h..

[Servlet] Servlet이란 무엇일까? [내부링크]

서블릿이란? 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술이다. 자세히 말하자면, 클라이언트가 어떤 요청을 하면 그 결과를 다시 전송해주는 역할을 하는 것이다. 서블릿은 웹 서버 측에서 실행되므로 CGI 방식을 따라야 하며, 웹 서버에 존재하는 수많은 자원에 접근할 수 있어야 하며, 자바 프로그램이므로 자바 문법을 따라야 하며, 자바 서블릿이 실행될 수 있도록 자바 실행 기능을 지원해 주어야 한다. [ Servlet 특징 ] 클라이언트의 요청에 대해 동적으로 작동하는 웹 애플리케이션 컴포넌트이다. html을 사용하여 요청에 응답한다. Java Thread를 이용하여 동작한다. (서블릿이 자바 기술을 사용하여 자바의 특성을 갖고 있기 때..

[Visual Studio Code] 여러가지 transition 사용해보기 [내부링크]

여러 가지 transition을 사용해보자 code box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box01 : 기존 width 200px의 두배인 400px만큼 채워짐 box02 : span의 지정색인 pink가 빠지고 darkcyan 색이 보임 box03 : box color -> black / font color -> white로 변경 box04 : height 10px만큼 채워짐 box05 : width 60px만큼 채워짐 box06 : 애니메이션 지연시간 2초 줌 box07 : 좌측 상단부터 우측 하단까지 채워짐 box08 : width 100%를 기준으로 채워짐 box09 : he..

[Visual Studio Code] opacity / transition-duration 이용해보기 [내부링크]

css에서 opacity와 transition-duration 속성을 이용해보자 code inner opacity는 투명도를 의미한다. 0: 보이지 않음 1: 보임 위의 코드에서는 inner 박스의 투명도를 0으로 지정해두어 박스가 보이지 않는다. .box:hover .inner.box { opacity: 1; } . box에 마우스 커서를 놓으면 inner박스의 투명도를 1로 바꾼다. transition-duration: 1s;: 에니메이션이 실행되는 시간을 1초로 지정한다.

[Visual Studio Code] flex-direction [내부링크]

CSS에서 flex-direction 기능을 사용해보자. flex-direction: row item1 item2 item3 item4 item5 flex-direction: row-reverse item1 item2 item3 item4 item5 flex-direction: column item1 item2 item3 item4 item5 flex-direction:column-reverse item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-start item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-end item1 item2 item3 item4 item5 flex-dire..

[Visual Studio Code] justify-content [내부링크]

CSS 속성 중에 justify-content를 사용해보자 Code justify-content:flex-start item1 item2 item3 item4 item5 justify-content:flex-end item1 item2 item3 item4 item5 justify-content:center item1 item2 item3 item4 item5 justify-content:space-between item1 item2 item3 item4 item5 justify-content:space-evenly item1 item2 item3 item4 item5 justify-content:space-around item1 item2 item3 item4 item5 현재. container css..

[Visual Studio Code] scroll-behavior: smooth [내부링크]

a태그를 사용하여 html내에서 이동하다 보면 뚝뚝 끊기는 것과 같은 이동을 보인다. 이럴 때 scroll-behavior: smooth;를 사용하면 부드럽게 이동할 수 있다. 사용 1Lorem 2Lorem 3Lorem 4Lorem 1Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae molestiae earum dolor maiores quas cumque, quidem, dicta omnis et, velit minima minus possimus atque eius repellat culpa nisi dolorem voluptatem. 맨위로 가기 2Lorem ipsum dolor sit amet consectetur adipisicin..

[Visual Studio Code] overflow 사용하기 [내부링크]

div와 같은 태그에 width: 200px / height: 200px과 같이 지정해놓고 안에 긴 글을 적어놓았다고 해보자. Test Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat ..

[CodeUP] 코드업 6080번 주사위 경우의 수 구하기 [내부링크]

6080번 1부터 n까지, 1부터 m까지 숫자가 적힌 서로 다른 주사위 2개를 던졌을 때, 나올 수 있는 모든 경우를 출력해보자. 예시 ... for i in range(1, n+1) : for j in range(1, m+1) : print(i, j) ... 참고 위 코드는 바깥쪽의 i 값이 1부터 n까지 순서대로 바뀌는 각각의 동안에 안쪽의 j 값이 다시 1부터 m까지 변하며 출력되는 코드이다. 조건 선택 실행구조 안에 다른 조건 선택 실행구조를 넣어 처리할 수 있는 것과 마찬가지로 반복 실행구조 안에 다른 반복 실행구조를 넣어 처리할 수 있다. 원하는 형태로 실행 구조를 결합하거나 중첩시킬 수 있다. 입력 서로 다른 주사위 2개의 면의 개수 n, m이 공백을 두고 입력된다. 단, n, m은 10이하..

[CodeUp] 코드업 6079번 입력값과 같거나 작을 때까지만 정수합 구하기 [내부링크]

6079번 체감 난이도: 1, 2, 3... 을 계속 더해 나갈 때, 그 합이 입력한 정수(0 ~ 1000) 보다 같거나 작을 때까지만 계속 더하는 프로그램을 작성해보자. 즉, 1부터 n까지 정수를 계속 더해 나간다고 할 때, 어디까지 더해야 입력한 수보다 같거나 커지는 지를 알아보고자 하는 문제이다. 입력 정수 1개가 입력된다. 출력 1, 2, 3, 4, 5 ... 를 순서대로 계속 더해 합을 만들어가다가, 입력된 정수와 같거나 커졌을 때, 마지막에 더한 정수를 출력한다. 입력 예시 55 출력 예시 10 Scanner로 값을 입력받아 num이라는 변수에 저장한다. while을 통해 반복하고 조건문을 만족시키면 종료된다. if (num 1000) { System.out.println("잘못된 ..

[CodeUP] 코드업 6078번 소문자 입력받기 [내부링크]

6078번 영문 소문자 'q'가 입력될 때까지 입력한 문자를 계속 출력하는 프로그램을 작성해보자. 체감 난이도 : Scanner로 값을 입력받는다. 입력받은 값은 answer 변수에 저장한다. while문을 통해 반복하고 특정 조건을 만족할 때 if문 안에 있는 break로 반복문을 빠져나온다. if(answer.equals("q")) { break; } answer.equals("q") 입력받은 answer값이 'q'와 같으면 반복문을 빠져나온다.

[CodeUp] 코드업 6077번 짝수 합 구하기 [내부링크]

코드 업이라는 사이트에 들어가면 기초 100제를 풀 수 있다. c언어 기초 100제와 파이썬 기초 100제가 있는데 파이썬 기초 100제를 자바로 풀어볼 것이다. https://codeup.kr/problemsetsol.php?psid=33 문제집 / Python 기초 100제 codeup.kr 여기서 6077번부터 6098번까지의 문제를 풀어서 리뷰할 예정이다. 6077번 정수(1 ~ 100) 1개를 입력받아 1부터 그 수까지 짝수의 합을 구해보자. 체감 난이도 : Scanner로 값을 입력받는다. 입력받은 값은 num라는 변수에 저장된다. 첫 번째 조건문에서 num이 1보다 작고 100보다 크다면 "잘못 입력하셨습니다."를 출력하고 다시 입력을 받는다. 첫 번째 조건문이 거짓일 경우 for..

삼항연산자란 무엇인가? [내부링크]

삼항 연산자 삼항 연산자란 항이 세 개인 연산자를 말한다. 조건식의 참/거짓 여부에 따라서 각각 다른 결과를 반환한다. 예시 조건 ? 항목1 : 항목2 조건: 참과 거짓으로 구분할 수 있는 비교 연산, 논리 연산 등을 말한다. 항목 1: 조건이 참인 경우 실행할 연산이나 함수를 말한다. 항목 2: 조건이 거짓인 경우 실행할 연산이나 함수를 말한다. 만약, 조건식의 결과가 true라면 문장 1이 실행되고, 조건식의 결과가 false라면 문장 2를 실행하는 것이다. 예제 문제 1 a에 10이 들어있고, b에 5가 들어있을 때 boolean 타입의 c라는 변수를 만들고 비교한다. ++a > b? true : false; 1. a의 값에 10이 저장되어 있다. 2. a에 전위형 증감 연산자 ++로 인해 값이 1..

형변환이란 무엇인가? [내부링크]

형 변환이란 말 그대로 변수나 상수의 데이터 타입을 다른 타입으로 바꾸는 것을 말한다. 형 변환에는 자동 형변환(Promotion Casting)과 명시적 형 변환 (Demotion Casting)이 있다. 자동 형변환(Promotion Casting) 자동 형변환이란, 프로그램 작성자가 별도의 작업을 하지 않아도 자바가 알아서 알맞은 타입으로 변환해주는 형 변환이다. 자동 형변환이 이루어지기 위해서는 조건이 있다. 큰 자료형에 작은 자료형이 대입돼야 한다는 것이다. 데이터 타입이 double로 지정된 변수 d 에는 100.5라는 값이 들어있다. 데이터 타입이 int로 지정된 변수 n에는 200이라는 값이 들어있다. 여기서 double로 지정된 d라는 변수는 8byte의 메모리 저장공간을 갖고 있으며, ..

데이터 타입이란? [내부링크]

데이터 타입이란? 데이터에는 정수, 실수, 문자, 논리(참 또는 거짓) 등이 있는데 각각의 데이터를 담을 수 있는 변수의 종류가 다르다. 그래서 데이터 타입으로 어떤 데이터를 담는 변수인지 표시한다. 데이터 타입 형식 자료형 바이트 예시 정수형 int, long, short 4, 8, 2 1, 0, -1, 2, 100 실수형 float, double 4, 8 3.14f, 3.14 문자형 char 2 'a', 'A' 문자열 String ? (알파벳 개수에 따라 다름) "hello", "A" 논리형 boolean 1 true, false 또한, 데이터마다 저장 가능한 값의 범위가 다르다. 데이터 타입 저장 가능한 값의 범위 byte -128 ~ 127 short -32768 ~ 32767 int -대략 21..

변수란 무엇인가 [내부링크]

변수란 무엇인가? 변수(Variable)는 프로그램의 처리 과정에서 데이터를 담아둘 수 있는 메모리의 공간을 의미한다. 하나의 변수에는 하나의 값만 저장할 수 있고, 이 값을 변경할 수 있기 때문에 변할 수 있는 값, 즉 변수(Variable)라고 한다. 1. 변수의 선언과 초기화 변수의 선언 형식은 다음과 같다. int a; int a = 1; int: 데이터 타입을 말하며 변수에 기억시킬 데이터의 형태를 의미한다. a: 변수명을 말하며 기억 장소 주소를 대신하여 사용할 이름을 말한다. 1: 초기 값: 변수를 선언한 후 기억시킬 값을 말한다. 변수 : 특정 값을 저장하기 위한 공간 변수 이름짓기의 규칙 1. 숫자로 시작할 수 없다. 2. 소문자로 시작한다. 3. '_'를 제외하고 특수문자를 사용할 수 ..

String 클래스의 여러가지 메서드 [내부링크]

String 클래스에는 여러가지 메서드가 있다. 이 중에서 자주 쓰이는 메서드에 대해서 적어보려고 한다. 메서드란? : 특정한 작업을 수행하기 위한 명령문들의 집합 .length() String str = "Hong Gil Dong"; int index = str.length(); // 많이 씀~! System.out.println("str의 길이: " + index); .length()는 해당 문자의 길이를 알려준다. (띄어쓰기 포함) length는 1부터 시작한다. 즉, str의 길이는 13이다. .indexOf() String str = "Hong Gil Dong"; int index = str.indexOf('o'); System.out.println("맨 앞 소문자 'o'의 위치: "..

String Class [내부링크]

자바에서 가장 대표적인 클래스인 String 클래스를 얘기해보려고 한다. String 클래스는 두 가지의 특징을 가지고 있다. 1. 객체 생성법이 두 가지이다. (암시적, 명시적) 2. 한번 생성된 문자열의 내용은 변하지 않는다. (불변의 법칙) //String 클래스 만이 new 없이 heap에서 메모리를 할당받을 수 있다. String s1 = "abc"; String s2 = "abc"; // "abc" 라는 값을 s1과 s2가 주소를 공유하는 것 (암시적 방법) 여기서 s1과 s2를 boolean a = (s1 == s2);라고 묻는다면 결과는 True가 나온다. "abc"라는 값을 s1과 s2가 주소를 공유하기 때문이다. "=="는 클래스간의 비교 시 값이 아닌 주소 값을 비교한다. String..

[Visual Studio Code] css 사용하기 / nth-child / nth-of-type [내부링크]

css란? cascading style sheet로 html 문서를 꾸미기 위해 사용한다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. STRIKE DELETE css를 이용하기 위해서는 title 태그 바로 아래에 와 같이 적고 사용하면 된다. 내가 사용하고 싶은 태그의 이름을 적거나 id class와 같이 이름을 지정해서 사용할 수 있다. h1 { 내용 } : h1 태그 전체에 내용을 적용시킨다. h1:nth-chid {?} { 내용 } : h1중 부모(여기서는 body)를 기준으로 ? 번째 h1태그만 내용을 적용시킨다. h1:nth..

[Visual Studio Code] ol/ul/dl 태그 사용하기 [내부링크]

html에서는 목록을 작성하고 싶을 때 사용할 수 있는 태그가 있다. ol: ordered list ul: unordered list dl: definition list 순서가 있는 목록 html css javascript react 순서가 없는 목록 유튜브 운동 프로그래밍 정의형 목록 html Hyper Text Markup Language Html 요소는 정의 목록 요소()에서 앞선 용어()에 대한 설명, 정의, 또는 값을 제공한다. css Cascading Style Sheet ol은 순서가 있어서 li태그에 작성된 내용이 차례대로 숫자가 붙어서 나온다. ul 태그는 순서가 없기 때문에 li태그에 작성된 내용에 번호가 붙어서 나오지 않는다. dl 태그는 정의하고 싶은 내용을 dt태그에 작성하고 그 ..

[Visual Studio Code]img태그 / a태그 사용하기 [내부링크]

HTML에서는 태그를 사용하여 이미지를 넣을 수 있다. 이미지 삽입 그림을 다운로드 하여 사이트 만들 준비 img : inline 속성을 가지고 있고, block 속성도 가지고 있다. inline-block : 줄 바꾸지 않고 너비, 높이, 정렬이 가능하도록 한다. 너비의 비율에 맞추어 높이도 자동 설정 너비, 높이 지정시 단위 px는 생략 ( % 단위도 쓸 수 있음 -> 부모 너비, 높이의 단위 기준 px를 제외한 나머지는 생략 불가 -> css로 지정하여 디자인 ) 웹에서 사용할 수 있는 이미지 확장자 : png, jpg(배경 투명 지정 불가), gif, webp png 16bit, 24bit로 처리 자동으로 줄바꿈 가능 너비, 높이, 정렬 가능 블록 > 인라인 img 태그는 와 같이 작성하고 사용하..

[HTML] 인라인 속성, 블록 속성, 태그의 관계 [내부링크]

태그에는 인라인 속성의 태그와 블록 속성의 태그가 있다. 인라인 속성의 태그의 중첩 inline속성의 태그는 inline 태그 또는 block 속성의 태그 안에 중첩시킬 수 있다. 꼬임 현상 없이 나중에 열린 태그를 먼저 닫아줘야 한다. html태그상 실행이 잘 되므로 오류를 인식하지 못하는데 오류다. 청춘의 평화스러운 광야에서 모래2뿐일 뿐이다. 곳이 못할 청춘은 보이는 아니다. 곳이 거친 힘차게 사막이다. 품었기 그들은 그들은 사라지지 이것이다. 풀이 튼튼하며, 하는 대중을 넣는 그들의 위하여서 칼이다. 옷을 피고 이상을 생명을 군영과 이것이다. 새가 동산에는 넣는 그것은 쓸쓸한 불어 있는가? 없는 귀는 황금시대를 찬미를 대고, 산야에 어디 가진 것이다. 피고, 창공에 품었기 작고 이상이 갑 것이다...

[HTML] 문자 꾸미기, 여러가지 태그들 [내부링크]

html을 사용하면서 문자를 꾸밀 수 있는 여러 가지 태그들이 있다. 처음 사용해본 태그들을 기록해 볼 것이다. 문자꾸미기 Lorem ipsum dolor sit amet consectetur adipisicing elit2. Porro animi tempora, quibusdam libero voluptatem veritatis provident illum velit, maxime, quos amet perspiciatis cupiditate. Similique tempore ducimus quaerat, aut sunt asperiores? HTML 李貞賢 이정현 같으며, 반짝이는 미묘한 우리 싶이 만천하의 이상은 품에2 끝까지 아름다우냐? 덧말 이성은 불러 꾸며 꽃 뼈 인생에 싸인 생생ººº하며, ..

[CodeUP] 코드업 6081번 16진수 곱셈 [내부링크]

6081번 16진수(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)를 배운 영일이는 16진수끼리 곱하는 16진수 구구단? 에 대해서 궁금해졌다. A, B, C, D, E, F 중 하나가 입력될 때, 1부터 F까지 곱한 16진수 구구단의 내용을 출력해보자. (단, A ~ F 까지만 입력된다.) 예시 ... print('%X'%n, '*%X'% i, '=%X'%(n*i), sep='') ... 참고 print('%X'%n) #n에 저장되어있는 값을 16진수(hexadecimal) 형태로 출력 작은따옴표 2개를 사용해서 print(..., sep='')으로 출력하면, 공백 없이 모두 붙여 출력된다. 작은따옴표 2개 '' 또는 큰 따옴표 2개 ""는 아무 문자도 없는 빈 문..

[Webpack] 내 프로젝트에 적용시킨 webpack.config.js 공부 [내부링크]

시작! webpack.config.js HTML 삽입 미리보기할 수 없는 소스 ️ 1. 모드 설정 mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다. mode: "production", mode 값 설명 development 개발 모드 production 배포 모드 (기본 값) none 기본 최적화 옵션 설정 해제 "production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄일 수 있다. ️ 2. 엔트리 설정 entry : 애플리케이션의 진입점 (entry point)를 설정한다. 나는 "main", "additional", "myClothes" 세 가지 엔트리 포인트를 정의하였다. 이는 각각에 해당하는 JavaScript 파일이 엔트리로 ..

[React with TS] SyntheticEvent를 통한 React 이벤트 적용 (with TypeScript) [내부링크]

SyntheticEvent를 통한 React 이벤트 적용에 대해 알아보겠습니다. [ Event Argument ] 리액트 이벤트 핸들러 함수에서의 이벤트 아규먼트는 브라우저의 종류와 관계없이 이벤트를 처리할 수 있도록 SyntheticEvent 타입으로 추상화합니다. SyntheticEvent를 기반으로 확장된 다양한 Event 타입은 다음과 같습니다. 각 Event Argument 타입에서 사용할 수 있는 속성은 다음 문서의 타입 정보를 확인하세요. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts GitHub - DefinitelyTyped/DefinitelyTyped: The reposit..