Sparta x 이노베이션 캠프 (69) 썸네일형 리스트형 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)}/>).. 7주차 : React로 CGV클론코딩. 카카오 소셜로그인 프론트엔드 CGV 클론 코딩에 로그인을 네이버 소셜로그인으로만 하려고 했는데 기능 담당자가 내가 아니어서 카카오 소셜 로그인에 도전하게 되었다. 전체적인 흐름도 내가 이해한 바로는 1. 카카오 로그인을 요청하면 Redirect URI를 통해 파라미터에 인가코드를 받는다 2. 파라미터에 온 인가코드를 저장하여 백엔드 서버로 보내준다. 3. 백엔드 서버에서 카카오에 POST로 인가코드를 보내면 Response로 토큰을 받아서 프론트엔드에 전달하게되고, 4. 클라이언트가 로그인을 하면 성공. 셋팅 한 대로 로컬 스토리지에 토큰이 저장되면 된다. 과정 1. Kakao developers에서 카카오 소셜로그인을 선택하고 내 애플리케이션을 등록한다. 2.REST API키를 받고 Redirect URI에 카카오로부터 인가코드를.. 6주차: React 미니프로젝트 "오늘도 무사히" 시연영상 # 오늘도 무사히 고된 일상을 버티고 오늘 하루도 무사히 넘겨보자는 취지의 공유 일기장입니다. 비대면에 익숙한 사회가 되어버린 오늘 날, 서로가 일상을 공유하며 혼자가 아님을 일깨워주고자 공유일기장 이라는 아이디어를 내게 되었습니다. 유저들은 서로의 일상을 사진과 함께 공유하고, 댓글도 달고, ‘좋아요’로 반응해주며 공감과 위로를 공유할 수 있는 서비스 입니다. # GitHub FrontEnd Github GitHub - nonjee888/fe_6week_miniproject: 미니프로젝트 - 공유일기장 미니프로젝트 - 공유일기장. Contribute to nonjee888/fe_6week_miniproject development by creating an account on GitHub. g.. 이전 1 2 3 4 5 6 7 ··· 9 다음
