히찌리의 개 발 새 발 히찌리의 개 발 새 발

전체 글

• [JavaScript] 다음에 올 숫자 - Level 0

  알고리즘 문제/프로그래머스 2023. 2. 25. 07:21

  문제 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. 제한사항 2

  Read More
• [JavaScript] 옹알이 (1) - Level 0

  알고리즘 문제/프로그래머스 2023. 2. 22. 22:35

  코드 function solution(babbling) { const available = ["aya", "ye", "woo", "ma"] const tempArr = babbling.map(babbling => { available.forEach(available => { if (babbling.includes(available)) babbling = babbling.replace(available, ' ') return }) return babbling }) return tempArr.filter(v => v.replace(/\s/g, '').length === 0).length } babbling 배열에서 머쓱이의 조카가 발음할 수 있는 단어를 ' '로 치환한다. ''가 아닌 ' '인 이유는 예를들..

  Read More
• svelte(a11y-click-events-have-key-events)

  ERROR 2023. 1. 18. 21:27

  svelte로 개발하면서 div에 onClick 이벤트를 주니 만난 린트 메세지이다.. Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events "클릭 핸들러를 가지고 표시되는 비대화형 요소에는 최소한 하나의 키보드 리스너 jsx-a11y/click-events-have-key-events가 있어야 합니다." ????????? Non-interactive HTML elements (비대화형 요소) ???????? Non-interactive HTML elements (비대화형 요소)와 Interactive HTML elemen..

  Read More
• 깊은복사와 얕은복사, 그리고 최신문법 structuredClone 까지

  JavaScript 2023. 1. 15. 11:40

  먼저, 자바스크립트에서 값은 원시값과 참조값 두 가지 데이터 타입의 값이 존재한다. 원시형 즉, 원시값은 기본 자료형 (단순한 데이터)를 의미하며 변형할 수 없다!! 변형할 수 없다는 것이지 재할당 할 수 없다는 뜻은 아니다. 원시값을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않는다. String number boolean undefined symbol null 참조형 원시형이 아닌것들은 모두 참조형이다. 예로는 객체, 배열, 함수와 같은 것들이 있다. 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다. 따라서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체..

  Read More
• React - Router (v5)

  React 2023. 1. 10. 19:02

  React Router 시작하기 전에 잠깐 알고 넘어가자! 1. 라우팅이란 ?! 간단히 말해 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 2. SPA와 MPA SPA란 ?! Single Page Application으로 페이지가 한 개인 웹 어플리케이션을 의미하며, CSR(Client Side Rendering)방식으로 렌더링한다. SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 데이터만을 넘겨주어, 첫 요청시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용한다. MPA란 ?! Multiple Page Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 의미하며, SSR(Server Side Rendering)..

  Read More
• React - CKEditor 사용해보기

  React 2023. 1. 5. 22:08

  CKEditor 란? CKEditor는 콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 WYSIWYG(위지위그) Rich Text Editor이다. WYSIWYG란 What You See IS Whay You Get의 줄임말로 ‘보는 대로 얻는다.’ 는 뜻이다. 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 다시 말해 HTML처럼 따로 CSS 문법을 적용해서 디자인 편집을 하는 것이 아닌 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 핵심 코드는 자바스크립트로 작성되어 있으며 CKSource가 개발하였다. 오픈 소스와 상용 라이선스로 이용할 수 있다. 설치방법 https://ckeditor.com/..

  Read More
• target="_blank” 사용 이슈 및 해결

  React 2022. 7. 4. 12:33

  target="_blank” 사용 이슈 및 해결 a 태그의 속성인 target="_blank" 를 사용하니 Using target=_blank without rel=noopener noreferrer is a security risk 라는 경고문구가 발생했다. rel=noopener nore referer 없이 target=_blank를 사용하면 보안 위험이 발생한다고 경고하는데, 대체 무슨 보안 위험이 발생하는걸까 ⁉️ 본론으로 들어가기전, target 속성에 어떤 값을 지정할 수 있는지 먼저 알아보자 target 속성 target은 'href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?'를 지정하기 위한 속성이다. _self 연결한 웹 페이지를 현재 탭에서 연다. _self는 기본 설정..

  Read More
• HTTP 구조

  JavaScript 2022. 6. 17. 16:25

  HTTP 구조 HTTP란? HyperText Transfer Protocol 의 약자로 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 통신 규약이다. 웹상에서 네트워크로 서버끼리 통신을 할때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 "통신 형식" 혹은 "통신 구조" 라고 보면 된다. (프론트-백 통신에 사용) HTTP 통신 방식 HTTP는 기본적으로 요청/응답 (request/response) 구조로 되어있다. 클라이언트가 HTTP request를 서버에 보내면 서버는 HTTP response를 보내는 구조로 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어 진다. HTTP는 요청이 오면 그에 응답을 할뿐, 여러개의 요청/응답 끼리 연결되어 있지 않다. (stateless 하다.) 각..

  Read More