삼이의 개발 블로그

Grid?CSS 레이아웃 중 하나로,행과 열로 구성되어 있어 별도의 위치 지정 없이도 더 많은 레이아웃을 구현할 수 있게 만들어졌다. 🔎 Table vs Grid vs Flex TableGridFlex행과 열이 있는가?⭕️⭕️❌유동적인 레이아웃이 가능한가?❌⭕️⭕️1. 그리드 용어 1. Grid Containerdisplay:grid;를 적용하는 Grid의 전체 영역으로, 이 안의 요소들이 Grid의 영향을 받아 정렬된다.해당 컨테이너 안에 있는 모든 자식 요소가 Grid Item이 된다. 2. Grid Track그리드에 그려진 두 라인 사이의 공간이다.공간이 세로일 때는 columns(행), 가로일 때는 row(열)이다.3. Grid CellGrid의 가장 작은 단위로, Grid Item을 가지고 있..

회사에서 BEM을 사용한다고 말씀해주셨는데, 어렴풋이 알지만 정확히 설명할 수 없어 제대로 공부하고 정리해보았다! 🔎 CSS 방법론?CSS 방법론은 간단히 얘기하면 CSS를 사용하기 위해 어떤 방식으로 클래스 네임을 사용할 지에 대한 이야기이다.대표적으로 3가지 방법론이 있는데BEM(Block Element Modifier)OOCSS(Object Oriented CSS)SMA CSS(Scalable and Modular Architecture for CSS)이 중 현재 사용하고 있는 BEM에 대해 공부해보았다.1. BEM이란?BEM은 CSS 방법론 중 하나로, Block, Element, Modifier의 약자이다.🔎 BEM의 특징작명을 할 때, 의미가 있는 네이밍을 지향한다.ID, 태그 이름 등 클..

JSX?확장된 자바스크립트 문법으로 JS와 HTML을 함께 쓸 수 있다. 예시function Header(){ const number = 10 return( number is {number} )}🔎 JSX의 특징1. JSX 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다 → 숫자나 문자로 표현되는 표현식만 가능2. 숫자, 문자열, 배열 값만 렌더링 된다 → undefined, null, boolean(true,false)는 값이 생성되더라고 페이지에 렌더링이 되지 않는다.3. 모든 태그는 닫혀있어야 한다4. 차상위 태그는 반드시 하나여야 한다. → 차상위 값이 여러개인 경우 빈태그 를 가장 위에 삽입한다.출처이정환 -..

