티스토리

히찌리의 개 발 새 발

검색하기

블로그 홈

히찌리의 개 발 새 발

hi-zini.tistory.com/m

히찔 님의 블로그입니다.

구독자: 6

방명록 방문하기

주요 글 목록

[JavaScript] 다음에 올 숫자 - Level 0 문제 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. 제한사항 2 공감수 1 댓글수 0 2023. 2. 25.
[JavaScript] 옹알이 (1) - Level 0 코드 function solution(babbling) { const available = ["aya", "ye", "woo", "ma"] const tempArr = babbling.map(babbling => { available.forEach(available => { if (babbling.includes(available)) babbling = babbling.replace(available, ' ') return }) return babbling }) return tempArr.filter(v => v.replace(/\s/g, '').length === 0).length } babbling 배열에서 머쓱이의 조카가 발음할 수 있는 단어를 ' '로 치환한다. ''가 아닌 ' '인 이유는 예를들.. 공감수 0 댓글수 0 2023. 2. 22.
svelte(a11y-click-events-have-key-events) svelte로 개발하면서 div에 onClick 이벤트를 주니 만난 린트 메세지이다.. Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events "클릭 핸들러를 가지고 표시되는 비대화형 요소에는 최소한 하나의 키보드 리스너 jsx-a11y/click-events-have-key-events가 있어야 합니다." ????????? Non-interactive HTML elements (비대화형 요소) ???????? Non-interactive HTML elements (비대화형 요소)와 Interactive HTML elemen.. 공감수 4 댓글수 1 2023. 1. 18.
깊은복사와 얕은복사, 그리고 최신문법 structuredClone 까지 먼저, 자바스크립트에서 값은 원시값과 참조값 두 가지 데이터 타입의 값이 존재한다. 원시형 즉, 원시값은 기본 자료형 (단순한 데이터)를 의미하며 변형할 수 없다!! 변형할 수 없다는 것이지 재할당 할 수 없다는 뜻은 아니다. 원시값을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않는다. String number boolean undefined symbol null 참조형 원시형이 아닌것들은 모두 참조형이다. 예로는 객체, 배열, 함수와 같은 것들이 있다. 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다. 따라서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체.. 공감수 12 댓글수 10 2023. 1. 15.
React - Router (v5) React Router 시작하기 전에 잠깐 알고 넘어가자! 1. 라우팅이란 ?! 간단히 말해 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 2. SPA와 MPA SPA란 ?! Single Page Application으로 페이지가 한 개인 웹 어플리케이션을 의미하며, CSR(Client Side Rendering)방식으로 렌더링한다. SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 데이터만을 넘겨주어, 첫 요청시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용한다. MPA란 ?! Multiple Page Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 의미하며, SSR(Server Side Rendering).. 공감수 14 댓글수 3 2023. 1. 10.
React - CKEditor 사용해보기 CKEditor 란? CKEditor는 콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 WYSIWYG(위지위그) Rich Text Editor이다. WYSIWYG란 What You See IS Whay You Get의 줄임말로 ‘보는 대로 얻는다.’ 는 뜻이다. 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 다시 말해 HTML처럼 따로 CSS 문법을 적용해서 디자인 편집을 하는 것이 아닌 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 핵심 코드는 자바스크립트로 작성되어 있으며 CKSource가 개발하였다. 오픈 소스와 상용 라이선스로 이용할 수 있다. 설치방법 https://ckeditor.com/.. 공감수 6 댓글수 0 2023. 1. 5.
target="_blank” 사용 이슈 및 해결 target="_blank” 사용 이슈 및 해결 a 태그의 속성인 target="_blank" 를 사용하니 Using target=_blank without rel=noopener noreferrer is a security risk 라는 경고문구가 발생했다. rel=noopener nore referer 없이 target=_blank를 사용하면 보안 위험이 발생한다고 경고하는데, 대체 무슨 보안 위험이 발생하는걸까 ⁉️ 본론으로 들어가기전, target 속성에 어떤 값을 지정할 수 있는지 먼저 알아보자 target 속성 target은 'href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?'를 지정하기 위한 속성이다. _self 연결한 웹 페이지를 현재 탭에서 연다. _self는 기본 설정.. 공감수 5 댓글수 0 2022. 7. 4.
HTTP 구조 HTTP 구조 HTTP란? HyperText Transfer Protocol 의 약자로 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 통신 규약이다. 웹상에서 네트워크로 서버끼리 통신을 할때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 "통신 형식" 혹은 "통신 구조" 라고 보면 된다. (프론트-백 통신에 사용) HTTP 통신 방식 HTTP는 기본적으로 요청/응답 (request/response) 구조로 되어있다. 클라이언트가 HTTP request를 서버에 보내면 서버는 HTTP response를 보내는 구조로 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어 진다. HTTP는 요청이 오면 그에 응답을 할뿐, 여러개의 요청/응답 끼리 연결되어 있지 않다. (stateless 하다.) 각.. 공감수 4 댓글수 0 2022. 6. 17.
Axios Axios Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드 / 프론트엔드의 통신을 쉽게하기 위해 Ajax로 서버에 데이터를 요청한다. 라이브러리 설치 npm i --save axios Axios 사용하기 데이터 요청 // 방법 1 axios.get('URL', { 전송할 데이터 }) // 방법 2 axios({ method: '메소드', url: 'URL', params: { 'get ... 등으로 데이터 전송 시 보낼 데이터' }, data: { 'post ... 등으로 데이터 전송 시 보낼 데이터' } }) 데이터를 보낼때는 params 또는 data를 사용하는데, params는 대표적으로 get 메소드, data.. 공감수 6 댓글수 0 2022. 6. 14.
'--isolatedModules' 에러 해결 방법 TS1208: 'TodoList.tsx' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. TypeScript에 빈페이지가 있으면 나오는 에러이다. 빈페이지에 export {} 입력 하면 에러 해결 공감수 5 댓글수 0 2022. 6. 13.
자바스크립트 객체 종류와 생성 시기 자바스크립트 객체 종류와 생성 시기 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든것들이 객체로 존재한다. 처음 자바스크립트가 로드될 때 글로벌 영역의 세가지 객체가 생성된다. Native Object / Built-in Object (자바스크립트 내장객체) 자바스크립트가 프로그램 전체에 공통적으로 필요한 기능을 제공하기 위한 객체이다. 특정 환경에 종속되지 않은, ECMAScript 명세의 내장객체이다. 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트 코드 어디에서든 사용이 가능하다. Object, Function, Number, Math, Date, string, RegExp, Array, Error, Symbol 등이 있다. Host Object (브.. 공감수 4 댓글수 0 2022. 6. 10.
Array Method Array Method 배열 요소 조작 unshift() 배열의 array.unshift() method는 배열의 앞에 요소를 추가한다. 반환 값 : 메서드를 호출한 배열의 새로운 length 속성 const arr = [1, 2, 3] arr.unshift(4, 5) // [4, 5, 1, 2, 3] push() 배열의 array.push() method는 배열의 끝에 요소를 추가한다. 반환 값 : 호출한 배열의 새로운 length 속성 const arr = [ 1, 2, 3] arr.push(4, 5) // [1, 2, 3, 4, 5] shift() 배열의 array.shift() method는 배열의 앞에서부터 요소를 제거한다. 반환 값 : 배열에서 제거한 요소. 빈 배열의 경우 undefined .. 공감수 5 댓글수 0 2022. 6. 9.
배열 (Array) 배열 (Array) 배열 (Array) 이란? 한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. let arr = new Array() let arr = [] 배열 안에 들어있는 값들을 요소(element, item, etc)라고 한다. let arr = [ 1, '2', ture ] let arr1 = [ undefined, null, false, NaN, 1000 ] 배열은 어떤 값이라도 배열의 요소로 추가할 수 있으며 종류가 다른 값들도 함께 담을 수 있다. 배열의 크기는 고정되지 않는다. ( ⇒ 언제든 요소를 추가하거나 제거할 수 있다.) 항상 0부터 시작한다. 💡 💡 배열은 기능이 추가된 특수 객체이므로 배열에 숫자가 아닌 키나 분수, 음수 등을 키로 사용할 수는 있다. 하지만 이러.. 공감수 5 댓글수 0 2022. 6. 7.
TypeScript 설치 & 컴파일 TypeScript 설치 & 컴파일 설치 전 준비사항 NodeJS NPM 에디터 TypeScript 설치 // 전역 설치 시 npm install -g typescript // 또는 yarn global add typescript // Mac일 때 설치 확인이 안된다면 sudo npm install -g typescript // 또는 brew install typescript // 프로젝트 단위로 설치 시, 대상 프로젝트 폴더에 진입하여 npm install typescript —save-dev // 또는 yarn add -D typescript 설치 확인 tsc --version 컴파일 타입스크립트를 브라우저에서 실행하기 위해서는 자바스크립트 코드로 변환하여 실행해야 한다. 타입스크립트만으로는 실행이 .. 공감수 6 댓글수 0 2022. 6. 3.
JSON(JavaScript Object Notation) JSON(JavaScript Object Notation) JSON (JavaScript Object Notation) 이란? JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준이다. 즉, JSON 데이터는 자바스크립트가 자주 사용되는 웹 환경에서 사용하는 것이 유리하다. 자바스크립트는 JSON 데이터를 처리하기 위한 다음과 같은 메소드를 제공한다. JSON.stringify() JSON.parse() toJSON() 서로 다른 시스템 간 객체를 교환할 수 있다. (서버 간 통신에 유용하다. (AJAX)) JSON은 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있다. { key: value } 형식이다. 문자열은 .. 공감수 5 댓글수 0 2022. 6. 3.
TypeScript TypeScript 타입스크립트란? 자바스크립트에 타입을 부여한 언어로 기존 자바스크립트 문법을 그대로 사용할 수 있으며, 컴파일 시 에러를 잡을 수 있다. 마이크로소프트에서 자바스크립트의 단점을 보완해 개발/관리되고 있는 오픈소스 프로그래밍 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주는 컴파일 과정이 필요하다. 타입스크립트 사용 이유 1. 에러 예방 타입스크립트는 타입을 부여하기 때문에 코드 작성 시에 알맞지 않은 타입을 넣거나, 타입을 넣지 않았을 경우 사전에 오류를 확인할 수 있다. // js function sum(a, b) { return a + b } sum(10, 20) // 30 sum('10', '20') // 1020 위 코드는 자바스크립트.. 공감수 5 댓글수 0 2022. 6. 2.
Object Method Object Method Object.entries() 객체를 순회하며 모든 프로퍼티를 [key, value] 쌍의 배열 형태로 반환한다. 반환된 배열은 객체가 정의된 순서와 상관 없이 나오기 때문에 sort()로 정렬을 하는 것이 좋다. ⇒ Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0])) obj = { a: 1, b: 2, c: 3 } console.log(Object.entries(obj)) // [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ] Object.keys() 객체를 순회하며 해당 객체가 갖는 key 값으로 이루어진 배열을 반환한다. const score = { math: 100, english: 95, his.. 공감수 6 댓글수 0 2022. 5. 24.
Object (객체) Object (객체) Object(객체) 란? key, value 쌍을 가지는 구조이다. ⇒ object = { key: value } key와 value 한 쌍을 속성 (property) 라고 한다. value 에 문자, 숫자, 배열, 객체, 함수를 할당할 수 있다. Object 생성방법 // 1. object literal syntax const obj1 = {} // 2. object constructor syntax const obj2 = new Object() // Ex const hizini = { name: 'Hizini', job: 'developer' } Object 데이터 접근방법 const hizini = { name: 'Hizini', job: 'developer' } console.. 공감수 6 댓글수 0 2022. 5. 24.
React - 저장된 데이터 불러올 때 개행처리 TextArea 작성 데이터 데이터 출력 결과 출력 결과를 확인하였을 때 줄바꿈이 반영되지 않았다.. DB 저장시 \n 과 함께 저장이 되는데, React에서는 텍스트 형태로만 랜더링하게 설정되어 있다고 한다. 개행처리 방법 1 {info.memo.split("\\n").map((line) => { return ( {line} ) })} 받아온 데이터에 \n을 기준으로 나누어 태그를 추가하여 개행 처리를 해준다. 방법 2 .memo { white-space: pre-line; } white-space 스타일을 사용한다. normal : HTML의 기본 값으로 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 wrap 된다. nowrap : normal과 같은데 긴행이 wrap 되지 않는.. 공감수 5 댓글수 0 2022. 5. 20.
스택(Stack) 구현하기 스택(Stack) 이란? 스택은 자료구조형에 속한다. 먼저 들어간 자료가 나중에 나오는 후입선출 자료구조로, LIFO(Last In First Out)라고도 부른다. 데이터를 입력하는 push()와 데이터를 제거하는 pop() 등의 작업을 할 수 있다. ctrl+Z로 이전 작업을 취소하는 동작 등에서 사용된다. Stack의 멤버변수 c언어로 스택을 구현할 때는 구조체(struct)를 사용하면 되지만, 자바스크립트에서는 구조체가 없어 class로 새로운 객체를 만들어 사용해 보자! size : 해당 스택의 max_size top : 해당 스택의 데이터 높이 array : 데이터를 담을 배열 constructor(size){ this.size = size this.top = 0 this.array = [] .. 공감수 6 댓글수 0 2022. 5. 19.
[JavaScript] 시저 암호 - Level 1 코드 알파벳 대문자, 소문자 배열을 각각 만든다. 대문자, 소문자일 때 n 값을 더한 인덱스가 할당한 문자열보다 길 경우, (Index + n - 문자열의 길이)를 해준다. 공백인 경우에 대한 로직을 추가한다. 결과 공감수 5 댓글수 0 2022. 5. 16.
String Method String Method String.indexOf() / String.lastIndexOf() String.indexOf(): String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. String.lastIndexOf(): String 객체에서 주어진 값과 일치하는 마지막 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다. 문자열을 찾을 때 대소문자를 구분한다. 첫 번째 인자: 찾으려는 문자열(주어지지 않으면 “undefined”를 찾음) 두 번째 인자: 문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값 (생략가능) // 구문 str.indexOf(searchValue[, fromIndex]) const str = "abcDEFabc" str.indexOf('abc') // 0 .. 공감수 5 댓글수 0 2022. 5. 13.
제어문 (조건문, 반복문, 분기문) 제어문 (조건문, 반복문, 분기문) 제어문 제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 실행문을 말한다. 제어문은 조건문, 반복문, 분기문으로 나뉜다. 조건문 조건문 혹은 선택문이라고 한다. 조건식같은 분기로 나누어 결과에 따라 다른 코드를 실행할 수 있게 해주는 구문이다. if문, if else문, switch문 등이 있다. 조건문이란? 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다. 특정 조건 만족 시 실행하는 명령의 집합이다. if...else 문 if (조건식) { // statment1 } else if (조건식) { // statment2 } else { //statment3 } if 안에 있는 조건식이 참인 경우 해당하는 if 문, else.. 공감수 4 댓글수 0 2022. 5. 13.
Ref Ref 일반적으로 Javascript에서 DOM에 직접 접근할 때는 document.getElementById 등을 통해서 접근한다. React에서는 ref 라는 것을 사용해서 접근하게 된다. Ref 란? ‘reference’의 약자로 ‘참조'라는 뜻이다. 노드나 컴포넌트에 ref 값을 만들어서 해당 요소의 값을 얻어오거나 해당 요소를 제어하는 데 사용된다. render 메소드에서 생성된 DOM 노드나 React element 를 엑세스 하는 방법을 제공하는 것이다. React에서 Ref를 사용하는 경우는 다음과 같다. input / textarea 등에 포커스를 해야 할때 특정 DOM 의 크기를 가져와야 할 때 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때 외부 라이브러리 (플레이어, .. 공감수 7 댓글수 0 2022. 2. 25.
React DOM 돔(DOM) 이란? DOM(Document Object Model)은 문서 객체 모델이라는 뜻이다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 객체를 의미한다. 즉 DOM이란 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. ⇒ DOM은 HTML과 스크립팅 언어 (JavaScript)를 서로 이어주는 역할이다. 자바스크립트는 document 라는 전역 객체를 통해 HTML 태그에 접근할 수 있다. document 객체는 웹 페이지 그 자체를 의미한다. 또한, document 객체의 상위에 위치한 window라는 객체로도 접근이 가능하다. 가상 돔(Virtual DOM) 이란? 실제 DOM에 .. 공감수 7 댓글수 0 2022. 2. 25.
React 설치 (2022) 설치해야 할 프로그램 Node.js Webpack과 Babel 등의 도구들은 자바스크립트 런타임인 Node.js 기반으로 만들어져 있으며 이 도구들을 사용하기 위해서 설치해야 한다. LTS 버전으로 설치하면 된다. yarn yarn은 조금 개선된 버전의 npm(node package manager)으로 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위해 설치한다. 💡 npm Node.js를 설치할 때 자동으로 설치되는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 버전 관리를 할 때 사용한다. yarn 설치 $ npm install -g yarn 에디터 원하는 에디터를 설치하면 된다. (현재 VS code 사용중) React 설치 $ npx create-react-app 폴더이름 공감수 5 댓글수 0 2022. 2. 25.
논리 연산자 논리 연산자 논리 연산자란? 논리식을 판단하여 참(true), 거짓(false)를 반환한다. 자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있다. || (OR) alert( true || true ) // true alert( false || true ) // true alert( true || false ) // true alert( false || false ) // false 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다. 왼쪽에서 오른쪽으로 연산한다. && (AND) alert( true && true ); // true alert( false && true ); // false alert( true && false );.. 공감수 5 댓글수 0 2022. 2. 21.
Template literals Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 표현식/문자열 삽입, 여러줄의 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다. 런타임 시점에서 일반 자바스크립트 문자열로 처리/변환된다. Syntax `string text` `string text line 1 string text line 2` // "string text line 1\\n" + "string text line 2"와 같음 `string text ${expression} string text` tag `string text ${expression} string text` 템플릿 리터럴은 '' 나 "" 대신 **백틱(``)**을 사용한다. ${}를 사용하여 표현식을 표기할 수 있.. 공감수 5 댓글수 0 2022. 2. 21.
[JavaScript] 소수 찾기 - Level 1 코드 function solution(n) { let result = 0 let count = 0 for(let i=2; i 공감수 5 댓글수 0 2022. 2. 18.
[JavaScript] 이상한 문자 만들기 - Level 1 코드 function solution(s) { return s.split(" ").map(v => v.split('').map((v, i) => { if (i % 2 === 0) return v.toUpperCase() return v.toLowerCase() }).join('')).join(' ') } 입력받은 문자열 s를 split을 사용해 공백(” “)을 기준으로 쪼개 배열에 넣는다. ⇒ [ 'try', 'hello', 'world' ] [ 'try', 'hello', 'world' ]에 각각 split을 사용해 한글자씩 쪼갠다. ⇒ [ [ 't', 'r', 'y' ], [ 'h', 'e', 'l', 'l', 'o' ], [ 'w', 'o', 'r', 'l', 'd' ] ] 짝수번째 글자에는 대문자.. 공감수 5 댓글수 0 2022. 2. 14.

반응형

문의안내

티스토리
로그인
고객센터

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