developia.soye.log

주요 차이점✅ 콜백함수(callback function)란?- 함수의 매개변수를 통해 다른 함수의 내부로 전달되어지는 함수이다.- 중첩함수가 외부함수를 돕는 헬퍼 함수의 역할을 하는 것처럼 콜백함수도 고차함수에 전달되어 헬퍼함수의 역할을 한다.단, 중첩함수는 고정되어있어 교체하기 곤란하지만 콜백함수는 함수 외부에서 고차함수 내부로 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있다. 즉, 고차함수는 콜백함수를 자신의 일부분으로 합성한다.**고차함수(higer-order-function)란? 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라고 한다. ✅ 콜백함수의 전개- 고차함수는 매개 변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출한다.- 다시 말해, 콜백함수는..

Javascript 2025. 5. 5. 19:01

🔍 개념정리 : localstorage 란? - 웹스토리지(저장소) LocalStorage는 웹 브라우저에서 제공하는 웹 스토리지(Web Storage) API의 한 종류로, 클라이언트(사용자 브라우저)에 데이터를 영구적으로 저장할 수 있는 방법 중 하나이다. 👉 "클라이언트(사용자의 브라우저)에 저장한다"는 의미는 즉, 저장된 데이터는 오직 사용자의 웹 브라우저 안에만 존재하며, 서버와는 아무 관련이 없다. ✅ LocalStorage 특징저장 위치클라이언트(브라우저)데이터 수명브라우저나 탭을 닫아도 삭제되지 않음 (명시적으로 제거해야 함)저장 용량보통 약 5MB (브라우저마다 다름)접근 방식키-값(Key-Value) 쌍지원 타입문자열(string)만 저장 가능 (JSON.strin..

DB 2025. 5. 4. 18:37

환경설정- node 20.10.0- next.js15.2.4- react 19.1.0- react-dom 19.1.0 개요- 프론트엔드 영역에서 React, Vue + SSR렌더링 요구 증가 -> Next.js 가 요구되어지는 곳들이 많아짐. - Next.js 사이트들도 제법 많아서 활용해보기로 함 1. Next.js 시작하기 ( 가장 최신버전으로 설치 ) -수동버전 설치 : npm install react@latest next@latest react-dom@latest -package.json설정 : "license" : "MIT"로 변경, "scripts" : { "dev" : "next dev" } 로 설정-app 폴더안에 page.jsx 혹은 page.tsx 파일 생성 (타입스크립트를 사용하..

React 2025. 4. 17. 18:35

개요- Next.js 를 다뤄보면서 라이브러리와 프레임워크 차이에 대해 알아보는 것도 좋을 것 같다는 생각이 들었다.   이러한 차이는 React.js와 Next.js등의 동작방식을 아는데 도움이 된다.  라이브러리 : 코드내에서 내가 사용하는 것 ( 여기서 주체는 사용하는 사용자이다 ) -> 주도권은 사용자에게 있다. : 코드 내에서 사용하려고 설치하는 것이지만 사용의 주체는 나 = 우리가 필요할 때 사용할 수 있다 (도움이 필요할 때만 가져와서 사용할 수 있음을 의미하기도 함) => 이것에 관한 모든 결정을 하는 것은 사용자다.= 원하는 아키텍처를 사용하여 원하는 방식으로 코드를 사용한다 = 내가 원한다면 함수 지향 프로그래밍을 할 수도, 객체지향프로그래밍을 하는 등 원하는 언어로 사용할 수 있다.=..

Basic_Code 2025. 4. 7. 15:46

개요- SEO에 적합한 코드작성 유무를 묻는 면접이 많아지면서 SEO 검색 엔진 최적화에 의문이 들었다. - 기본적인 마크업과 명확한 레이아웃 구현이 주를 이룬다면 크게 문제가 되는 게 없지 않을까? 단순히 생각했었는데 이 기회에 SEO에 적합한 코드란 무엇인지 구체적으로 알아보기로 했다.  일단 SEO(검색 엔진 최적화)에 적합한 코드를 작성하려면, 검색 엔진이 페이지의 콘텐츠를 정확하게 이해하고 가치를 높이도록 최적화해야한다. HTML, 메타 태그, 구조화된 데이터, 접근성 등의 고려가 그것들의 예시다. 1. 기본적인 HTML SEO 최적화1) 올바른 HTML 태그 사용이곳은 메인 제목입니다 부제목 1관련된 내용을 작성하세요.부제목 2다른 관련 내용을 추가하세요.h1 태그는 페이지의 주요 제목이므로..

Diary about code 2025. 3. 21. 15:44

개요- vue3 프로젝트를 하면서 vuex를 통해 관리하던 상태변경을 pinia를 이용해야했다.- pinia 와 vuex의 차이점을 알고 사용해보기로 함- 이에 앞서 이전 버전과 다른 vue3의 설계구조를 알아야 함 -  Composition API vs Options API 의 차이  composition API란 무엇일까? -> vue3에서 도입된 새로운 방식의 컴포넌트 설계 방법. 이전에는 options API(옵션 객체 data, methods, computed, etc.를 이용하여 구성) 를 사용해 컴포넌트를 작성.composition API는 좀 더 유연하고 효율적인 코드를 작성할 수 있도록 해준다. 주요 개념은 **반응성(reactivity)**과 컴포넌트의 상태와 기능을 함수 기반으로 구성..

Vue 2025. 3. 12. 17:08

개요- 환경설정node 18.14.0  / vue3 / vite 과제형 프로젝트를 진행하면서 v-bind:class를 객체형태로 사용하고 조건식을 속성값으로 사용하는 방법을 쓰게 되었다.문제제기) input type="email" 에서 실시간 value값이 설정한 조건에 부합하는 경우 원하는 클래스명이 붙도록 하는 로직구현이 필요               input에 실시간으로 입력되는 값을 캐치해야하므로 watch() 속성에 구현 [과정]1. true, false값에 따라 구현되는 요소는 기존에 클래스명이 있다.2. 삼항연산자를 통해서는 한가지 조건만 충족할 수 있다. ( 기존에 가진 클래스명 / 조건에 부합하는 경우 ) -> 조건에 부합하지 않는 경우를 를 구현할 수 없음3. v-bind:class ..

Vue 2025. 3. 8. 15:12

-개요작년에 만들어두었던 프로젝트에 이용했던 공공 api가 개편이 되면서 전체적인 수정이 필요했다.(기존가입자도 모두 새로가입해야하는 상황이었고, 발급받은 key값과 가져와서 사용했던 데이터 Key값 모두가 변경되었다. -> 처음부터 다시 해야하는 상황)  - DB (mysql2) 정보 수정 Db관련 데이터를 가져올 때 host명을 'localhost'로 지정해두었었는데, 이 부분도 정확한 아이피값을 지정해줘야해서 바꿔주었다.    - 서버 수정 (express.js 관련)1. api 주소 자체가 바뀌었기 때문에, 주소를 변경하고 발급받은 Key를 변경시키면서 서버내 작성해둔 코드에도 변경을 주었다.- express를 사용하면서 status를 이용하기로 했다. status(400) / status(500..

DB 2025. 2. 25. 19:20