✨프론트엔드 프레임워크? 프레임워크란 원하는 기능 구현에 집증하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미합니다. 프론트엔드 프레임워크를 사용하여 코드를 재사용하여 많은 작업을 단순화하고 많은 시간을 절약할 수 있습니다. 그렇기 때문에 프론트엔드 개발자는 업무를 효율적으로 처리할 수 있는 좋은 프레임워크를 추구하게 됩니다. 37번 참고 2022.06.28 - [trending/Theory] - technical-interview technical-interview technical-interview 1) HTML5? HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 ‘HTML(Hyper Text Markup Language)’의 최신규격이다. 요즘은 뜻이 넓어..

✨로드맵이 필요한 이유? 프론트엔드로써 이제 내가 배울 길은 어떤 것들이 있을지 알아보고 싶을때 혹은, 내가 미쳐 놓친 부분들이 있는지 알아볼 수 있는 로드맵을 활용하면 좋습니다. 로드맵을 통해서 내가 어느정도 단계를 밟았는지 다음 필요한 목표와 기준을 잡고 계획적으로 단계를 밟아가기 수월합니다. 한단계 한단계 앞으로 나가는 것을 로드맵을 통해 체감할 수 있습니다. 프론트엔드 로드맵 2024.ver 최신 버전을 알아보도록 하겠습니다. 👉1.제로초의 프론트엔드 로드맵 프론트엔드 로드맵을 유튜브에 검색해보면 제일 첫번째로 확인할 수 있는 로드맵 입니다. 제로초님의 유튜브 로드맵 설명 영상을 함께 보시면 더 도움이 됩니다. 제로초님은 유튜브, 인프론 강의등 현직으로 활동하시는 분의 로드맵이니 참고하기 좋을 것..

많은 개발자들이 사용하고 있을 것이라 생각하고, 그만큼 인지도가 높다. 아이콘의 사이즈와 색상 변경, 아이콘 회전, 움직이는 아이콘, 아이콘의 border 조절 등의 기능으로 사용성이 좋다. 설치방법 https://fontawesome.com/v5/docs/web/use-with/react React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 아이콘 검색 https://fontawesome.com/v5.15/icons?d=gallery&p=1 Font Awesome The i..

{truncate(movie.overview, 100)} text-overflow : ellipsis; ellipsis는 잘라지는 부분에 말 줄임표(...)가 붙으면서 잘린 텍스트가 있다고 표시를 해줍니다. max-height: 40px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; 등등의 방법으로 넘치는 텍스트를 ... 처리할 수 있습니다. 리엑트에서 사용하는 방법 중 하나는 const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; }; {t..

str.substr(start[, length]) str.substring(indexStart[, indexEnd]) str.slice(beginIndex[, endIndex]) substr substr("시작 위치", "길이") 또는 substr("시작 위치") 길이!!!!!!! var str = '자바스크립트'; var result1 = str.substr(0, 2); //"자바" var result2 = str.substr(2, 4); //"스크립트" var result3 = str.substr(2); //"스크립트" substring substring("시작 위치", "종료 위치") 또는 substring("시작 위치") 종료 위치!!!!!!!!!! 음수 사용 시 -> 음수||0인 경우 인수가 뒤..

설치방법 npm i swiper 사용방법 https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com https://open-code.tech/en/post-1261/ Swiper Demo 19 Slider In this article, I am going to introduce 19 Demo slider which can be made by swiper.js. And you can refer the link below each demo to see how to ..

select { width: 200px; padding: .8em .5em; border: 1px solid #999; font-family: inherit; background: url('arrow.jpg') no-repeat 95% 50%; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }​ background url 로셀렉트박스의 화살표 넣고 appearance: none; 으로 원래있던 화살표 지우기 select:focus{ outline: 2px solid black; } 셀렉트박스 눌렀을때(포커스) 노란색 테두리 말고 검정색 아웃라인 보여지게 하기. optgroup See the Pen..

technical-interview 1) HTML5? HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 ‘HTML(Hyper Text Markup Language)’의 최신규격이다. 요즘은 뜻이 넓어져 최신 웹 기술(HTML Living Standard, CSS3+, ECMAScript 6+ 등)을 통틀어 칭하기도 한다. HTML5가 이전 버전보다 개선된 점 HTML5 문서부터는 균형 잡히고 한눈에 보기 쉽도록 작성이 가능하게 되었으며, 비디오, 오디오 등 다양한 부가기능과 멀티미디어 컨텐츠를 플러그인 없이 브라우저에서 쉽게 볼 수 있다 2) CSS3? CSS는 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되어 포..

