SECTION 1 회고
2021. 9. 30. 12:04
SE Bootcamp 내용 정리
Section 1에서 학습한 내용 * js/node : 조건문, 문자열, 반복문, 배열/객체, 자료형, 스코프, 클로저, spread/rest 문법 ,얕은/깊은 복사, DOM, 고차함수 * html/css : 기초 문법 , 레이아웃, selector, DOM * linux/git : 기초 문법, workflow * react : 기초 문법, props/state, state hook Section 1 완강 소감 약 5주 간의 짧은 일정이였지만 적어보니 생각한 것 보단 많은 내용들을 배운 듯 하다. 학습 내용들을 쭉 나열해보니 전체적으로 다 배운 것이지만, 어떤 부분에서는 희미하게 기억만 나는 내용들도 있는 것 같다... (복습이 부족했단 것인가...) 각 파트(카테고리?) 별로 나눠서 생각해 보면 Jav..
React - 기초 - 3
2021. 9. 17. 18:28
SE Bootcamp 내용 정리
React State & Props 학습 목표 * state, props의 개념 * React 함수 컴포넌트(React Function Component)에서 state hook을 이용한 state 정의 및 변경 * React 컴포넌트에 props 전달 * 이벤트 핸들러 함수 생성 및 사용 * 실제 웹 애플리케이션의 컴포넌트 분석하기 * 개발시 state와 props의 위치 정하기 * React의 단방향 데이터 흐름(One-way data flow)에 대한 이해 State & Props Intro Props vs. State(상태) props는 외부로부터 전달 받은 값 state는 내부에서 변화하는 값(컴포넌트 안에서만 지지고 볶고) Props & State 구분하기 예제 Props // 불변 하는 값 ..
알고리즘 연습 - 문자열 배열을 입력 받아 가장 길고, 짧은 문자열을 제거
2021. 9. 17. 18:11
알고리즘 연습
알고리즘 연습 - 문자열을 요소로 가지는 배열을 받아 그 요소에서 가장 길고, 짧은 문자열을 제거한 배열을 리턴하는 함수 입력 string 타입을 요소로 가지는 배열(arr) arr[i].length 는 20 이하 출력 배열을 리턴 주의 사항 가장 긴 문자열과 가장 짧은 문자열의 길이가 같은 경우는 없다고 가정 가장 긴 문자열이나 가장 짧은 문자열이 다수인 경우 가장 나중에 위치한 문자열을 제거 나만의 문제 접근 및 풀이 1.문자열을 비교해서 담을 변수 2개 만들어 두고 2.그 변수에 가장 짧은 문자열, 가장 긴 문자열을 넣는다 3.그 후 기존 배열에서 그 문자열에 해당하는 인덱스를 찾아 그 요소들만 삭제한다 4.삭제하고 남은 배열을 리턴해 준다 function removeExtremes(arr) { /..
React - 기초 - 2
2021. 9. 16. 19:30
SE Bootcamp 내용 정리
React SPA 학습 목표 * SPA(Single-Page Application)의 개념 * SPA의 장, 단점 * 와이어프레임을 보고 컴포넌트 구분하기SPA(Single-Page Application) SPA의 등장 배경, 개념, 장단점 SPA의 등장 배경과 개념 전통적인 웹사이트에서는 사용자가 웹사이트 내 다른 페이지 이동시 브라우저가 매번 “페이지 전체”를 불러옴 → 페이지 전체를 불러오는 행위: 깜빡인다 → 중복되는 요소들도 매번 로딩해서 불필요한 트래픽 발생시키고 느리게 함 → 웹사이트가 복잡해지고 애플리케이션 형태로 되며 사용자와 서비스 사이의 상호작용이 증가하며 이 방식의 한계점 SPA의 경우 Menu, Footer와 같이 페이지 전환 후 중복되는 부분은 새로 로딩하지 않는다 → 업데이트가..
알고리즘 연습 - 연속된 홀수 문자열 사이에 특정 문자 추가
2021. 9. 16. 19:13
알고리즘 연습
문자열을 입력받아 연속된 한자리 홀수 숫자 문자열 사이에 '-' 를 추가한 문자열을 리턴하는 함수 주어진 정보: str은 string 타입의 숫자 문자열, 0은 짝수로 간주 인자: str(string 타입의 숫자 문자열) 출력: string 타입을 리턴 function insertDash(str) { // 조건: 두 수 간의 비교(두 숫자 문자열이 홀수인가?) // 각 문자열을 인덱스 단위로 쪼갠 후에 두 인덱스를 숫자화 해서 홀수인지 비교? // 둘다 홀수라면 그 사이에 '-'을 추가하여 // 마지막 반환값은 다 더해진 string 타입 리턴 // debugger; let newStr=str.charAt(0); //str의 인덱스 0을 가진 새로운 문자열 for(let i=..
React – 기초
2021. 9. 15. 19:23
SE Bootcamp 내용 정리
React – 기초 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 → 웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용 가능 → 컴포넌트 단위로 나눠서 개발함 React의 3가지 특징 선언형 컴포넌트 기반 범용성 선언형(Declarative)(명시적) 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 하는 것(직관적) → 리액트는 한 페이지를 보여주기 위해 html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 jsx를 활용한 선언형 프로그래밍을 지향! 컴포넌트 기반(Component-Based) 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 함 → 컴포넌트로 분리하면 상호 독립적/재사용 가능 → 기능 자체에 집중..
알고리즘 연습 - 2차원 배열의 요소로 만든 객체를 리턴하는 함수 구현
2021. 9. 15. 18:51
알고리즘 연습
알고리즘 연습 문제 - 나만의 풀이 문제: 2차원 배열(배열을 요소로 갖는 배열)을 입력 받아 그 배열의 요소(배열)로 만든 객체를 리턴 입력 조건: arr[i] 는 string 타입을 요소로 갖는 배열, arr[i].length 는 0 또는 2 출력 조건: arr[i]의 첫번째 요소가 키, 두번째 요소가 값이 되는 객체를 리턴할 것 중복되는 키가 있으면 초기의 값을 사용 빈 배열을 입력 받으면 빈 객체를 리턴 arr[i]의 길이가 0 인 경우 무시할 것 아래는 코딩 내용 function convertListToObject(arr) { // TODO: 여기에 코드를 작성합니다. // 2차원 배열 arr 입력받아 이 배열의 요소 arr[0][0] arr[0][1] 로 객체를 만들어서 객체를 리턴 // re..
js/node – 고차 함수
2021. 9. 15. 18:44
SE Bootcamp 내용 정리
js/node – 고차 함수 고차 함수를 통해 높은 수준에서 사고하는 방식을 학습 → 보다 복잡한 알고리즘의 구현 고차함수 이해하기 학습 목표 * 일급 객체(first-class citizen)의 세가지 특징 * 고차 함수(higher-order function)에 대한 설명 * 고차 함수를 자바스크립트로 작성 일급 객체(First-class citizen) 특별한 대우를 받는 함수 비행기에 First class가 있듯이 자바스크립트에도 특별한 대우를 받는 일급 객체가 존재. 그 중 하나가 함수 → 즉, 함수는 일급 객체(First-class citizen) 이다! 자바스크립트에서 함수는 아래와 같이 특별하게 취급됨 * 변수에 할당(assignment) 가능 * 다른 함수의 인자(argument)로 전달..