.log('FE')

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

최근 사내에서 업무의 효율성을 높이기위해 개인적으로 진행한 크롬 익스텐션을 개발하였는데 그 과정에서 알게된 내용들을 정리하려고 합니다. 크롬 익스텐션 크롬브라우저에서는 다양한 확장 프로그램들을 사용할 수 있습니다. 크롬 웹 스토어를 접속하면 다양한 확장 프로그램들을 확인할 수 있습니다. 등록된 앱을 사용할수도 있지만 필요한것이 있다면 직접 개발하여 스토어에 등록하고 사용할 수도 있습니다. 여기서는 직접 개발하기위해 필요한 내용들을 기록하려고 합니다. 간단하게 만들어보기 우선 간단한 확장 프로그램을 생성해 보도록 하겠습니다. 여기서는 딱 두개의 파일만 있으면 됩니다. sample1 index.html manifest.json 이렇게 sample1 폴더에 두개의 파일을 생성합니다. 위와같이 작성하고 확장프로..

이전글 : 2021.12.16 - [프론트엔드/React] - React Lifecycle - class & hook 1부 React Lifecycle - class & hook 1부 리액트의 생명주기에 대해서 정리하려고합니다. 자주 사용하는것만 당연하게 사용하고있다보니 자세히 설명하려고 하면 항상 공식문서나 다른 자료들을 참고하게되어서 이참에 그냥 블로그에 code-reading.tistory.com class - update 리액트의 클래스 컴포넌트의 업데이트를 처리하는 호출 순서는 아래와 같습니다. static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()..

리액트의 생명주기에 대해서 정리하려고합니다. 자주 사용하는것만 당연하게 사용하고있다보니 자세히 설명하려고 하면 항상 공식문서나 다른 자료들을 참고하게되어서 이참에 그냥 블로그에 정리를 한번 해두고 필요할때마다 해당 글만 볼 수 있도록 하려는 목적입니다. 리액트의 컴포넌트는 두가지 방식으로 작성할 수 있습니다. class 컴포넌트와 function 컴포넌트 입니다. function 컴포넌트는 hook 이 공식적으로 리액트에서 사용됨에 따라서 class => function 컴포넌트로 많이 넘어오고 있습니다. class 와 function 을 함께 사용하고 있거나 마이그레이션을 하려면 두 방식에 대한 생명주기를 모두 이해하고 있어야 합니다. 그래서 두가지 방식을 비교하면서 작성합니다. React lifecy..

옵저버패턴과 발행-구독 패턴의 가장 큰 차이점은 중간에 Message Broker 나 Event Bus가 존재하는지 여부입니다. 옵저버패턴은 옵저버와 Subject 가 서로를 인지하지만 발행-구독 패턴은 서로를 전혀 몰라도 상관 없습니다. 때문에 발행-구독 패턴이 결합도가 더 낮습니다. 옵저버 패턴은 동기방식으로 주로 동작하고 발행-구독 패턴은 비동기 방식으로 동작합니다.

자바스크립트에서 배열을 다룰때 주의해야할 몇가지 내용들이 있습니다. 그 중에 가장 중요하다 생각하는건 Immutability (불변성) 입니다. 즉 원본 배열을 수정하느냐 아니면 새로운 배열을 만들어 내느냐에 대한 기본적인 이해를 바탕으로 사용해야 사이드 이펙트를 피할 수 있습니다. 원본 배열을 수정 Array.prototype.push Array.prototype.pop 대표적인 배열 원본을 수정하는 메소드입니다. push 는 배열의 가장 마지막에 값을 추가하고 pop 은 가장 마지막의 값을 추출합니다. const arr = [1, 2, 3, 4, 5] arr.push(10) // [1, 2, 3, 4, 5, 10] arr.pop() // [1, 2, 3, 4, 5] Array.prototype.shi..

타입스크립트의 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..

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

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

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