깃허브에 파일 올리기https://cystory.tistory.com/48 GitHub에 파일 올리고 Pages 배포하기GitHub에 파일 올리기 1. github에 저장소 생성 2. 작업 프로젝트 디렉터리에서 터미널 실행 3. 아래 명령어 차례대로 실행 4. push까지 완료되면 github 페이지로 돌아가서 새로고침 git init - 프로젝트 폴cystory.tistory.com 먼저 위와 같은 방법으로 깃허브에 파일을 올려줍니다. 깃허브 페이지 배포같은 경우에도 위 방법과 비슷한데 vue 같은 경우에는 깃허브 페이지 배포할때 방법이 조금 다릅니다. vue.js > 깃허브 페이지 배포하기1. 해당하는 github 저장소의 설정 > Pages > Branch > None 에서 master 로 변경 및..

간단하게 설명을 위한 예제만 참고되어 있을 수 있으며, 해당 메서드에 대한 자세한 기능들은 아래 사이트를 활용하시면 좋을 것 같습니다. https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org join() 배열의 모든 요소 합치기 join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다 예제) const elements = ['Fire', 'Air', 'Water'];..

선택자 그룹화 (명시도 높음) :where() :where 는 여러 선택자를 적용시켜야 하는 코드를 그룹화 시켜 코드를 줄여줍니다. :where 기본 사용 예제1) button:focus, button:hover, button:active { background: blue; } 위 코드와 아래 코드는 동일한 작동을 합니다. button:where(:focus, :hover, :active) { background: blue; } :where 기본 사용 예제2) article h2, article h3, article p { color: blue; } 위 코드와 아래 코드는 동일한 작동을 합니다. article :where(h2, h3, p) { color: blue; } :where 는 이중으로 사용을 ..

px, rem, em? css를 작성하면서 폰트 단위중에 px, rem, em이라는 단위가 있다는 것은 다들 알고있는 사실일 것이다. 그리고 나 또한 rem은 브라우저의 루트 글꼴 크기의 배수로 적용이 되고 (루트 글꼴 크기가 16px 일 경우 1rem = 16px) em은 텍스트를 포함하고 있는 엘리먼트에 배수로 적용된 다는 것 (컨테이너 내에 글꼴 크기가 2rem = 32px로 되어있다면 해당 컨테이너 내에서 1em = 32px) 은 공부를 통해 알게 되었다. 하지만 이렇게 봤을 때는 복잡하고 직관적이지 못한 rem을 사용해서 디테일한 px를 조정할때 음.. 29px 정도 하고 싶은데 루트 글꼴 크기가 16px니까.. 29px를 하려면 몇 rem 인것이지?.. 라는 헷갈림을 하고 싶지 않았기 때문에 ..

const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }) // 3가지문법 //window.scrollTo(x좌표, y좌표) //window.scrollTo({top, left, behavior}) //window.scroll( top, left, behavior );

로그인 페이지를 만드는 중 구현하기로 한 필수사항 중 인풋창을 클릭했을 때 밑줄 색이 바뀌고 인풋 바깥인 메인페이지를 다시 클릭했을 때 원래 색상으로 돌아오게 하는 기능이 있었다. 인풋창을 클릭할때마다 이벤트가 발생하는 토글 기능이 아닌 활성화된 기능을 다시 해제시켜야 하는 기능을 구현해야 했다. 1. onFocus onFocus 이벤트는 엘리먼트(또는 자식 엘리먼트)가 포커스 될때 호출된다. 예를들어 텍스트 인풋을 클릭했을 때 호출된다. console.log('Focused on input')} input창을 클릭했을 때 개발자도구에 'on focuesd on input' 이 찍히는 것을 확인할 수 있다. 2. onBlur onBlur 이벤트는 엘리먼트(또는 자식 엘리먼트)에서 포커스가 사라졌을 때 호..

