나의 개발 기록지

3주 차를 진행하며 배운 것 컴포넌트 나누기 GraphQL 선언형 프로그래밍과 명령형 프로그래밍 - 3주 차를 겪으며 GraphQL이라는 걸 처음 들어보았고 컴포넌트를 나누는 디자인 패턴? 에도 여러 방식이 있다는 걸 알게 되었다. 독학을 하며 평소 나의 코딩 패턴은 큰 틀을 잡고 그 내부에 또 사용될 것 같은 것만 나누며 사용을 해왔었고 강의에서처럼 많이 쪼개어보진 않은 것 같다. - 선언형 프로그래밍과 명령형 프로그래밍은 들어는 봤지만 자세히 알아본건 처음이었다. 이론을 이해하려 하니 확실히 나는 무언갈 이해하는데 시간이 오래 걸리는 것 같았다... 3주 차를 겪으며 반성할 점.. - 3주 차에서 개인적인 일도 있긴 했지만 공부할 시간은 충분했었다. 하나 집중이 잘 안 되고 머릿속에 들어오는 게 거의..

잊기전에 reduce와 includes 메모해두기 https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d reduce 설명 참고 reduce 일단 reduce, reduce는 배열 내장 함수이고 더하기 할때나 가끔씩 사용해봤었는데 아직까지 제대로 완벽히 이해하지않은 상태여서 코드를 읽는데 조금 시간이 걸렸다. 그래서 gpt의 도움으로 조금 이해가 가는 김에 메모 reduce() const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 15 위 예제는 가장 흔히 볼 수 있는 덧셈 예제다. ..

2주 차를 진행하며 배운 것 JSX 없이 리액트 사용하기 DOM과 VDOM의 부족한 이론 채우기 - JSX 없이 리액트를 사용한다는 건 이번 강의를 들으며 처음 경험해 보았다. JSX가 어떠한 것인지 들어는 보긴 하고 사용을 해왔으나 JSX 없이 사용한 리액트가 어떠한 모습인지는 처음 경험해 봤다. 평상시 글씨 와 같이 HTML 형태로 편하게 사용해 왔던 리액트가 React.createElement('p', null, '글씨')라는 생소한 메서드를 사용했고 꽤나 이해하기 힘들었었다. 그리고 JSX를 사용하지 않는다면 가독성이 몹시 좋지 않을뿐더러 간단한 코드도 꽤나 복잡해진다는 걸 겪은 것 같다. - DOM과 VDOM에 대해서도 공부를 했는데 기존에는 좀 얕게 알고 있던 이론이었으나 이번에 좀 더 깊게 ..

데브로드 1주차를 진행해 보며 배운 것과 느낀 것 앞으로의 방향 1주 차를 진행하며 배운 것 환경 설정 테스팅 도구 및 테스트 코드 스타일 리액트와 타입스크립트의 기초 - 일단 나는 1년 정도의 독학을 하며 공부를 해왔었다. 인강 위주로 학습을 해왔었고 혼자 포트폴리오를 만들어보며 공부를 진행해 왔었다. 독학으로 배웠을 때와 달리 시작하는 설정부터 많이 차이가 났었다. create-react-app (CRA)로 한 번에 생성하던 때와 달리 필요한 타입스크립트, ESLint, 리액트, 테스팅도구(jest), Parcel 등을 하나씩 설치하고 하나씩 세팅하는 게 굉장히 낯설었다. (이런 식으로 세팅을 할 수 있다는 것도 처음 알게 됐다.) - 테스팅 도구는 처음 접해봤다. 취업 준비를 하면서 많은 공고들을 ..

- 전 포스팅 class 문법에 이어서 prototype을 이해해야한다. ( https://youtu.be/wUgmzvExL_E ) 마찬가지로 코딩애플님의 유튜브 영상을 참고함 - class 복습 겸 설명 function 기계(){ this.q = '찍기'; this.w = '눈던지기'; } var nunu = new 기계() // nunu라는 이름의 오브젝트가 생성 위 예제를 예시로 함수 기계라는 class는 부모이고 var nunu = new 기계() 는 자식 이라고도 설명을 한다. 왜 이런식으로 설명을 하냐면 기계가 갖고있는 q와 w를 물려주기 때문이다. 자바스크립트에서는 이런식으로 물려주는 방법이 두가지 방법이 더 있는데 prototype이다. - prototype 기계()는 당연히 내가 만들었으..

- 객체지향 Class 문법 정리하기 ( https://youtu.be/dHrI-_xq1Vo ) - class는 object를 뽑아내는 기계일 뿐 그 이상 그 이하도 아니다. 게임으로 비유했을 때 롤 캐릭터 정보를 담는 사이트를 만들 때 캐릭터의 정보를 오브젝트에 담아두는데 그 오브젝트가 100개 이상일 때 하나씩 만들게 아니라 class를 사용하여 간단하게 만들 수 있다. function 기계(a,b){ this.q = a; this.w = b; } var nunu = new 기계('물기','눈굴리기'); var garen = new 기계('찍기','돌기'); // class 문법 사용하지 않았을 때 var nunu = { q = '물기', w = '눈굴리기' } var garen = { q = '찍기..

백준의 단계별 문제 중 곱셈 문제 const 곱셈 = (a: number, b: number): number[] => { const bStr = String(b); // b로 받아온 숫자를 문자열로 변경 let newArr = Array.from(bStr).map((i) => Number(i) * a); // 문자열로 변경해준 b를 Array로 만들어줌 과 동시에 map함수를 사용하여 // 문자열이 들어가있던 배열을 숫자열로 변경함과 동시에 a와 곱해주기 newArr.reverse().push(a * b); // 배열 순서 뒤집고 마지막 최종 결과값도 넣어주기 return newArr; }; console.log(곱셈(472, 385)); 위 와 같이 풀어주었다. 정답이 같으니 푸는과정은 상관없겠지..?..

코딩테스트 문제를 풀어보며 다른 사람 풀이에 감탄하며 메모하기.. Math.ceil() 내장함수 매개변수로 받은 숫자를 올림하여 반환해주는 내장함수이다. Math.ceil(4.2) // 5 Math.ceil(3) // 3 소수점의 숫자를 무조건 올림하여 반환해준다. map() 배열 내장함수 배열의 요소를 인자로 받아 함수를 실행시킨 뒤 새로운 배열을 만들어준다. function 배열내장함수(x){ return x.map((el)=> el.length) } 배열내장함수(['asd','ss','xczxx') 배열내장함수 라는 함수에 매개변수로 x를 받아오는데 x는 문자열들이 들어있는 배열이다. x에 map메소드를 사용하여 새로운 배열을 만들어주는데 문자열들의 길이를 넣은 배열로 새로 만들어준다.