[부트캠프] CodeStates FE (39기)

코드스테이츠 부트캠프에 임하는 나으 자세

Document Object Model : 문서 객체 모델DOM은 구조화된 문서를 객체로 표현하는 방식이다.

JS

레츠 고 어레이 메서드!

CSS 셀렉터

\-오전 : CSS - Flex속성을 이용하여 박스 제어하기\-오후 : pair와 계산기 목업만들기 진행

어제 만든 목업은, 영역나눌때 height와 width를 px로 지정해줬는데,오늘은 flex-basis를 써봤다!

사전에 넘겨준operatorForAdvancedpreviousNumpreviousKey 에 대해서 이해가 안되서 일요일 오전 내내 돌려보고콘솔에 찍어보고 별짓을 다한 결과ㅠㅠ 이해가 간다.옆에 주석처리로 텍스트 해놨으니내일 다시 봐야겠어이제 장보러 간다 으아!!

특징 : 변수에 하나의 데이터를 저장종류 : number, string, boolean, null, undefiend 등동작원리 : stack에서 변수명에 따라 각 변수마다 가상의 공간을 부여한계 : 하나의 변수에 하나의 데이터만 저장 가능하다. 특징 : 변수 하나에

함수에 인자를 전달할때,Rest Parameter 문법과 argument 문법은 비슷한 역할을 하지만,반환하는 형태가 다르다.restParameter 문법은 인자를 받아서 배열로 반환하지만,argument 문법은 인자를 받아서 객체 배열로 반환한다. 따라서 restPa

지난번 계산기 과제제출때도 애를 먹이던 npm!아직까지 우분투 및 wsl을 이용한 운영체제도 헷갈리는데,npm nvm 에다가 과제제출매니저를 다운받아서 과제제출하는거 하려니까뜬구름 잡는 일이 많다. 오늘은 테스트 및 과제제출에 성공했지만,다음을 위해서 전체적인 과정을

코언즈 풀다가 제일 많이 막힌 곳\-핵심개념 : 객체(object)1\. 얕은 복사 : 데이터 같음, 주소 다음2\. 깊은 복사 : 데이터 다름, 주소 다름\-원시값 : 값을 복사할 때 복사된 값을 다른 메모리에 할당 => 원래 값과 복사된 값 영향x\-참조값 : 변수

프론트엔드 개발자로 커리어 전환을 위해 부트캠프를 수강한지 한 달이 지났다! yay~ 그래서 돌아보는 나의 한 달 👍Good 진도 : 밀리지 않고 끝까지 이해하고 과제를 수행 알고리즘 : 안 풀리는 것은 다시 풀기 (나의 취약점) 건강 : 코딩하는 시간 틈틈히 산

개념 : 다른 객체들에게 적용 가능한 연산을모두 지원하는 객체특징1) 변수 - 함수 할당 가능2) 전달인자 - 함수 호출시, 전달인자로 사용 가능3) 리턴 - 다른 함수의 결과로서 리턴 가능ex) 대표적인 일급객체 : 함수 함수는 일급객체의 특징을 가지기 때문

메서드 호출은 객체.메서드() 를 사용하여 객체 내에 메서드를 호출하는 방법이다.메서드 호출을 이용할때는 화살표 함수를 쓰지 않는다. (화살표함수는 this에 대한 바인딩이 없,고 method로 사용될 수 없다.)객체를 선언하고 객체 속성에 함수를 할당메서드 호출 :

