멋사

첫 날이라 임시 팀원들과 간단하게 OT 진행하고 서로의 목표에 대해 이야기하는 시간을 가졌다. 서로의 목표를 이야기하고 구체화하는 과정에서 내가 어떤 목표를 가졌는 지에 대해 자세하게 생각해볼 수 있어서 좋았다!

멋사 2주차 내용 기록

오늘 실습으로 만들어 볼 화면은 이 여우 화면이다!20분 안에 만들 수 있을 것이라고 자신만만하게 생각했는데 구현하는 것은 어렵지 않았지만 그 안에서 헷갈리는 개념들이 많았다.확실히 수업을 듣기 전에는 그냥 시각적으로 바로바로 바뀌는게 기분 좋아서 이유는 따져보지 않고

👀 문제점1 list 요소 앞에 이미지를 두어 아이콘처럼 표시하고 싶은데 이렇게 겹치는 상황이 발생했다. 이런 상황에서는 우선 1. padding 2. margin 이 두가지를 생각해보면 된다. 1. 상하 맞추기 (전구 크기만큼) 상하에 padding: 10px을

위의 사진에서 각 요소들 사이에 띄어쓰기가 있는 이유가 무엇일까?앞서 말한 사용자 에이전트의 마진일까?크롬 검사를 확인해보사용자 에이전트에는 마진이 표시되어있지 않다!❗️인라인 요소에는 그 다음 요소들을 위해 간격이 제공된다는 것을 알 수 있다.

❗️wrapper와 bucketlist로 두번 감싸서 wrapper는 Layout하는 데에만 사용한다.✔️ before✔️ after

멋사 3주차 내용 정리

💡 헷갈렸던 점 1이미지의 크기가 너무 커짐align-items: stretch라는 기본 값 때문에 높이에 맞추어 늘어나는 것으로 align-items: center를 지정하면 높이가 가운데 정렬이 되어 작아진다.그 다음 너비를 지정하면 된다.💡 헷갈렸던 점 2h

피그마 특강 내용 정리

✔️ width: 33.33333%내부에 있는 컨텐츠가 flex-container을 키우면 안돼서min-width, flex-grow(?)레이아웃과 카드를 나누면 레이아웃은 레이아웃만 신경쓰고 카드는 카드만 신경 쓰면 된다.➡️ 레이아웃이 완성되면 카드는 레이아웃을 신

가용 공간 활용 방법1\. 여백화 - margin너비화 - flex-grow가용 공간을 비율로써 나눠 갖는다. ( flex-basis가 기준 )➡️ 너비가 확장되는데 도움을 줌❗️ block 레벨 요소의 width: auto 처럼 유연하게 사용\++ ) flex-shr

l_wrapper : 재활용 가능성 높은 것 ❗️ 공통적으로 나오는 레이아웃을 공공재로 만든 것 (여러 섹션에 공통적으로 나오는 것) wrapper: 한번만 나오는 것(크게 전체를 묶는 것)마찬가지로 그리드에 사용했던 l_row, l_col 도 공공재로 만들고 여러번

코드를 작성하면서 헷갈렸던 점이나 주의하면 좋은 점을 간단하게 적어보자!!우선 첫번째! 타이포그래피 ➡️ 폰트를 지정하고 각 색을 변수로 처리한다. (재사용성 증가)👀 헷갈렸던 점position: absolute를 사용할 때 부모 요소에 height 지정이 꼭 필요한

8/19 (월) em, rem em과 rem은 둘 다 font-size 속성값에 비례해서 결정되는 상대 단위이다. 하지만 정확히 어디에 있는 font-size 속성값인지에 따라 차이가 발생한다. > 💡 em 해당 단위가 사용되고 있는 요소의 font-size 속성

사용자가 폰트설정에서 기본 폰트 사이즈를 바꿀 수 있기 때문에고정 픽셀을 하면 사용자의 폰트 관련 속성을 무시하고 고정 값이 들어감input 자체의 스타일을 커스텀을 하면 다양한 입력 필드 유형을 소화하기 어렵기 때문에 field를 임의로 추가해서 감싸준다.전역 변수값

