새로운 경험126 [TIL] 2022-12-15 내배캠 후발대 Todolist 만들기 '추가'하는 부분까지2 todolist만들기 todo 추가 부분까지 그냥 싹 다 외워버렸다. 코드를... import { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; // JavaScript Zone function App() { /* ********************************STYLE이 정의되는 영역 시작**************** */ // header 스타일 const headerStyleObj = { backgroundColor: '#faad31', padding: '20px', }; // main 스타일 const mainStyleObj = { backgroundColor: '#f3ce7d', padding: '20px', }; // .. 새로운 경험 2022. 12. 15. [TIL] 2022-12-14 내배캠 후발대 Todolist 만들기 '추가'하는 부분까지 여기서 더 줄이면? 요러케됨. Null 병합 연산자임. 여기서 더 줄이면? 느낌표 붙이고 물음표 두 개 요러케됨! 리턴문이 한 줄이면 리턴도 삭제가능! 요로코롬! {todos .filter((item) => { if(item.isDone === false) { return item; } }) .map((item) => { return ( {item.title} {item.contents} 완료 삭제 ) }) } // todos를 돌면서 item의 isDone이 false이면 그 item을 리턴해주고 // 그 리턴된 item들을 map으로 또 돌면서 return 안의 형태로 반환해줘라 // map은 전체 div를 리턴하기 때문에 몇 번째 div 인지 알기 위해 key 값을 줘야 함 ==> if문을 삼항연산.. 새로운 경험 2022. 12. 15. [TIL]2022-12-13 단순한 투정인지, 도움을 구하는 간절한 외침인지, 구분이 되지 않는다. 나도 나의 동료들 모두가 그렇다. 적어도 도움을 주고자 하는 사람이 '내가 뭘 도와주면 좋겠냐'고 물을때, 대답을 할 수 있다면 좋겠지만 대답을 할 수 없는 사람들이 대부분이다. 단순한 공부가 아니기 때문이다. 암기를 통해 기계적으로 답을 도출해 내는 자격 시험 공부가 아니기 때문이다. 💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨 모든 것이 명확하지 않고 자욱한 안개속에 있는 것처럼 희미하기 때문이다. 내가 원하는 목적을 이루기 위해서, 달성하고자 하는 목표로 나아가는 길에서, '내가 가진 것은 무엇이고 부족한 것은 무엇이며 당장 필요한 것은 무엇인지, 그것들을 얻기 위해서는 어떻게 해야하는지' 명확하게 아는 '메타인지'가 부족하기 때문이다. .. 새로운 경험 2022. 12. 13. [WIL]6주차2022.12.04~2022.12.11 스파르타코딩클럽-내일배움캠프(항해99 국비ver) 무엇을 배웠나? 리액트 기초강의를 듣고 원장튜터님의 원포인트 레슨, 우리조 조장님의 튜터링을 받아 to-do-list 웹페이지 작성하는 작업을 몇차례 해봤다. 사실 결과적으로는 로직을 정확하게 이해하지 못했고 혼자서 스스로 처음부터 끝까지 다시 코딩을 해서 기능구현을 해보라고 한다면 답은 '할 수 없다' 암기가 필요한 영역인 것인지 내가 하는 공부 방향이 잘 못 된 것인지 단순히 노력이 부족한 것인지 잘 모르겠다. 누가 좀 알려주면 좋겠다. CS : SPA 코딩개념 : 알고리즘 - x HTML / CSS - x 부족한점? CS : SPA, MPA 개념 명확하게 하기. 얕은복사 깊은복사 복습 필요. 문법 : JavaScript 기초분법 알고리즘 : 하루 최소 1문제씩 꾸준히 학습하기. 4GE (Four g.. 새로운 경험 2022. 12. 13. [TIL]2022-12-08 JavaScript 메서드 정리 객체 메소드(objext methods) object.assign object.assign() //객체 복사 Object.assign(target, ...sources) 예제) const obj = { a: 1 }; const copy = Object.assign({}, obj); console.log(copy); // { a: 1 } object.keys / Object.values object.keys() //키 배열 반환 Object.keys(obj) // 단순 배열 const arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // 배열형 객체 const obj = { 0: 'a', 1: 'b', 2: .. 새로운 경험 2022. 12. 8. [TIL]2022-12-07 일자목이 더 악화돼서 거북목화 되어가고 있다. C커브가 사라졌다. 경추 스트레칭과 자세교정이 시급하다... 뼈주사를 맞고 도수치료를 받았다. 비타민D 주사도 맞았다. 병원비가 20이 깨졌다... 새로운 경험 2022. 12. 8. [TIL]2022-12-06 04시~06시 - 대한민국 vs 브라질 / 월드컵 16강전 시청 06시~08시 - Udemy 환불거부 및 부당한 block조치에 대해 소비자보호원에 고발 자료 취합 및 접수 08시~09시 - 아침운동 및 인터넷강의 수강준비 09시~10시 - JS Mastery 수강 10시~11시 - 원장튜터님 JSON 특강 11시~12시 - 방황 12시~14시 - 은행 문제로 paperworks 14시~15시 - 식사 및 냉수샤워, 쓰레기 정리 15시~ - 아몰랑 새로운 경험 2022. 12. 8. [TIL]2022-12-05 React import // 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역 const~ // 자바스크립트를 쓸 수 있는 영역 return~ / HTML, JSX 문법 영역 export // 내가 만든 컴포넌트를 밖으로 내보내는 영역 props : 부모 컴포넌트로부터 가져온 데이터 / 부모 -> 자식 방향으로만 전달 가능 props Drilling , propTypes 찾아서 학습하기! 컴포넌트 반복 -> map 함수 사용 : key값 꼭 넣기 원장님 보충 강의 - 배열 메서드 화살표 함수 function () { return 1; } --> () => 1 1. forEach ☞ for + each, for문과 똑같이 요소 하나씩 꺼내오는 것. const testArr = [2, 10, 100, 7, 7.. 새로운 경험 2022. 12. 6. [TIL]2022-12-05 -스파르타코딩클럽으로부터 지급 받은 React 강의 기본편 수강완료. (강의 퀄리티와 기술적 문제로 타 강의 추가 수강 예정). -Javascript 활용한 알고리즘 학습. -JavaScript 배열 및 for, for -of, for -in에 대한 이해. forEach에 대한 추가학습 및 이해 필요. -----일정표----- 6시30분 기상 - 2시간동안 개인정비. 8시30분~9시30분 - React 내배캠 강의 전체 완강. (퀴즈 제외). 9시30분~ 10시30분 - Javascript기본 Notion 문서 읽기. (https://teamsparta.notion.site/Javascript-e0d299ffbf33486e97c8d03f1401c2a8) 10시30분~11시 - 휴식. 11시~12시(정오).. 새로운 경험 2022. 12. 5. [WIL]5주차2022.11.28~2022.12.03 스파르타코딩클럽-내일배움캠프(항해99 국비ver) 무엇을 배웠나? CS : SPA, MPA 코딩개념 : DOM, For ~of, For ~in, 배열, CLASS, Function 바닐라코딩에 대한 개념. 바닐라 코딩의 필요성. 라이브러리, 프레임워크에 대한 개념. 알고리즘 - x HTML / CSS - x 부족한점? CS : SPA, MPA 개념 명확하게 하기. 얕은복사 깊은복사 복습 필요. 문법 : JavaScript 기초분법 - 리액트로 진도를 나아가기 위해 꼭 필요한 JavaScript 집중학습 필요 알고리즘 : 하루 최소 1문제씩 꾸준히 학습하기. 4GE (Four growth experiences) 정신적 성장 : 육체적 성장 : 관계의 성장 : - 내가 속한 Team 외에 다른 분반 / 다른 조에 소속된 분들이나 관계자 분들과도 인사, 안부.. 새로운 경험 2022. 12. 5. [TIL] 스파르타코딩클럽 배열, For, 함수 보충강의 강의 진행 속도가 너무 빨라 필기를 동시에 할 수 없어서 녹화본이 올라오면 돌려보면서 작업을 하려고 했는데, 주말동안 보충강의 영상 파일이 올라오지 않아서 다른 대원의 필기를 베껴왔다. --------------------------------------------------------------------- 배열(array) 배열 ☞ let arr = []; 배열 = 객체, 인덱스가 자동으로 부여된 객체라고 볼 수 있다. 배열에는 '.'과 '[]'를 이용해 접근, 제어를 할 수 있다. 제어에는 []를 쓴다. 객체에는 속성과 메서드가 항상 존재한다! 메소드와 함수는 비교가 되어야 함. 메서드 : 호출의 주체가 명확함. ex) people.test() 함수 : 호출의 주체가 없다. ex) test() 배열.. 새로운 경험 2022. 12. 4. [TIL] 2022.12.01 DOM DOM 브라우저가 HTML을 해석하면서 object로 만드는 것을 parsing이라고 한다 object로 만드는 이유는 자바스크립트가 해석할 수 있도록 하기 위해서! 해석한 결과가 DOM Tree를 구성 DOM이란? Document (= HTML) 을 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 거! DOM이 브라우저에 내장되어 있기 때문에 우리가 HTML 파일의 내용을 JS로 접근, 제어 할 수 있다 모든 DOM의 node들은 속성과 메소드를 가지고 있다. (node : 마디, 교점) 메소드 : 어디에 접근해서 제어하기 위한 것, 호출의 주체(.앞에 있는 객체)가 있다! 함수는 주체가 없다! childNodes로 가려면 인덱스를 항상 지정! *직접적으로 접근하려면 선택.. 새로운 경험 2022. 12. 1. 이전 1 2 3 4 5 6 7 8 ··· 11 다음 💲 추천 글