.log('FE')

type attrs = "Name" | "Age"; type target = `get${attrs}`; // target = getName | getAge; // ========================== // // bad type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom'; // good type Direction = 'left' | 'right' | 'top' | 'bottom'; type CssPadding = `padding-${Direction}`; ty[e CSsMargin = `margin-${Direction};` // ========================== // // add..

연결리스트는 배열과 많이 비교되고는 합니다. 배열은 연속된 데이터의 나열입니다. 메모리상에 0 번부터 n 번까지 순차적으로 값이 할당되어 있으며 접근시 O(1) 의 시간복잡도를 가집니다. 단점으로는 값을 추가하거나 제거할때 추가한만큼 추가한 값 이후 또는 이전의 값이 순회하면서 순차적으로 밀려나야 하기때문에 O(n) 의 시간 복잡도를 갖습니다. 이와 반대로 단방향 연결리스트는 연속될수도 아닐수도 있습니다. 각 데이터들은 노드라고 부르며 이 노드들은 각자 다음 노드를 가르키고 있습니다. 때문에 연결리스트에서는 다음값을 알기위해서는 처음부터 순차적으로 접근해야합니다. 이때 단방향이라고 부르는 이유는 이전노드가 다음 노드의 메모리정보만 갖고있기때문입니다. 단방향이 있으니 양방향 연결리스트도 있습니다. 이때 노..

컴포넌트 다시 생각하기 영상바로가기 케이크를 만들때는 밀가루, 설탕, 계란이 필요하다. 케이크는 밀가루, 설탕, 계란에 의존한다. 케이크는 밀가루, 설탕, 계란에 의존성을 갖는다. 리액트로 생각해봤을때 리액트는 무엇에 의존성을 갖나? 반대로 생각해보면 리액트컴포넌트를 만들려면 무엇이 필요한가? props hooks 로 데이터를 받아옴 특징적 분류 : 스타일, 로직, 전역상태, 리모트 데이터 스키마 케이크를 딸기케이크를 만들려면 딸기가 필요하다 그러나 딸기를 추가하려면 생크림이 더 필요하게된다. 이때 이 생크림은 딸기케이크를 만들기위해 딸기를 추가하는데 있어서 숨은 의존성을 갖는다고 볼 수 있다. 리액트컴포넌트또한 어떤 값을 하나 추가하려고 할때 해당 컴포넌트만 수정하는것이 아닌 상황에 따라서는 대상 컴포..

지금 잘하냐가 아니라 지금 자라냐는 것입니다. 이 책은 내가 잘할 수 있을까 가 아닌 내가 자랄 수 있을까? 우리가 정말 함께 자랄 수 있을까? 우리가 정말 매일 함께 자랄 수 있을까? 이 세가지에 초점을 맞춘 책이 바로 함께자라기 라는 책입니다. 우리는 성장하면서 경쟁을 강요받고 나의 성적과 내 개인의 결과가 곧 나의 미래이자 성장의 발판 이라고 생각하면서 성장했습니다. 그러나 현실에서는 나혼자의 성과가 아닌 협업 즉 함께 해야하는 경우가 많은데 이것에 대해서는 제대로 교육받거나 함께 이뤄내는 경험을 의식적으로 하지않으면 기회가 잘 없는것같습니다. (야생의)학습 일반적으로 학습이라고하면 보통 혼자하는걸 생각합니다. 이 책에서 말하는 학습이란 야생의 학습에대해 말합니다. 협력적 비순차적 자료에 제한이 없..

ArrowFunction 은 자바스크립트의 전통적 함수의 축약표현으로 사용합니다. 다만 이걸 함수와 똑같다 라고 생각하고 사용하다보면 언젠간 문제가 발생하게됩니다. 이때 일반함수와 ArrowFunction 의 차이를 알지 못한다면 꽤나 고생하게 될겁니다. arguments function test() { console.log(arguments) } test(1, 2, 3, 4) // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 } // arrow function const testArrow = () => { console.log(arguments) } testArrow(1, 2, 3, 4) // Uncaught ReferenceError: arguments is not..

조건 순수 자바스크립트만 사용 webpack 환경설정 라우팅 구현 webpack-dev-server 환경구성 hot-loading 구성 start, build 스크립트 구성 build 시 /public 폴더에 리소스 생성 Install package.json webpack.config.js server.js

기존에 작성된 개발자 학습사이트 정리 에 대한 유입이 꽤나 지속적으로 이루어지고 있는데 시간이 지나다보니 접근이 안되는 링크도있고 업데이트가 필요할것같아서 재정리하려고 합니다. Udemy 주로 영어로된 강의들이 많이 올라와있지만 최근들어서는 국내 개발자들이 올린 강의들도 많이 보이는것같습니다. 유데미 생활코딩 - 영상 입문자들이 접근하고 보기에 가장 개념설명도 이해하기 쉽게하고 영상도 하나하나 짧아서 집중도 이어가기도 좋은것같습니다. 꾸준히 새로운 컨텐츠들이 업데이트중입니다. 웹 사이트 유튜브 생활코딩 일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN..

배열의 resize const fruit = ["Banana", "Apple", "Strawberry", "Grape", "Mango"] // 만약 배열중에 앞에서부터 3개만 출력하고 싶다면 const sliceData = fruit.slice(0, 3); console.log(sliceData) // ['Banana', 'Apple', 'Strawberry'] // 새로운 방법 fruit.length = 3 console.log(fruit) // ['Banana', 'Apple', 'Strawberry'] 임시 변수 사용하지않고 두값의 교환 let a = 10; let b = 20; [a, b] = [b, a] console.log(a, b) 두 배열을 병합 // 원본 배열들의 불변성 유지하고 새로운 ..

타 회사에서 백엔드로 일하는 친구가 있는데 프론트로 사내에서 전향된 케이스가 하나 있습니다. 그 친구가 데이터 처리를 하는데 예제코드를 보여주더라구요 const a = data.split('-')[0] const b = data.split('-')[1] 아무튼 대화를 하다가 저는 근데 이렇게 split 쓰는것보다 아래처럼 쓰기를 권장했습니다. const a = data.split('-') const x = a[0] const y = a[1] 사실 대량의 텍스트 데이터를 갖고 저렇게 처리할일은 저는 없었다보니 그냥 친구가 보내준것처럼 가끔 작성하기도 했던것같습니다. 그래도 많은 배열 또는 많은 텍스트를 첫번째 예시같이 처리한다면 data 에 대해서 split 을 별도로 두번 실행하기때문에 실행시간 효율면에..

지난 5년간 npm 다운로드수를 확인해 봤습니다. 리액트는 이제 명실상부 프론트엔드 개발에 대표적인 라이브러리로 자리잡은것같습니다. 버전도 벌써 17.x.x 대 버전으로 꾸준한 업데이트와 최신화가 진행되고 있는걸 확인할 수 있습니다. 그만큼 자바스크립트의 중요성은 더 높아지면서 리액트에 대한 이해를 하는것도 중요해진것같습니다. 그래서 이버 포스팅에서는 리액트가 갖는 주요 특징들 위주로 실제 리액트코드는 어떻게 구성되어있나 확인하면서 리액트의 동작에 대해 알아보려고 합니다. JSX 리액트에서는 JSX 문법을 통해서 자바스크립트파일에 마크업 로직을 넣을 수 있습니다. 이 방식덕분에 UI 별로 컴포넌트를 생성하여 재사용하고 동적인 돔을 쉽게 생성해낼 수 있습니다. 순수 자바스크립트로 이런 재사용성있는 컴포넌트..