profile
사주보는 프론트엔드 개발자
태그 목록
전체보기 (37)패스트캠퍼스(15)프론트엔드(7)html(6)React(5)자바스크립트(5)js(5)클론코딩(4)CSS(4)메가바이트스쿨(4)스타벅스(3)리액트(3)git(3)함수(3)데이터(2)key(2)babel(2)조건문(2)Map(2)function(2)웹사이트(2)math(1)전환(1)실습(1)WILDCARD(1)프로그래머(1)불변성(1)degit(1)상위요소(1)블록상자(1)lodash(1)가상 요소 선택자(1)plugins(1)closer(1)문자(1)호이스팅(1)프론트 엔드(1)메소드체이닝(1)카카오(1)시드웨일(1)취준심판(1)윈도우(1)띄움(1)형변환(1)애니메이션(1)연산자(1)errorBoundary(1)인라인요소(1)예약어(1)취준(1)배치(1)스타벅스 클론코딩(1)navigate(1)컴공(1)플렉스(1)함수표현(1)Prototype(1)useEffect(1)useState(1)가져오기(1)확장프로그램(1)ref(1)개꿀(1)부모요소(1)for(1)태그(1)고차함수(1)타입스크립트(1)webpack(1)웨비나(1)자식요소(1)typeof(1)생성자함수(1)outline(1)error(1)리액트시작만몇번째냐!(1)표기법(1)반복문(1)switch(1)공식문서(1)bundler(1)npx(1)const(1)let(1)var(1)DOMAPI(1)인라인상자(1)hookflow(1)데이터 종류(1)하위요소(1)경제적자유(1)찍먹(1)기본 선택자(1)String(1)즉시실행함수(1)원시자료형(1)useRef(1)내보내기(1)this(1)임포트 방식(1)DOM(1)노션짱(1)블록(1)국비지원(1)화살표함수(1)글꼴(1)VS Code(1)선택자(1)alert(1)그리드(1)구조분해할당(1)hook(1)이벤트핸들러(1)리렌더링(1)링크 방식(1)페이지 연결(1)속성 선택자(1)블록요소(1)필터(1)개발자(1)변수 유효범위(1)인라인(1)styled component(1)모듈화(1)rerendering(1)CDN(1)클래스(1)다단(1)단축키(1)CSS 속성(1)array(1)전개연산자(1)form(1)메가테라(1)Fetch(1)style(1)JSX(1)빈태그(1)변환(1)변수(1)정렬(1)메소드(1)요소쌓임(1)IIFE(1)if(1)헤더(1)타이머함수(1)메가바이트 스쿨(1)그래도props는배웠다!(1)가상 클래스 선택자(1)netlify(1)초격차(1)내장 방식(1)배경(1)인라인 방식(1)object(1)html 태그(1)복합 선택자(1)component(1)콜백(1)
post-thumbnail

[패캠 메가바이트 스쿨] 리액트 실시간 강의 - 7

1️⃣ wildcard와 Navigate2️⃣ react에서의 스타일링props.path로 (asterisk) 를 넘겨주는 경우 모든 url에 대응(Route는 순서대로 동작하므로, 일반적으로 는 가장 아래 배치)<Navigate />: 해당 url로 페이지를 이

2022년 5월 27일
·
0개의 댓글
post-thumbnail

[패캠 메가바이트 스쿨] 리액트 실시간 강의 - 6

진상현 강사님의 리액트 강의 목차 > 1️⃣ 이전 실습 2️⃣ React router 이전 실습 • input value를 수정하면 3초 이후에 현재 value를 console.log 를 통해 1회 출력하는 컴포넌트 만들기 1초마다 input창 아래에 n초 뒤 콘

2022년 5월 27일
·
0개의 댓글

[자바스크립트] - map 함수

map 함수의 작동 순서 1. array의 자료 갯수만큼 함수안의 코드를 실행해줌. > > * 이러면 console에 1이 3번찍힘 2. 함수의 파라미터는 array안에 있던 자료임. > > * 이러면 console에 1,2,3이 차례대로 표시됨 3. ret

2022년 5월 27일
·
0개의 댓글
post-thumbnail

[패캠 메가바이트 스쿨] 리액트 실시간 강의 - 5

진상현 강사님의 리액트 강의 목차 > 1️⃣ useEffect 2️⃣ memoization 3️⃣ useCallback useEffect > side effect를 다룰 때 사용하는 hooks. 최초 render될때 1회 실행, 그다음부터는 dependency a

2022년 5월 25일
·
0개의 댓글
post-thumbnail

[패캠 메가바이트 스쿨] 리액트 실시간 강의 - 4

진상현 강사님의 리액트 강의 목차 > 1️⃣ useRef useRef useRef의 일반적인 사용법 ref를 넘겨주면, 해당 dom element 를 current에 담아줌 실습 1 >useRef를 사용하여, Click to Reset 버튼을 클릭하면 input

2022년 5월 25일
·
0개의 댓글
post-thumbnail

리액트 - 공식문서로 디테일 잡기 (고급)

리액트 - 공식문서로 디테일 잡기 (고급) 목차 > 1️⃣ Hooks 2️⃣ Composition 3️⃣ HOC 4️⃣ Memoization 5️⃣ Context 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🧑🏻‍💻 오늘의 회고 1️⃣ Hooks Hook 이란? 공식

