FrontEnd :-)

팀 과제 질문 답변 (모범 답변 및 우리 조 답변 참고해서 새로 정리) 1. 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요? 차이점 : 배열의 내장함수 사용 여부 Array.from, 해당 유사배열이 사용할 수 있는 반복문 등을 이용해 배열로 바꾼 후 배열의 내장함수를 통해 변경하거나 유사배열 요소 하나하나에 직접 접근해 바꾸어야 한다. 유사배열 배열의 형태로 ([ ])로 생겼지만 배열의 내장함수를 사용하지 못하는 배열 Array.from 함수 예시 ↓ // 배열화 한다. const my_name = "mean0"; const my_name_array = Array.from(my_name); console.log(my_name_arra..

리액트 사용할 때, 함수형 컴포넌트를 사용한다면 '리액트 훅'을 사용한다. 리액트 훅(React Hook)이란? => 함수형 컴포넌트에서 React state와 생명주기(lifecycle) 기능을 “연동(hook into)“할 수 있게 해주는 함수. => React 버전 16.8(2018년도 추가)부터 새로 추가됨. 리액트 훅(React Hook) 특징은? => Hook은 class형 컴포넌트 안에서는 동작하지 않음. => (선택적 사용) 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook 사용 가능. ==> 당장 Hook이 필요 없다면, Hook을 사용할 필요 없음. => 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것이 가능. => useState 같은 ..

SPA란? 👉 Single Page Application! => 서버에서 주는 html이 1개뿐인 애플리케이션. => SPA는 주로 CSR(클라이언트 사이드 렌더링) 방식으로 렌더링한다. => SPA는 딱 한 번만 정적 자원을 받아 온다. 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 갱신한다. => React, Angular, Vue 등 프론트엔드 기술이 등장하며 크게 유행하고 있다. SPA 장점: 사용성 굳. 깜박거림 없음->자연스러운 사용자 경험(UX), 필요한 리소스만 부분 로딩, 컴포넌트별 개발 용이, 모바일 앱 개발한다면 동일한 API 사용하도록 설계 가능 SPA 단점: 초기 구동 속도 느림, SEO(검색 엔진 최적화) 어려움, 보안 이슈 더보기 → 단..

3주 차 팀 과제 문제 하나, event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야 할까요? 간결한 답 함수형 컴포넌트에서는 useEffect() 훅을 이용한다면 return 구문에서 removeEventListener()를 이용한다. (useEffect() 훅은 클래스 컴포넌트에서 componentDidMount와 componentDidUpdate, componentWillUnmount 역할을 함) React.us..

스파르타코딩클럽 #리액트 기초반 2주차 [수업 목표] event listener를 사용할 수 있다. React-router로 주소에 따라 다른 페이지를 보여줄 수 있다. 미리 정해놓은 주소가 아닐 때, '앗! 잘못 찾아오셨어요!' 페이지를 보여줄 수 있다. Redux로 상태 관리를 해보고 아래의 상태관리 흐름을 이해한다. (기본 값이 있고 → 어떤 동작을 하면("어떤 동작을 하는지 정하자! → 하면 뭐가 바뀌는 지 정하자!" 과정이 사전에 필요하다!) → 값이 변했잖아? → 컴포넌트한테 알려주자!) Redux hook을 사용해본다. 3-1. Event Listener 1) 이벤트 리스너란? 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다. 대표적으로는 마우스..

🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자바스크립트(JavaScript) = 느슨한 타입(loosely typed)의 동적(dynamic) 언어. => 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당)이 가능. => ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 ==> 스크립트(script) : 자바스크립트로 작성한 프로그램. ⌙ 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행. (강점) HTML/CSS와 완전히 통합할 수 있음 간단한 일은 간단하게 처리할 수 있게 해줌 모든 주요 브라..

스파르타코딩클럽 리액트 기초반 1주차 (nvm 설치: M1칩은 한 번에 되는 게 없냥..아무튼 성공. 자바스크립트 강의 부분: 2주차 알고리즘 문제 풀면서 몰랐던 부분을 많이 알게됨. react: 친절하다.! ) [수업 목표] 프론트엔드 전반에 필요한 기본기를 다진다. (HTML, CSS, Javascript) React 프로젝트 환경설정을 배워본다. React에서 쓰는 태그(JSX)를 사용해서 화면을 그릴 수 있다. 1-2 설치 Nvm 설치 오래 걸림. node.js 16.15로 설치하고(18버전이었음) 그리고 환경설정에서 터미널에 뜬 내용으로 복사에서 붙이니 성공. 1-3. 프론트엔드 기초 지식 우리가 하는 일: 화면을 그리고 데이터를 끼얹는다! 화면 그리기: 눈에 보이는 부분 만들기. 어디에는 글이..