원래 호출하던 코드 const getMovies = () => { const url = `https://api.themoviedb.org/3/${genre}/${id}?api_key=c4e59022826dc465ea5620d6adaa6813&language=ko`; axios .get(url) .then((response) => { setMovies(response.data); console.log(response.data); setLoding(false); }) .catch((error) => { console.log("실패"); }); }; useEffect(() => { getMovies(); }, []); axios api 여러개 호출하기 function getUserAccount() { retu..

리엑트 영화 프로젝트를 진행하려고 합니다. 영화 api를 호출하여 데이터에 있는 영화 정보들을 리스트화 시키고 해당 제목을 클릭하면 해당 영화의 자세한 정보가 나올 수 있도록 해야겠지요. 먼저, 영화진흥위원회 오픈 api 사용방법입니다. 영화진흥위원회 api 사용방법 https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do 영화진흥위원회 오픈API OPEN API 서비스 영화진흥위원회 영화관입장권통합전산망에서 제공하는 오픈API 서비스로 더욱 풍요롭고 편안한 영화 서비스를 즐겨보세요. www.kobis.or.kr 영화진흥위원회 사이트에 접속하셔서 회원가입 및 로그인을 해줍니다. 메뉴에 있는 키/발급을 들어가셔서 키를 발급해 줍니다. * 어렵지 않습니다. 사용제..

React에서는 보통 CSS-in-JS을 통해 스타일 작업을 진행한다. 그중에서 styled-components, emotion이 가장 유명하고 많이 사용된다. 하지만 도대체 차이가 뭘까? 제공하는 기능 비교 libraryAttaching PropsMedia QueriesGlobal StylesNested SelectorsServer Side RenderingTheming SupportComposition styled-components Yes Yes Yes Yes Yes Yes Yes emotion Yes Yes Yes Yes Yes Yes Yes 전반적인 스타일 기능은 똑같다. 둘다 sass문법을 사용하기에 스타일 문법에도 차이가 없다. 사용 트랜드 styled-componets가 더 많이 사용되고 ..

GitHub에 파일 올리기1. github에 저장소 생성 2. 작업 프로젝트 디렉터리에서 터미널 실행 3. 아래 명령어 차례대로 실행 4. push까지 완료되면 github 페이지로 돌아가서 새로고침git init - 프로젝트 폴더에 git 설치 git add * - .gitignore에 입력되어 있는 파일 제외하고 모두 저장소에 올리기 git commit -m 'first commit' - commit 메시지 작성 git remote add origin https://github.com/cheryea/react-github-pages.git - git 저장소 연결 git push -u origin master - git master로 push git initgit add *git commit..

깃 브랜치를 삭제하는 법은 간단하다. 로컬과 원격 두군데에서 모두 브랜치를 삭제하는 법을 알아보자. 간단히 요약하자면 아래와 같다. // 로컬에서 브랜치 삭제하기 명령어 git branch -d localBranchName(로컬의 브랜치 이름) // 원격에서 브랜치 삭제하기 명령어 git push origin --delete remoteBranchName(원격 브랜치 이름) 브랜치를 삭제해야 하는 경우 보통 하나의 깃 리포(repository)만 해도 브랜치가 여러개 있다. 브랜치를 이용하면 메인 코드베이스를 건드리지 않으면서 다양한 기능들이나 여러가지 버그들을 픽스할 수 있다. 보통의 경우 리포는 하나의 메인 브랜치에 메인 코드베이스가 있고 개발자들은 각자 하는 일을 위해서 브랜치를 만든다. 대부분의 ..

React는 중괄호{} 로 감싸지 않고, 나머지는 감싸서 쓰는데 둘의 차이는 뭘까? import React, { useEffect,useState } from 'react' 정답은 받아오는 모듈에서 보내주는 export 방식의 차이다. 아래 예시를 보면서 이해해보자. 먼저 app.js 라는 파일을 만들고 아래처럼 선언해준다. // app.js const a = 1; const b = 2; export {a}; export const c = 3; export default b; app.js 코드를 보면 3가지 방식으로 export를 해줬다. a는 객체(중괄호{})에 담아서 export를 해줬고, 변수 c는 선언을 해주고 초기화를 시켜줌과 동시에 export 해줬다. b는 앞에 default라는 키워드를 붙..

import React from ‘react’? 브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해주어야한다. 리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기 위해서 import React from ‘react’를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다. 1. Hello world! (JSX) import React from 'react' import Rea..

1. css Module이 아닐때 App.js import React from "react"; import "./App.css"; const App = () => { return ( I have two Classes ); }; export default App; App.css .container1{ border: 1px solid black; color: white } .container2{ background: blue; } 2. css Module일 때 1) 첫 번째 방법 App.js import React from "react"; import styles from "./App.module.css"; const App = () => { return ( I have two Classes ); }; ex..

https://webdesign.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048 반드시 기억해야 하는 CSS 선택자 30개 여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던 webdesign.tutsplus.com

https://heojju.tistory.com/14 [JavaScript] 자바스크립트에서 클래스 이름(class name) 추가/삭제 var element = document.getElementById('element'); ▤ 클래스 추가 [add] element.classList.add('className'); // 클래스에 className 이 추가(기존 클래스 존재) element.classList.add('className1 classN.. heojju.tistory.com https://www.howdy-mj.me/javascript/var-let-const/ var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프 자바스크립트에서 var로 변수 선언이 가능했는데, 왜 ..

