nika-blog

DOM의 개념 document 객체의 생성, 조회, 변경 document 객체의 제거 + removeChild 와 remove 비교 + 여러개의 자식 element 지우기 document 객체의 추가 + 이미 존재하는 노드를 추가하면 어떻게 될까? innerHTML과 textContent의 차이 **참고** 대분류 제목 색상 소분류 제목 색상 DOM이란? Document Object Model의 약자로, HTML 요소를 Object처럼 조작할 수 있는 Model 입니다. document 객체 CRUD(Create, Read, Update and Delete) **DOM 에는 HTML에 적용(APPEND) 하는 메소드가 따로 있음 Create : createElement element 생성 웹 페이지 상에..

https://mingmeng030.tistory.com/61 IntelliJ 주석 색깔 변경하는 법 :D 1. FILE - Settings로 들어갑니다. (단축키 Ctrl+Alt+S) 2. Settings 팝업창이 뜨면 검색창에 todo를 검색합니다. 3. + 버튼을 클릭합니다. 4. Pattern 입력 칸에 \b(X|fixme)\b.* 를 입력합니다. 제가 쓴 'X'.. mingmeng030.tistory.com 해당 페이지에 상세히 나와있습니다!

안녕하세요. React Router를 이용하여 페이지를 개발할 때 URL을 이용하여 할 수 있는 작업은 매우 다양한데요.다음과 같은 작업들을 할 수 있습니다. url Parameter로 호출할 api 의 id 값 받아오기 url parameter로 특정 컴포넌트를 보여주기location state 으로 현재 페이지에 상태값 전달 및 받아오기history 객체를 이용하여 새로운 페이지로 이동하기 등등오늘은 React Router 에서 제공하는 location 객체에 대해서 알아볼 것입니다!  Location 이란?React Router 라이브러리에서 제공하는 location 객체는 현재의 URL 정보를 나타냅니다. (참고로 web api 의 location 과는 다른 객체입니다. history 객체도요!)..

요즘은 프레임워크를 많이 사용해서 HTML을 일일이 작성하는 경우는 많이 없지만, 그래도 작성할 일을 대비해 작성해보겠습니다.  바로 요즘에 거의 모든 IDE(IJ)와 Text Editor(vscode) 등에 탑재되어 있는 Emmet 입니다. 바로 아래와 같이 작성하는 것이데, 기억할 것은 다음과 같습니다.  부모 > 자녀형제 +. class# id{text}Tab키 누르기* 곱하기전 div.container>h1.title+p.description+ul#users>li{user}*5 후(Tab키 누르기) user user user user user  추가로 숫자로 클래스 명이나 내용을 작성할 때 자동으로 지정할 ..

안녕하세요. 오늘은 반응형 웹개발에 대해서 작성해 보려고 해요.  요즘, 워낙 다양한 크기의 기기들이 많아서 반응형 웹개발은 필수가 되었는데요, 다양한 요소가 필요하지만 주요 CSS 속성으로는 다음과 같은 것들을 활용할 수 있습니다.  %자주 사용하는 것으로 % 가 있는데요, 기억해야 할 것은 %는 부모 컨테이너의 영향을 받기 때문에,100% 라고하면, 부모 컨테이너의 100%가 되는 것입니다.  vh대신, vh 라고 하면 화면의 높이를 의미하는 것이기 때문에, 100vh 라고 하면 전체화면의 높이가 됩니다.  이 밖에도 flex gird, flex box, vw 등을 사용할 수 있습니다. 화면 크기에 따라 박스 배치를 바꾸고 싶다면 Media Queries를 사용할 수 있는데요, 보통은 3가지 크기에 ..

안녕하세요. 오늘은 프로미스(Promise)에 관한 포스팅 입니다.   콜백지옥을 탈출하기 위해 가장 좋은 방법이죠!먼저 개념을 알아보면 아래와 같습니다.  promisePromise 객체는 비동기 작업이의 완료 또는 실패와 그 결과 값을 나타냅니다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDNPromise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.developer.mozilla.org 코드를 한번 살펴보며 다음과 같습니다.  promise.js'use strict';//promise is a JavaScript ..

안녕하세요.오늘은 HTML 태그가 어떻게 분류될 수 있는지에 대한 포스팅이에요. box vs itemhtml 태그는 크게 box 와 item으로 나눌 수 있을 것 같은데요,예시는 다음과 같습니다. box대표 예시 : div, span, header, nav, form, section, article, aside, main, footer...item대표 예시 : a, button, input, label, img, video, audio, map, canvas, table...줄바꿈 특성또 가장 큰 줄바꿈 특성에 따라 blockinline속성으로도 나눌 수 있습니다. CSS 의 display 속성으로 변경할 수 있다는 것도 기억해 주세요. inline인 경우, margin과 padding 이 적용되지 않고..

안녕하세요. 오늘은 동기와 비동기 코드 작성에 대한 포스팅을 하려고 합니다.  백엔드에서 사용자 데이터 등을 받아올 때, 비동기적 프로그래밍은 꼭 필요한데요 개념부터 살펴볼까요?  1. 동기와 비동기 개념동기 방식 : A작업이 모두 진행 될때까지 B작업은 대기해야한다.비동기 방식 : A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.자바스크립트는 동기적으로 작동합니다. 하지만 비동기적으로 코드를 작성할 수도 있습니다. 바로 콜백함수를 사용하는 것인데요, 여기서는 setTimeOut 함수로 구현할 수 있을 것 같습니다.  setTimeOut.js'use strict';//JavaScript is synchronous.//Execute the code block by orde..

안녕하세요. css에서 요즘 가장 핫한 속성이 flexbox라고 생각이 드는데요,오늘은 flex에 대한 이야기를 포스팅해보겠습니다.  먼저 flexbox에서 주로 사용하는 속성들은 다음과 같습니다. displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content위 속성들을 이용해서 flexbox 를 유용하게 사용할 수 있을 것 같아요. 자세한 정보는 MDN에서 확인할 수 있습니다.  축(axis)flexbox 사용시 꼭 알아야 하는 개념은 축 인데요, 그래프에서 x축, y축 하는 것처럼 main axis 와 cross axis를 잘 알아야 합니다.  main axis : 주축은 flex-direction에 의해 정의되며 4개의 ..

안녕하세요. 오늘은 JSON 에 대해서 포스팅 해보도록 하겠습니다.  프론트엔드와 백엔드가 어떻게 데이터를 주고 받는지에 대한 이야기이기도 합니다.  먼저 필요 개념들을 간략하게 살펴봅시다.  HTTP HTTP는 Hypertext Transfer Protocal의 줄임말으로,W3 상에서 정보를 주고받을 수 있는 프로토콜입니다. 주로 HTML 문서를 주고받는 데에 쓰입니다. https://developer.mozilla.org/ko/docs/Web/HTTP HTTP | MDN하이퍼텍스트 전송 프로토콜(HTTP)은 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. 웹 브라우저와 웹 서버간의 커뮤니케이션을위해 디자인되었지만, 다developer.mozilla.org AJAXA..