.log('FE')

개발자에 대한 인기는 여전한것같습니다. 개발자 중에서도 진입 장벽이 상대적으로 낮다고 평가되는 프론트엔드 개발자로의 전향을 하거나 경력으로의 이직을 준비하시는 분들이 많은것같습니다. 저 또한 작년부터 경력이직을 준비했었고 원하던 결과를 일부얻어 올해 이직에 성공하게 되었습니다. 저는 지원할때 코테가 아닌 과제 전형인 곳 위주로 지원을 했고 다양한 곳에서의 과제 전형 테스트를 보았습니다. 보안이나 비밀유지에 대한것때문에 자세한 사명과 어떤 회사에서 어떤 유형의 문제가 나왔는지는 밝힐 수 없지만 대략적인 유형들에 대해서 공유해보려고 합니다. 제가 경험해본 바로 세가지 유형으로 분류할 수 있을것같습니다. 1. 순수 자바스크립트 구현 2. 리액트나 뷰를 사용한 구현 3. 자사 서비스의 특정 페이지나 기능에 대한..

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

사내에서 사용할 UI 라이브러리를 만들면서 다른 UI 라이브러리들의 내부를 분석하였는데 공통적으로 쓰이고 있는 forwardRef() 에 대해서 궁금증을 갖고 알아보게 되었습니다. # Ref ref 는 참조라는 뜻을 갖고 있습니다. 우선 리액트에서 사용되는 Ref 에 대해서 알아보았습니다. Ref 는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 리액트에서는 props 를 통해서 부모에서 자식으로 단방향으로 데이터를 내려주고 있습니다. 자식 컴포넌트가 수정되기를 원한다면 새로운 props 를 전달하여 리렌더링을 통해 수정을 할 수 있습니다. 그러나 가끔 직접 자식을 수정해야 할 경우가 있을 수 있습니다. 리액트 공식문서에서 Ref 를 사용해야하는 바람직한 ..

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..

2021.12.23 - [프론트엔드/Project] - 크롬확장프로그램 알아보기 (1) 크롬 확장 프로그램 알아보기 (1) 최근 사내에서 업무의 효율성을 높이기위해 개인적으로 진행한 크롬 익스텐션을 개발하였는데 그 과정에서 알게된 내용들을 정리하려고 합니다. 크롬 익스텐션 크롬브라우저에서는 다양한 확 code-reading.tistory.com 원래 한번에 작성하려고 했다가 내용이 생각보다 길어질것 같아서 시리즈형태로 나눠서 작성합니다. messaging pass 이전에 content.js 라는 파일을 만든적이 있었습니다. content 는 확장 프로그램이 아닌 웹 페이지의 컨텍스트에서 실행되기 때문에 나머지 확장 프로그램의 스크립트나 페이지와 통신하기위하 별도의 방법이 필요합니다. content 가 웹..

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

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

리액트의 생명주기에 대해서 정리하려고합니다. 자주 사용하는것만 당연하게 사용하고있다보니 자세히 설명하려고 하면 항상 공식문서나 다른 자료들을 참고하게되어서 이참에 그냥 블로그에 정리를 한번 해두고 필요할때마다 해당 글만 볼 수 있도록 하려는 목적입니다. 리액트의 컴포넌트는 두가지 방식으로 작성할 수 있습니다. 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..