scroll bar 디자인 ::-webkit-scrollbar { width: 5.2px; } /* 스크롤 바 */ ::-webkit-scrollbar-track { background-color:#fff; } /* 스크롤 바 밑의 배경 */ ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; } /* 실질적 스크롤 바 */ ::-webkit-scrollbar-thumb:hover { background: #404040; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */ ::-webkit-scrollbar-thumb:active { background: #808080; } /* 실질적 스크롤 바를 클릭할 때 */ ::-webk..

vertical-align는 텍스트 혹은 이미지와 텍스트 조합에서 세로축에 대한 정렬을 할 수 있습니다. 부모 요소는 반드시 inline 또는 inline-block 요소여야 합니다. 텍스트로 이루어진 문장에서 사용되어지거나 이미지와 텍스트가 같이 있는 경우에 사용됩니다. See the Pen vertical-align (image-text) by 이상호 (@Leesangho) on CodePen. https://codepen.io/Leesangho/pen/eYrNGgR baseline : 기본값. 소문자 x를 기준으로 하단 라인에 맞춤 top : 부모 요소의 상단에 맞춤 middle : 부모 요소의 중앙에 맞춤 bottom : 부모 요소의 하단에 맞춤 sub : 아래첨자 기준으로 맞춤 super : 위..

깃허브 : https://github.com/cheryea/personal-study/issues?q=is%3Aopen+is%3Aissue+label%3AJavaScript 변수 var ul=document.querySelectorAll('.ul'); 토글방식으로 클래스 주기 document.getElementById(' ').classList.toggle(' '); 스타일 속성 변경 document.getElementById(" ").style.display = " "; 클래스 주기 document.getElementById(" ").className = " "; 클래스 빼기 변수.classList.remove(' '); 클래스 주기 ( 클래스 여러개 주기 가능 ) 변수.this.classList.ad..

See the Pen 가상 클래스 셀렉터(Pseudo-classes) by 이상호 (@Leesangho) on CodePen. :hover :hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다. :active :active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. :checked :checked CSS 의사 클래스 선택자는 선택했거나 on 상태인 라디오(), 체크박스( (en-US)), 옵션( 요소를 나타냅니다. :focus CSS :focus 의사 클래스는 ..

선택 된 여러 요소들은 배열로 정의됩니다. 예시 HTML의 태그 여러개를 모두 선택합니다. var matches = document.querySelectorAll("p"); 태그의 css클래스명중 note, alert 을 선택합니다. var matches = document.querySelectorAll("div.note, div.alert"); ID #test를 선택합니다. 선택한 ID가 들어있는 변수를 불러올 수 있습니다. 변수안의 선택된 ID중의 div 태그 클래스명을 선택해서 그 안의 요소인 태그를 선택합니다. var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighte..

aos 홈페이지 : https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io aos 깃허브 : https://github.com/michalsnik/aos Installation CDN ※ AOS 라이브러리 애니메이션은 블록 태그(Block Tag)에만 적용 가능합니다. 인라인 태그(Inline Tag)에는 효과가 적용되지 않습니다. data-aos 옵션 속성 AOS 라이브러리 코드 사용방법을 알았으니, 이제 API 옵션에 대해 알아보겠습니다. 옵션 속성이 무엇인지 정확히 알아야 제대로 사용할 수 있기 때문입니다. 옵션 속성도 정확히..

https://codepen.io/ylem76 ylem76 on CodePen codepen.io https://codepen.io/sinbi/pens/public sinbi on CodePen codepen.io

설명 https://m.blog.naver.com/okay1028/222027750559 [JS/jQ] #Slick Slide(이미지 슬라이드) 적용하기 Slick slide를 배웠다. #이미지_슬라이드 적용하는 법! 1. CDN을 검색하여 준다. 나는 첫 번째 페이지... blog.naver.com See the Pen 슬릭 슬라이더 by 이상호 (@Leesangho) on CodePen. https://codepen.io/Leesangho/pen/poVzKgp?editors=1100

목차 사용 방법 1단계: 연결(두 가지 방법) 스와이프 슬라이드 설치 https://swiperjs.com/get-started#installation 다운로드 버전 https://unpkg.com/browse/swiper@8.3.2/ 2단계: 기본 레이아웃 추가 스와이프 데모 이용 https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 스와이프 데모 깃허브 https://github.com/nolimits4web/Swiper/tree/master/demos..