.log('FE')

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

input 의 타입중 radio 는 브라우저마다 기본 스타일이 다르게 보여집니다. 그리고 일반적인 css 스타일을 적용해서는 원하는대로 스타일을 바꾸기가 어렵습니다. 때문에 label 과 input 이 가진 특성을 활용하면 커스텀한 라디오를 만들 수 있습니다. text text2 text3 input[type=radio] { display: none; } div { display: flex; align-items: center; gap: 5px; } label { cursor: pointer; } .circle { width: 20px; height: 20px; border: 2px solid #cccccc; display: block; border-radius: 20px; display: flex; a..

콘솔에 무엇이 찍힐지 예측 가능한가요? 우선 call-by-value / call-by-reference 가 무엇인지 부터 확인해 보겠습니다. 자바스크립트에서 함수를 호출할때 매개변수를 할당 받을 수 있습니다. 매개변수는 여러개가 될수도있고 단일값일수도있고 객체나 또 다른 함수가 될 수도 있습니다. 이 매개변수를 전달하는 방식에 따라서 Call by value , Call by reference 로 나눌 수 있습니다. 단일 값에 의한 매배변수 전달은 함수를 호출했을때 함수내에서 지역변수로서 사용되며 따라서 값이 복사되어 사용됩니다. 즉 함수 내에서만 값의 변경이 발생하고 원본 값에는 영향을 주지 않습니다. 값의 불변성을 유지할 수 있지만 지역변수로 복사하여 활용하는만큼 메모리를 소모합니다. 객체 즉 참조..

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

컴포넌트 다시 생각하기 영상바로가기 케이크를 만들때는 밀가루, 설탕, 계란이 필요하다. 케이크는 밀가루, 설탕, 계란에 의존한다. 케이크는 밀가루, 설탕, 계란에 의존성을 갖는다. 리액트로 생각해봤을때 리액트는 무엇에 의존성을 갖나? 반대로 생각해보면 리액트컴포넌트를 만들려면 무엇이 필요한가? 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..

배열의 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 을 별도로 두번 실행하기때문에 실행시간 효율면에..