2022년 5월 19일
·
0개의 댓글
post-thumbnail

[패캠 메가바이트 스쿨] 리액트 실시간 강의 - 3

진상현 강사님의 리액트 강의 목차 > 1️⃣ state란? 2️⃣ useState를 이용한 state 관리 3️⃣ 일반적으로 React component가 다시 render되는 조건 4️⃣ state 업데이트의 비동기성 5️⃣ React Hooks란? 1️⃣ sta

2022년 5월 19일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 - 공식문서로 디테일 잡기 (초급)

리액트 - 공식문서로 디테일 잡기 목차 > 1️⃣ 공식문서를 보는 이유 2️⃣ 개발 환경 설정 3️⃣ JSX 4️⃣ Props 5️⃣ State 6️⃣ 컴포넌트 생명주기 7️⃣ 이벤트 8️⃣ 9️⃣ 🔟 1️⃣ 공식 문서를 보는 이유 > 라이브러리도 결국 사람이

2022년 5월 18일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 - 5

1️⃣ Key와 리랜더링 알아보기2️⃣ 상태 끌어올리기3️⃣ 데이터 Fetch 해보기Key는 Value를 특정하는 이름완료 버튼 클릭시 해당 항목이 사라지고, 복구 버튼을 누르면 사라진 항목이 표시됨.코드공식 문서(https://developer.mozilla

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[패캠 메가바이트 스쿨] 리액트 실시간 강의 - 2

진상현 강사님의 리액트 강의 목차 > 전 강의 복습 >꼭 요소가 return문 안에 들어 있을 필요는 없다 > > 이런식으로 사용 가능 조건부 rendering > jsx 렌더시 무시되는 값 > ![](https://velog.velcdn.com/image

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[패캠 메가바이트 스쿨] 리액트 실시간 강의 - 1

진상현 강사님의 리액트 강의 CRA 란? > > package.json >package.json > 코드를 볼때 소스코드보다도 먼저 보는 경우가 많음 대충 어떤 코드인지 정보를 알 수 있음 > >eject -> ??? >localhost = 루프백 IP (1

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 - 4

1️⃣ 리액트 Element에 스타일 입히기2️⃣ Ref로 DOM 다루기3️⃣ Form 다루기4️⃣ Error 다루기이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!잔여 연산자➡️ 입력받는 값들을 모두 태그 안에 설정해줌특정 DOM을

2022년 5월 13일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 - 3

1️⃣ 컴포넌트 상태 다루기2️⃣ 컴포넌트 사이드이펙트 다루기3️⃣ 커스텀 훅 만들기4️⃣ Hook Flow 이해하기공식문서useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예제: useSt

2022년 5월 13일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 - 2

리액트 맛보기 2 리액트의 리렌더링 알아보기 >1️⃣ React는 변경된 곳만 렌더링한다. > >➡️ 굉장히 효율적이다! > >2️⃣ React는 불변객체(immutable)이다. >

2022년 5월 12일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 -1 (초격차 패키지)

😋 리액트 맛보기 🤨 리액트를 시작하기에 앞서... 리액트는 라이브러리의 구조를 가지고 있다. > 라이브러리 vs 프레임워크 > 라이브러리는 개발 편의를 위한 도구의 모음 프레임워크는 기반 구조까지 잡혀있음 > -> 라이브러리는 공구 -> 프레임워크는 공장

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] Bundler

Bundler > 여러개의 파일을 하나의 파일로 묶어주는 역할을 함. > 참고 블로그 > Webpack vs Rollup vs Parcel > 위 세가지가 가장 많이 쓰이는 번들러임. > * Webpack ➡️ 다양하고 복잡한 프로젝트에 추천 (대부분이 선호)

2022년 5월 2일
·
2개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] TypeScript

TypeScript TypeScript 시작하기 TypeScript 란 무엇인가? > VS Code 설치 및 설정 > >1. "test.ts" 파일 생성 터미널에 npm init -y 입력 (현재 폴더를 npm project로 만듬) 터미널에 npm i ty

2022년 4월 30일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] JS 데이터 실습

JS 데이터 실습 가져오기, 내보내기 자바스크립트에서 데이터를 내보낼때, 기본 통로와 이름을 지정하는 통로 두가지가 있음. > 기본 통로의 경우 (default) > > 기본 통로 예시 > > > 이름을 지정하는 통로 > 사용 예시 > > >📌 기본

2022년 4월 28일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] JS 데이터

JS 데이터 목차 >1. 문자 숫자와 수학 배열 객체 구조 분해 할당 전개 연산자 불변성 얕은 복사와 깊은 복사 문자 (string) >String 전역 객체는, 문자열(문자의 나열)의 생성자이다. 종류 String.length 문자열의 길이 반환 Strin

2022년 4월 28일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] JS 클래스

JS 클래스 ❗️ 생성자 함수(prototype) 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 있다. 이때, new연산자와 생성자 함수를 사용하면, 유사한 객체 여러개를 쉽게 만들 수 있다. > > 생성자 함수 만드는 법 함수 이름의 첫글자는 대문자로 시

2022년 4월 26일
·
0개의 댓글