객체지향 프로그래밍(Object Orienred Programming)은 하나의 모델을 만들고, 그 모델을 바탕으로 객체를 만드는 프로그래밍 패턴이다.JS에서는 이미 객체라는 개념이 존재, 따라서 용어 구분이 필요함(JS에서 쓰이는 데이터타입 객체와 객체 지향프로그래

(참고) MDN Object rototypes(https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes)여기서 프로토타입(Prototype)은 원형 객체를 의미합니다.함수를

쓸때마다 헷갈리는 for of와 for in 헷갈리지 않게 정리 한 번 하고 가자! 레고레고배열순환실제 콘솔 예시객체 순환실제 콘솔 예시

다음에 공부할 것 주제

reduce에서 가장 중요한 키워드1\. 초기값2\. 누적값3\. 현재값초기값이 없을때첫 누적값 acc는 배열의 첫번째 요소cur은 배열의 두번째 요소초기값이 있을때초기값은 인덱스값이 아니라 걍 초기값임첫 누적값 acccur은 배열의 첫번째요소고차함수종합문제Til: 을

state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다. React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다. React 컴포넌트(React C

였으나 동기들의 힘으로 완성한 베어미니멈:-)아직 프론트엔드랑 연결을 못해서주말에 fetch까지 연결해보자!app.jsdiscussons.jsindex.js

JSON.stringfy() : 객체 => JSON 형식으로 변환 JSON.parse() : JSON=> 객체로 변환 >### 오늘의 과제 : 재귀로 stringfy() 구현하기

// (for)반복문 돌려서 자식노드 있는지 확인하기 // root(=ul)밑에 붙을 li는 전역객체로 선언 // (if) 자식노드 없는 경우 // 1. li 만든다 // (else) 자식노드 있는 경우 // 1. ul, input, span 만든다 //

만든 기능 1) 메인화면2) 메뉴바 레이아웃3) 메인 이미지 캐러셀4) 카테고리 케러셀5) 상하 스크롤 기능 실제 H&M 모바일 페이지클론한 H&M 모바일 페이지 주소 : https://www.figma.com/file/UkE9sM79JDRCNwWILDSG7D

1) useState 임포트2) styled 임포트3) ModalContainer 스타일 (전체 컨테이너)4) ModalBackdrop 스타일 (모달 실행시 BGImage)5) ModalBtn 스타일(모달 버튼)6) ModalView 스타일(모달 실행시 뜨는 팝업창)7

이번 토글 구현은 복기🥲 CSS가 복병이었다!position을 이해했다고 생각했는데, 완전 반대로 알고있었다는...🥰 이번에 처음으로 transition도 써봤당 ㅋ.ㅋ 대단해

배열에서 내가 원하는 것만 남기고 싶다? 필터태그 삭제 코드태그 추가 코드삭제코드 연결추가코드 연결

map을 이용해서 랜더링하라!상태만들기상태변경함수 만들기배열 받아서 li로 맵핑, 삼항연산으로 랜더링메뉴 CSS 추가포커스 및 애니메이션 추가

APP.js

상위 컴포넌트의 "상태를 변경하는 함수'그 자체를 하위 컴포넌트로 전달하고,이 함수를 하위 컴포넌트가 실행한다.상위컴포넌트에서 하위컴포넌트로 함수를 넘겨줄때, 하위컴포넌트에서 함수가 실행되게 하는 방법

콘솔에 찍어본 reduce배열일때 기본reduce에 들어오는 두개의 인자배열일때는 초기값 없이 해줘도 오류가 안남요소가 객체일 때 기본객체일때는 초기값을 꼭 줄것위와 같은 상황은 숫자에 접근할 것이기 때문에 초기값을 0으로 주고,접근할 객체의 키 값을 val.age 써

출처 : MDNhttps://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatflat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운

냅다 붙이고 시작할 것

반응형 브레이크 포인트!1200px 이하 태블릿992px768px 이하 모바일576px

2차원 배열을 1차원 배열로 만드는건 왜 맨날 헷갈리는가!다시 한 번 정리해서 이번에는 잊지 않으~리const arr2 = arr.reduce(function (acc, cur) { return acc.concat(cur);});console.log(arr2);//

react 프로젝트 생성test 실행단축기를 활용한 테스트 확인 APP.test.jstest ("어떤 내용의 테스트인지" , 테스트하고자 하는 함수)render (테스트 할 컴포넌트)screen.메소드(/텍스트/i)ex) scree의 다양한 메소드 중 getByTes

예제출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식출처 : MDN > 구조분해할당

질문 : 리플로우와 리페인트에 대해 설명하세요.질문의 요지 :답변 :

질문 : 반응형 웹은 무엇이고 장단점에 대해 설명하세요.질문의 요지답 :

리액트는 SPA이기 때문에, 하나의 웹 페이지 안에서 여러개의 뷰를 보여줘야 하기 때문에다른 뷰를 보여줄때는 Routing을 해야 한다. Routing을 사용하는 방법에는 useNavigate와 Link 가 있다. useNavigate는 페이지 이동하는 함수를 반환한다