# 프론트엔드

673개의 포스트

[FE/JavaScript] 호이스팅(Hoisting)

📌 호이스팅(hoisting) - 변수 및 함수 선언문이 스코프 내의 최상단으로 끌려올려지는 현상을 말함 - 주의 : 선언문이 올려지는것이지 대입문은 끌여올려지지 않는다. console.log(a); var a = 2;

약 5시간 전
·
0개의 댓글
post-thumbnail

[webpack] 웹팩(webpack), 웹팩(webpack)의 구성요소

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling,

어제
·
0개의 댓글

[FE/JavaScript] Scope(스코프)

📌 Scope(스코프) - 자바스크립트 엔진이 참조의 대상이 되는 식별자(Identifier)를 검색할 때 사용하는 규칙의 집합이다. - 어떤 변수를 사용하거나 호출하려고 할 때 해당하는 식별자로 사용하는데, 그 식별자를 검색하는 메커니즘이라고 이해하면

3일 전
·
0개의 댓글
post-thumbnail

[항해4기] 스파르타코딩클럽 웹개발 종합반 1주차 개발일지

수강목적어렸을 때 부터 하고싶었던 개발자를 하고싶어서 웹개발이란 것을 시작해서 개발자가 되기 위해 수강을 하게 되었다.배운 점 / 잘한 점1) 배운점HTML : 처음에 영상 강의를 통해 처음 접했던 것이 'HTML'이었다. 크게 'head'와 'body로

4일 전
·
0개의 댓글

1-0 프로그램 설치

Windows 필수사양: 64bitMac 필수사양: 버전 10.11 이상ChromeSlack (개발자들이 많이 사용하는 메신저)Pycharmhttps://www.jetbrains.com/pycharm/download/JET BRAINShttps://a

5일 전
·
0개의 댓글

[FE/JavaScript] 이벤트 버블링과 캡쳐 그리고 이벤트 위임

📌 이벤트 버블링 - 하위 엘리먼트에 이벤트가 발생할 때, 그 엘리먼트부터 시작해서 상위요소까지 이벤트가 전달되는 방식을 말한다.

6일 전
·
0개의 댓글
post-thumbnail

[SPA] SPA(Single Page Application)이란?

전통적인 과거의 웹 사이트는 문서 하나에 전달되는 파일의 용량이 작았음→ 어떤 요소를 한 번 클릭하면 Server에서 완전히 새로운 페이지를 전송 (용량이 작았기 때문에 부담X)→ SSR(Server Side Rendering, 서버 사이드 렌더링) 방식으로 화면에 보

7일 전
·
0개의 댓글

대학 LMS스케쥴앱 만들어보기(로그인 화면)

(배경화면은 무료로 배포된 배경화면입니다.) 앱을 클릭하면 바로 배경화면이 나오고 2초 뒤에 로그인 페이지로 넘어갑니다. 시작하기는 텍스트버튼을 이용하여 버튼을 클릭할 경우 로그인창이 나오게 만들었습니다. 시작하기버튼을 누르면 로그인 창이 나옵니다. ![](htt

2021년 9월 18일
·
0개의 댓글
post-thumbnail

대학교 LMS강의 스케쥴앱 만들어보기(구성)

코로나 상황이라 모든 대학은 온라인 강의를 반강제적으로 진행되고 있다.사실 이 앱을 만든 목적은 강의를 제대로 들었는지 과제를 제출했는지 여부를 가끔가다 까먹기 때문에 만들었다. 웹 사이트에서 접속하여 강의를 확인하면 되지만 늘 노트북을 들고 다닐 수 없고 너무 불편

2021년 9월 18일
·
0개의 댓글
post-thumbnail

리액트 입문 10 - useReducer()

상태를 관리하는 useState Hook 과 같은 기능을 하는 Hook이지만, 상태 업데이트 로직을 컴포넌트에서 분리할수 있습니다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다.action 객체의 경우 다음과 같이

2021년 9월 18일
·
0개의 댓글

[FE/JavaScript] AJAX

📌 AJAX(Asynchronous Javascript And XML) - 비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법을 의미한다. 📌 AJAX 동작과정

2021년 9월 18일
·
0개의 댓글
post-thumbnail

리액트 입문 9 - useCallback()

메모이제이션된 함수를 반환한다.즉, 특정함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 주의할 점은 doSomething안에서 사용하는 상태, props 가 존재한다면, a,b에 넣어야 합니다.넣지않게 된다면, 해당 값들을 참조할때 가장 최신값을 참조 할 것이라

2021년 9월 18일
·
0개의 댓글
post-thumbnail

리엑트 입문 8 - useMemo()

컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말합니다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용됩니다.컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 pro

2021년 9월 18일
·
0개의 댓글
post-thumbnail

리엑트 입문 7 - useEffect()

1\. 컴포넌트가 마운트 됐을 때 (처음 랜더링 될때) 2.언마운트 됐을 때 (사라질 때)3.업데이트 될 때 (특정 props가 바뀔 때) props 로 받은 값을 컴포넌트의 로컬 상태로 설정외부 API 요청 (REST API 등)라이브러리 사용 (D3, Vid

2021년 9월 17일
·
0개의 댓글
post-thumbnail

리엑트 입문 6 - 배열 랜더링하기

리엑트에서 여러개의 데이터를 랜더링이 필요할 때가 있습니다.다음과 같이 users 배열이 3개로 이루어져 있을때 map 내장함수를 통해 랜더링 할 수 있습니다.이때 props로 key값이 필수로 들어가야 하며, key 값은 고유한 값이여야 합니다.key가 없을 경우 배

2021년 9월 17일
·
0개의 댓글
post-thumbnail

리엑트 입문 5 - useRef

useRef의 경우 dom을 직적 선택해야 할 때 사용합니다.예를 들어 Input 버튼에 focus를 하거나, 스크롤 위치를 구하거나, 특정 엘리먼트를 가져올때 사용합니다.다음으로 input 버튼을 초기화 할때 focus하는 예시를 보겠습니다.useRef()로 Ref

2021년 9월 17일
·
0개의 댓글

[FE] CI와 CD

📌 CI(Continuous Integration) - CI(지속적 통합)은 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 말한다. - git과 같은 버전관리 시스템을 사용할 때, 여러명의 개발자가 하나의 공유 저장소를 사용하는 경우가

2021년 9월 17일
·
0개의 댓글