nika-blog

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

안녕하세요. 반응형 웹 개발을 하면서 여러가지 시행착오를 겪을 때가 있습니다. 오늘은 그런 시행착오에 대한 포스팅입니다.  버튼 이슈 (feat. 갤럭시) 1. 문제 발견첫번째는 버튼에 대한 이슈입니다. 보통 페이지 이동을 위한 것은 태그를 이용해서, 특정한 액션을 유도하는 것은 태그를 이용해 구현합니다. (자세한 내용은 아래 포스팅을 참고하면 좋을 것 같습니다. ) https://dragon-developer.tistory.com/2 HTML 시멘틱 태그 제대로 사용하기안녕하세요. 도롱뇽입니다. 오늘은 HTML 시멘틱 태그(Semantic Tag)에 대해서 글을 써보겠습니다. 시멘틱 태그는 웹(Web)을 의미 있게 만드는 역할을 합니다. 아래와 같은 이유로 적절한 시멘틱 태그를dragon-devel..

안녕하세요. 오늘은 디버깅에 대해서 포스팅하려고 해요.   디버깅(Debugging)은 'defining the problem'으로현재 상태와 원하는 상태의 갭을 줄이면서 도모하는 것이에요. 오늘은 VSCode(Visual Studio Code)로 디버깅 하는 방법에 대해 소개하려고 합니다.  1. 디버깅 시작먼저 상단 메뉴 > Run > Start Debugging 을 통해 디버깅을 시작합니다. node.js 을 선택하면 됩니다.  2. breakpoint 설정다음으로 미심쩍은 부분이나 확인하고 싶은 부분에 breakPoint 를 설정하세요. 빨간 점이 생기도록 클릭하시면 됩니다.  왼쪽의 메뉴에서 각 변수의 값을 확인하면서 디버깅을 진행할 수 있습니다.  3. Edit Breakpoint한가지 팁을 ..

안녕하세요. 오늘은 콘솔에 대한 포스팅을 작성하려고 합니다.    혹시 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용도문서의 제목 및 로고 등페이지 이동 및 주요 메뉴페이지의 주요 내용, 페이지 내 한번만 사용의 개별적 독자적 내..