귀엽고 행복해

Object.keys(), values, entries, assign

Objct.keys() Object.keys() 메소드는 객체 안의 key를 배열에 묶어서 반환한다. // 사용법 const lovely = { dog : 'greenbean', cat : 'yellow', me : false }; Object.keys(lovely); // ["dog", "cat", "me"] // 순서 const myobj = { 17 : 'greenbean', 2 : 'yellow', 7 : false }; Object.keys(myobj); // ["2", "7", "17"] Object.values() Object.values() 메소드는 객체 안의 value를 배열에 묶어서 반환한다. // 사용법 const lovely = { dog : 'greenbean', cat : 'ye..

220603 프론트엔드 부트캠프 중간고사

Encountered two children with the same key, `62996fb003610b002998c58c`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. 에러 아직 해결 못 함 이건 알리왕왕 귀여워서... 그리고 아이콘으로 수입한 게 안 깨지고 이쁘당 이때 결국 안됨 한 번인가 더 함...

프론트엔드 부트캠프 한 달,

엊그제 오랜만에 동물병원 앞을 지났다. 갈 일이 없어지면 좋을 줄 알았는데, 열심히 다니던 때가 그립다. 이젠 동물병원에 계신 수의사 선생님도 그립다. 어쨌든 오랜만이란건 내가 연속으로 액땜했던 게 그만큼 오래 지났다는 것... 그때 많은게 바뀌었고 그러다가 지금 다니는 부트캠프도 다니게 됐다. 벌써 한 달을 다녔다니! 엊그제 동물병원 지나고나서 쓰려했다가 이왕이면 시험 끝나고 소감을 말하고 싶어서 지금 쓴다. 총 세 달 과정 중 한 달이 지났다. 마지막 한 달은 팀 프로젝트를 진행하므로 수업 듣고 기초 배워나가는 과정은 두 달일테고, 그럼 그 중 반이 지난거다. 얼마전까지도 뭘 배울지도 잘 몰랐는데(커리큘럼을 봐도 뭔 소린지 모름) 벌써 반이나 했나 싶다. 컴포넌트부터 데이터 전송, 컨테이너/프레젠터,..

220602 프론트엔드 부트캠프 23일차 : 이미지 프로세스, ref

어제 숙제 잘 못했어도 괜찮다고 하셔서... 증말 다행 이번주 중요한 것~~~~ 컴포넌트 생명주기, 백엔드.. 근데 코딩 그 자체보단 어떤 순서로 이루어지는 지 그림에 대한 이해 이미지 저장 과정 → Image-Process 이미지? 데이터 베이스에 저장하면 안돼? → Cloud-Storage 이미지 검증 → Validation (용량, 확장자 등) freeboard 리뷰 - 파이어베이스 시작하자마자 받아오기 위해 useEffect에서 엑시오스 통해 받아옴 firestore 정보 받아오고, 거기서 board라는 컬렉션을 가져옴 보드 컬렉션에 있는 document를 가져옴(getDocs) 그리고 그 document들 뽑아서 맵으로 각각에 있는 객체들에서 데이터를 뽑아야 데이터가 나온다. 원리가 그런건 아니..

220601 프론트엔드 부트캠프 22일차 : CORS, API, firebase

CORS? 이것 때문에 짜증나 죽겠네 → CORS : openapi인데 왜 막아 Graphql-API 가 이렇게 쉽게 만들어지다니! → Graphql / Apollo-Server 백엔드 개발자가 없을 땐 이걸 써봐! → Firebase / BAAS(Backend as a service) 바스, 사스(Software as a service), 파스(Platform as a service).. freeboard 리뷰 네비게이션에 메뉴 - 맵으로 뿌려줌 추가할 때 menus에만 추가하면 자동으로 메뉴 생김 const [age, setAge] = useState(13); state에 타입 지정해주기. number 또는 string 사용하지 않는 변수는 _로 쓰는 관례가 있다. 이름이 메시지라는 변수에 담겨서 오..

