본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크

전체보기760

[잡담]조용히 살고싶은곳! 양주 7호선 옥정중앙역(예정) 단독주택 파티오포레 예전에는 도심지가 좋았는데, 한두살 먹으면서 조용한곳을 찾게 되더군요. 살면서 단독주택에 살고싶다는 로망은 한번씩 가져봤을텐데요, 단독주택하면 제일 먼저 생각나는것이 직장까지의 거리, 벌레, 근처 편의시설등이 떠오릅니다. 물론 장점도 있지만, 현실적으로 걸림돌이 많았던게 사실입니다. 그럼에도 불구하고 단독주택의 로망은 아직도 가지고 있는데요. 위에 단점을 보완해주는.. 홀로 단독주택이 아닌 대단지의 단독주택을 분양하는 곳이 있어 소개해봅니다. 단독주택이라 하면 말그대로 아파트처럼 위아래 눈치안보고 독립된 공간에서 사는게 매력인데요. 먹고사는게 먼저인지라 현실적으로 가능한지.. 생각을 안할수가 없었습니다. 요즘 시대의 단독주택이란? 시대가 바뀌면 생각도 바뀌어야하고, 그시대에 맞게 생각을 하는 사람이 성공.. 2023. 5. 7.
[React]리액트 자주사용하는 기본문법 React의 문법 React는 JSX(JavaScript XML) 문법을 사용하여 UI를 작성합니다. JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법을 사용하여 컴포넌트를 작성할 수 있습니다. 컴포넌트 생성 프로퍼티 전달 이벤트 처리 조건부 렌더링 배열 렌더링 스타일링 반복문 이벤트핸들링 컴포넌트 생성 React에서 컴포넌트를 생성할 때는, 함수형 컴포넌트를 작성할 수 있습니다. 이 함수는 JSX를 반환해야 하며, JSX는 괄호(())로 감싸야 합니다. jsx Copy code function MyComponent() { return Hello, World!; } 프로퍼티 전달 React 컴포넌트에는 프로퍼티(props)를 전달할 수 있습니다. 프로퍼티는 해당 컴포넌트가 렌더링될 때.. 2023. 3. 29.
[Javascript]ECMAScript6(ES6)에 추가된 문법 ES6 (ECMAScript 2015)은 ECMAScript 언어의 6번째 버전입니다. ES6는 많은 새로운 문법과 기능을 도입하여 JavaScript를 더욱 강력하고 유연한 언어로 만들었습니다. ES6에 추가된 주요 문법 몇 가지를 살펴보겠습니다. let, const 키워드: 기존 var 키워드 대신에 let과 const 키워드가 추가되었습니다. let은 블록 스코프 변수를 선언할 때 사용하며, const는 상수를 선언할 때 사용합니다. let x = 10; x = 20; // 가능 const y = 10; y = 20; // 불가능 화살표 함수: 화살표 함수는 함수를 더 간결하게 작성할 수 있도록 해줍니다. 이전에는 함수를 선언할 때 function 키워드를 사용해야 했지만, 화살표 함수에서는 이 키.. 2023. 3. 20.
[javascript]모던 자바스크립트란? "모던 자바스크립트"는 ES6(ECMAScript 2015) 버전 이상의 자바스크립트를 지칭하는 용어입니다. 이전 버전의 자바스크립트에서는 사용할 수 없었던 기능들이 추가되어, 개발자들은 더욱 편리하고 간결한 코드를 작성할 수 있게 되었습니다. 모던 자바스크립트에서 추가된 기능 중 가장 대표적인 것은 "let"과 "const" 키워드를 이용한 변수 선언 방식입니다. 이전에는 "var" 키워드만을 사용하여 변수를 선언할 수 있었지만, "let"과 "const" 키워드는 블록 스코프(block scope)를 가지기 때문에 변수의 유효 범위(scope)가 더욱 명확해졌습니다. 또한, "const" 키워드로 선언된 변수는 상수를 표현하기에 적합합니다. 그 외에도 모던 자바스크립트에서는 템플릿 리터럴(templa.. 2023. 3. 12.
[javascript]javascript 연산자 JavaScript는 여러 종류의 연산자를 제공합니다. 각 연산자는 다양한 작업을 수행하며, 피연산자를 사용하여 연산을 수행합니다. 다음은 JavaScript에서 사용할 수 있는 주요 연산자의 목록입니다. 산술 연산자 덧셈 (+) 뺄셈 (-) 곱셈 (*) 나눗셈 (/) 나머지 (%) 거듭제곱 (**) 할당 연산자 대입 (=) 덧셈 후 대입 (+=) 뺄셈 후 대입 (-=) 곱셈 후 대입 (*=) 나눗셈 후 대입 (/=) 나머지 후 대입 (%=) 비교 연산자 같음 (==) 같지 않음 (!=) 일치 (===) 불일치 (!==) 크기 비교 (> / >= / >) 그 외 쉼표 (,) 삭제 (delete) void 이러한 연산자들을 조합하여 변수의 값을 계산하거나, 조건문과 반복문 등을 작성할 수 있습니다. 2023. 3. 9.
[Typescript]javascript와 typescript 차이점과 사용방법 javascript와 typescript 차이점 JavaScript는 스크립트 언어로, 다양한 플랫폼에서 동작하는 클라이언트 측 및 서버 측 애플리케이션을 작성하는 데 사용됩니다. JavaScript는 가볍고 동적이며 쉽게 배울 수 있으며 웹 페이지의 동작 및 사용자 인터페이스를 개선하는 데 사용됩니다. TypeScript는 JavaScript의 슈퍼셋으로, 정적 타입 언어입니다. TypeScript는 JavaScript 코드와 함께 사용되며, JavaScript와 마찬가지로 TypeScript 코드는 JavaScript로 컴파일되어 실행됩니다. TypeScript는 개발자가 개발하고 유지 관리하는 대규모 애플리케이션을 보다 쉽게 작성하고 관리할 수 있도록 해줍니다. TypeScript는 정적 타입 검사.. 2023. 3. 9.
[VS Code]gulp he following tasks did not complete: default 에러해결 gulp 실행시 he following tasks did not complete: default 에러메시지가 보인다면, 아래 소스를 gulpfile.js로 만든후 다시 실행해보세요. const gulp = require('gulp'); gulp.task('default',async function() { console.log('gulp start'); }); gulp 2023. 3. 4.
[VS Code]git 소스제어 삭제 (git repository) VS Code에서 git 폴더는 삭제를 했는데 소스제어에서 계속 남아있을경우 삭제 방법입니다. 폴더는 삭제를 했지만, .git에 기존에 만들어논 폴더가 남아있기 때문입니다. 먼저 터미널에서 아래 명령어를 입력하세요. (cd를 이용해서 삭제했던 폴더 위치로 이동해주세요.) git rev-parse --show-toplevel 그리고 ls -a 명령어로 .git를 찾습니다. .git 폴더가 보인다면 아래명령어로 삭제해주세요. rm -r -f .git 그럼 사라진걸 확인할수 있습니다. 2023. 3. 3.
[VS Code]vscode 창이 예기치 않게 종료되었습니다(원인: 'killed', 코드: '3') 해결방법 vs code(visual studio code)에서 익스텐션 삭제 혹은 다른 이유로 vs code가 실행되지 않을때 해결방법입니다. 오류 메시지 "vscode 창이 예기치 않게 종료되었습니다(원인: 'killed', 코드: '3')" Mac 기준으로 설명을 드리자면, 터미널을 여시고 아래 명령어를 입력해주세요. open /Applications/Visual\ Studio\ Code.app -n 그리고 vs code를 재실행하면 됩니다. 윈도우에서도 명령 프롬프트를 열어서 같은 방법으로 하시면 되리라 예상해봅니다. 2023. 3. 3.
[VS Code]Visual Studio Code javascript 확장 익스텐션 code runner 설치 및 사용방법 Visual Studio Code에서 javascript 출력을 도와주는 code runner 확장 익스텐션 입니다. "code runner" 이라고 확장 익스텐션 검색창에 입력하시면 첫번째 나오는 확장프로그램입니다. 설치를 하시고, js 파일을 만드셔서 아래 문구를 작성해보세요. var a='hello world'; console.log(a); 그리고 단축키 + 마우스 우클릭으로 "code run"을 눌러 확인해보세요. 윈도우 : ctrl + alt + n 맥 : control + optiion + n 하단 출력부분에 출력이 됩니다. 크롬 개발자 도구로 하셔도 되지만, vs code로 바로 확인이 가능합니다. 2023. 2. 11.
[Typescript]타입 스크립트를 해야하는 이유 javascript 가 발전해가면서 ES5 ~ ESNext (2015년~ 현재까지) 프론트앤드와 백앤드에서 아주 중요한 언어이다. 하지만 javascript 는 타입(string)을 선언하지 않아도 유연하게 동작을 한다. 문제는 여러 개발자와 협업을 하면서 타입을 알수가 없어서 오류를 찾기가 쉽지가 않는 문제점이 있다. 하지만 타입스크립트는 타입을 지정해야하기 때문에, 함수가 어떻게 사용이 됐는지 오류는 무엇인지 쉽게 찾을수 있다. // javascript function makeWebmini(name, age){} // typescript function makeWebmini(name: string, age: number){} 타입을 지정해주므로 문자열인지 숫자인지 구분이 명확해진다. Typescrip.. 2023. 2. 11.
[Javascript]arrow function 화살표 함수 ESNest 에서는 function 키워드 외에도 화살표 => 로 함수를 선언할 수 있다. function add(a, b){ return a + b; } // 화살표 함수 const add = (a, b) => a + b 간단한 함수는 화살표 함수를 사용함으로해서 소스를 간결하게 만들수 있다. 2023. 2. 11.
[VS Code]비주얼코드 Live Server 확장팩 사용법 로컬에서 작업한 문서를 손쉽게 확인하려면 Live Server 확장팩을 설치해주시면 됩니다. 저장할때마다 새로고침을 할 필요성이 없습니다. html,css 작업물을 바로바로 확인한다고 보시면 됩니다. 먼저 확장 프로그램 설치하면 하단 우측에 Go Live 버튼이 생성됩니다. Go Live 버튼을 클릭하면 Port : 5500 으로 바뀝니다. 브라우저 주소창에 http://localhost:5500 으로 접속하시면 됩니다. 작업문서를 저장하면 새로고침을 안해도 실시간으로 변경되는 장점이 있습니다. 2023. 2. 5.
[사이트]naver.me로 단축 url 변경하는 방법 2011년 부터 네이버에서 단축 url 미투두(me2.do)를 서비스했다가 피싱문제로 2016년 8월 18일경 종료를 했습니다. 그후에 naver.me 단축 url를 서비스했었는데 이 서비스 또한 종료가 되었습니다. 그런데 naver.me 주소로 공유된 글들이 오픈채팅방에서 종종 보이실겁니다. 방법은 다음과 같습니다. 1. 네이버 앱을 실행합니다. 2. naver.me 주소로 변경할 사이트를 검색 or 주소로 접속합니다. 3. 하단에 공유하기 화살표 버튼을 클릭합니다. 4. 카톡으로 공유해서 보내면 naver.me로 url이 변경되서 공유가 됩니다. 네이버앱에서 화살표 버튼으로 공유하는게 포인트입니다. 2023. 1. 26.
[Vue.js]VUE3 ESlint 오류 관련들 ESlint는 코드 작성시 문법 오류 및 버그 확인 뿐만아니라 협업간에 작업 스타일과 들여쓰기등 규칙이 틀리면 잔소리하는 VS Code 확장팩인데요. 조그만 규칙이 틀리면 오류라고 판단합니다. 오류가 다양해서 공부삼아 정리를 해보고자 합니다. 1. vue/no-multiple-template-root 오류 error The template root requires exactly one element vue/no-multiple-template-root 와 안에 로 한번 묶어주세요. Home | About Sass VUE2버전에서는 안에 반드시 로 묶여있어야 에러가 나지 않습니다. 하지만 VUE3버전에서는 안에 로 묶여있지가 않는데, ESlint가 아직 버전업이 안되서 그렇다고 합니다. 2. .eslint.. 2023. 1. 23.
반응형

티스토리툴바