본문 바로가기

전체 글

 (118)
TIL: CSS margin 과 padding margin CSS는 element의 각 사이드에 대한 여백을 지정하는 속성이 있다. margin-top margin-right margin-bottom margin-left 모든 여백 속성은 다음 값을 가질 수 있다. auto - 브라우저가 여백을 계산한다. 길이 - 여백을 px, pt, cm 등으로 지정. % - 포함하는 요소 너비의 %로 여백을 지정한다. 상속 - 여백이 부모 요소에서 상속되어야 함을 지정한다. *tip: 음수 값이 허용된다. 코드를 줄이려면 하나의 속성에 모든 여백 속성을 지정할 수 있다. 작동 방식은 다음과 같다. margin 속성에 4개의 값이 있는 경우 p { margin: 25px 50px 75px 100px; } 상단 25px, 오른쪽 50px, 하단 75px, 왼쪽 10..
TIL: JavaScript Closer 클로저 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. function outter(){ function inner(){ var title = 'coding everybody'; alert(title); } inner(); } outter(); 결과는 alert으로 coding everybody가 출력된다. 위 예제에서 함수 outter 내부에 함수 inner가 정의 되어있음. 이를 내부 함수라고 한다. 내부함수는 외부함수의 지역변수에 접근 가능하다. function outter(){ var title = 'coding everybody'; //외부함수의 지역변수 fun..
TIL: 스코프 (Scope), var & let & const 스코프란? 식별자 접근 규칙에 따른 유효 범위 스코프의 정의는 "식별자 접근 규칙에 따른 유효 범위" 이다. 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 범위는 중괄호(블록) 또는 함수에 의해 나누어지고 그 범위를 각각 Block Scope, Fucntion Scope 라고 부른다. 스코프의 주요 규칙 규칙1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다. 바깥 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다. 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 없다. 규칙2. 스코프는 중첩이 가능하다. 스코프는 마치 중첩된 울타리와도 같다. 규칙3. 전역 스코프와 지역 스코프 가장 바깥쪽의 스코프를 전역 스코프(Global Scope)라고..
TIL: 호이스팅이란? 자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화 한다. let 이나 const로 선언한 변수의 경우 호이스팅시 변수를 초기화 하지 않는다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것을 말함. 따라서 변수는 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 하지만 선언과 초기화를 함께 수행하면 선언 코드까지 실행해야 변수가 초기화된 상태가 된다. function catName(name) { console.log("제 고양이의 이름은" + name + "입니다"); } catName("호랑이"); /* 결..
TIL: 브라우저의 렌더링 원리 홈페이지가 사용자에게 보여지는 순서 1. 주소창에 입력된 주소를 통해 서버를 찾아간다. 2. 입력한 주소의 정확한 주소를 DNS서버에서 ip주소로 변환하여 실제 서버를 찾는다. 3. 서버에서 HTML파일을 클라이언트로 보낸다. 4. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식) 5. 중간에 css, js스크립트를 다운받는 태그를 만나면 DOM생성을 중지하고 해당 자원들을 다운로드 한다. 5. 이렇게 만들어진 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다. 자바 스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다. 리플로우 : 레이아웃 계산을 다시 하는 것 (Geko엔진에서 DOM 배치 단계) 리페인트 : 재결합된 렌더트리를 기반으로 다시 그림 그리는 것 script ..
TIL: 리액트 컴포넌트 캡슐화 캡슐화된 컴포넌트란? 메인 어플리케이션으로부터 독립되어있는 컴포넌트를 뜻한다. 이로써 컴포넌트 내부에서 발생하는 업데이트, 테스트 케이스, 재사용에 용이하게 컴포넌트를 설계해야 합니다. 왜 작고 고립된 코드의 파편을 이용해서 만들어야 할까요? 다른 많은 이유가 있지만 가장 중요한 이유는 '거대한 어플리케이션을 쉽게 만들고, 유지 및 보수를 하기 위해' 이다. 조건부 렌더링 React 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. 아래 두 컴포넌트가 있다고 가정하면, function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 이제 사용자 로그..
7주차: React로 CGV클론코딩 회고 Github Frontend : https://github.com/nonjee888/fe_clone1jo Frontend : 김보미 노은지 임다은 Backend : 박성수 정민우 전대훈 기능 진행 네이버 로그인 : 완료 (로그인상태확인 완료)⭕️ 로그아웃 버튼 만들기(로그인시만 보임)+ 로그아웃 기능 :완료 ⭕️ 상세페이지 정보 불러 와서 붙이기 : 완료 ⭕️ 상세페이지 찜 하기 버튼 : 완료 ⭕️ 무비차트 정보 불러 와서 붙이기 : 완료 ⭕️ 카카오 로그인 : 완료 ⭕️ 무비차트 현재상영중 체크박스 선택시 상영중인 영화만 보이기 : 완료 ⭕️ 마이페이지에 정보 불러 와서 붙이기 : 완료 ⭕️ ⭐️⭐️예매하기 : ( 월요일 새벽부터 시작~수요일 저녁 까지 끝내기) : 다은 진행중 현재 좌석선택창 메인페이..
CGV 클론코딩 Trouble shooting Front-End Github # Troble-shooting 1 ) Cannot read properties of undefined 리액트에서 가장 자주 보는 오류 메시지이다. 이 오류는 값이 정의되지 않아 읽을 수 없을 때 발생한다. includes 로 배열을 돌리기 전에 값이 불러와지지 않아 오류 발생. Uncaught TypeError: Cannot read properties of undefined (reading 'classList') 해결) {seats.A.map((item,index) => selectSeat(item)} reserveseat = {Reserved?.a&&Reserved?.a.includes(item)} selected = {selectedSeat === (item)}/>)..
반응형

티스토리툴바