profile
사주보는 프론트엔드 개발자
태그 목록
전체보기 (30)패스트캠퍼스(15)프론트엔드(7)html(6)js(5)자바스크립트(5)메가바이트스쿨(4)CSS(4)클론코딩(4)git(3)함수(3)React(3)스타벅스(3)리액트(2)function(2)조건문(2)데이터(2)babel(2)웹사이트(2)math(1)전환(1)실습(1)프로그래머(1)불변성(1)degit(1)상위요소(1)블록상자(1)lodash(1)가상 요소 선택자(1)plugins(1)문자(1)호이스팅(1)프론트 엔드(1)메소드체이닝(1)카카오(1)시드웨일(1)취준심판(1)윈도우(1)띄움(1)형변환(1)애니메이션(1)연산자(1)errorBoundary(1)인라인요소(1)예약어(1)취준(1)배치(1)스타벅스 클론코딩(1)컴공(1)플렉스(1)함수표현(1)Prototype(1)useEffect(1)useState(1)가져오기(1)확장프로그램(1)ref(1)개꿀(1)부모요소(1)for(1)태그(1)타입스크립트(1)webpack(1)웨비나(1)자식요소(1)typeof(1)생성자함수(1)outline(1)error(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)key(1)즉시실행함수(1)원시자료형(1)useRef(1)내보내기(1)this(1)임포트 방식(1)DOM(1)노션짱(1)블록(1)국비지원(1)화살표함수(1)글꼴(1)VS Code(1)선택자(1)그리드(1)구조분해할당(1)hook(1)이벤트핸들러(1)리렌더링(1)링크 방식(1)페이지 연결(1)속성 선택자(1)블록요소(1)필터(1)개발자(1)변수 유효범위(1)인라인(1)정렬(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)Map(1)요소쌓임(1)IIFE(1)if(1)헤더(1)타이머함수(1)메가바이트 스쿨(1)가상 클래스 선택자(1)netlify(1)초격차(1)내장 방식(1)배경(1)인라인 방식(1)object(1)html 태그(1)복합 선택자(1)component(1)콜백(1)

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

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

2022년 5월 27일
·
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

[패스트 캠퍼스 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

[패스트 캠퍼스 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개의 댓글
·
post-thumbnail

[패스트 캠퍼스 FE] JS 함수

JS 함수 함수 복습 > 함수의 결과가 반복적으로 사용될 때 -> 변수에 담아서 쓰는 것이 좋음 단일로만 사용될 때 -> 함수의 결과가 사용되는곳에서 호출하는게 좋음 >❗️ 함수 표현과 함수 선언의 차이 >함수 선언은 그 함수를 반환하는 변수를 만들고 >함수 표현

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

[패스트 캠퍼스 FE] JS 시작하기

JS 시작하기 개요(ECMAScript) 및 프로젝트 초기화 ECMA 스크립트란? >ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

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

[패스트 캠퍼스 FE] JS 선행

JS 선행 스타벅스 클론 코딩을 본격적으로 들어가기에 앞서 필요한 개념들을 정리해보겠다! 목차 >1. 표기법 데이터 종류 변수, 예약어 함수 조건문 DOM API 메소드 체이닝 질의응답 표기법 >* dash-case(kebaba-case) HTML, CSS

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

[카카오 웹사이트 클론코딩] - html로 구조짜기

이 날만을 기다렸다..드디어 열심히 수업한 html과 css를 바탕으로 클론코딩을 하기로 했다.일단 리액트나 자바스크립트 등등 배워서 코딩을 하려면 멀었으니깐,"지금까지 배운것을 활용해보는 측면에서 만들어보자" 가 주된 목적이다.(복습을 위해서 하는거라, 끝까지 할지는

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

[패스트 캠퍼스 FE] CSS 속성

CSS 속성 CSS속성의 역할 화면에 예쁘게 나오도록 만드는 역할을 한다. > CSS 속성의 종류 > * 박스모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 박스모델 너비 (width,height) > ` 인라인 요소`

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

[패스트 캠퍼스 FE] CSS 개요

CSS 개요 기본 문법, 주석 CSS의 기본 문법 알아보기 편하게 그림을 바탕으로 각 요소들을 설명하겠다 >선택자 스타일 (CSS)을 적용할 대상 (Selector) > 속성 스타일 (CSS)의 종류 (Property) > 값 스타일 (CSS)의 값 (Value)

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

[패스트캠퍼스 FE MGS 3기] - 7일차

글자를 앉히기 위해 만들어진 상자💡 팁line-height에 따라 height가 계산됨. 근데 줄이 n개가 되면 height \* n 이 됨.img 태그vertical-align원래는 baseline을 기준으로 정렬되나,middle 값을 넣으면 height를 기준으로

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