본문 바로가기

전체 글

(97)

[Web] Webpack 📘 webpack은 뭘까? webpack 공식 문서를 확인해보면 다음과 같이 나와있다. At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from. 한국어로 번역한다면 다음과 같다. webpack..

[Algorithm] 기지국설치 📋 문제 N개의 아파트가 일렬로 쭉 늘어서 있습니다. 이 중에서 일부 아파트 옥상에는 4g 기지국이 설치되어 있습니다. 기술이 발전해 5g 수요가 높아져 4g 기지국을 5g 기지국으로 바꾸려 합니다. 그런데 5g 기지국은 4g 기지국보다 전달 범위가 좁아, 4g 기지국을 5g 기지국으로 바꾸면 어떤 아파트에는 전파가 도달하지 않습니다. 예를 들어 11개의 아파트가 쭉 늘어서 있고, [4, 11] 번째 아파트 옥상에는 4g 기지국이 설치되어 있습니다. 만약 이 4g 기지국이 전파 도달 거리가 1인 5g 기지국으로 바뀔 경우 모든 아파트에 전파를 전달할 수 없습니다. (전파의 도달 거리가 W일 땐, 기지국이 설치된 아파트를 기준으로 전파를 양쪽으로 W만큼 전달할 수 있습니다.) 초기에, 1, 2, 6, 7,..

[Algorithm] 가장 긴 팰린드롬 📋 문제 앞뒤를 뒤집어도 똑같은 문자열을 팰린드롬(palindrome)이라고 합니다. 문자열 s가 주어질 때, s의 부분문자열(Substring)중 가장 긴 팰린드롬의 길이를 return 하는 solution 함수를 완성해 주세요. 예를들면, 문자열 s가 "abcdcba"이면 7을 return하고 "abacde"이면 3을 return합니다. 제한사항 문자열 s의 길이 : 2,500 이하의 자연수 문자열 s는 알파벳 소문자로만 구성 입출력 예 "abcdcba" 7 "abacde" 3 ✏️ 풀이 어떤 식으로 풀어야할지 정말 고민을 많이 했다. 처음 선택한 방법은 이중 for문을 돌려서 알파벳이 같은지 이차원 배열에 표시하고 i는 작아지는 방향으로, j는 커지는 방향으로 반복문을 돌리면서 체크하며 더해가는 방..

[JavaScript] 실행컨텍스트 실행컨텍스트를 공부하면서 실행컨텍스트, 환경레코드, 렉시컬환경 등의 관계가 굉장히 복잡하게 얽혀있음을 알게 되었다. 그러다 문득 피보나치 수열의 경우에 실행컨텍스트는 어떤식으로 동작하는지가 궁금해졌다. 우선 실행컨텍스트를 공부하면서 알게 된 내용들을 정리해 보려고 한다. ⁉️ 실행 컨텍스트 자바스크립트의 동작원리를 담는 핵심 개념으로 간단히 말해서 코드의실행환경이라고 볼 수 있다. 실행컨텍스트를 생성하는 코드에는 네가지가 존재한다. 1. 전역 코드: 전역에 존재하는 코드 2. 함수 코드: 함수 내부에 존재하는 코드 3. eval 코드: eval 함수의 인수로 전달되어 실행되는 코드 4. 모듈 코드: 모듈 내부에 존재하는 코드 가장 먼저 실행 컨텍스트 스텍에 전역 실행 컨텍스트 생성되고, 전역 렉시컬환경..

[Algorithm] 단어변환 📋 문제 두 개의 단어 begin, target과 단어의 집합 words가 있습니다. 아래와 같은 규칙을 이용하여 begin에서 target으로 변환하는 가장 짧은 변환 과정을 찾으려고 합니다. 1. 한 번에 한 개의 알파벳만 바꿀 수 있습니다. 2. words에 있는 단어로만 변환할 수 있습니다. 예를 들어 begin이 "hit", target가 "cog", words가 ["hot","dot","dog","lot","log","cog"]라면 "hit" -> "hot" -> "dot" -> "dog" -> "cog"와 같이 4단계를 거쳐 변환할 수 있습니다. 두 개의 단어 begin, target과 단어의 집합 words가 매개변수로 주어질 때, 최소 몇 단계의 과정을 거쳐 begin을 target으로 ..

[HTML] 웹 접근성 및 WAI-ARIA 🌏 웹 접근성이란? 고령자, 장애인, 비장애인에 상관없이 모든 사람이 동등하게 접근 가능하도록 하는 것을 말한다. 만약 시각이 불편한 사람이 웹을 이용하는 경우 스크린리더에 의지해 원하는 동작을 수행하게 될 것이다. 이때 시각이 불편한 사람도 웹애서 원하는 동작을 수행하는데 어려움이 없도록 스크린리더가 보다 정확하고 명확하게 정보를 전달하는 등의 기능을 하도록 해야 한다. NAVER의 검색창이다 시각이 불편한 사람이라면 이 요소가 검색하는 부분인지를 전혀 알 수 없다. 하지만 이 포털사이트에서 검색창을 구성한 코드를 살펴보게 되면 사용자에게는 보여지지 않지만 검색이라고 표기를 해두고 스크린리더가 인식할 수 있게끔 작성해두었다. 검색 📒 WAI-ARIA (Web Accessibility Initiative..

[HTML] HTML 개요 🌏 웹 표준 (Web Standards) 브라우저마다 해석하는 방식에 차이가 있다. ➞ 같은 기능으로 동작하도록 표준 지정(W3C) 표준화 이전에 독자적인 플러그인을 사용하기도 했으므로 선택의 폭이 매우 좁았었다. 브라우저마다 스타일이 다를 수는 있다.(같은 기능을 함) HTML5 - 2014년에 공식 표준화됨. 🌏 웹 접근성 (Web Accessibility) 일시적으로나 어떤 상황에서든 웹사이트를 이용할 수 있도록 하는 것.(마우스타자판, 음성인식 등) 일반적인 브라우저를 이용하기 어려운 경우 브라우징을 할 수 있도록 도와주는 역할을 하게 됨. 🌏 웹 호환성(Cross Browsing) 웹브라우저에 상관없이 의도한대로 기능 동작하는 것.(크로스브라우징) 브라우저에 따라 다른 기능을 할 수도 있음.(하..

[React] setState callBack 함수 SleepyWoods 프로젝트를 진행하면서 전체 채팅 기능을 구현했었다. 전체 채팅을 담당하는 Chat 컴포넌트에서 지역상태로 전체 채팅 데이터를 가지도록 했는데 코드를 보면 다음과 같다. const [chatDatas, setChatDatas] = useState([]); // 채팅 업데이트 const updateChat = (chat: chatType) => { ... chat.timestamp = calcTimeFromMs(chat.timestamp); // timestamp을 포멧팅하는 함수 호출 setChatDatas([...chatDatas, chat]); }; type chatType = { type: string; timestamp: string; nickname: string | numb..

이전 1 ··· 9 10 11 12 13 다음

티스토리툴바