Programming59 [ASP.NET] 기본 프로젝트 생성하기 1. .NET 다운로드 - https://dotnet.microsoft.com/en-us/download - 어떤 버전이든 상관없지만, 최신 버전 + Recommended 버전인 9.0 버전을 설치함 2. .NET 설치 확인 - CMD(명령 프롬프트)에서 dotnet 입력 - 아래와 같은 메시지가 출력되면 정상적으로 설치됐다는 표시 3. 프로젝트 생성 - dotnet new webapp -o [폴더명] --no-https 입력 - dotnet : dotnet이라는 명령어를 사용하겠다. - new : 새로운 프로젝트를 열겠다. - webapp : 형태는 webapp으로 하겠다. - -o [폴더명] : "폴더명" 이름의 폴더로 출력하겠다. · 현재.. 2024. 11. 21. [React] 5. state 변경하기 (setState는 옛날 방식) Ex) "버튼"을 누르면 여자 → 남자로 변경시키기 ● 하드코딩 방식 ● 데이터 복사 후 수정 방식 - 원본 state 수정하는 것이 아닌, 복사본을 만들어서 수정 - 복사본을 만들 때는 deep copy 해야함 · deep copy : 실제 값만 복사하여, 독립적으로 동작 - spread operator(전개연산자)를 통해 복사 - React 대원칙 : 모든 state 데이터들은 immutable 해야 한다. (직접 수정이 되어서는 안 된다.) - 따라서, state를 직접 건드는 것은 권장사항도 아니고, 재랜더링이 안될 수 있음 ❕onClick={ 함수명() }와 onClick={ 함수명 } 차이 - ()를 붙이면 함수를 바로 실행하라는 뜻 .. 2024. 10. 24. [React] 4. 요소에 이벤트 설정 및 state 변경하기 1. onClick - 기존 javascript 문법 : element에 onclick으로 실행할 함수 설정 - React 문법 · element에 onClick으로 실행할 함수 설정 (c가 대문자) · 따옴표(')나 큰따옴표(")가 아닌 중괄호({, })로 감싸기 · 함수를 따로 만들지 않고 바로 구현할 경우 { 실행할 내용 } }> 2. EventListener - 기존 javascript 문법 eventTarget.addEventListener('click', function(){ }); - React 문법 eventTarget.addEventListener('click', ()=>{ }); 3. state 변경 .. 2024. 10. 9. [Programming] Windows 11 마지막 글자 사라지는 현상 해결법 ● 문제 - Windows 11 환경에서 텍스트 입력하다가 다른 창으로 이동 또는 다른 곳 클릭하게 되면 마지막 글자가 사라짐 - 중요한 문서 작업 시 이러면 몹시 화가 남 ಠ▃ಠ ● 해결 1. 언어 및 키보드 옵션 편집창으로 이동 2. 언어 > 한국어 > · · · > 언어 옵션 선택 3. 키보드 > Microsoft 입력기 > · · · > 키보드 옵션 선택 4. 호환성 > 이전 버전의 Microsoft IME 켬으로 설정 ● 결과 - 텍스트를 쓰다가 다른 곳으로 이동했다 오거나 클릭해도 마지막 글자가 지워지지 않음👍 ● 참고 - IME란? · Input Method Editor(입력 방식 편집기) · 컴퓨터에서 다양한 언.. 2024. 10. 8. [React] 3. useState ● React에서 변수 보관 방법 1) 변수 사용 2) state 사용 - 변수 대신 쓰는 데이터 저장공간 - useState()를 이용해 만들어야 함 - 문자, 숫자, Array, Object 모두 저장 가능 ● state 사용 방법 1. import React, {useState} from 'react'; 추가 · "React에 있는 내장함수 하나를 쓰겠다."라는 뜻 2. useState('데이터') 선언 · 데이터 2개가 들어있는 배열로 남음 · [state 데이터( 입력한 진짜 데이터), state 데이터 변경 함수( 진짜 데이터를 수정해주기 위한 함수)] · 아래 ES6 de.. 2024. 10. 4. [React] 2. JSX 사용법 ❕React에서는 일반 HTML 대신 JSX를 사용해야 함❕javascript와 동일해 보이지만, return 괄호 내에 HTML 작성 1. class=""이 아닌 className="" 사용 2. {}를 통해 데이터 바인딩 - React, Angular, Vue의 특징 : 데이터 바인딩이 쉬움 - 변수명, 함수 등 바인딩 가능 - src, id, href 등의 속성에도 모두 가능 (import 말고 원래 방식대로 경로를 적어도 가능) 3. style={오브젝트 자료형으로 만든 스타일}을 통해 스타일 입력 - {}로 묶인 오브젝트 형으로 입력 - '-'가 들어간 단어는 camel case 작명법으로 사용 Ex) font-size -> fontSize - .. 2024. 10. 4. [React] 1. React 설치 및 세팅 1. node.js 설치 - 설치 사이트 : https://nodejs.org/en - HTML 파일에다가 직접 Readct 라이브러리 설치해서 작업하려면 오래 걸림 - create-react-app이라는 라이브러리를 사용하기 위해 node.js 사용 - 기존에 설치되어 있어도 최신 버전으로 재설치 권장(오류 방지) 2. Visual Studio Code(VSCode) 설치 - 기존에 설치되어 있는 Visual Studio Code에 Terminal 메뉴가 없으면 재설치 추천 3. 작업 폴더 생성 후 VSCode에서 열기 4. React 프로젝트 생성 - VSCode 하단에 마우스 클릭 후 드래그 또는 Terminal > New Terminal 해서 Termina.. 2024. 10. 4. [CSS] 한글, 영어, 한자, 기호 CSS 개별 적용하기 1. :lang() - html 요소의 'lang' 속성에 지정된 언어를 기반으로 스타일 적용 - 모든 요소를 lang()에 설정된 언어로 인식 - 언어만 가능하기에 기호는 따로 설정 불가 2. unicode-range - 특정 Unicode 문자 범위에 대해 폰트를 정의할 때 사용 - @font-face 규칙 내에서만 사용 * 한글 가나다라마바사아자차카타파하 * 영어 abcdefghijklmnopqrstuvwxyz * 한자 一二三四五六七八九十 * 기호 !@#$%^&*() * 테스트 dfjskdf 가나다라 ❕참고) 자주 사용될 수 있는 unicode-range 종류기.. 2024. 7. 24. [Programming] MIME(Multipurpose Internet Mail Extensions type) 타입 ● MIME (Multipurpose Internet Main Extensions type) 타입 - 직역 : 다목적 인터넷 메일 확장 유형 - 인터넷에서 전송되는 파일의 형식과 내용을 정의하는 표준 방식 - 웹 브라우저나 이메일 클라이언트와 같은 인터넷 애플리케이션은 MIME 타입을 사용하여 파일의 형식과 처리 방식을 결정 - MIME 타입은 주로 HTTP 헤더와 이메일 헤더에서 사용 - 파일을 정확하게 처리하고 표시하는 데 중요한 역할 - 이를 통해 브라우저나 다른 클라이언트 애플리케이션 파일을 올바르게 해석하고 처리 가능 ● MIME 타입 구성 - 두 부분으로 구성 ① 타입(type) : 파일의 일반적인 종류 ② 서브타입(subtype).. 2024. 7. 22. [Javascript] <script> 태그 속성 종류 ● type- 스크립트 MIME 타입 지정- 기본값 'text/javascipt'- 보통 생략async- 스크립트를 비동기적으로 로드- 다른 페이지 요소들과 병렬로 로드defer- 스크립트 실행 연기- HTML 파싱 완료 후 실행- 주로 외부 스크립트 파일과 함께 사용integrity- 스크립트 파일 서명(SRI)를 제공하여 파일 무결성 확인crossorigin- CORS(Cross-Origin Resource Sharing) 설정- 외부 리소스가 다른 도메인에 있을 때 사용nomodule- ES6 모듈을 지원하지 않는 브라우저에만 해당 스크립트를 로드 nonce- CSP(Content Security Policy)와 함께 사용되는 속성- 안전하게 스크립트 삽입 2024. 7. 22. [Chrome] 개발자 도구 - 로컬 스토리지 ● 웹 브라우저 - 사용자의 컴퓨터에 웹사이트 사용 정보들을 저장하고 필요할 때마다 그 정보들 조회 => 사용자 개인화 가능(= 사용자별로 저장 가능) => 속도 및 사용자 경험 개선 - Ex) 자동 로그인 기능, 로그인 없이 장바구니 상품 유지 ● 로컬 스토리지 - Client Side Storage 방식 (= 사용자 측에 저장) => 데이터 저장을 사용자 컴퓨터에 하겠다는 의미 => 내 컴퓨터 브라우저에만 한정적으로 적용 - 세션 스토리지에 저장된 데이터 : 페이지 닫을 때 사라짐 vs 로컬 스토리지에 저장된 데이터 : 새로고침 및 브라우저 종료 시에도 내 컴퓨터 동일 브라우저 내에.. 2024. 6. 8. [Javascript] localStorage와 sessionStorage ● localStorage와 sessionStorage의 공통점 - 웹 브라우저에서 클라이언트 측 데이터를 저장하는 데 사용되는 웹 스토리지 메커니즘 ● localStorage와 sessionStorage의 차이점 localStorage sessionStorage 유지 기간 · 영구적으로 데이터 저장 · 브라우저를 닫아도 데이터 유지 · 세션 기간 동안 데이터 저장 · 브라우저 세션 유지 동안만 데이터 유지(닫으면 유지 끝) 액세스 · 동일한 도메인 내 모든 페이지에서 액세스 가능 · 세션 간 데이터 공유 불가 · 동일한 세션 내에서만 액세스 가능 저장 형식 · 브라우저의 로컬 파일 시스템에 데이터 저장 · JavaScript 객체 형식으로 데이터 저장 저장 용량 · 도메인당 5MB 제한 · 브라우저마다.. 2024. 4. 20. [Javascript] video 태그 관련 명령어 1. 재생 / 일시정지 - 재생 : play() - 일시정지 : pause() 2. 소리 조절 (0.0 ~ 1.0) - 소리 크기 : volume 3. 현재 상태 확인 (초 단위, 숫자를 입력할 경우 해당값 적용) - 현재 재생 시간 : currentTime - 총 재생 시간 : duration 4. 재생 속도 조절 (default 1.0) - 재생 속도 : playbackRate 5. 이벤트 처리 - 비디오가 재생되었을 때 호출되는 이벤트 핸들러 : play - 비디오가 일시 정지되었을 때 호출되는 이벤트 핸들러 : pause Ex ) id가 myVideo인 video 태그의 영상 제어 /********************** 1. 재생 **********************/ // 1-1. 재생 .. 2024. 4. 18. [Spring] Maven과 Gradle ● Maven과 Gradle의 공통점 - 프로젝트 빌드, 종속성 관리, 배포 등을 자동화하는 도구 => 개발 프로세스를 단순화하여 개발자의 업무를 줄여줌 => 현대 소프트웨어 개발에서 필수적 1. 의존성 관리 - 프로젝트는 종종 다른 라이브러리나 프레임워크에 의존 → 외부 라이브러리를 쉽게 관리할 수 있도록 도와줌 - 개발자가 프로젝트에 필요한 의존성을 정의하면, 자동으로 의존성을 다운로드하고 프로젝트에 포함시킴 2. 프로젝트 빌드 - 프로젝트 빌드 자동화 및 단순화 - 개발자가 자동화를 위한 설정을 작성하면, 컴파일, 테스트 실행, 리소스 복사, 패키징 등과 같은 작업 실행 3. 표준화 - 프로젝트 구조와 빌드 스크립트의 표준화된 형식을 제공 → 프로젝트 관리 및 협업을 간단하게 만들어줌 → 새로운 개.. 2024. 4. 17. [Programming] 검증 기능에 써먹기 좋은 정규식 패턴 10가지 추천 1. 이메일 주소 ● 이메일 주소 형식을 검증 ● ^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$ 2. URL ● HTTP, HTTPS, FTP로 시작하는 유효한 URL을 검증 ● ^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$ 3. 전화번호(숫자만) ● 10자~12자의 숫자로 이루어진 전화번호를 검증 ● ^[0-9]{10,12}$ 4. 날짜 (YYYY-MM-DD) ● YYYY-MM-DD 형식의 날짜를 검증 ● ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ 5. 숫자만 ● 문자열이 숫자로만 이루어져 있는지 검증 ● ^[0-9]+$ 6. 알파벳 대소문자 및 숫자만 ● 문자열이 알파벳 대소문자와 숫자로만 이루어져 있는지 검증 ● ^[a-zA-Z0-.. 2024. 1. 19. [Javascript] null 병합 연산자(Nullish Coalescing Operator, ??) ● ?? - null 병합 연산자(Nullish Coalescing Operator) - 피연산자 중 첫 번째가 null 또는 undefined일 때, 두 번째 피연산자로 대체 - a ?? b 는 (a != null && a != undefined) ? a : b 와 동일 2024. 1. 10. [Java] Javac와 Java 차이 ● Javac - Java 소스 코드를 컴파일 - '.java' 확장자를 가진 Java 소스 파일을 컴파일하여 '.class' 확장자를 가진 바이트 코드 파일로 변환 - Ex) cmd에서 javac HelloWorld.java 입력 시 HelloWorld.class 파일 생성 ● Java - Java 응용 프로그램을 실행 - '.class'로 컴파일된 바이트 코드를 JVM(Java Virtual Machine, 자바 가상 머신)에서 실행 - Ex ) cmd에서 java HelloWorld 입력 시 HelloWorld.class 파일 실행 javac HelloWorld.java # 컴파일 java HelloWorld # 실행 2024. 1. 4. [Javascript] 현재 페이지 URL 정보 가져오기 ● window.location - 현재 페이지의 URL을 나타내는 객체 ● 속성 종류 속성명 설명 href 전체 URL 문자열 protocol 마지막 ':'를 포함한 프로토콜 정보 host ':'과 포트번호를 포함한 URL의 호스트명 hostname ':'과 포트번호를 제외한 URL의 호스트명 port 포트 번호 pathname '/' 뒤 경로 search '?' 뒤 쿼리스트링 ● 예시 - https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=javascript 속성 사용방법 결과 href window.location.href 'https://search.naver.com/search.naver?where=.. 2023. 12. 12. 이전 1 2 3 4 다음 반응형
