nika-blog

안녕하세요.오늘은 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..

안녕하세요. 리액트를 이용해 개발을 하면 상태관리에 신경을 써줘야합니다. 상태가 변하면 리액트 컴포넌트가 리렌더링되기 때문인데요. 이는 리덕스 훅을 사용한 컴포넌트 개발에서도 마찬가지입니다. 오늘은 상태를 조회하고 리렌더링을 트리거하는 useSelector 훅의 동작원리를 알아보겠습니다. useSelector 훅이란?const result: any = useSelector(selector: Function, equalityFn?: Function)리덕스 스토어에서 상태를 조회하는 react-redux 라이브러리의 hook 입니다. 코드를 보시면 두개의 인수를 받고 있는데요.  1. selector첫번째는 selector 함수로, 스토어에서 어떤 값을 조회할 지 결정하는 함수입니다. selector 함수는..

안녕하세요. 오늘은 콘솔에 대한 포스팅을 작성하려고 합니다.    혹시 console.log()외에도 유용한 콘솔이 많다는 것을 알고 계셨나요?모르셨다면 이번 포스팅을 통해 배워나가시면 좋을 것 같습니다.  console.log() 디버깅을 하거나 개발 중 데이터 형태 등을 확인할 때 많이 사용합니다. 하지만 이 밖에도, 다양한 콘솔을 개발 중 유용하게 사용할 수 있습니다.  오류 콘솔 대표적으로 오류의 정도에 따라 다음과 4가지를 사용하면 됩니다.  error.js//log levelconsole.log('log');// 개발 - 출력console.log('info');// 정보console.warn('warn');// 경보console.error('error'); // 주요한 에러위에서부터 오류의 정..

안녕하세요. 오늘은 리덕스 미들웨어(redux middleware)를 이용하여 비동기 작업을 처리하는 법에 대해 알아보도록 하겠습니다.먼저, 리덕스 미들웨어란?리덕스 스토어의 기능을 확장하는 방법 중 하나입니다. 미들웨어를 사용하면 dispatch 함수를 커스터마이징하여1. 액션(action)이 디스패치(dispatch) 된 이후,2. 액션이 리듀서(reducer)에 도달하기 전에추가적인 작업을 수행할 수 있습니다.미들웨어는 언제 사용될까요?간단하게만 설명드리자면,,, side effect를 처리하는데 필요합니다!어플리케이션 개발시, 서버로부터 데이터를 받기위해 http 요청을 보내거나, 콘솔에 로깅을 하는 등의 필요한 경우가 있는데요. 이렇게 외부상태를 변경하는 모든 작업을 side effect 라고 ..

안녕하세요.오늘은 좋은 JS 코드에 대해 고민했던 과정을 포스팅 해 보겠습니다.  첫번째 질문: 조건이 두가지로 주어졌을 때 어떻게 작성해야 할까요? 방법 1 : if ~ else if방법 2 : if ~ else방법 3 : 삼항연산자  정답은 방법 3. 삼항연산자 입니다.  조건이 두가지인 경우, else if 까지 사용할 필요가 없으며if문 대신 삼항 연산자를 쓴다면 더 간결하고 깔끔한 코드가 될 수 있을 것 같습니다.  코드 작성 예시를 들어 보도록 하겠습니다.  ternary-operator.js // Good Codefunction getResult(score) { return scroe > 5 ? good : bad;}두번째 질문 : 변수가 null과 undefined 경우를 어떻게 대비해야 ..

안녕하세요. 오늘은 간단명료한 DOM(Document Object Model) 포스팅입니다.  DOM DOM은 웹 페이지 내 모든 콘텐츠를 객체로 나타낸 것입니다. 간단히 웹페이지 = document 라고 한다면, 이러한 document를 자유자재로 다르기 위해 객채화하여 구체한 개념입니다.  웹 페이지를 객체화한 각 요소는 노드(Node)라고 부르며,  노드 중에서 가장 상위 노드가 document 객체입니다.   Document 객체의 프로퍼티 document 객체를 활용하여 웹페이지의 상태와 모든 HTML 태그에 접근할 수 있으며 웹페이지 정보를 담은 프로퍼티들도 있습니다. 이 포스팅에서는 언급정도만 하고, 필요한 태그는 아래 MDM에서 찾아쓰면 좋을 것 같습니다.  https://developer..

안녕하세요.오늘은 HTML 시멘틱 태그(Semantic Tag)에 대해서 글을 써보겠습니다.  시멘틱 태그는 웹(Web)을 의미 있게 만드는 역할을 합니다. 아래와 같은 이유로 적절한 시멘틱 태그를 사용하는 것은 매우 중요합니다. 웹 접근성SEO(Search Engine Optimization) : 검색엔진 최적화 검색 결과 상위에 문서를 노출하기 위해서 SEO 최적화는 필수입니다. 유지 보수시멘틱 태그를 적절히 사용하면, 코드의 가독성이 올라가 유지 보수에도 도움이 됩니다. 페이지의 모든 태그를 로 사용하는 것보다 의미를 가진 시멘틱 태그를 사용하는 것이 좋습니다.  주요 시멘틱 태그Tag용도문서의 제목 및 로고 등페이지 이동 및 주요 메뉴페이지의 주요 내용, 페이지 내 한번만 사용의 개별적 독자적 내..