.log('FE')

커뮤니티에서 자주 올라오는 질문중에 하나가 바로 언제 리액트를 시작해야하는지 이다. 아마 일정 경지에 올라야 리액트를 시작할 수 있다 라고 생각하는것같고 그리고 그 일정 기준이란게 있을거다 혹은 가이드가 존재하지않을까 라는 생각으로 질문하지 않을까 싶다. 리액트 즉 프론트개발을 공부하려면 기본적으로 html, css, javascript 를 배우라고한다. 근데 여기서 궁금증은 도대체 어디까지 배워야 얼마나 할줄알아야 리액트를 할 수 있는가 이다. 기준을 정해보자 이 기준을 정하려면 아래에 해당하는 질문을 스스로 답할 수 있는지 체크해보면 좋을것같다. 1. html, css, js 를 사용하여 강의나 블로그 클론 코딩이 아닌 스스로 한땀한땀 만들어본 사이트가 최소 3개는된다. 이쯤되면 마크업이나 코드를 작..

commaParser 는 숫자를 받아 1000의 자릿수마다 콤마를 찍어주는 커스텀 훅입니다. comma.test.js comma.js

소문으로만 들었던 넥스트스텝의 블랙커피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

배열의 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 별로 컴포넌트를 생성하여 재사용하고 동적인 돔을 쉽게 생성해낼 수 있습니다. 순수 자바스크립트로 이런 재사용성있는 컴포넌트..