본문 바로가기

분류 전체보기333

JavaScript - 실행 컨텍스트란 실행 컨텍스트는 나에게 16부작 드라마를 보는(?) 느낌이었다 점심 시간에 모던 자바스크립트 딥다이브 한두장씩 읽으면서 2주 정도 걸린 것 같다 개념적으로는 존재하지만 머릿속으로는 정리해보지 않아 이번 기회에 정리해보려고 한다 소스코드를 파싱하면서 → 소스코드를 평가하고 → 실행 컨텍스트는 "생성" 된다 소스 코드의 타입 소스코드는 네가지 타입으로 분류된다 (갑분소?) 얘네 이야기를 왜하냐면 이 소스코드가 실행될 때 실행 컨텍스트를 생성하기 때문이다 전역코드 - 전역에 존재하는 코드 (전역에 정의된 함수나 클래스 등은 포함 x) - 최상위 스코프인 전역(a.k.a 글로발) 스코프를 생성한다 - 전역 코드 평가 후에 전역 실행 컨텍스트가 생성된다 함수코드 - 함수 내부에 존재하는 코드 (중첩 함수나 클래스.. 2023. 10. 31.
JavaScript - Primitive Value & Casting 오늘은 자바스크립트 기초를 정리해보았다. 내가 정리한 챕터는 Primitive Value & Casting 이다. Primitive Value 이란Primitive value (원시값)은 말 그대로 원초적인 단순 값이다 → 객체 x / 메소드 x / 속성 x 을 가지지 않는 데이터 → 원시값 자체는 불변이다. 변수가 변할 뿐! 원시 타입에는 각각의 객체마다 내장함수들이 있다 ex) toLocaleString(), toFixed() (그래서 이 타입의 값들을 핸들링할 때, 이 함수들을 요긴하게 사용한다) 하지만 null / undefined 는 아무것도 없 - 다 (그래서 undefined 값인 변수를 사용할 때 TypeError가 꽤나 발생하므로, 예외처리는 필수이다) Primitive Value 원시 .. 2023. 10. 31.
JavaScript - 비트마스킹 적용하기 (Feat.비트연산자) 비트 마스킹이란 비트마스킹은 비트의 특성을 이용하여 이진수로 표현하는 자료구조 기법이다. 어려워 보이지만 결국은 다 배우고 익힌 것들의 조합이다. 비트는 0, 1 로 이루어진 이진수이다. - 이진수는 0 또는 1 을 사용하므로 하나의 비트(bit)가 표현할 수 있는 경우는 두 가지이다. - 비트가 1이면 "켜져 있다(true)", 0이면 "꺼져 있다(false)" 라고 표현한다. 쉽게 말해서 배열을 [true, false, true, true] 이런식으로 표현하게 되면 메모리의 4 공간에 저장된다 1011 이런 식으로 표현하게 되면 메모리의 1공간 만을 차지하게 되는 셈이라 더 효율적이다. 그래서 비트마스킹 기법은 더 빠른 수행, 간결한 코드, 적은 메모리 사용의 장점이 있다. 비트 마스킹 적용하기 나의.. 2023. 10. 12.
안드로이드 - ADB 로 웹뷰 디버깅하기(WIFI 연결) 예전에 쓰던 갤럭시는 버전이 낮아 USB 방식으로 페어링해야 했지만 지금 쓰려는 갤럭시는 버전이 높아 wifi 무선 방식으로 페어링 할 수 있게 됬다. 지난번 USB 방식일 때, 생각보다 매우 간단했다. 0. 휴대폰에서 개발자 도구 활성화하기 이건 이미 다른 블로그들에서 친절하게 설명이 잘 나와있다. 구글링으로 얼른 갤럭시 개발자도구 키고 돌아오시라 1. 일단 안드로이드 스튜디오를 설치해야 되기 때문에 설치되지 않았다면 아래 포스팅을 참고해 설치해보자 https://devbirdfeet.tistory.com/313 안드로이드 - 안드로이드 스튜디오 설치하기 일단 나는 m1 air 를 사용하고 있고 안드로이드로 무선디버깅을 해보려고 한다. 그전에 안드로이드 스튜디오가 설치되어 있어야 한다. 안드로이드 스튜.. 2023. 10. 11.
안드로이드 - 안드로이드 스튜디오 설치하기 일단 나는 m1 air 를 사용하고 있고 안드로이드로 무선디버깅을 해보려고 한다. 그 전에 안드로이드 스튜디오가 설치되어 있어야 한다. 그래서 먼저 안드로이드 스튜디오 다운받는 방법을 포스팅 해보았다! 1. 안드로이드 스튜디오 다운받기 2. m1 이라 mac with apple chip 을 선택 3. 다운받은 파일을 실행해보자 4. do not import setting 을 선택 5. 그 다음부터는 아래 절차대로 진행해주면 된다 6. 잘 설치됬는지 확인하기 2023. 10. 10.
React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 셀렉트 박스와 클릭시 등장하는 옵션 메뉴를 직접 만들어 보았다 :) 이번 포스팅에서는 UI 보다는 기능적인 측면만 다루어 보았다 (작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다) 결과화면 미리보기 React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 일단 메뉴배열을 useState 를 사용해서 선언해주자 const [menu, setMenu] = useState(['메뉴1', '메뉴2', '메뉴3', '메뉴4']); const [menuItem, setMenuItem] = useState('메뉴1'); // 선택된 메뉴 아이템 const [showMenu, setMenu] = useState(false); // 옵션박스 열고 닫힘 여부를 알려주는 값 옵션박스에서 메뉴를 고르.. 2023. 9. 16.
React(99) 버튼 클릭시 동적으로 테두리색 변경하기 작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다. 아주 심 - 플하게 동작하는 버튼 선택 기능이다 :) 버튼 인덱스를 저장할 상태 변수를 만들자 const [selectedIndex, setSelectedIndex] = useState(0); 핵심은 클릭해서 저장된 selectedIndex 와 === 매핑된 index 가 같을 경우에만 active 클래스가 추가 된다는 점이다. {buttonItems.map((item, index) => ( setSelectedIndex(index)} > {item.title} ))} 2023. 9. 6.
Next.js - global 구글 폰트 적용하기(next/font) 넥스트를 사용하며 전역적으로 폰트스타일을 추가하려고 한다. 폰트를 사용하는 방법은 두가지 정도가 있다. static한 내장 폰트를 사용하거나 웹 폰트를 사용하거나 내장 폰트는 다양한 브라우저 환경이나 운영체제에 따라 달라질 수 있다. (그래서 보통 웹 폰트를 많이 쓴다) 웹 폰트는 아무래도 외부 네트워크로 다운로드 해오다보니 다운로드할 동안 공백기(?)에 대한 이슈가 생긴다. → FOUT(기본 폰트가 나오고 로딩 후 웹 폰트로 대체) / FOIT(아무것도 안나오다 로딩후 웹 폰트로 대체) 지난번 리액트 사용하면서 폰트 프리로드하는 최적화를 진행해본적이 있다 그때는 급하게 찾아서 했었는데 이번 플젝을 진행하며 어떤 원리로 왜 이런 과정을 거치는 지의 인사이트가 한번 더 넓혀진 것 같다 웹 최적화 - 구글 .. 2023. 8. 17.
React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 슬라이더 두번째 포스팅이다 지난번에는 슬라이더를 이동하면 탭이 선택이 되도록 만들어 보았는데 이번에는 커스텀 탭을 클릭하면 슬라이더가 이동하도록 만들어볼 것이다. React(97) Slick 슬라이더와 커스텀 탭 사용하기 slick 을 이용하여 슬라이더를 만들어보았다. 커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자 처음에는 막막했지만 하다보니 어떻게든(?) 되더라 다음처럼 화면에 한 devbirdfeet.tistory.com React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. BannerSlider.tsx import Slider, { Setti.. 2023. 8. 16.
반응형

티스토리툴바