본문 바로가기

Programming/4. JavaScript & React16

004_Create React App 기본 구조에 대해 알아보자! 서론 최근 기업 과제나 프로젝트를 진행하며 Create React App으로 시작하는 경우가 많았다. (아니, 사실 전부 CRA로 시작했다..) 그런데 지금까지는 별 생각없이 예전에 봤던 노마드코더의 강의대로 기본 파일들을 대부분 지워버리고 남는건 App.tsx, Index.tsx 뿐인 상태로 시작했었는데, 문득 이런 생각이 들었다. '분명 기본적으로 정말 필요한 파일들만 모아 CRA를 만들었을텐데 뭔지도 모른 상태에서 너무 무지성으로 삭제한건 아닐까? ' 그래서 준비했다! 지우더라도 최소한 뭔지 알고 필요한지 아닌지를 판단할 수 있도록 이번 포스팅을 작성해보기로 했다. 리액트를 좀 더 리액트스럽게 쓰기 위한 기초를 이번에 제대로 배워보자. 설치 방법 + 기본 구조 혹시 모르니 설치 방법을 간단히 설명하.. 2022. 1. 18.
003_코어 자바스크립트 챌린지_1 시작하기 앞서 엘리스 AI 트랙이 끝난지도 벌써 보름이 넘었다. 지난 6개월을 돌아보자면 프론트엔드, 백엔드, 데이터분석, AI까지 정말 방대한 분야를 엘리스 AI 트랙을 수강하며 접했던 시간이었다. 하지만 이렇게 다양한 분야를 짧은 시간 듣다보니 깊이있는 지식을 얻어가기엔 다소 부족한 시간이 아니었나 싶다. 특히 내가 가고자 하는 방향인 프론트엔드 파트에 대해 얼마나 학습했나 돌아본다면, '어찌저찌 프로젝트에서 기여한 수준' 정도에 머물 정도만큼 학습하지 않았나 싶다. 그래서 이 챌린지를 시작하기로 했다! 프론트엔드의 가장 근간이 되는 자바스크립트부터 제대로 학습하는 것부터 시작해야 이후의 다른 기술들을 배우는데 무리 없이 진행할 수 있다는 생각이 들었고, 늘어지지 않기 위해 '챌린지' 를 붙여 책을 .. 2022. 1. 12.
002_indexOf() 와 findIndex() 바쁜 분들을 위한 결론 indexOf()는 배열의 특정 값을 입력하면 그 값이 몇번째인지 알려주는 함수이다. 단, 배열 속 객체에 적용을 하면 -1(일치하는 값 없음) 이 출력된다. 이럴 때 findIndex()를 사용하면 배열 속 객체를 검색해 그 객체가 몇번째인지 알려준다. 예제 // indexOf() const alphabet = ['a', 'b', 'c', 'd', 'e', 'f']; const index = alphabet.indexOf('c'); console.log(index); // 2 // findIndex() const todos = [ { id = 1, todo = '빨래하기', finished = true }, { id = 2, todo = '자바스크립트 공부하기', finished.. 2021. 7. 18.
001_forEach와 map의 차이 바쁜 분들을 위한 결론 forEach는 배열 요소를 하나씩 불러내 함수를 적용한 후 각각 내보낸다. map은 배열 요소를 하나씩 불러내 함수를 적용한 후 새로운 배열에 저장해 내보낸다. 즉 forEach는 배열 해체, map은 배열 재결합인 셈이다. 예제 // forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(num => { console.log(num); }); // 1 // 2 // 3 // 4 // 5 // map const arr = [1, 2, 3, 4, 5]; const squared = arr.map(n => n * n); console.log(squared); // [1, 4, 9, 16, 25] 위 차이처럼 forEach는 배열의 요소들.. 2021. 7. 18.
반응형