티스토리

숭어의 코딩기록

검색하기

블로그 홈

숭어의 코딩기록

yeongseungjeong.tistory.com/m

숭코기 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

[Javascript] every()와 some() 들어는 봤지만 사용 빈도수가 낮아 정확한 사용법을 알아 보기 위해 메모 📝 Every()와 Some() every 함수는 배열의 모든 요소가 충족하는지 확인 = AND some 함수는 배열의 1개 요소라도 특정 조건을 충족하는지 확인 = OR every 함수는 하나라도 false를 리턴할 경우 false some 함수는 각 요소들 중 하나라도 true를 리턴하면 값은 true Array.prototype.every() const array = [1, 2, 3, 4, 5]; const result = array.every(number => number > 2); console.log(result); // false Array.prototype.some() const array = [1, 2, 3, 4, 5.. 공감수 0 댓글수 0 2024. 1. 3.
[JS] split(), join()를 활용해서 문자열 나누기 문자열 알고리즘을 풀다가 알게된 split(), join()의 문자열 활용법 string.split(separator, limit) : 문자열을 배열로 반환하는 split 함수 array.join([separator]) : 배열의 모든 요소를 연결해 하나의 문자열로 만드는 join 함수 한 마디로 split은 문자열을 배열로 나누고, join은 배열을 문자열로 이어붙인다. 내가 만났던 백준 문제로 예시를 들어보자. const alphabet = ["c=", "c-", "dz=", "d-", "lj", "nj", "s=", "z="] 문자열1: ljes=njak 문자열2: ddz=z= 문자열3: nljj 알파벳 배열과 문자열들이 주어진다. 각 문자열과 알파벳을 비교하여 동일한 문자는 한개의 문자로 치환 .. 공감수 0 댓글수 0 2023. 12. 8.
[JS] 형변환 Number()와 parseInt()의 차이 알고리즘 공부를 하면서 자주 보이는 Number와 parseInt. 형변환을 해주는건 알고 있었지만 어느것이 더 적절한지 알아보기 위해 둘의 차이점을 정리해 보려 한다. Number(str) 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔주는 Number const num = Number('123'); console.log(num); // 123 위의 코드는 '123'이라는 문자열을 123라는 숫자로 형변환 되어 출력된다. const price = Number('100원'); console.log(price); // NaN 하지만 문자열이 숫자가 아닌경우 NaN이 출력된다. parseInt(str) Number(str)와 동일하게 문자열을 인자로 받으면 숫자로 바꿔주는 parseInt const num.. 공감수 0 댓글수 1 2023. 11. 29.
[Next] Next.js 13 버전 알아보기 Next 강의를 듣고 실습을 해보려 하는데 생성 하자마자 폴더 구조가 다르다? 강의가 오래되어서 버전이 많이 다른가 하고 찾아보다가 알게된 Next.js 13 버전 2022년 10월에 Next.js 컨퍼런스에서 발표 되었다고 한다. 주요 변경 사항 - app/Diectory: 쉽고, 빠르고, 적은 클라이언트 JS (Layout, React Server Components, Streaming) - Turbopack: Rust 기반. Webpack 보다 700배, Vite 보다 10배 빠른 번들러 - Image: 새로운 next/image. 더 빨라진 Lazy Loading - Font: 새로운 next/font. 구글 폰트 자체 내장 - Link: 향상된 next/link. 태그를 자식 요소로 넣을 필요 .. 공감수 0 댓글수 0 2023. 8. 24.
[CSS] HSL을 활용하여 채도와 명도가 같은 랜덤컬러 생성하기 랜덤 컬러를 생성하기 앞서 HSL을 알아보자 HSL Hue (색조) 색조는 0에서 360까지의 색상값을 가진다. 0은 빨간색, 120은 녹색, 240은 파란색이다. (360은 빨간색) *숫자만 기재 Saturation (채도) 채도는 백분율 값이다. 0%는 회색의 색조를 의미, 100%는 전체 색상이다. *% 단위 필수 Lightness (명도) 명도는 백분율 값이다. 0%는 검은색, 100%는 흰색이다. *% 단위 필수 HSL 문법 hsl(100, 100%, 50%) // #5f0 hsl(235, 100%, 50%, .5) // #0015ff with 50% opacity hsl(235, 100%, 50%) // CSS Colors 4 space-seperated values 랜덤 컬러 생성 (채도, .. 공감수 0 댓글수 0 2023. 8. 23.
[React] 리액트를 사용하여 간단한 노트 앱 만들기 #02 스타일 적용 방식 변경하기 #01 노트 앱 만들기 https://yeongseungjeong.tistory.com/80 [React] 리액트를 사용하여 간단한 노트 앱 만들기 #01 리액트 강의만 들으면서 따라친지 어언 12398744일.. 리액트랑 친한듯 안 친한듯 지내고 있다가 간단하게 뭐라도 쳐보자! 해서 만들게 된 노트앱 투두리스트도 고민 했었지만 페이지 이동이 있게 yeongseungjeong.tistory.com 이전에 노트 앱을 만들 때 CSS Modules 방법으로 스타일 적용을 했었다 className의 고유성과 유지보수에 용이하다는 장점이 있지만 리액트 개발자들이 많이 사용하는 styled-components도 직접 써보고 편리한 방법으로 사용해 보고 싶어서 기존 css-modules 방식으로 작성된 스타일들을 .. 공감수 0 댓글수 0 2023. 8. 21.
[CSS] React에서 스타일 적용하기 (Basic CSS, Module CSS, Styled Components) 🔖 Basic CSS # 인라인 스타일 공감수 0 댓글수 0 2023. 8. 19.
[TS] SetStateAction<type> useState의 set 함수타입 JS 파일로 작성된 프로젝트를 TS로 변환하던 과정에서 문제가 발생했다. 다른 변수들은 타입을 지정해줘서 문제 없이 잘 적용이 되었는데 useState의 set 함수 부분에서 빨간줄이 사라지지 않아 고뇌.. 문제상황 const [notes, setNotes] = useState([]); const sortNotes = () { let newList: noteTypes[] = []; ... setNotes(newList) // error 발생 Argument of type 'noteType[]' is not assignable to parameter of type 'SetStateAction'. Type 'noteType[]' is not assignable to type 'never[]'. Type 'n.. 공감수 0 댓글수 0 2023. 8. 18.
[TS] React 프로젝트 JS -> TS로 변환하기 Typescript Typescript는 Javascript의 변수에 형식을 지정한 파생 언어이다. Typescript로 변환하기 앞서 아래의 문서로 기본 구조를 먼저 익히자. https://yamoo9.gitbook.io/typescript/ TypeScript 가이드북 - TypeScript Guidebook 타입(Types)을 사용하면 JavaScript 애플리케이션을 개발할 때 정적 타입 검사 및 코드 리팩토링과 같은 생산성 높은 개발을 수행할 수 있습니다. 타입 설정이 필수는 아니지만, 설정할 경우 컴파일 yamoo9.gitbook.io 설치하기 https://create-react-app.dev/docs/adding-typescript/ npm install --save typescript @.. 공감수 0 댓글수 0 2023. 8. 17.
[JS] UUID로 고유값 생성하기 UUID 란? UUID(Universally Unique IDentifier)란 네트워크 상에서 중복되지 않는 ID를 만들기 위한 표준 규약이다. UUID의 충돌 확률 UUID는 중복되기 어려운 값들을 수 없이 길게 만듦으로써 단일 값을 보장한다. UUID가 충돌할 확률은 2의 122승 분의 1이며 이에 대한 충돌은 거의 불가능에 가깝다. UUID 구조 UUID는 16바이트(128비트) 형태의 구조를 가진다. 하나의 UUID 길이는 36자리이며 4개의 하이픈(-) 32개의 16진수 문자열로 구성 되어있다. 구조 길이(바이트/비트) 내용 Low Time 4 / 8 (8자리) 시간의 low 32비트를 부여하는 정수 Mid Time 2 / 4 (4자리) 시간의 middle 16비트를 부여하는 정수 Mid Ti.. 공감수 0 댓글수 0 2023. 8. 16.
[React] 리액트를 사용하여 간단한 노트 앱 만들기 #01 리액트 강의만 들으면서 따라친지 어언 12398744일.. 리액트랑 친한듯 안 친한듯 지내고 있다가 간단하게 뭐라도 쳐보자! 해서 만들게 된 노트앱 투두리스트도 고민 했었지만 페이지 이동이 있게 만들고 싶었다 디자인은 최대한 심플하게. 기능 구현을 먼저 해보는 방향으로 하고 천천히 보완할 예정이다 CRUD만 하면 다 한거라 그랬어.. 1. Folder Structure 📦 public └──📜 index.html 📦 src ├──📂 components │ ├──📜 Filter.js │ ├──📜 Filter.module.css │ ├──📜 Title.js │ └──📜 Title.module.css.js ├──📂 routes │ ├──📜 Detail.js │ ├──📜 Detail.module.css │ ├─.. 공감수 0 댓글수 0 2023. 8. 16.
[Vue] 함수형 data ✅ 함수형 data 사용하기 error `data` property in component must be a function vue를 이용하여 컴포넌트를 나누게 되면 한 번쯤 볼 수있는 경고메세지. data를 함수형이 아닌 오브젝트 형태로 선언할 때 뱉어내는 오류이다. vue 공식문서에 vue 시작하기를 보면 data에 return이 없는 것을 확인할 수 있다. vue는 하나의 인스턴스 안에서 작업을 할 때는 굳이 함수로 반환하지 않아도 된다. 하지만 컴포넌트에서의 Data 선언은 다르다. 각각의 다른 컴포넌트마다 각자의 데이터를 관리해야 하기 때문이다. 컴포넌트마다 Data를 오브젝트로 생성하여 여러 번 사용하더라도 결국엔 JS가 작동하는 방식으로 인해 구성 요소의 모든 단일 인스턴스가 이 속성을 공유.. 공감수 0 댓글수 0 2023. 5. 30.
[Vue] SFC(Single File Component) SFC란 Single File Componentd의 약자로 단일 파일 컴포넌트다. 말 그대로 하나의 파일이 하나의 컴포넌트가 된다 라는 뜻이다. 이전에 cdn으로 Vue를 사용했을 때 컴포넌트를 생성하려면 new Vue({ el: '#app', components: { 'app-header': { template: '{{ propsData }}', props: ['propsData'] }, }, data: { message: 'hello', number: 10 } }); template, props, data.. 등 Vue 인스턴스에 필요한 모든 요소를 Vue 객체 안에 정의해야 했다. SFC를 이용하면 보다 직관적인 component 생성이 가능하다. 💡 .vue 파일 생성 // html code.. .. 공감수 0 댓글수 0 2023. 5. 30.
[Vue] vue에 GA4 이벤트 추가하기 vue-gtag 를 설치하고 event 등록이 궁금해졌다. 📎 https://matteo-gabriele.gitbook.io/vue-gtag 위의 문서에 정리가 잘 되어 있어서 이해하기 쉬웠다. export default { name: 'MyComponent', methods: { track () { this.$gtag.event(, { 'event_category': , 'event_label': , 'value': }) } } } track() 이라는 메소드가 실행 될때마다 이벤트가 등록 되도록 되어있다. ✅ action: 이벤트 카테고리에 대한 설명 (ex. 버튼 클릭, 재생 등) ✅ category: 이벤트 유형을 나타내는 것 ✅ label: 추가 세분화 용도 (ex. 파일명 등) ✅ value:.. 공감수 0 댓글수 0 2023. 5. 19.
[Vue] vue에 구글애널리틱스(GA4) 연동하기 💡 구글 애너리틱스 UA 종료 유니버설 애널리틱스 (Universal Analytics, UA) 버전이 2023년 7월 1일 이후부터 서비스가 종료된다. 서비스 종료시점에서 부터는 신규 데이터 수집 및 조회가 안되기 때문에 구글 애널리틱스 4 (GA4) 로 이전을 해야한다. 💡 vue-analytics 지원 중단 기존에 지원하던 vue-analytics 에서도 더 이상 지원이 안된다는 안내 문구가 나온다. 구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서 vue-analytice 대신 vue-gtag를 이용하라고 안내가 되어있다. 💡vue-gtag https://www.npmjs.com/package/vue-gtag vue-gtag Global Site .. 공감수 1 댓글수 0 2023. 5. 18.
[JS] 일반 함수와 화살표 함수의 차이 💡 화살표 함수(Arrow Function)란 화살표 함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한 표현으로 간단하게 사용 가능하다. // 일반함수 function fun() { // ... } // 화살표 함수 const arrFun = () => { // ... } 💡 일반 함수와 화살표 함수의 차이 1️⃣ this ✅ 일반함수 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this 라는 객체가 추가된다. ▪️ 함수 실행시에는 전역(window) 객체를 가르킨다. ▪️ 메소드 실행시에는 메소드를 소유하고 있는 객체를 가르킨다. ▪️ 생성자 실행시에는 새롭게 만들어진 객체를 가르킨다. 일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 .. 공감수 0 댓글수 0 2023. 5. 17.
[Vue] arrow function 사용 시 주의 사항 Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages. 각 Vue 구성 요소 인스턴스는 생성될 때 일련의 초기.. 공감수 0 댓글수 0 2023. 5. 17.
[Vue] vuex의 mutations과 actions 🔎 Mutations과 Actions의 차이 ✅ Mutations은 동기적 로직을 정의 ✅ Actions는 비동기적 로직을 정의 Mutations에서 다수의 상태 변경이 비동기적으로 수행되었을 경우 예측 불가능한 상태가 되는 것을 막기 위한 의도가 있는 것 같다. action에서는 mutations으로 commit을 행함으로써 간접적으로 상태를 변경하지만 actions을 호출하기 위한 dispatch method는 Promise를 반환하기 때문에 처리의 순서를 제어하는 것이 가능하다. 🔎 동기적 처리의 사용 📎actions 을 활용한 예시코드 new Vuex.Store({ state: { count: 0 }, mutations: { plus(state, num) { stage.count += num; }.. 공감수 0 댓글수 0 2023. 5. 16.
[CSS] margin과 padding 자주 쓰지만 항상 어떤 속성을 사용할지 고민하게 되는 margin과 padding. 여러가지를 참고하며 작성하는 글이지만 사실 아직 어느 상황에 써야 맞는지 헷갈리는건 여전하다. 그래도 검색하면서 다른 사람들도 많이 헷갈려 하는구나.. 라는 위안을 얻으며 기록해본다. 🔎 BOX MODEL HTML은 4가지 박스 형태로 만들어진다. 이 네가지 영역을 박스모델이라고 한다. ▪️ content: 내용이 담긴 부분 ▪️ padding: border와 content사이의 영역 ▪️ border: element를 감싸는 경계 ▪️ margin: border의 바깥 영역 🔎 비교 ✅ margin: 바깥쪽 여백 ✅ padding: 안쪽 여백 양수 (+) 음수 (-) auto collapse margin O O O O .. 공감수 0 댓글수 0 2023. 5. 11.
[Vue] IOS의 setTimeout 이슈 (feat. $nextTick) Vue로 개발을 진행하다 보면 기존과 약간 다른 개발 방식에 애매한 상황이 생긴다. 그 중 하나로 Vue의 데이터와 화면의 UI를 찾아 접근해야 하는 상황에서 DOM을 찾지 못하는 상황이 있다. 데이터를 통해서 만들어지게 되는 DOM이 완성되기 이전 시점에 호출을 하려고 하는 상황인데, 어떠한 데이터를 변수에 담아 화면이 갱신되는 DOM에 바로 접근하려고 하면 DOM 요소가 없다는 에러를 뱉는다. 💡 예시코드 show Input 모든 데이터 처리가 비동기로 처리되는 자바스크립트 특성 때문에 DOM이 갱신되기 전 탐색하는 상황에서 생기는 현상이다. 그래서 setTimeout을 이용해 약간의 시간차를 주게되면 문제없이 DOM에 접근 할 수 있게 된다. // ... showInput() { this.isSho.. 공감수 0 댓글수 0 2023. 5. 9.
[CSS] %와 vh/vw 차이 내가 원하는 스타일을 화면 전체 페이지에 주고 싶을때 마음대로 되지 않아서 애를 먹었던 적이 많았다. 그냥 무작정 height: 100% 주거나 비슷하게 px 또는 rem으로 크기를 맞춰서 하곤 했는데, 여러 디바이스를 비교하면서 하면 이상해 보이는걸 알았지만 일단 내가 보이는 화면에만 안 보이게 처리하려고 그랬나보다. 별거 아닐 수 도 있지만 기본이라고 생각하는 화면 크기 값 조정. 기록해 놔야지. 📌 % 창이 중심이 아닌 부모 요소의 길이에 맞게 반환한다. 그래서 최상단에서 사용한다면 문제는 없지만 밑의 컴포넌트로 파고 들어갈수록 원하는 결과 값을 얻기 힘들어진다. 📌 vh와 vw vh(viewport height): 화면 기준으로 높이를 뜻한다. vw(viewport width): 화면 기준으로 넓.. 공감수 0 댓글수 0 2023. 4. 30.
[JS] 심볼(Symbol) 자료형 📌 자바 스크립트에 지원하고 있는 자료형 ✅ 기본 자료형 (Primitive) ◾ boolean : 논리적인 요소. true와 false값이 있다. ◾ null : 빈 값 ◾ undefined : 값을 할당하지 않은 변수가 가지는 값 ◾ numer : 숫자형으로 정수와 부동 소수점, 무한대 및 NaN (숫자가 아님) 값을 포함한다. ◾ string : 문자열 ◾ symbol (ES6에 추가됨) ✅ 객체 자료형 ◾ object 심볼(Symbol)이란, 다른 값과 중복되지 않는 자료형(unique) 이다. 프로그램에서 이름(변수명)의 충돌 없이 사용하기 위해 활용한다. 일반적으로 심볼 타입은 객체의 프로퍼티 키로 사용된다. 📌 심볼 값 생성 심볼은 전역 함수 Symbol을 사용해서 생성한다. const sy.. 공감수 0 댓글수 0 2023. 4. 19.
[JS] 객체 반복문 돌리기 1️⃣ for...in for...in 문은 객체의 key를 하나씩 가져온다. const obj = { key1: 'value1', key2: 'value2', key3: 'value3', } for (const key in obj) { console.log(key + ' : ' + obj[key]); } // key1 : value1 // key2 : value2 // key3 : value3 2️⃣ for...of for...of 문은 iterable한 속성을 지닌 String, Array, TypedArray, Map, Set 에서 값을 하나씩 가져온다. 객체는 iterable이 아니기 때문에 사용할 수 없다. const obj = { key1: 'value1', key2: 'value2', key.. 공감수 1 댓글수 0 2023. 4. 19.
[JS] textarea 높이 자동 조절 📌 예제코드 HTML 삽입 미리보기할 수 없는 소스 📌 코드 높이를 조절할 textarea 요소를 준비해줍니다. textarea { width: 240px; height: 30px; } textarea의 기본 Height를 지정해주고, 이 크기는 JavaScript 코드에서도 사용하게 됩니다. const DEFAULT_HEIGHT = 30; // textarea 기본 height const $textarea = document.querySelector('#textarea'); CSS에서 지정한 Height를 'DEFAULT_HEIGHT' 변수에 저장시켜줍니다. document.querySelector() 선택자로 textarea 요소를 가져와줍니다. // Textarea 자동 높이 조절 $textarea.. 공감수 1 댓글수 0 2023. 4. 18.
[JS] 원시타입과 참조타입 🔎 자바스크립트의 원시 타입과 참조 타입 자바스크립트는 원시 타입과 참조 타입이라는 두 가지 타입의 자료형을 제공한다. 1️⃣ 원시 타입 (Primitive Type) 원시 타입에는 아래와 같이 여섯 가지가 있으며, 이 외의 모든 값은 객체(참조) 타입이다. ◾숫자 (Number, BigInt) ◾불리언(Boolean) ◾null ◾undefined ◾문자열 (String) ◾Symbol 원시타입 데이터는 변수에 할당될 때 메모리 상에 고정된 크기로 스택 영역에 저장되고 해당 변수는 원시 데이터의 값을 보관한다. 또한, 원시타입 자료형은 변수 선언, 초기화, 할당 시 값이 저장된 메모리 영역에 직접적으로 접근한다. 즉 변수에 새 값이 할당될 때 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다는 뜻.. 공감수 0 댓글수 0 2023. 4. 14.
[Vue] vuelidate를 사용하여 폼 검증하기 (Vue2) 1. vuelidate 라이브러리 설치 npm install vuelidate https://www.npmjs.com/package/vuelidate vuelidate Simple, lightweight model-based validation for Vue.js. Latest version: 0.7.7, last published: a year ago. Start using vuelidate in your project by running `npm i vuelidate`. There are 427 other projects in the npm registry using vuelidate. www.npmjs.com 2. 전역 등록 // main.js import Vuelidate from 'vuelida.. 공감수 0 댓글수 0 2023. 4. 13.
[Vue] 카드번호 자동 하이픈(-) 정규식 공감수 0 댓글수 0 2023. 4. 13.
[CSS] 네이밍 규칙 새로운 페이지를 만들때 항상 고민되는 변수명 짓기 Javascript에서는 흔히 Camel Case로 불리는 컨벤션 규칙을 사용한다. 띄어쓰기 없이 변수명을 붙여쓰되 이어지는 단어의 첫 글자는 대문자로 작성한다. const myName = document.getElementById('...') 하지만 CSS에서 카멜케이스 사용은 적합하지 않다. BAD .selectBtn { border: 1px solid blue; } GOOD .select-btn { border: 1px solid blue; } CSS의 네이밍 규칙중 CSS의 제작 방법론 중 하나인 BEM 규칙에 대해 알아보자. BEM 규칙 BEM은 Block, Element, Modifier 의 줄인 말로 일종의 네이밍 컨벤션 이다. 컴포넌트 기반.. 공감수 4 댓글수 0 2023. 3. 24.
[JS] 생성자 함수 객체 리터럴 let user = { name: 'Stella', age: 29, } 생성자 함수 (Intermediate Class) 비슷한 객체를 여러개 만들어야 하는 상황이 올 때 쓸 수 있는게 생성자 함수이다. 생성자 함수는 붕어빵 틀이나 와플팬이라고 생각하면 된다. 필요한 재료들을 넣어주고 찍어준다. 아래 코드에서 필요한 재료는 이름과 나이, 생성되는 객체는 와플이다. function User(name, age){ this.name = name; this.age = age; } let user1 = new User('Stella', 20); let user2 = new User('Kate', 25); let user3 = new User('Andy', 32); *생성자 함수는 첫글자를 대문자로 하.. 공감수 0 댓글수 0 2023. 3. 23.
[JS] 변수와 호이스팅 변수 (Variable) 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙이 이름을 말한다. 변수 선언 변수는 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다. var와 let은 둘을 바꿔서 사용해도 크게 문제 되지 않는다. var 와 let의 차이점 var는 한번 선언된 변수를 다시 선언할 수 있다. var name = "Stella"; console.log(name); // Stella var name = "Kate"; console.log(name); // Kate 동일하게 let으로 선언할경우 에러가 발생한다. let name = "Stella"; console.log(name); // Stella .. 공감수 0 댓글수 0 2023. 3. 23.

문의안내

티스토리
로그인
고객센터

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