흰둥씨의 개발장

➡️ 자바스크립트가 함수형 언어로 적합한 이유 1. 어디에나 있고 가장 널리 쓰임 2. 동적 형식 (dynamically typed => 다형성있는 함수를 만들 수 있음) 3. ES6에서 함수형 프로그래밍에 걸맞는 기능들 많이 추가됨 (화살표함수, 상수, 이터레이터, promise...) 4. 객체지향과 함수형 두 패러다임을 함께 사용할수있는 하이브리드 언어 (=> 자바스크립트는 다중 패러다임 개발이 가능한 언어) ✔️ 객체지향과 함수형의 가장 큰 차이는 "데이터(객체 속성)와 기능(함수)를 조직하는 방법"에 있음 ㄴ> 객체지향 : 인스턴스 메서드를 통해 조작 ㄴ> 함수형 : 두루두루 적용 가능하고, 굵게 나뉜(coarse-grained) 연산에 의존 ➡️ 불변성 및 변경에 대한 정책 자바스크립트의 동적..

객체 지향(OO)은 가동부를 캡슐화 하여 코드의 이해를 돕고, 함수형프로그래밍(FP)은 가동부를 최소화하여 코드의 이해를 돕는다 - 마이클 페더스 번외) 리액티브 프로그래밍은 '데이터 흐름(data flow)', '변화에 대한 전달(propagation of change)'에 초점을 둠 함수형 사고방식 - 확장성 => Yes!(추가기능을 만들기위해서 코드리팩토링이 계속 필요한가? No!) - 모듈화 용이성 => Yes!(파일 하나 고치면 다른 파일도 영향받는지? No!) - 재사용성 => Yes!(중복이 많은지? No!) - 테스트성 => Yes!(단위 테스트 하기 쉬운 함수인가? No!) - 헤아리기 쉬움 => Yes!(체계도 없고 가독성좋지 않은 어려운 코드인가? No! 위와 같이 정해진 답을 가질수..

프로젝트를 생성 할 폴더에서 터미널 실행 yarn create vite -> 생성할 프로젝트 이름 입력하면 프로젝트 폴더 생성됨 프로젝트 폴더에서 터미널 실행 yarn -> React 선택하고 -> Typescript 선택하면 끝!

eslint와 prettier는 각각 다른 기능을 제공한다. eslint는 정적 코드 분석 툴로 문법적 문제 식별 등을 할 수 있고, prettier는 코드 포맷터로 스페이스 설정, 들여쓰기 설정 등 코드 작성 양식을 동일하게 유지시켜준다. 이 두가지는 협업시 꼭 함께 사용하게되는데, .eslintrc.js랑 .prettierrc를 작성했음에도 VScode에서 이 두가지 익스텐션이 작동하지 않기도 한다. 그럴 때 vscode의 setting을 열고, setting의 json을 열어서 아래 두가지를 추가하면 eslint와 prettier를 함께 사용할 수 있게 된다. { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vsc..

생각보다 굿즈가 많아서 좋았고, 그래서 노트북 가져와서 듣는건 비추천...! (세션강의도 인프런에 업데이트 된다고 함)당신의 웹페이지는 몇 점인가요 - 라이트 하우스를 통한 프런트 성능 개선(남상우 - 어니컴)라이트하우스의 여러가지 기능에 대해서 자세히 볼 수 있었다. 대략적으로는 라이트하우스에 대해서 알고있었는데솔직히 말하면 성능까지 신경 못썼어요... (물론 성능이슈가 있다면 바로 신경써야 하는데!)이슈가 있을때 라이트하우스를 통해 어떤 지표가 확인되면 어떤 부분을 고쳐나가야 좋을지에 대한 실전 팁을 많이 얻었다.  어느 날 고민 많은 주니어 개발자가 찾아왔다 2탄 - 주니어 시절 성장과 고민들(김영한 - 지식공유자)나는 프론트지만, 백엔드의 인기왕 김영한님의 강의가이번 인프콘의 세션 중 가장 인상 ..

Array 일반적으로 배열은 메모리에 할당된 연속적인 공간을 차지함 int arr[5] = {1,2,3,4,5}; //메모리에 연속적인 공간에 1,2,3,4,5를 할당함 //컴퓨터는 배열의 첫번째 값의 메모리주소만을 기억함 //인덱스로 배열에 접근하면 컴퓨터는 첫번째 메모리주소로부터 인덱스만큼 떨어진 곳을 찾아 값을 가져옴 //그렇기 때문에 참조시 O(1)의 성능을 가짐 => 참조는 빠름 처음에 5만큼의 크기를 차지할 배열을 선언하고 이후 10만큼의 크기로 변경하려고 하면 컴퓨터는 크기가 10인 연속적인 공간의 메모리를 다시 찾아야 하고, 값도 복사해서 다시 할당함 + 데이터 중간에 삽입하면 모든 데이터의 위치를 변경해야 하기 때문에 오버헤드 많이 발생 => 일반적으로 배열은 데이터 추가 삭제에 있어서 ..

반응형 아키텍쳐 - 순차적 액션 단계에 사용 (여러 원인 + 여러가지 효과 있는 경우 사용하기 좋음 / 하나의 원인으로 a-b-c단계로 효과가 일어난다면 비추) - "이벤트에 대해 일어날 일을 지정하는 것 (X가 일어나면 Y가 일어난다)" - 원인과 효과를 분리해서 표기 - 파이프라인 사용(여러가지 함수를 조합해서 쓸수있음, 그래서 여러단계일때 유용) - 타임라인이 유연해짐(순차적인 액션의 순서를 뒤집어서, 효과와 효과의 원인을 분리함) //초기 값을 받아서 => 업데이트 할수있는 기능을 가진 함수 만들기 function ValueCell(initialValue){ let curr = initialValue; return{ val: ()=>{ return curr; }, update: (f)=>{ let..

다이어그램을 그리기 위한 3단계 1. 액션확인 2. 각 액션을 그리고 3. 단순화 하기 ㄴ>자바스크립트에서 단순화 하기위한 단계 : 액션 통합하기 / 타임라인 통합하기 ㄴ> 1장?에서 본 cuttingline역할해줄 cut()함수 구현하기 (=> 기다렸다가 동작하기) const cut = (num, callback) => { let numFinished = 0; //카운터 초기화 return ()=>{ numFinished += 1; numFinished === num ? callback(): 0; } } let done = cut(3, ()=>{console.log("3개의 타임라인이 끝났습니다."); }) done(); //undefined done(); //undefined done(); //"3개..

선형자료구조 Queue ㄴ> 리스트 한쪽에서는 in, 다른 한쪽에서는 out작업 일어남 ㄴ> 선입선출방식(먼저들어온애가 먼저나감) ㄴ> 운영체제의 작업스케줄링에 사용함 선형자료구조 Stack ㄴ> 리스트의 한쪽으로만 in, out작업 일어남 ㄴ> 후입선출 (늦게 들어온애가 먼저 나감) 그밖의 선형자료구조 : 배열, 데크, 연속리스트, 연결리스트 비선형자료구조 : 트리 , 그래프 버그 수정을 위해 "DOM에 업데이트 되는 순서"를 만들자 ㄴ> 자료구조 QUEUE를 활용! => 순서대로 꺼내니까 액션 순서 조율하기에 좋음 (but 차례차례 실행되어서 기다림 발생함) ㄴ> 동시성 기본형: 자원을 안전하게 공유할 수 있는 재사용 가능한 코드 function DroppingQueue(max, worker){ //..

//truthy "글자가있는문자열"? console.log(true) : console.log(false);//true []? console.log(true) : console.log(false); //true(빈배열) let obj = {} ? console.log(true) : console.log(false); //true(빈객체) Infinity ? console.log(true) : console.log(false); //true 25 ? console.log(true) : console.log(false);//true 1 ? console.log(true) : console.log(false); //true //falsy 0 ? console.log(true) : console.log(fals..

타임라인 다이어그램을 그려서, 시간에 따라 어떤 일이 일어나는지 보고, 버그를 수정 액션 확인하고 -> 액션그리기(순서대로 실행, 비동기실행분류) -> 타임라인 단순화 -> 타임라인 읽고 결과예측 > 두가지 액션이 순서대로 나타나면 같은 타임라인에 넣음 ㄴ순차 실행 함수A() | 함수B() | 함수C() > 두가지 액션이 동시에 실행되는 경우 순서를 예측할수 없음 > 다른 타임라인에 넣음 ㄴ 자바스크립트는 stack에서 한가지만 수행하기 때문에 동시에 실행되지는 않음 함수A() | exeA() 함수B() | | exeB() 함수C() 자바스크립트는 싱글스레드(single threaded) - 하나의 실행 컨텍스트를 가짐(=동기적 처리한다= 한번에 코드 한줄씩 차례차례 실행한다= synchronous =콜..

# 이번장의 핵심내용 : 객체를 다루는 함수형 도구 알아보기 어떤객체라도 바꿀수 있는 함수update()를 만들어서 재활용성을 높이자 function objectSet(obj, key, value){ //카피온라이트 let copy = Object.assign({}, obj); copy[key] = value; return copy; } function update(obj, key, modify){ //여러 함수들 중 객체상태를 업데이트 하는 동작이 많아 //재사용할수있도록 고차함수로 update()를 만듦 let value= obj[key]; let newValue = modify(value); let newObj = objectSet(obj, key, newValue); return newObj; }..