.log('FE')

컴포넌트 다시 생각하기 영상바로가기 케이크를 만들때는 밀가루, 설탕, 계란이 필요하다. 케이크는 밀가루, 설탕, 계란에 의존한다. 케이크는 밀가루, 설탕, 계란에 의존성을 갖는다. 리액트로 생각해봤을때 리액트는 무엇에 의존성을 갖나? 반대로 생각해보면 리액트컴포넌트를 만들려면 무엇이 필요한가? 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 별로 컴포넌트를 생성하여 재사용하고 동적인 돔을 쉽게 생성해낼 수 있습니다. 순수 자바스크립트로 이런 재사용성있는 컴포넌트..

웹개발중에 프론트엔드 개발자가 되기위해 독학을 진행하다보면 어느순간 탁 막힐때가 있습니다. 이제 뭘 해야하지? 뭔가 하긴 해야겠는지 뭘 해야할지 막막할때가있습니다. 클론코딩 강의도봤고 따라도 해봤고 이론공부도했는데 근데 실제 코드작성과 이론이 매칭도 잘 안되고 잘하고있는건가싶고 막연합니다. 그렇다고 누가 기획이나 디자인을 던져주고 한번 해봐라 하는것도 아니라서 막막하기도하고 추진력도 떨어질때가 있습니다. 그래서 한번쯤은 구현해보면 좋을것을에 대한 내용을 정리하려고 합니다. 그리고 그 구현에 대한 상세 요구사항에 대한 내용도 같이 정리해보려고 합니다. TODO List 워낙 유명한 프로젝트죠 하지만 만약 강의나 블로그를 보고 따라만 했던 구현이라면 지금부턴 달라야합니다. 어떤 튜토리얼도 따라하는것이 아니라..

자바스크립트 기본개념 시리즈의 시작으로 호이 스팅에 대해서 다뤄보려고 합니다. 이 글을 이해하려면 변수, 스코프, 함수에 대해 최소한의 이해와 기본 지식이 바탕이 되어야 합니다. 호이스팅이란? MDN 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 일단 호이스팅이란 사전적 의미는 끌어올리기, 끌어올림 또는 게양 이라는 용어로 해석될 수 있습니다. 자바스크립트에서의 호이스팅역시 선언된 변수나 함수가 끌어올려진다 라는 의미를 갖고있습니다. 예전엔 저도 그냥 끌어올려진다 그래서 변수나 함수는 어디서 선언하더라도 가장 먼저 실행된다 라고만 생각하고 있었습니다. 그러나 호이스팅은 제대로 파고들면 알아야할 연관 개념들이 있고 꽤 디테일한 로직을 갖고있습니다. 우선 변수의 관점에서..