✔️ html (마크업)alt - 이미지를 볼 수 없는 상황에서 대체 텍스트sr-only - 공간 차지하지 않고 보이지도 않게 할 수 있음 (screen reader)figcontents✔️ 방법 1 - position✔️ 방법 2 - grid

code snippet > 💡 code snippet 코드 스니펫(Code Snipet)은 '코드 조각' 즉 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 의미한다. 코드를 재사용할 수 있게 해줌으로써 반복 타이핑을 회피할 수 있게 도와준다. snipp

애플리케이션을 실행시켜 주는 것은 흔히 OS 혹은 플랫폼이라고 부른다.프론트 웹 애플리케이션은 브라우저에 의해 실행되므로 브라우저가 웹 애플리케이션 입장에서 보면 OS, 플랫폼이다.웹 애플리케이션의 기본 사상은 브라우저를 애플리케이션이 실행되는 OS로 보고 이 브라우저

9/9 (월) 변수 var - 재할당 가능 let - 재할당 불가능 / ES6에 나옴 --> 가급적 사용 const - 상수 : 변수에 있는 값을 바꿀 수 없음 type strong typed language 코드 타입 지정 타입 고정됨 weakly

9/23 (월) 9/24 (화) 9/25 (수) 9/26 (목) 9/27 (금)

9/30 (월) this 화살표 함수 - 객체 리터럴에 선언 화살표 함수 내에서의 this는 생성되는 객체를 지칭하지 못한다. this 동적 바인딩 함수에서의 this는 그 함수를 호출한 객체이다. 동작 바인딩이란 실행 시점에 함수의 this를 지정할 수 있다는 의

1주차

원래는 innerHTML을 사용해야했는데, 이를 사용하면 조금 수정을 할 때도 계속 DOM에 접근하여 성능이 좋지 않았다. 이를 위해 각 노드를 생성, 연결하여 진행했지만, 이렇게 한다면 너무 코드가 길어지고 하나의 노드를 만드는 것에도 복잡하고 불편하다. 이제 r

2-1 리액트란? React의 특징 SPA의 단점을 보완하는 몇가지 기술을 도입 SPA의 단점 모든 기능을 한 페이지에서 다 구현하다 보니 상태(데이터) 관리가 어려움 자바스크립트에서 HTML 코드를 생성해야 하므로 개발 생산성 저하 브라우저의 DOM

document로 노드를 생성하면, 요소 노드만 생성하므로 각각 만들고 자식으로 추가한 후 리턴을 해야하므로 복잡하다.react에서 실행한다면 아래의 링크를 head에 추가한 후 시작한다.document가 아닌 react를 삳용하면 요소 노드만 생성하는 것이 아니라,

npm init vite 로 프로젝트를 생성하여 vite를 이용하여 프로젝트를 진행해보자!버튼처럼 여러곳에서 재사용되는 요소는 컴포넌트로 만들어 분리해두는 것이 유지보수 측면에서 좋다.✔️ Counter.jsx위의 Counter.jsx에서 세개의 버튼이 필요하다. 이

원시 타입 변수는 값을 복사하여 함수로 전달된다.함수 내에서 변수의 값을 변경하더라도 원본 변수에는 영향을 미치지 않는다.값이 두개가 되는 것(원본, 복사본)이므로 복사본을 수정해도 원본에는 영향을 미치지 않는 것이다.실제 데이터를 저장하는 것이 아니라 데이터가 있는

리액트는 단방향이기 때문에 코드 상 변화한 것은 화면에 띄울 수는 있지만, 화면 상에서 변화한 것을 코드로 담아오진 못한다. 따라서 이벤트 핸들러를 등록해 동작하도록 해야한다.만약 input이 변하면 함수가 실행되도록 이벤트 핸들러를 등록한다.그 함수 안에서 상태 변경

👀 책 쇼핑몰에서 "베스트셀러" 메뉴를 클릭했을 때전통적 웹 페이지 이동 (서버 사이드 렌더링 SSR)브라우저가 "베스트셀러" 페이지의 HTML 파일을 서버에 요청.서버가 HTML 파일과 관련 리소스를 반환.브라우저가 새로운 HTML로 전체 페이지를 다시 렌더링.이전