자기계발 캠퍼스

글을 시작하기에 앞서 먼저 주의사항 하나 짚고 넘어가자. Mdn에서 스크롤바를 조작하는 ::webkit-scrollbar는 표준이 아니기에 제품 출시에는 사용하지 않기를 권고한다. 실제 호환성을 살펴보면 보는 모든 브라우저를 지원하지는 않는다. 그렇다면 지원하는 브라우저가 뭔데?? 바로 webkit 계열의 브라우저들이다. Webkit 계열에 해당하는 브라우저들에는 뭐가 있을까? - 크롬 (Android 웹뷰 포함) - 엣지 - 사파리 - 삼성 인터넷 - 오페라 - 네이버 웨일 그렇다. 사실상 대부분의 브라우저들이다. 그렇기에 ::webkit-scrollbar는 웬만하면 모든 브라우저에서는 된다. 하지만 파이어폭스 유저들을 위한 서비스라면 호환이 안 되니 이 점은 참고하자. 먼저 스크롤바를 스타일링하기 위..

모바일에서 가로로 스크롤되는 메뉴 / 내비게이션 바는 흔히 볼 수 있다. 자주 보이는 컴포넌트이지만 구현은 전혀 어렵지 않다. 기본적인 논리는 이렇다. - div라는 태그가 있는데 안에 내용물이 넘치는 상황 - 내용물이 overflow되면 가로로 스크롤 될 수 있게 설정을 해주면 된다 아래 예제는 tailwind를 사용하여 구성하였다. {navItem.map((item) => { return ( // 내용물 알아서 ); })} 기본적으로 div는 block이기 때문에 width가 전체 가로 길이와 일치한다. 모바일 화면에서 가로길이를 넘어갔을 때 이를 화면 안으로 몰아서 넣으려고 하지 않게 해주기 위해 whitespace 속성을 사용한다. 왼쪽은 일반적인 div 태그 내에서 내용물이 넘칠 때의 상황이다...

import React, { useState } from "react"; import Arrow from "../icon/dropdown-arrow"; type DropdownItem = { name: string; id: string; }; type DropdownProps = { items: DropdownItem[]; }; function DropDown({ items }: DropdownProps) { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [selectedItem, setSelectedItem] = useState("선택"); return ( { setIsDropdownOpen(false); }} > { setIsD..

동아리에서 진행하는 프로젝트 중 드롭다운을 만들어야했는데 드롭다운 하나를 위해서 디자인 라이브러리를 받는 건 프로젝트의 용량으로 보나 여러모로 너무 낭비라고 판단하여 직접 구현하기로 했다. 먼저 구현된 결과물부터 바로 보고 어떻게 구현했는지 분석해보자. const [activeIdx, setActiveIdx] = useState(); {adminMenu.map((menu, index) => { const active = activeIdx === index + 1 ? true : false; return ( ); })} // AdminMenu 컴포넌트 const AdminMenu = ({ menuItem, idx, activeIdx, active, setActiveIdx, subMenu }) => { re..

데이터 타입 data type은 값의 종류를 말한다. 자바스크립트에는 총 7개의 데이터 타입이 있다. 먼저 크게 원시 타입과 객체 타입으로 구분된다. 원시타입 숫자 타입 number 숫자, 정수와 실수 구분 없음 문자열 타입 string 문자열 불리언 타입 boolean 논리적 참 true와 거짓 false undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용 심벌 타입 symbol ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 1과 '1'은 값은 비슷해보이지만 전혀 다르다. 숫자 타입과 문자열 타입은 값을 생성한 목적과 용도가 다르다. 숫자 타입은 주로 산술 연산을 위해 생성하지만 문자열 타입은 주로 텍..

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다. 이번 장에서는 앞으로 자주 사용할 용어의 의미를 주의 깊게 살펴보자. 처음 살펴볼 내용은 값 value 이다. 값은 식(표현식 expression)이 평가 evaluate 되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 10 + 20 //30 위의 식은 평가되어 30이라는 결과값을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있는데 이는 6장에서 살펴보자. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체 또는 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 변수에..

사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리르 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 셀 하나의 크기는 1바이트이며, 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다. 그리고 각 셀은 고유의 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며 0부터 시작해서 메모리의 크기만큼 정수로 표현된다. 예를 들어, 4GB 메모리는 0부터 (2의 32승-1) 까지의 메모리 주소를 갖는다. 컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 메모리에 저장되는 데이터는 데이터의 종류와 상관없이 모두 2진수로 저장된다. 10 + 20 이런 코드가 있다면 1..

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저 또는 Node.js에서 실행할 수 있다. 하지만 브라우저와 Node.js는 용도가 다르다. 브라우저는 웹페이즈를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다. 따라서 둘다 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다. 예를 들어 파싱된 HTML element를 선택하거나 조작하는 기능은 DOM API는 브라우저는 활용가능하지만 Node..

1995년 웹 브라우저 시장을 지배하고 있던 넷스케이프는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정. 브랜던 아이크가 자바스크립트를 개발함. 자바스크립트가 다른 브라우저와는 완벽히 호환되지 못하고 브라우저에 따라 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 따라서 모든 브라우저에서 정상 동작하는 표준화된 자바스크립가 필요했고 ECMA International이 표준화된 자바스크립트인 ECMAScript를 공개했다. 계속해서 새로운 기능이 추가되고 있고 지금 ES11(ECMAScript 2020)까지 나온 상황이다. 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 브라우저는 서버로부..

프로그래밍을 한다고 할 때 그 기저에는 반드시 사용하는 언어에 대한 기본 개념과 동작 원리의 이해가 있어야 한다. 시행착오를 많이 겪어봐야 한다. 동작원리 -> 코딩 스킬 -> 프로젝트 -> 동작원리 .... 동작원리를 이해하는 것은 코딩 스킬과도 연결 되고 이를 통해 프로젝트를 진행할 때 동작원리를 정확히 이해하고 있어야한다. 세 개가 삼박자로 계속해서 잘 맞아떨어져야 한다. "빨리 가는 유일한 방법은 제대로 가는 것이다" 프로그래밍을 왜 필요한가? -> 문제를 해결하기 위해서 문제를 어떻게 해결할 건데? -> 복잡한 문제는 단순하게 분해하고 사용하는 자료구조들을 정리 및 구분을 하면 된다. 언어의 종류 - 컴파일러 언어, 인터프리터 언어 사람 ------------- 컴파일러 or 인터프리터 ----..