티스토리

박지연의 코딩이야기

검색하기

블로그 홈

박지연의 코딩이야기

coogooo.tistory.com/m

coogooo 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

리액트 setState 란? 앞서 동적인 UI를 만들기 위해서 render 함수에 ReactDOM.render(, root); 코드를 넣어주어서상태값이 바뀔때마다 render함수를 호출해주는 코드를 짰었다. 이전글 참고https://coogooo.tistory.com/39 동적인 UI를 구현하는 핵심 요소 위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다" data-og-host="coogooo.tistory.com" data-og-source-url="https://coogooo.tistory.com/39" data-og-url="https://coogooo.tistory.com/39" data-og-image="https://scrap.kakaocdn.net/dn/wcPUn/hyX0yEsk4.. 공감수 0 댓글수 0 2025. 1. 14.
리액트 State란? 리액트(React)에서 State는컴포넌트의 동적인 데이터를 관리하는 데 사용되는 객체=> 동적인 UI를 구현하는 핵심 요소 위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다. 1번째 리액트 UI컴포넌트를 만들어준다. const Container = () => ( div> h3>Total Clicks : {counter}h3> button onClick={countUp}>CLick mebutton> div> ); 1번째버튼을 누르면 숫자 상태가 변경되어야 하기에 let counter = 0; 초기값 '0'을 하나 선언해준다. //2번째 let counter = 0; 2번째증가되는 함수를 만들어 .. 공감수 0 댓글수 0 2025. 1. 14.
리액트 JSX 문법 기존 리액트 렌더링방식은 React.createElement를 생성해서 root로 렌더링 해주는 방식이였다. 하지만 이 코드는 직관적이지 못하다.container에 넣기 위해서 하나하나 엘리먼트들을 체크해서 넣어야하기때문 더 직관적인 코드 문법이 존재한다.그것이 JSX (Javascript XML) 앞서 리액트 장점4번에서 봤듯이 JSX 사용함으로써 직관적인 코드 사용과 동적 렌더링이 가능해진다.4. JSX (Javascript XML) (직관적문법 / 동적 렌더링 )=> Javascript 결합 코드로 이해하기 쉬움 얼마나 직관적인지 한번 차이를 느껴보자 기존 리액트엘리먼트 생성 코드는 아래와 같다. const btn = React.createElement( "button", .. 공감수 2 댓글수 0 2025. 1. 10.
리액트 엘리먼트 렌더링 기초 리액트(React)는페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다 장점1. 컴포넌트 기반 아키텍처 ( 재사용성 / 모듈화 ) => 속도 증가 및 유지보수 용이 2. 가상DOM (성능최적화 / 효율성 ) => 가상 DOM 에서 먼저 반영 후 변경된 부분만 실제 DOM에 업데이트 3. 단방향 데이터 흐름 (예측가능성 ) => 부모에서 자식으로 데이터 전달 / 상태 관리가 명확하여 버그줄이고 디버깅이 쉬움 4. JSX (Javascript XML) (직관적문법 / 동적 렌더링 ) => Javascript 결합 코드로 이해하기 쉬움 5. 광범위한 커뮤니티 (광범위한 라이브러리) => 신속한 업데이트 및 방대한 자료를 통해 문제해결이 용이 6. Reac.. 공감수 0 댓글수 0 2025. 1. 10.
className vs classList (JavaScript 코드 예제) HTML Hello World! Javascript 1 ) className 속성 사용 // 요소 선택const element = document.querySelector(".old-class");// 클래스 이름 변경element.className = "new-class"; 2) classList 속성을 사용 2-1. 클래스 추가 (add) element.classList.add("new-class"); 2.2. 클래스 제거 (remove)element.classList.remove("old-class"); 2.3. 클래스 교체 (replace)element.classList.replace("old-class", "new-class"); 2.4. 클래스 토글 (toggle)element.cla.. 공감수 0 댓글수 0 2024. 12. 10.
slice 메서드 :: 특정 클래스 스타일 변경 (JavaScript 코드 예제) HTML HTML CSS CSS3 JavaScript jQuery Javascriptvar li = document.querySelectorAll("#tutorial li");for (var i = 0; i JavaScript 코드 설명querySelectorAll로 모든 요소 선택:document.querySelectorAll("#tutorial li")는 #tutorial ID를 가진 의 모든 요소를 NodeList로 반환합니다.for 루프로 각 요소 순회:루프를 사용해 각 요소의 클래스 이름(className)을 확인합니다.slice 메서드로 문자열 자르기:className.slice(0, 3)로 클래스 이름의 처음 3문자를 추출합니다.조건문 if (na.. 공감수 0 댓글수 0 2024. 12. 10.
DOM 다루기 :: 모든 li 태그 색상 변경 방법 (JavaScript 코드 예제) HTML 1 2 3 4 Javascript // 모든 li 태그를 가져옵니다.var items = document.getElementsByTagName("li");// 각 li 태그의 색상을 변경합니다.for (var i = 0; i 설명document.getElementsByTagName("li")는 모든 요소를 HTMLCollection으로 반환for 루프를 통해 모든 요소를 순회하며 스타일을 변경items[i].style.color = "red";로 각 요소의 텍스트 색상을 빨간색으로 설정함결과페이지를 실행하면 요소의 텍스트 색상이 빨간색으로 변경됩니다! 😊 추가 Tip (코드 효율성)최신 JavaScript에서는 querySelectorAll과 forEach를 사용.. 공감수 0 댓글수 0 2024. 12. 10.
SCSS 컴파일 시 .map 파일 없애는 법 앞서서 Scss 아키텍처(구조) 짜는 방법에 대해서 알아봤는데요https://coogooo.tistory.com/32 scss를 컴파일하는 과정에서 .map파일도 같이 생성되게 됩니다.Q. 왜 .map파일이 같이 생성되며 생성되는 이유가 뭘까요? .map 파일은 원본 SCSS 파일과 생성된 CSS 파일 사이의 매핑 정보를 포함합니다.이렇게 함으로써 디버깅 시에 브라우저 개발자 도구에서 원본 SCSS 파일의 위치를 쉽게 추적할 수 있습니다. 소스맵이 필요한 이유는 크게 3가지가 있습니다. 디버깅 용이성: 오류를 찾을 때 원본 SCSS 코드와 어떤 부분이 대응되는지 알기 어려워집니다.소스맵은 이를 해결해줍니다.브라우저에서의 개발자 도구 사용: 개발자 도구에서 .map 파일을 통해, 컴파일된 CSS 코드가 실.. 공감수 1 댓글수 0 2024. 12. 9.
VS Code에서 SCSS(Sass)로 효율적인 소스 변경 및 유지보수 관리 대규모 프로젝트에서 소스 관리가 어려워지는 상황을 방지하기 위해,퍼블리셔가 초기부터 체계적으로 컴포넌트를 관리하고효율적으로 컴파일할 수 있는 SCSS를 소개해 드리려고 합니다. 퍼블리셔는 협업 시 작업 병합과 충돌 해결을 돕는 형상관리가 필수적이며, 대규모 프로젝트에서는 그 중요성이 더욱 커집니다. 퍼블리셔에게 필요한 주요 역량은 웹/소프트웨어 프로젝트의 협업과 파일 관리입니다.형상관리는 이러한 작업물을 체계적으로 관리하고, 협업을 효율적으로 지원하는 중요한 도구입니다.이러한 효율적인 형상관리를 위해서 많은 퍼블리셔들이 Scss를 사용합니다.Scss는 css를 더 체계적으로 관리할 수 있도록 컴파일이라는 작업을 거칩니다. 먼저 scss 설치하는 방법은 다른 블로그에도 잘설명이 되어있어서 링크로 대.. 공감수 2 댓글수 1 2024. 12. 9.
simpleBar.js 사용하여 스크롤바 자동 숨김 See the Pen Untitled by allis (@qwer273) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 공감수 0 댓글수 0 2024. 6. 12.
[HTML, CSS] 테이블 header 고정(fixed) table header 고정테이블의 thead or thead > tr 에 아래 소스를 넣으면 끝! table thead tr { position: sticky; top: 0px; background-color: gray !important; border-top: 1px solid gray; border-bottom: 1px solid gray; box-sizing:border-box; } 문제는 스크롤시 header가 fixed는 되는데 고정헤더 검정 border가 투명화되는 현상이 발생한다. 이 때는 아래 코드를 넣어주자table { border-collapse: separate; border-spacing: 0; } 그럼 스크롤 시 테이블 헤더 검정 bor.. 공감수 0 댓글수 0 2024. 6. 12.
[HTML] table 안에 table 넣기 테이블안에 테이블이 들어간단말이야~? 한번 시도해봐야겠다.해서 만들어봄 결과는 성공! HTML .. 공감수 0 댓글수 0 2024. 6. 12.
[HTML,CSS] <details> <summary> JS없이 접기/펼치기 기능구현 결과화면 (▼클릭) 클릭해주세요! 목록1 목록2" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 HTML 클릭해주세요! 목록1 목록2 CSSdetails { margin: 5px 0 10px; } details > summary { background: #666; color: #fff; padding: 10px; outline: 0; border-radius: 5px; cursor: pointer; transition: background 0.5s; text-align: left; box-shadow: 1px 1px 2px gray; } details > s.. 공감수 0 댓글수 0 2024. 6. 12.
[CSS] CSS로 on/off체크박스만들기 /* CSS */ /* on/off 박스 */ .check { position: relative; display: flex; flex-direction: column; color: #97acd1; align-items: center; } .check p { font-size: 14px; color: #97acd1; margin-bottom: 5px; } .check .button { position: relative; top: 50%; width: 50px; height: 25px; border-radius: 100px; } .check .button .checkbox { position: relative.. 공감수 0 댓글수 0 2024. 4. 30.
스크롤시 내릴때는 header가 사라지고 올릴때는 생기는 header만들기 https://codepen.io/qwer273/pen/bGNOJBY fixed header on Scroll...codepen.io스크롤시 내릴 때에는 헤더가 사라지고 올릴 때는 생기는 헤더입니다. 공감수 1 댓글수 1 2022. 1. 13.
[jQuery] 더블클릭이벤트와 toggleClass 활용해서 나타났다 사라지게하기 https://codepen.io/qwer273/pen/XWppOxJ toggleClass...codepen.io 더블클릭 했을 때 파란색 박스가 나타났다가 다시 더블클릭하면 없어지는 효과입니다. 공감수 0 댓글수 0 2022. 1. 13.
[jQuery]제이쿼리 활용하여 노드 찾는 방법 //id를 가진 노드 다 찾아오기 $("[id]").css("border", "5px solid green"); //class를 가진 노드 다 찾아오기 $("[class]").css("border", "5px solid pink"); //class 값 중 test를 포함하는 노드 다 찾아오기 $("[class*=test]").css("border", "5px solid black"); //class 값 중 m으로 시작하는 모든 노드 찾아오기 $("[class^=m]").css("border", "5px solid yellow"); //class 값 중 t로 끝나는 모든 노드 찾아오기 $("[class$=t]").css("border", "5.. 공감수 0 댓글수 0 2022. 1. 13.
svg로 로딩페이지 만들기 (코드제공) https://codepen.io/qwer273/pen/gOxpWaj 로딩페이지...codepen.io로딩이 늦어질 때 미리 뜨는 로딩페이지입니다 :) 공감수 0 댓글수 0 2022. 1. 13.
href= "#" 클릭시 위로 이동 방지(제이쿼리활용) 홈페이지 HTML a태그로 링크 삽입 시 보통 링크가 없을 때는사이트1 #을 통해서 많이 나타냅니다.이러한 경우 a태그 클릭 시 자동으로 맨위로 이동하게 됩니다. 이것을 방지하기 위해서는 아래 제이쿼리 코드를 넣어주게 되면클릭 시 위로 올라가는 것을 방지할 수 있습니다. //첫번째방법 // $("a").click(function() { // if ($(this).attr("href") == "#") { // return false; // } // }); //두번째방법 $("a").click(function(e){ e.preventDefault(); }); https://codepen.io/qwer273/pen/GRMrNZj href= # 클릭시 위로 이동 방지...c.. 공감수 1 댓글수 0 2022. 1. 13.
[HTML,CSS] overflow 와 text-overflow 속성정리 * overflow 속성: 박스 안에서 컨텐츠가 넘칠 때 표현방법을 지정하는 속성 (박스 보다 컨텐츠 크기가 클 때) visible : 넘치는 콘텐츠를 그대로 납두면서 박스를 넘겨 표시한다. 기본값hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다.scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시하여 스크롤을 내리면 볼 수 있게 한다.auto : 넘치면 콘텐츠를 자르지만 스크롤바가 표시된다.inherit : 부모 요소로부터 값을 상속 받는다. * overflow-x, overflow-y 속성overflow만 지정했다면 x축 y축 모두 넘치는 부분을 지정해주는 것이라면overflow-x , overflow-y 는 각각 x,y축을 지정해서 표현해주는 속성이다. visible : 콘텐츠가 잘.. 공감수 2 댓글수 0 2020. 4. 23.
[HTML,CSS]text-align 속성 * text-align 속성은 텍스트의 정렬 방향을 의미합니다. left: 왼쪽 정렬right: 오른쪽 정렬center: 중앙 정렬justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리) 주의해야할 점 2가지1. block요소에만 text-align 속성을 적용할 수 있다는 점2. 정렬되는 것은 block안에 있는 inline요소가 정렬되는 점* inline : 텍스트 뿐만 아니라 이미지 등의 span , b , a , img 등등 inline요소 * text-align 속성을 적용할 수 있는 예시 1. div태그(block요소)안에 span문자열이 있는 경우2. p (block요소) 안에 img를 정렬하려는 경우3. div태그 (block요소) 안에 p태그(block요소) 안에 있는 in.. 공감수 3 댓글수 1 2020. 4. 23.
[HTML,CSS] display / visibility / opacity 의 속성정리 안녕하세요 ! 오늘은 display / visibility / opacity 의 속성에 대해서 정리해보겠습니다 :) display / visibility / opacity의 공통적인 부분에서 보이게 하느냐 안보이게 하느냐 즉 ! 가시성을 결정짓는 요소들이랍니다 한번 각각의 속성에 대해서 알아보도록 하겠습니다. 1. display display는 레이아웃에서 자주 사용되는 요소입니다.기본적으로 HTML은 block 또는 inline 특성을 갖습니다. display 요소설명예시태그block블록박스-가로영역모두차지 / 줄바꿈odiv / p / h / ul / li / hr / ol / table h1~h6 / form inline인라인박스-글자화영역 / 줄바꿈xspan / b / i / a / br / b.. 공감수 0 댓글수 0 2020. 4. 20.
[HTML , CSS] Font Awesome 사용법 안녕하세요 오늘은 Font Awesome 사용법에 대해서 알아보겠습니다. ⊙ Font Awesome이란?= 웹 아이콘폰트를 모아놓은 라이브러리 웹 사이트를 만들 때 아이콘을 넣기위해 필수로 사용되는 요소입니다. 즉 웹사이트에 아이콘을 쉽게 넣어줄 수 있는 것이 바로 Font Awesome 입니다. [폰트어썸 사이트 이동]https://fontawesome.com/?from=io Font Awesome fontawesome.com그럼 Font Awesome은 어떻게 사용되는지 알아보겠습니다. 먼저 Font Awesome의 장점에 대해서 알아보겠습니다. 만약 웹 사이트에 인스타 아이콘을 넣고 싶다고 가정할 때 1. Html Font 속성과 똑같이 사용가능하기때문에 색상, 크기를 css를 통해 자유롭게.. 공감수 0 댓글수 0 2020. 4. 12.
[CSS] margin과 padding 속성 안녕하세요 오늘은 margin과 padding속성에 대해서 알아보겠습니다. 먼저 margin과 padding은 공간을 만들어주는 속성에 자주 사용됩니다. 1. margin 마진 속성은 주변 여백을 뜻 합니다. 마진의 크기를 조절하면서 다른요소와 너무 가깝게달라붙는 것을 방지해주면서 보기 좋게 만들어주는 기능을 합니다. 마진 속성에는 margin-top , margin-bottom , margin-left , margin-right가 있습니다.즉 위, 아래, 왼쪽, 오른쪽의 여백을 각각 가리킵니다. 적용방법은 해당 여백을 주고 싶은 요소에 margin을 주면 되는데요 margin : 해당 값 , auto (그냥 magin으로 주면 위, 아래 , 좌 , 우 모두가 해당 값으로 적용됩니다.)margin-t.. 공감수 0 댓글수 0 2020. 4. 8.
[CSS] line-height 속성과 vertical-align 속성의 관계 안녕하세요! 오늘은 line-height 속성과 vertical-align 속성의 관계에 대해서 알아보겠습니다.먼저 line-height 속성과 vertical-align 속성은 함께 자주 쓰이고 있기 때문인데요! 두가지 속성 중에서 line-height 속성에 대해서 먼저 알아보겠습니다. ⊙ line-height: 말 그대로 라인의 높이를 뜻하는데요 이해하기 쉽게 저희가 전에 블럭요소와 인라인 요소에 대해서 배웠죠 즉 문자열의 가독성을 좋게 하기 위한 문자의 인라인요소들의 라인박스라고보시면 됩니다. 기본적으로 문자를 입력하게 되면 가독성을 위해서 자동적으로 행끼리 서로 달라붙지 않고 살짝 띄워있습니다. * 아래처럼 글자가 붙어 있다면 가독성이 매우 떨어지겠죠? 즉 행간의 높이를 조절할 때 line-.. 공감수 0 댓글수 0 2020. 4. 7.
팝업창 만들기 오늘은 팝업창에 대해서 배워보겠습니다. 팝업창은 광고용으로 많이 쓰이기때문에 알아두면 좋아요 먼저 팝업창을 만들기 위해서 필요한 것은 html , css , js 입니다. 저는 버튼을 누르면 튀어나오는 팝업창을 만들어볼거예요 만드는 순서 1. 먼저 누르는 버튼을 만들어준다.2. 튀어나오는 팝업창과 뒤에 어두운 검정배경을 만들어준다.3. 튀어나와야하는 팝업창과 검정배경을 display: none;하여 안보이도록 한다.4. js를 활용하여 버튼을 누르면 팝업창이 뜨도록 설정한다. ** 자바스크립트 코드(괄호안에 요소만 바꾸어서 사용하시면 됩니다.) //버튼을 클릭하면 팝업창과 검정배경이 dispaly:block이 되어나타난다.$('button').click(function(){ $('.popup-1.. 공감수 0 댓글수 0 2020. 4. 6.
밀고나오는 글자 애니메이션 안녕하세요 오늘은 애니메이션에 대해서 배워보겠습니다. 오늘은 오른쪽에서 갑자기 글자가 밀고들어오는 움직이는 애니메이션을 만들어볼게요 먼저 animation 속성에 대해서 알아보겠습니다. 애니메이션을 적용하는 방법은 먼저[ @keyframes: 지정한 이름] 를 활용해서 효과를 먼저 만들어주면 됩니다.저는 옆에서 밀고 들어오는 애니메이션을 적용하기 위해서 animation을 이름으로 해서 magin-left 와 width로 설정해보겠습니다. @keyframes animation{ 0%{ margin-left:100%; width:300%; } 100%{ font-size: 300%; margin-left:0; w.. 공감수 0 댓글수 0 2020. 4. 6.
[HTML , CSS] table로 표만들기 안녕하세요 오늘은 table 태그를 활용하여 간단하게 표를 만드는 방법을 알려드리겠습니다. table태그를 사용하기 전 알아두어야하는 하위 태그들이 있는데요 * 헤더태그 : * 행태그 : * 열태그 : 이 세가지만 안다면 표는 간단하게 만들 수 있어요! 위 사진과 같이 css없이 표를 만들 수 있습니다. 먼저 table태그를 만들어 주고 만약 3x3표를 만들고 싶다 하면 먼저 헤더태그를 3개 만들어줘야하겠죠? 그리고 행태그 안에 열 태그를 넣어주면 테이블 표 완성! 그 다음은 테이블 디자인을 변경하고 싶을 때 쓰는 속성인데요! 총 8 개의 속성으로 이루어져있습니다. 1. border테이블의 테두리 2. bordercolor테이블의 테두리 색상 3. width테이블 가로 크기 4. heig.. 공감수 0 댓글수 0 2020. 4. 6.
[HTML] 태그의 기초 ,   , br , pre , p 태그 사용법 안녕하세요 오늘은 HTML 태그의 기초에 무엇이 있는지 알아보겠습니다. 1.     는 non breaking space의 약자로 태그는 아니지만 문자사이에 공백을 넣어주는 기능을 합니다. 예를들어서 제목를 입력했을때 출력은 기본으로 "제목"으로 되지만 제목 사이에  를 넣어주면 제 목 출력은 "제 목" 제목 사이에 일정한 공백이 생기게됩니다.더 띄우고 싶다면 여러개를 넣어주면 됩니다. 제  목 출력은 "제 목" 제   목 출력은 "제 목" 2. br 태그는 line break의 약자로 줄바꿈을 해주는 기능을 가집니다.태그는 다른 태그들과 다르게 닫는 태그를 갖고 있지않습니다.안녕하세요 안녕하세요 안.. 공감수 1 댓글수 0 2020. 4. 6.
[HTML , CSS ] span , div 태그의 차이 안녕하세요! 오늘은 HTML 태그에서 많이 쓰이는 div 와 span의 차이에 대해서 알아보겠습니다. * div 와 span의 공통점 : 특정영역에 스타일을 주는 태그 * 스타일을 지정할때 inline 과 block 두가지방식이 있습니다. 1. 문자의 일부분만 선택지정(inline) 2. 넓은 범위를 묶어서 지정(block) * inline 요소 : * block 요소 : 즉 span 과 div 의 차이점은 문자열을 선택해서 지정할때는 span 비교적 넓은 범위에 지정할때는 div를 사용합니다. 예를 들어서 span은 문자열에서 원하는 부분만 선택해서 색을 바꾸는 등 스타일을 지정해 줄 수 있습니다. 안녕하세요 (입력) -> 안녕하세요 (출력) ** span 으로 묶어준 안녕만 다른 색상으로 스타일 적용.. 공감수 0 댓글수 0 2020. 4. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.