배열?여러개의 값을 순차적으로 담을 수 있는 비원시형 자료배열은 많은 메서드를 포함하고 있는데, 이를 이용하면 깔끔한 프로그래밍을 할 수 있다.1. 배열 요소 조작 메서드1 - 1. 요소 추가 메서드배열 메서드설명push배열의 마지막에 요소를 추가pop배열의 마지막에 요소를 제거 1 - 2. 요소 제거 메서드배열 메서드설명shift배열의 맨 앞에 요소를 추가 unshift배열의 맨 앞의 요소를 제거slice배열의 특정 부분을 제거 예시아래 글에서 push, pop, shift, unshift의 자세한 설명을 볼 수 있습니다. [JavaScript 개념] 7. 배열배열?비원시타입 자료형으로, 여러개의 값을 순차적으로 담을 수 있다. 🔎 배열의 특징1. 배열의 요소에는 0부터 시작하는 숫자(index..

React?Meta에서 개발한 오픈소스 JS 라이브러리대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어졌다. 🔎 React로 만들어진 서비스들넷플릭스, 페이스북, 인스타그램, 노션 등...→ 대기업에서 많이 사용하다보니 웹프레임워크 중 가장 점유율이 높다👍 React의 기술적인 특징 컴포넌트를 기반으로 UI를 표현한다 화면 업데이트 구현이 쉽다. 화면 업데이트가 빠르게 처리된다.1 . 컴포넌트 (component)화면을 구성하는 요소, UI를 구성하는 요소를 뜻한다. 페이지를 구성하는 모든 요소(Header, Main,Footer, Article 등)를 각각의 컴포넌트로 만들어 관리할 수 있다. 🔎 컴포넌트의 장점 - 코드 수정이 유리하다 → 페이지마다 동일한 코드를 넣다보면 페이지 수가 ..

웹 브라우저(Web Browser)?웹에서 페이지를 검색하고 표시하며, 사용자가 인터넷상의 다양한 정보를 탐색하고 상호작용 할 수 있도록 도와주는 응용 프로그램이다. 웹 브라우저에서는 뼈대가 되는 HTML, 살을 붙여 꾸며주는 CSS, 동작을 수행하는 JS가 함께 실행된다.내가 의도한 대로 코드를 실행시키기 위해 브라우저가 어떻게 렌더링되는지 파악해야 더 효율적인 코드를 작성할 수 있다.1. 브라우저 렌더링 과정(Critical Rendering Path)Critical Rendering Path(중요 렌더링 경로)?브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 전환되는 일련의 단계를 말하며, DOM(Document Object Model)과 CSSOM(CSS Object Mod..

배열?비원시타입 자료형으로, 여러개의 값을 순차적으로 담을 수 있다. 🔎 배열의 특징1. 배열의 요소에는 0부터 시작하는 숫자(index)가 매겨져 있다.2. 배열의 요소는 어떤 형태여도 무관하다1. 배열 생성배열 생성자와 배열 리터럴을 통해 생성할 수 있다→ 배열 리터럴이 간편해 주로 쓰인다. 예시let arr1 = new Array();//배열 생성자let arr2 = [];//배열 리터럴2. 배열 요소 조작 메서드2- 1. 배열의 요소 추가배열 메서드설명push배열의 맨 뒤에 새로운 요소를 추가하는 메서드unshift배열의 맨 앞에 새로운 요소를 추가하는 메서드 예시let arr = [3,4]arr.push(5,6,7) //뒤에 추가arr.unshift(0,1,2)//앞에 추가console.l..

객체?비원시타입 자료형으로, key를 통해 복잡한 구문이나 데이터의 집합을 저장할 수 있다.1. 객체를 생성하는 법객체는 객체 생성자와 객체 리터럴을 통해 생성할 수 있다. 예시let obj = new Object();//객체 생성자let obj2 = {};//객체 리터럴2. 객체 프로퍼티객체는 중괄호{} 내에 key와 value로 구성된 데이터 집합체인 프로퍼티를 넣을 수 있다 🔎 객체 프로퍼티의 구성Key: Value콜론 :을 기준으로 왼쪽에는 key가 오른쪽에는 value가 들어간다.2 - 1. Key프로퍼티 key는 프로퍼티의 이름, 프로퍼티의 식별자로 불린다. 🔎 key의 특징1. 프로퍼티를 불러올 때 key값으로 불러오기 때문에 고유한 값으로 작성해야 한다.2. key값은 문자 또는 숫자..

호이스팅변수와 함수 선언이 해당 범위의 맨 위로 끌어올려지는 듯한 현상 1. 함수 호이스팅함수 유효범위의 가장 위쪽으로 끌어올려서 코드를 해석하는 작동 방식 예시connectString('study','hoisting')//study hoistingfunction connectString(str1, str2){ console.log(str1 + str2)} 2. 변수 호이스팅2 - 1. varvar num2;console.log(num2); //undefinednum2 = 123;🚨var의 경우 값이 할당 되기 전 num을 출력했음으로 undefined가 출력된다. => 호이스팅이 발생한다 2-2. let, constconsole.log(num1);//Cannot access 'num1' before ..

📖 프로젝트 설명공급망 관리 페이지의 사용성을 개편하고자 하는 프로젝트기간: 2024.06 ~ 2025. 05 🛠️ 기술스택퍼블리싱: HTML5, CSS3, Sass스크립트: Javascript(ES6), jQuery빌드 및 번들링: Rollup버전 관리 및 패키징 관리: Git,npm,pnpm📢 협업툴FigmaTeamsJiraBigBucket🖥️ 구현 기능파일 업로드 퍼블리싱 및 기능 구현아이콘 컴포넌트 퍼블리싱모달 컴포넌트 퍼블리싱🔖 KPT 회고👍 KEEP1. 신입들끼리 운영한 스터디방이번 프로젝트를 위해 모인 인원 중 신입들을 모아 스터디방을 만들었다. IBSheet라는 새로운 api를 다룰 때 생기는 궁금증을 한 번에 질문하고 공유해서 일의 효율을 높였다.그 외에도 JS와 Sass에 관..