클로리셔 작은 공간

TypeScript [ 타입스크립트 ] Beginning - 터미널에서 node를 사용해서 자바스크립트로 컴파일 진행 방법 1. 터미널에서 "typeScript" 폴더를 만든다 - mkdir typeScript 입력 2. script.ts 타입스크립트 파일을 만든다. 3. script.js 파일안에 타입스크립트를 작성한 뒤, node script.ts 실행. * 타입스크립트 문법을 사용하고 터미널에서 node script.ts 실행하면 에러가 뜬다. 왜냐면 노드에서 타입스크립트를 다 이해할 수 없기때문이다 (브라우저 환경에서도 마찬가지) :: 그렇다면 어떻게?? 4. 터미널에 tsc script.ts를 실행한다. - script.js가 생성되면서 노드/브라우저에서 읽히는 자바스크립트로 변환된다. 여기서 ..

처음 CSS 작성할때는 여러줄로 정렬해서 쓰는 방법이 편했는데.. 사이트 스케일이 커지면서 오히려 한줄로 정렬 방법이 가독성이 좋아서 한줄로 작성하는 법이 익숙해졌다. 근데 가끔 CSS 수정하고 저장하면 갑자기 자동으로 여러줄로 정렬이 된적이 있다... 플러그인 prettier 확장프로그램이 문제인가 싶어서 옵션을 끄면서 알아보았는데 해결이 되지않았다. 알고보니 VS Code 비주얼스튜디오 프로그램 설정 옵션에서 수정해야하는걸 알게 되었다. :: 저장 시 자동 줄 정렬 끄기 1. 파일 -> 기본 설정 -> 설정으로 들어간다. 2. formatOnSave를 입력한다. 3. Format On Save 옵션 체크를 해제하면 더 이상 저장할 때 자동으로 정렬이 되지 않는다. 모두 잘 해결되셨길 바래요

" React The href attribute requires a valid value to be accessible. " What....t..h.. 프론트앤드 공부하다보면 영어의 소중함을 알게된다.. 하아.. 어쨌든, 여기 찾아온 사람들은 아마 이 경고문을 보고 찾아왔겠지? 그럼 왜 이런 상태가 나타나고있는지 알아보자! 프론트앤드 개발자가 HTML을 짜다보면 하이퍼링크를 적용시킬 때 태그를 많이 사용한다. 이런식이라던지 이런식이라던지 이런식이라던지 이렇게 적용했을 때 React에서 터미널에서 나타나는 Warring을 발견했을 것이다. 왜냐, 나도 발견하고나서 공부를 했기 땜시롱이지. The href attribute requires a valid value to be accessible. Provid..

문장이 길어질 경우 '...' 표시가 되도록 설정하는 방법에 대해 정리한다. CSS를 이용해서 많이 사용하는데 간혹 스크립트를 써야할때 있어서 이왕 정리할때 다 정리하려고 한다. 1. CSS - 1줄 말줄임표 설정하기 p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - 2줄 말줄임표 설정하기 p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: break-word; } See the Pen make Ellipsis using CS..

웹사이트 작업 중 부연설명이 필요한 부분으로 툴팁(tooltip)을 많이 사용한다. 예를 들면 웹페이지에서 단어위에 마우스를 올렸을 때 용어에 대한 부연 설명이 말풍선처럼 나타나는 효과이다. 일반적으로 HTML만 이용해서 툴팁 적용하는 방법은 간단하다. 1. 기본 HTML을 이용한 툴팁 만들기 프론트 개발자를 위한 웹 언어에는 2가지가 있습니다. HTML 은 웹페이지에 내용을 기술하고 뼈대라고 생각하면 됩니다. 이렇게하면 브라우저에 맞는 툴팁이 타나난다. 2. CSS를 이용해서 예쁜 툴팁 만들기 이런 방법 말고 툴팁을 예쁘게 CSS를 이용해서 꾸미는 방법도 알아보자. 프론트 개발자를 위한 웹 언어에는 2가지가 있습니다. HTMLHyperText Markup Language..

1. Rest Parameters [파라미터] : (...args) - 인자를 모두 배열 형태로 전달하는 파라미터 // * Rest 파라미터 사용하기 function printAll(...args) { //...args는 -> printAll('A', 'B', 'C')의 값이 담겨있는 배열 for (let i = 0; i < args.length; i++) { // printAll의 값이 length를 통해 3개의 배열이 i에 담긴다. console.log(args[i]); // 'A' // 'B' // 'C' } } printAll('A', 'B', 'C'); 2. for ( arg of args ) 사용한 더 간단한 작업방법 function printAll(...args) { // for ( arg ..

1. while 반복문 let i = 3; while (i > 0) { // false가 나올때까지 무한대로 계속 반복하는것. console.log(`while: ${i}`); i--; } // while: 3 // while: 2 // while: 1 while 반복문은 조건문이 만족하면 {} 블럭을 실행시킨다. 만약 블럭을 먼저 실행하고 조건문을 진행하고싶으면 do - while을 사용하면된다. 2. do-while 반복문 let i = 3; do { // 블럭을 먼저 실행하고 console.log(`do while: ${i}`); i--; } while (i > 0) // 조건문을 반복하는 방법 // do while: 3 // do while: 2 // do while: 1 3. for loop 문..

자바스크립트를 연습하다보면 생각보다 자주 사용되는 스크립트 중 하나인것 같다. 매번 찾았다가 이번에는 이해한것을 정리해서 올려놓으려고 한다. 01_ 자바스크립을 이용한 자식요소 찾기(childNodes) HTML aaa bbb ccc JS let parent = document.querySelector('#list-wrap') // 변수에 parent 요소를 저장 let allChildren = parent.childNodes; // 모든 자식들 찾아 변수에 담기 let first = parent.firstChild; // 첫번째 자식들 찾아 변수에 담기 let last = parent.lastChild; // 마지막 자식 찾아 변수에 담기 console.log(allChildren); console.l..

Click 얼마나 진행했는지 또는 본인의 스킬, 성장 등 어느정도인지 나타낼 수 있는 효과라고 생각한다. See the Pen LYpVYQN by chloe Kim (@chlolisher) on CodePen.