알고리즘 : reduce, filter, Math.min, splice

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. // 처음 푼 풀이 function solution(numbers) { var answer = 0; console.log(numbers); for(let i = 0; i console.log(cur,acc)) // 1 2 undefined 3 undefined 4 undefined 6 undefined 7 undefined 8 undefined 0 reduce가 아직 어려워서, 무조건 괄호 하나 더 쓰고 그 안에 cur, acc 를 담고 콘솔에 출력해보는 식으로 하고 있다. answ..

220531 프론트엔드 부트캠프 21일차 : [Backend]Open-API, DB / 태그

1. Open-API / Public-API 2. DB구경 - Database / ORM 3. Node.js 활용해서 백엔드 서버 만들기 Open-API https (자물쇠 걸린, 안전한) http (주의 요함!) Auth(오쓰) - 제공하는 사이트에서 회원 가입 해야하는지? 절차 거쳐야 하는지? cors - No인 경우 브라우저에서는 api 사용 불가능(모바일앱 가능) 나의 메뉴2, 나의 메뉴, 게시판, 중고마켓, 마이페이지 여기서 나의 메뉴2에 파이어베이스(백엔드 개발자 없이 프론트 개발자에서 바로 데이터 베이스에 데이터를 저장하는 도구) 이용해서 서비스 하나를 만들어볼 것임~ 📺 useEffect 사용하여 데이터 받아오기(옛날 사용 방법) 1. state를 만든다. 2. api 요청하고 그 결과를..

알고리즘 - reduce

a와 b 내적하기 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 내적이란 말 오랜만이당 ..ㅎ ㅎㅈㅅ에서 했었는데 ... // 푼 과정 function solution(a, b) { var answer = 0; for(let i = 0; i < a.length; ++i){ console.log(a[i]*b[i]) // 누적해 answer += a[i]*b[i]; } return answer; } 누적한다는 걸 보니까 reduce로 풀고 싶어졌다. function soluti..

220530 프론트엔드 부트캠프 20일차 : 클래스 컴포넌트, 생명주기(Lifecycle)

4주차에 배울 내용 - 클래스 컴포넌트 - 프론트 엔드와 백엔드 같이 보기 (Architecture) - 백엔드 API 만들기 체험 (Apollo-Server / Graphql) - 이미지 업로드 (Cloud-Storage) freeboard 리뷰 freeboard - 구조 짤 때 어떤 것이 유지/보수 하기 좋은 가에 초점을 맞추면 됩니다. 에어비앤비에서는 이중부정 연산자를 쓴대용 ☘️ 중간고사 보면서 이해한 부분! 변경된 내용이 있으면 추가해준다. if (contents) updateBoardCommentInput.contents = contents; // event.target.value로 받은 contents가 있으면(입력받아서 변동이 생겼으면) // 수정할 목록의 contents에 위의 conte..

알고리즘

자바스크립트의 제곱 ** // 내가 푼 것 function solution(x) { let answer = true; let array = []; console.log(10**2); console.log(333%1000); console.log(Math.floor(333%100/10)) for ( let i = 1; i

React - Hooks : prev state

prev state setState()와 prevState()는 리액트에서 컴포넌트의 상태를 변경하는데 사용되는 Hooks다. setState는 이벤트나 서버 응답에 대하여 UI를 다시 업데이트 하기 위해서 사용되곤 한다. prevState는 컴포넌트의 이전 상태를 기반으로 한다. // Next.js는 react import를 생략한다. export default function CounterPage() { const [count, setCount] = useState(0); const onClickButton = () => { setCount(count + 1); }; return ( {count} ) } count라는 state를 만들고 카운터를 올릴 수 있는 함수를 만든다. 버튼을 누르면 화면의 {..

React - event

이벤트(event) 사용자가 웹에서 DOM 요소들과 상호 작용하는 것 리액트에선 카멜 표기법(onclick->onClick)으로 작성한다. DOM 요소에만 이벤트를 설정할 수 있다. - div, button, form, span 등(직접 만든 컴포넌트엔 설정할 수 없다. props 전달은 가능) 이벤트 종류 Keyboard, Touch, Focus, Mouse, Image, Animation, Transition, Form, Composition 등 이벤트를 다루는 함수 이름은 handle____ 로 많이 짓는다. 객체 안에서 key를 [ ]로 감싸면 그 안의 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다. const name = '찐빵'; const object = { [name]: 'value..