전체 글57 [Developer] 웹 관련 자료 엘리스 SW 엔지니어 코스를 반 정도 수료했는데, 지난 4주 동안 배운 내용이 거의 웹에 관련된 것들이었다. 내가 생각한 프론트엔드 개발자의 일은 '사용자가 보는 화면을 구현하고 사용자가 입력한 자료들을 백엔드로 전달한다' 정도였는데, 기술이 발전하면서 프론트 일도 더 고도화되었고 프론트엔드 개발자에게 필수로 요구되는 것이 백엔드 지식이라는 것을 알았다. 규모가 큰 기업일수록 면접에서 React 기술에 대한 질문보다는 JS의 작동원리나 웹과 서버에 대한 심도있는 지식들을 물어본다는 것 역시 알게되었다. '이런 것까지 공부해야하나....?' 라는 생각이 많이 들었는데 진짜 그런 것도 다 알아야 하는 거였다. 토스페이먼츠에서 근무하시는 개발자 분의 직무특강을 들었는데 신입에게 꼭 필요한 것으로 기본기를 강.. 2021. 12. 6. [TIL] 2021-11-17 (find) ▷ find - 주어진 판별 함수를 만족하는 첫번째 값을 반환 - 없다면 undefined를 반환 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12 - 객체와 함께 활용하는 방법 var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(.. 2021. 11. 18. [TIL] 2021-11-14 (shift, pop, Object.values, Object.entries) ▷ shift() - 배열에서 첫번째 요소를 제거(배열의 길이가 바뀜) - 제거한 값을 반환 const array1 = [1, 2, 3]; const firstElement = array1.shift(); console.log(array1); // expected output: Array [2, 3] console.log(firstElement); // expected output: 1 ▷ pop() - shift와 유사, 마지막 요소를 제거한다는 점이 다름 const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; console.log(plants.pop()); // expected output: "tomato" console.lo.. 2021. 11. 14. [JS] map, filter, reduce 함수 # map, filter, reduce 모두 콜백함수를 활용하는 함수라는 공통점이 있다. ▷ map - 콜백 함수에서 리턴한 값들을 기반으로 '새로운 배열'을 만드는 함수 - forEach()와의 차이: forEach()는 배열 내부의 요소를 사용해서 콜백 함수를 호출하는데 그치는 반면, map()은 새로운 배열을 생성함 // 기본문법 array.map(function(value, index, array) { } // 화살표 함수 이용 array.map((value) => value * value) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - Java.. 2021. 11. 13. [JS] 함수 선언문과 함수 표현식 ▷ 함수 선언문(function declaration) - 함수의 정의부만 존재하고 별도의 할당 명령이 없는 것 - 반드시 함수명이 정의되어야 함 function a () { } a(); ▷ 함수 표현식(function expression) - 정의한 함수를 별도의 변수에 할당하는 것 - 함수명이 반드시 정의될 필요는 없음 (기명 함수 표현식 / 익명 함수 표현식) // 익명함수 표현식 let b = function () { } b(); // 기명함수 표현식 let c = function d () { } c(); d(); // 에러 발생 ▷ 호이스팅에 따른 차이 - 함수 선언문 : 함수 전체를 호이스팅함, 함수 선언문이 정의되기 전에도 호출할 수 있음 - 함수 표현식 : 함수 선언부만 호이스팅함, 실제 .. 2021. 11. 13. [JS] \n과 <br>의 차이 ▷ HTML상에서 사용하는 줄바꿈 방법 ▷ \n JS에서 사용하는 줄바꿈 방법 ▷ 템플릿 리터럴(Template literals) escape 문자인 \n 대신에 백틱(`)을 사용하는 방법 백틱 안에 있는 내용이 그대로 표현됨 안녕\n하십니까? 감사합니다. - 웹페이지 출력 결과 - console 창 출력 결과 2021. 11. 3. [development] front-end 개발자가 되기 위하여 알아야 할 Javascript 개념들 ▷ 함수, 객체 ▷ 비동기라는 개념 - 이벤트 드리븐 프로그래밍 ▷ callback, promise, async/await ▷ 호출스택, 이벤트루프, 실행 컨텍스트 ▷ scope ▷ this(call, apply, bind) ▷ closure ▷ 생성자 ▷ 프로토타입 ▷ 서브타입 & 슈퍼타입 📌 부차로 공부할 것 ▷ DOM ▷ 디자인 패턴 ▷ map, filter, reduce (필수) ▷ 이차원 배열 ▷ 함수형 프로그래밍 (선택) 2021. 9. 26. [JS] class와 object class와 object의 차이점 class는 붕어빵 틀, object는 붕어빵(팥 붕어빵, 슈크림 붕어빵)에 비유할 수 있다 ▷ class - class는 연관 있는 것들을 모아놓은 집합체 - template (어떤 데이터가 들어올 수 있는지 정의) - declare once (한번 선언함) - no data in ▷ object - instance of a class (class를 이용해 새롭게 생성된 instance를 object라고 함) - created many times - data in - 생성된 object는 메모리에 저장됨 객체지향 프로그래밍이란? 쉽게 말해, 자료와 함수를 함께 사용하는 것을 지향하는 프로그래밍 ▷ 출처 https://www.youtube.com/watch?v=_DLhU.. 2021. 9. 14. [TIL] 2021-09-10 1. div 안의 content를 정렬할 때 굳이 span 으로 감싸주지 않아도됨 2. CSS white-space ▷ 공백 문자를 처리하는 방법 https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org 3. CSS border-collapse ▷ 표의 테두리(table border)이 겹쳐질 때, 그것을 분리할 지 상쇄할 지 설정 https://developer.mozilla.org/ko/docs/Web/CSS/border-collapse border-.. 2021. 9. 14. [development] 구글링 잘하는 방법 tip 1. 내가 모르는 것을 정확하게 정의하고 검색 문법을 모른다 ▷ javascript for문 라이브러리 사용법을 모른다 ▷ 리액트 usestate (초보자의 경우 공식문서보다는 블로그 글이 더 이해하기 쉬울 수 있음) 만드는 법을 모른다 ▷ 자바스크립트 테트리스 만들기 or javascript countdown tutorial tip 2. 영어로 검색해본다 tip 3. 구글 검색 문법 ""(따옴표) 안에 적어서 정확히 일치하는 문장 검색가능 ▷ javascript "type error" 최신문서를 검색할때 after: (이전 문서를 검색할 때는 befor: ) ▷ react pwa after:2000 제외하고 싶은 단어가 있을 때 -제외할 단어 ▷ react state management -red.. 2021. 9. 2. 이전 1 2 3 4 5 6 다음
