.log('FE')

타입스크립트의 Utility Types 사용법을 알아두면 유용하게 사용할 수 있습니다. interface User { name: string; age: number; } 여기 간단하게 생성된 User Interface 가 있습니다. 해당 인터페이스를 사용했을때 해당 객체는 name, age 두 데이터를 모두 갖고 있어야 에러가 발생하지 않습니다. 만약 둘중에 하나의 값만 필요한 경우와 두 값이 모두 필요한 경우가 생긴다면 여러개의 interface 가 필요합니다. inerface UserOptionalName { name?: string; age: number; } inerface UserOptionalAge { name: string; age?: number; } interface UserOptiona..

소문으로만 들었던 넥스트스텝의 블랙커피JS 레벨1 과정을 드디어 신청하게 되었습니다. 꽤 오래전부터 레벨1부터 3까지 다 해보고싶었는데 항상 때를 놓쳤었는데 올해가 가기전에 드디어 레벨 1 스터디에 참여하게 되었네요. 참여계기 커뮤니티 스터디를 통한 피드백 필요 프로젝트 구조와 코드 작성에 대한 깊은 고민 자바스크립트 라는 언어에 대한 더 깊은 이해 이런 이유로 참여하게 되었습니다. 총 4주간에 걸쳐 프로젝트를 진행하게되고 3개의 step 이 존재합니다. 4주인데 스텝은 3개인 이유는 1주는 일부러 여유분 시간을 둔다고 하네요. 이 기간에 리팩토링이나 버그수정 혹은 미처 구현하지못한 부분을 추가로 진행하면 된다고 합니다. 첫주 첫 모임 OT 때 임의로 여러 사람들과 팀으로 묶어주고 팀명을 정하게됩니다. ..

11월 3일 react-router v6 가 릴리즈 되었습니다. 그동안 당연하게 사용하고있던 라우터에 대해서 어떤방식으로 동작하는지 기존에 어떤 문제들을 해결하고자 하였는지 알아보려고합니다. 용어정의 라우터란? 라우터(라우팅 기능을 갖는 공유기)는 컴퓨터 네트워크간에 데이터 패킷을 전송하는 네트워크장치이다. 패킷의 위치를 추출하여 그 위피에 대한 최적의 경로를 지정하며, 이 경로를 따라 데이터 패킷을 다음 장치로 전달한다. - 위키백과 - 라우터라고 하면 일반적으로 네트워크 장치를 말합니다. 중계기라고도 볼 수 있으며 서로 다른 네트워크간에 경로를 전달하는 역할을 담당하고 있습니다. 리액트에서 사용하고 있는 라우터또한 물리적인 중계기는 아니지만 각각의 컴포넌트 페이지 간에 경로전달을 담당하고 있습니다. ..

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) 의 시간 복잡도를 갖습니다. 이와 반대로 단방향 연결리스트는 연속될수도 아닐수도 있습니다. 각 데이터들은 노드라고 부르며 이 노드들은 각자 다음 노드를 가르키고 있습니다. 때문에 연결리스트에서는 다음값을 알기위해서는 처음부터 순차적으로 접근해야합니다. 이때 단방향이라고 부르는 이유는 이전노드가 다음 노드의 메모리정보만 갖고있기때문입니다. 단방향이 있으니 양방향 연결리스트도 있습니다. 이때 노..

조건 순수 자바스크립트만 사용 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) 두 배열을 병합 // 원본 배열들의 불변성 유지하고 새로운 ..

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

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