TREASURE408 [JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo() JQuery 요소 이동 원하는 위치에 어떠한 태그를 삽입해야 하는경우가 종종 있는데 오늘은 JQuery를 사용하여 위치 이동을 시켜보도록 하겠습니다. 이동시킬 요소 위 코드에서 onerror는 src의 이미지가 오류가 났을 때, 대체해주는 태그입니다. 삽입될 요소 이동시킬 요소를 만들었으니, 이제 이동이 이뤄질 위치 태그를 만들어 줍니다. 자바스크립트 div나 특정한 요소 안에 id를 만들고 자바스크립트를 이용해 이 div안에 방금 만든 img 태그를 넣어주기만 하면 됩니다. $(".target").insertBefore("source"); 그럼 아래와 같이 사용하면 되겠네요! $(".img").insertBefore("#comment-blog-img"); 여기서 .insertBefore은 요소의 삽입 .. FRONT-END/JAVASCRIPT 2022. 8. 23. GitHub - git commit log 잔디밭 날짜 변경 하는 방법 자세하게 설명! GitHub 커밋 날짜 수정 GitHub에 Commit해야할 날짜를 지나쳐 잔디를 채우지 못했을때, 날짜를 조작하여 빈 잔디를 심을수 있는 방법에 대해 초보자도 쉽게 할 수 있을 만큼 자세하게 알아보도록 하겠습니다. 새로운 Repository 더보기 Solution Repository 생성 GitHub의 우측 상단에 + 버튼을 클릭하고 new repository를 눌러 새로운 Repository를 생성해 줍니다. Repository를 생성할 때 사용자가 원하는 Repository name을 입력 후, Add a README file을 체크해 주고 Create repository버튼을 클릭해 생성해줍니다. 생성된 Repository의 Code 부분을 클릭해 주소를 복사해줍니다. 터미널 실행 이제 Comma.. FRONT-END/VS & GITHUB 2022. 8. 22. (JS) 카운트 후, 특정 요소 나타나는 스크립트 Button을 누르면 카운터가 진행 된 후, 숨겨놓은 요소가 나타나게 해주는 방법에 대해 알아보도록 하겠습니다. 카운트 후, 특정 요소 나타나는 스크립트 html container요소는 display: none으로 처리 하고, click-link를 누르면 li-title의 text가 지정한 문구로 바뀌며 카운트 다운 후, container 요소가 나타나게 됩니다. 버튼을 클릭하면 링크가 나타납니다. 버튼 보여질 div 요소 JS 이제 javascript로 해당 이벤트를 구현하면 됩니다. button에 onclick 이벤트 대신에 자바스크립트 안에 직접 넣어주고 id만 사용하여 구현될 수 있도록 해줬습니다. 그리고 countDownDate 변수 10초 후 container의 display가 flex로 바뀌.. FRONT-END/JAVASCRIPT 2022. 8. 19. [JS] Lottie Animation 사용 방법 Lottie Animation을 Json 형태로 가져와 벡터 이미지를 Web에 뿌려줄 수 있습니다. 오늘은 Lottie Animation 사용하는 방법에 대해 알아 보도록 하겠습니다. Lottie Animation LottieA Animation은 에어비앤비에서 개발한 라이브러리입니다. After Effects로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 html, webflow, android, iOS 환경에서 이용할 수 있습니다. Lottie Animation은 벡터 기반의 애니메이션인데 즉, SVG로 저장됩니다. TIP 벡터 이미지란? 벡터 이미지는 png, jpg등과 다르게 용량이 적고 해상도 저하가 일어나지 않는다는 장점이 있습니다. Lottie 사용 방법 lo.. FRONT-END/JAVASCRIPT 2022. 8. 16. 마블 영화 순서 - 마블 세계관 및 예정작 2022년 (사이트 링크 포함) 2022 마블 영화 순서 세계관 마블 Disney Plus를 구독하면서 마블 영화를 순서대로 볼까 해서 마블 세계관 순서를 포스팅하게 됐습니다. 첫 마블 시리즈인 아이언맨부터 최근에 개봉한 토르: 러브 앤 썬더(22.07.06)까지 개봉한 상태이고, 개봉 예정인 영화도 공식적으로 발표된 상황이네요! 그리고, MCU가 발표한 공식 연대순도 있었습니다. 이 포스팅은 마블 영화 순서 대로 보는 방법과 MCU에서 공식으로 발표한 마블 영화 연대 순서대로 보는 방법에 대해 사진 및 표로 정리해 보았습니다. OTT 서비스가 존재한다면 링크로 연결 해 놓았으니, 링크를 타고 보시면 될거같습니다. 참고로 아래 링크들은 디즈니 플러스와 넷플릭스 링크로 연결되어 있습니다. Release Update 2022.08.12 -.. PLAY/Movie 2022. 8. 12. (JAVASCRIPT) 타입 Typeof Javascript의 타입에 대해 알아보고 typeof를 통해 어떤식으로 타입이 결정되는지 알아보도록 하겠습니다. Type 자바스크립트는 동적으로 실행할 때 할당된 값에 따라 타입이 변경되는 동적(Dynamically Typed)인 타입입니다. 또, 변수에 어떤 값이 들어가냐에 따라 변하는 약한 타입(Weakly Typed)입니다. JAVASCRIPT - 동적인 타입(Dynamically Typed) - 약한 타입(Weakly Typed) typeof typeof를 통해 타입을 확인할 수 도 있습니다. let someVariable console.log(typeof someVariable); //undefined someVariable = ""; console.log(typeof someVariable).. FRONT-END/JAVASCRIPT 2022. 8. 11. (JAVASCRIPT) 상수와 변수 Const - SNAKE_CASE 재할당이 불가능한 상수와 변수 const에 대해 알아보도록 하겠습니다. 상수와 변수 const const는 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 재할당이 가능한 let과 재할당이 불가능한 const의 차이를 아래에서 확인할 수 있습니다. // let 재할당 가능한 let name = "서근"; console.log(name); name = "미진"; console.log(name); // const 재할당이 불가능한 // 1. 상수 // 2. 상수변수 혹은 변수 const seogun = "서근"; console.log('seogun:', seogun); seogun = "미진"; // console.log(seogun); //TypeErro.. FRONT-END/JAVASCRIPT 2022. 8. 11. (MAC) 맥북 메모장 먹통 메모 없음 해결 방법 맥북의 메모장이 갑자기 먹통이되며 메모 없음 이라는 메세지와 함께 새로운 메모도 작성할 수 없을 경우 간단하게 해결하는 방법에 대해 알아보도록 하겠습니다. 메모장 먹통 현상 저는 위와 같은 현상을 겪게 되었고, 새로운 메모도 작성할 수 없는 상태였습니다. 해결하는 방법은 아주 간단하게 맥북에 로그인되어있는 Apple ID를 로그아웃하고 재 로그인해주시기만 하면 됩니다. Mac에서 로그아웃하기 Apple 메뉴() ➜ 시스템 환경설정을 선택합니다. 'Apple ID'를 클릭한 후 '요약'을 클릭합니다. '로그아웃'을 클릭합니다. 로그아웃하기 전에 iCloud 데이터의 복사본을 Mac에 유지하려면 해당 체크상자를 선택해야 합니다. 그런 다음 '복사본 유지'를 클릭합니다. Safari 암호의 복사본을 Mac에.. TIP/iOS & MacOS TIp 2022. 8. 11. 해외 유튜브 영어 자막 해결하는 방법 Language Reactor 확장 프로그램 세계 인구 중 약 65%가 크롬을 사용하는 것으로 알려져 있는데 그만큼 개발들도 크롬을 선택해서 사용한다는 의미이기도 합니다. 오늘은 크롬을 많이 사용하는 개발자들이 해외 개발자들이 올려놓은 유튜브를 한글자막과 함께 보는 방법에 대해 알아보도록 하겠습니다. 이 확장 프로그램은 비단 개발자들 뿐만 아니라 영어 공부를 하는 분들에게도 아주 유용한 확장 프로그램입니다. Language Reactor Language Reactor 확장 프로그램을 사용하기 위해서는 크롬 또는 웨일이 기본적으로 설치되어 있어야 합니다. 아래 링크를 통해 Language Reactor를 설치해주시기만 하면 됩니다. Language Reactor 당신이 공부하는 언어로 영화와 드라마를 보면서 자신의 언어실력을 즐겁고 효과적인 방법으로.. TIP/Etc Tip 2022. 8. 9. (JAVASCRIPT) 원시 타입과 객체 타입 차이 정리 데이터 타입 객체는 Object라고 불립니다. 이번에는 데이터 타입인 단일 데이터와 복합 데이터의 차이에 대해 알아보도록 하겠습니다. 단일 데이터 원시 타입 단일한 값을 하나씩 담을 수 있는 단일 데이터인 원시(primitive) 타입. 단일 데이터는 원시 타입인 숫자 타입, 문자열 타입, 불리언 타입, null 타입, undefined 타입, symbol 타입이 있습니다. let Alphabet = ['A', 'B', 'C']; 단일 데이터인 원시 타입이 메모리에 어떻게 보관이 되냐 하면, 변수에 값을 할당하게 되면 메모리 셀에 값이 들어가게 되고, 변수는 값이 들어있는 메모리셀의 주소를 가리키게 됩니다. 복합 데이터 객체 타입 연관된 데이터를 함께 묶어서 보관할 수 있는 복합 데이터인 객체(objec.. FRONT-END/JAVASCRIPT 2022. 8. 9. (JAVASCRIPT) 단일 데이터 타입 - null과 undefined 타입 빈 데이터 타입 데이터 타입에는 빈 데이터 타입이 있는데 바로 null과 undefiend 타입 입니다. 오늘은 이 빈 데이터 타입에 대해 알아보도록 하겠습니다. null / undefined 비교 undefined: 값이 있는지 없는지 확정이 되지 않은 상태 value: 값이 있는 상태 null: 값이 확실히 없는 상태 예를 들어 다음과 같은 값이 들어 있지 않은 코드가 있을 때를 가정해서 콘솔 로그를 찍어보면 undefined가 출력되는 것을 확인할 수 있습니다. 값이 아직 있는지 없는지 모르기 때문이죠. let someIdCard console.log(someIdCard) //undefined 반대로 null을 넣어주면 값은 undefined를 출력하는 것이 아닌 null을 출력하게 됩니다. let.. FRONT-END/JAVASCRIPT 2022. 8. 9. (JAVASCRIPT) 단일 데이터 타입 - 불리언 타입 (Boolean) 데이터 타입 중에 하나인 불리언 타입에 대해 알아보도록 하겠습니다. 불리언 타입 불리언(Boolean)은 참/거짓을 의미하는 true와 false 두 개의 값을 가지고 있는 데이터 타입입니다. 숫자 0은 false로 변환되고 0 이외의 모든 숫자는 true로 변환 됩니다. 문자열은 False 이다! 불리언 값을 변수의 값으로 할당하여 사용할 때 큰따옴표 및 작은 따옴표 안에 값을 넣지 않도록 주의해야 합니다. let isTrue = true; let isFalse = false; console.log('isTrue is', isTrue); console.log('isFalse is', isFalse); /* isTrue is true isFalse is false */ Truthy & Falsy 불리언에.. FRONT-END/JAVASCRIPT 2022. 8. 9. (JAVASCRIPT) 단일 데이터 타입 - 문자열 타입 (String) 데이터 타입 중에 하나인 문자열 타입에 대해 알아보도록 하겠습니다. 문자열 타입 Javascript 에서 문자열을 사용하는 방법은 여러 가지가 있습니다. "" 큰따옴표 '' 작은따옴표 `` back-quote let string = '서근 개발 노트'; let string2 = "서근 개발 노트" string = `서근 개발 노트 입니다.` console.log(string); console.log(string2); /* 서근 개발 노트 입니다. 서근 개발 노트 */ 특수문자 출력 문자열 안에 작은 또는 큰따옴표를 사용하고 싶다면 밖에 오는 기호를 반전시켜주면 됩니다. let name = '"서근 입니다."' console.log(name) name = "'미진 입니다.'" console.log(name.. FRONT-END/JAVASCRIPT 2022. 8. 9. Visual Studio 깃 활용 - 커밋 하는 방법: 2022 Ver Visual Studio Visual Studio를 사용해서 Github에 쉽게 소스를 커밋할 수 있습니다. 오늘은 새 폴더를 만들고 깃 환경을 구성 후, 커밋하는 방법까지 알아보도록 하겠습니다. 깃 환경 구성 새 폴더를 작업 폴더로 추가했을 때, Visual Studio에서 바로 초기화하고 깃허브에 연결하는 방법은 다음과 같습니다. 1. 파일 탐색기 또는 Finder에서 소스를 저장할 새 폴더를 생성합니다. 2. Visual Studio 를 실행 후 맥북 기준 Command ⌘ + O 를 눌러 생성한 폴더를 선택해줍니다. 3.Visual Studio 의 왼쪽 사이드바에 생성한 폴더 (필자는 GITTEST 폴더)가 나와있는 것을 확인하고, 아래 화살표로 표시한 아이콘을 눌러 줍니다. 4. 아직 깃을 사용.. FRONT-END/VS & GITHUB 2022. 8. 8. (맥, 윈도우) Visual Studio - 'Git 리포지토리에 활성 변경 내용이 너무 많습니다.' 해결 방법 오늘은 Visual Studio에서 커밋 리포지토리 초기화 오류가 나타날 때 해결하는 방법에 대해 알아보겠습니다. Visual Studio 'Git 리포지토리에 활성 변경 내용이 너무 많습니다. Git 기능의 하위 집합만 사용할 수 있도록 설정됩니다.' 라는 오류가 발생할 때 해결 하는 방법은 아주 간단합니다. Window 해결방법 윈도우는 .git 폴더를 찾아 해당 파일들을 모두 삭제해 주시면 됩니다. 해당 폴더에 숨겨진 파일을 모두 보이게 한 뒤, .git 폴더를 삭제해 줍니다. .git 폴더는 깃을 사용할 때 생성되는 폴더인데, 깃을 초기화하는 방식으로 다시 만들 수 있기 때문에 삭제해도 무방한 폴더입니다. Mac 해결방법 맥 인경우에는 더 간단한데, Command + Spacebar를 입력하고 T.. FRONT-END/VS & GITHUB 2022. 8. 7. 이전 1 ··· 3 4 5 6 7 8 9 ··· 28 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기