.log('FE')

flowith io

.log('FE') — Tue, 29 Jul 2025 12:10:05 +0900

- 비교 모델 사용시

- 연결된 웹 소켓으로 모델별 필요한 정보를 받고

- 해당 컨피그정보로 Streaming HTTP (chunked transfer) 방식으로 백엔드 호출

- 실시간으로 응답 받은 정보를 화면에 보여줌

- 트리노드 구조의 화면은 canvas 가 아니라 React flow 를 사용해서 구현

Cursor Bugbot

.log('FE') — Tue, 29 Jul 2025 12:07:20 +0900

- 팀 플랜 사용중이면 인당 $40

- 사용가능한 버그봇 토큰 갯수를 지정할 수 있음

- 팀인원이 20명이더라도 버그봇을 사용하는 유저에 대해서만 과금

개발자 관련 컨퍼런스 모음

.log('FE') — Thu, 26 Jan 2023 12:47:54 +0900

순전히 제 흥미와 관심사 위주의 내용으로만 모았습니다

1. NAVER DEVIEW

DEVIEW 2023

DEVIEW는 국내외 개발자들이 서로의 지식을 나누고, 탁월함을 추구하며, 함께 성장하는 컨퍼런스 입니다.

deview.kr

3. FEConf KOREA

FEConf Korea

프론트엔드 개발의 소중한 경험을 공유합니다! 프론트엔드 개발자에 의한! 프론트엔드 개발자를 위한! 프론트엔드를 개발하며 마주했던 치열한 고민과 깊은 인사이트를 공유하며 여러분과 함

www.youtube.com

5. If KAKAO

if(kakao)dev2022

함께 나아가는 더 나은 세상

if.kakao.com

6. JSConf KOREA

JSConf Korea 2022

9월 16-17일 | 노들섬 다목적 홀 숲

2022.jsconf.kr

7. INFCon

인프콘 2022 - INFCON 2022

배우고 나누고 성장하세요.

infcon.day

8. TECH VERSE

Tech-Verse 2022

Tech-Verse 2022는 LINE과 Yahoo! JAPAN이 11월 17일과 18일, 양일간 공동으로 개최하는 온라인 기술 콘퍼런스입니다. 양사를 포함해 콘퍼런스에 참여하는 각 회사의 다양한 발표자가 자신의 도전과 쌓아온

tech-verse.me

프론트엔드 과제 전형 유형

.log('FE') — Wed, 27 Apr 2022 17:17:50 +0900

개발자에 대한 인기는 여전한것같습니다.

개발자 중에서도 진입 장벽이 상대적으로 낮다고 평가되는 프론트엔드 개발자로의 전향을 하거나 경력으로의 이직을 준비하시는 분들이 많은것같습니다. 저 또한 작년부터 경력이직을 준비했었고 원하던 결과를 일부얻어 올해 이직에 성공하게 되었습니다.

저는 지원할때 코테가 아닌 과제 전형인 곳 위주로 지원을 했고 다양한 곳에서의 과제 전형 테스트를 보았습니다. 보안이나 비밀유지에 대한것때문에 자세한 사명과 어떤 회사에서 어떤 유형의 문제가 나왔는지는 밝힐 수 없지만 대략적인 유형들에 대해서 공유해보려고 합니다.

제가 경험해본 바로 세가지 유형으로 분류할 수 있을것같습니다.

1. 순수 자바스크립트 구현
2. 리액트나 뷰를 사용한 구현
3. 자사 서비스의 특정 페이지나 기능에 대한 구현

1. 순수 자바스크립트 구현

순수 자바스크립트(= VanilaJS) 로 구현하라는 유형입니다.

과제의 기간은 회사마다 다른데 짧은건 몇시간 길게는 최대 일주일정도 받았던것같습니다.

과제들의 공통사항이기도한데 필수 구현사항과 선택 구현사항으로 크게 나눌 수 있습니다.

모든 스크립트 코드와 스타일은 직접 작성해야하고 일체의 외부 라이브러리를 사용하면 안됩니다.

대략적인 요구사항들은 약간씩의 차이가 있을 수 있습니다. 아래의 리스트들 중에 추가되거나 없는것이 있을수도있습니다.

- 테스트코드 작성

- 외부 라이브러리 사용 금지

- 모듈단위 개발

- 번들링 사용가능

- ES6 문법 상용

- 반응형으로 구현

- 시멘틱 태그 사용

이러한 제약 조건들이 주어지고 구현에 필요한 화면과 기능 설명을 전달받게됩니다.

디자인은 주어진것과 똑같이 구현해야하는것도있고 기능과 기본적인 레이아웃만 동일하다면 스타일은 취향껏 능력껏 구현하라는것도 있었습니다.

만약 일주일이 주어진다면 환경 세팅에 하루~이틀 / 기능 구현에 3일 / 테스트 및 리팩터링 2일

이런식으로 스스로 일정 가이드라인을 잡고 진행하는것이 좋습니다.

경력직이라 회사를 다니면서 준비하고 있다면 일주일을 받더라도 생각보다 시간이 그렇게 널널하지는 않습니다.

때문에 꼭 주말이나 휴일을 껴서 일정을 선택하고 해당 일정동안은 다른 약속을 일체 잡지않고 집중하기를 추천드립니다.

2. 라이브러리 또는 프레임워크를 사용한 구현

리액트나 뷰를 활용한 구현입니다.

순수 JS 로 구현한 기능은 자스에 대한 기본 개념이나 SPA 등의 원리들에 대해서 얼마나 잘 이해하고 또 직접 구현할 수 있는지 테스트하는거였다면 해당 과제는 실제 현업에서 일하는 스타일 코드 작성 구현 능력들을 확인하는것이라고 볼 수 있습니다.

때문에 깃헙을 사용한 제출을 요구하는경우도있는데 이때는 커밋메세지나 브랜치관리까지도 세세히 확인하겠다는 의도로 생각됩니다.

이 경우에서 또 두가지로 나뉠 수 있는데

1. 밑바닥부터 직접 구현
2. 베이스 코드가 주어지고 해당 환경 내에서 구현

1. 밑바닥부터 직접 구현

이때도 요구사항이 약간씩 다른데 CRA 를 허용하기도 하지만 한땀한땀 패키지를 직접 설치하며 세팅하기를 요구하기도 합니다.

그리고 해당 회사의 서비스 기능이나 페이지중 일부를 구현해보라고 하는데 실제 기능과 약간의 차이점은 두고 진행이됩니다.

2. 베이스코드가 주어지고 해당 환경 내에서 구현

환경설정이나 프로젝트 구조가 어느정도 잡힌상태로 전달이 되고 요구사항에 맞춰 구현합니다.

상세

이것도 과제마다 다른데 과제용 API 를 주는곳도있고

목업 API 를 전달해 주는곳도 있습니다.

또는 데이터만 전달해주고 JSON 파일 형태로 직접 저장해 구현하기도 합니다.

해당 서비스의 가장 주요하고 복잡한 페이지와 기능을 구현하라고 주어집니다.

예를들어 커머스서비스라면 상품리스트 페이지와 상품 상세 페이지 그리고 그 안에있는 필터 같은것들이 될것이고

특정 정보를 제공하는 서비스라면 그 정보를 제공하는 페이지를 구현하라는 식의 과제입니다.

설명하다보니 2, 3 을 통합해서 작성했는데 프레임워크를 쓰더라도 자사페이지나 기능이 될수도있고 정말 테스트를 위해 주어진 기능을 구현해보라고 할 수도 있습니다. 이때 한가지 팁이 있다면 요구사항에 있던 없던간에 꼭 리드미는 상세하게 작성하라고 말씀 드리고 싶습니다.

리뷰 또는 코멘트

리뷰나 코멘트는 크게 기대하지 않는것이 좋습니다. 피드백을 자세히 주던곳도 있었지만 대부분 요청해도 거절하거나 한두줄 정도만 말해주는 식이었습니다. 과제비도 주는곳도있었고 아닌곳도 있었고 역시 큰 기대는 하지 않는것이 좋다고 생각합니다.

과제를 통과하게되면 면접이 진행되는데 경력 면접이라면 진행했던 과제에 대한 질문 보다는 이전 회사에서의 경험적인걸 많이 물어봤던것같습니다.

이상 간단하게 과제 유형에 대해서 작성해 보았는데 과제전형을 준비하시거나 진행하시는 분들에게 도움이 되었으면 합니다.

혹시 추가적인 궁금증이 있다면 댓글로 남겨주시면 보안에 위배되지 않는 선에서 답변해드리도록 하겠습니다.

개발자 도서 추천

.log('FE') — Mon, 28 Mar 2022 18:04:11 +0900

개인적으로 소유하고있으면서 두고두고 필요할때마다 챙겨보는 도서 목록을 정리해 봤습니다.

한번에 구매한건 아니고 필요할때마다 하나씩 사다보니 이렇게 된것같습니다.

개발관련 서적은 완독 보다는 그때그때 필요한 부분만 찾아보는 방식이 좋은것같습니다.

그리고 신입이었을때와 어느정도 연차가 있을때랑 같은 챕터를 읽어도 받아들이는 정도가 달랐던것같습니다.

더 성장하고 싶은 분들에게 조금이나마 도움이 되는 정보이길 바랍니다.

http://www.yes24.com/Product/Goods/11681152

Clean Code 클린 코드 - YES24

애자일 소프트웨어의 혁명적인 패러다임을 제시하는 책이다. 저자 로버트 마틴은 오브젝트 멘토(Object Mentor)의 동료들과 힘을 모아 ‘개발하며’ 클린 코드를 만드는 최상의 애자일 기법을 정제

www.yes24.com

http://www.yes24.com/Product/Goods/77283734

클린 아키텍처 - YES24

살아있는 전설이 들려주는 실용적인 소프트웨어 아키텍처 원칙『클린 코드』와 『클린 코더』의 저자이자 전설적인 소프트웨어 장인인 로버트 C. 마틴은 이 책 『클린 아키텍처』에서 이러한

www.yes24.com

http://www.yes24.com/Product/Goods/23161141

소프트 스킬 - YES24

흔한 개발자, 존 손메즈 그는 어떻게 33세에 은퇴했을까?“소프트웨어 개발자로 사는 동안 다양한 여정을 거쳤다. 길을 제대로 찾을 때도 있었고 그렇지 못할 때도 있었다. 이 과정에서 도움이나

www.yes24.com

http://www.yes24.com/Product/Goods/20461940

소프트웨어 장인 - YES24

더 나은 개발자가 되어, 더 좋은 코드를 전달하고 싶은 당신을 위하여...이 책에서 풀어낸 소프트웨어 장인정신의 프로페셔널리즘, 기술적 탁월함, 고객 만족은 애자일, 린(lean) 원칙들과 시너지

www.yes24.com

http://www.yes24.com/Product/Goods/80749963

심플 소프트웨어 - YES24

100년 뒤에도 유용할 소프트웨어 설계 원칙 & 프로그래머의 바른 길!Google의 코드 건강(Code Health), 즉 코드의 가독성, 안정성, 단순성, 유지보수성은 어떻게 개선되어 왔을까? 오픈소스 버그질라(Bug

www.yes24.com

http://www.yes24.com/Product/Goods/107077663

실용주의 프로그래머 - YES24

『실용주의 프로그래머』는 당신이 읽고, 또 읽고, 수년간 또다시 읽게 될 몇 안 되는 기술 서적이다. 당신이 이 분야에 처음 발을 디딘 사람이건, 경험 많은 전문가이건 매번 새로운 통찰을 얻

www.yes24.com

http://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - YES24

『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드

www.yes24.com

http://www.yes24.com/Product/Goods/15381085

HTTP 완벽 가이드 - YES24

웹 세상을 떠받치고 있는 HTTP에 대한 모든 것모든 성공적인 웹 트랜잭션 뒤에는, 웹 클라이언트와 서버가 문서와 정보를 교환하는 언어인 HTTP가 있다. HTTP는, 회사 인트라넷에 접근하거나 절판된

www.yes24.com

http://www.yes24.com/Product/Goods/89649360

리팩터링 2판 - YES24

개발자가 선택한 프로그램 가치를 높이는 최고의 코드 관리 기술마틴 파울러의 『리팩터링』이 새롭게 돌아왔다.지난 20년간 전 세계 프로그래머에게 리팩터링의 교본이었던 『리팩토링』은,

www.yes24.com

http://www.yes24.com/Product/Goods/67350256

함께 자라기 - YES24

‘함께’는 협력을 말하고, ‘자라기’는 학습을 말한다. 무엇이건 실제 바깥세상(야생)에 임팩트를 남기려면 혼자 힘으로만 되는 게 없다. 함께 해야 한다. 주변 사람들과 함께. 매일 부대끼는

www.yes24.com

언제 리액트를 시작해야할까?

.log('FE') — Mon, 14 Mar 2022 22:48:02 +0900

커뮤니티에서 자주 올라오는 질문중에 하나가 바로 언제 리액트를 시작해야하는지 이다.

아마 일정 경지에 올라야 리액트를 시작할 수 있다 라고 생각하는것같고 그리고 그 일정 기준이란게 있을거다 혹은 가이드가 존재하지않을까 라는 생각으로 질문하지 않을까 싶다.

리액트 즉 프론트개발을 공부하려면 기본적으로 html, css, javascript 를 배우라고한다. 근데 여기서 궁금증은 도대체 어디까지 배워야 얼마나 할줄알아야 리액트를 할 수 있는가 이다.

기준을 정해보자

이 기준을 정하려면 아래에 해당하는 질문을 스스로 답할 수 있는지 체크해보면 좋을것같다.

1. html, css, js 를 사용하여 강의나 블로그 클론 코딩이 아닌 스스로 한땀한땀 만들어본 사이트가 최소 3개는된다.

이쯤되면 마크업이나 코드를 작성하는데 있어서 익숙해지고 대충 레이아웃만보고 머릿속으로 이미 절반정도는 화면을 어떻게 구현할 수 있을지 구상이 가능한 단계라고 봐도 좋을것같다.

2. javascript 코어에 대한 대충 이해는 하고있다.

자바스크립트코어란 변수, 식별자, 호이스팅, 클로저, 즉시실행함수, 함수선언, 익명함수, 화살표함수, 클래스, 객체, 배열, 실행컨텍스트, 프로토타입, 싱글스레드 같은것들을 말한다. 자세하게 설명은 못해도 한줄정도는 설명할 수 있어야 한다.

3. 브라우저의 렌더링에 대해서 알고있다.

결국 프론트개발자란 브라우저위에서 동작하는 코드를 작성하는 개발자인데 그럼 당연히 브라우저의 동작에 대해서도 이해하고 있어야 한다. 에러가 발생했을때 이게 자바스크립트에러인지 브라우저에서 던지는 에러인지 알 수 있어야 문제를 해결할 수 있다.

4. 비동기 처리에 대한 이해

프론트는 단순히 마크업코드만 작성하는것이 아니라 HTTP 네트워크를 통해 서버에 요청을하고 응답을 받아온 동적데이터를 처리하여 화면에 보여주는 업무를 주로 진행하게된다. 그리고 이 과정은 순식간에 이루어지지만 엄연히 처리 순서가 존재하기 때문에 비동기가 무엇인지 비동기를 처리하는 방식에 대해서 이해하고 있어야 한다.

리액트랑 연결해보기

그럼 각각의 조건이 리액트의 어떤 부분을 이해하는데 도움이 되는지 확인해보자

1. 마크업과 스크립트기본은 리액트에서 jsx 문법을 작성하는것과 연관지을 수 있다.

2. 리액트는 결국 자바스크립트 이기때문에 자바스크립트가 갖고있는 언어적 특징과 코어에 대한 이해가 필요하다

3. 리액트는 가상돔을 사용하여 선언적 프로그래밍 방식으로 돔을 조작한다. 이 부분을 이해하기 위해서는 브라우저의 렌더링을 바탕으로 해야 이해하기 쉽다.

4. 리액트는 각 컴포넌트별로 상태를 가질 수 있는데 이 상태는 state 의 변경과 props의 변경으로 업데이트되고 리렌더링이 진행된다 이때 이 과정들이 비동기적으로 진행되기때문에 비동기처리에 대한 이해 없이는 리액트의 동작을 이해하기 매우 어려워 진다.

지금당장 시작해라

만약 마크업언어와 자바스크립트를 다 배웠다 생각하고 더이상 뭘해야할지 모르겠다 리액트를 해볼까 라고 생각한다면 당장 시작하라고 하고싶다. 왜냐하면 어차피 하다보면 결국 다시 기본으로 되돌아오게 되어있기 때문이다. 현업을 하면서도 리액트를 쓰면서도 결국 자바스크립트 코어에 대한 지식을 다시 습득하기위해 찾고 브라우저의 동작과 연관지어 이해하고 매끄럽게 설명하기위해 다시 찾게된다.

그리고 다시 리액트를 한다. 즉 본인 스스로 어느정도 숙달됬다 싶으면 리액트를 시작해도 된다. 다만 곧 후회하고 다시 되돌아 갈것이다.

리액트를 해봐야지만 필요하다 느끼고 알게되는것도 있기때문에 너무 완벽하게 이전 단계를 수행하려고 하지 않아도 된다.

리액트를 시작하면 더 많은것이 존재한다는걸 알 수 있다.

웹팩, 바벨, 상태관리, 리덕스, 몹엑스, 리코일, 롤업, 타입스크립트, 클래스컴포넌트, 함수컴포넌트, 라이프사이클, 훅

npm, 패키지관리, 프로젝트 구조, 모듈, SPA, CSR, SSR ......

forwardRef 알아보기

.log('FE') — Fri, 11 Mar 2022 18:41:43 +0900

사내에서 사용할 UI 라이브러리를 만들면서 다른 UI 라이브러리들의 내부를 분석하였는데 공통적으로 쓰이고 있는 ~~forwardRef()~~ 에 대해서 궁금증을 갖고 알아보게 되었습니다.

# Ref

ref 는 참조라는 뜻을 갖고 있습니다. 우선 리액트에서 사용되는 Ref 에 대해서 알아보았습니다.

Ref 는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

리액트에서는 props 를 통해서 부모에서 자식으로 단방향으로 데이터를 내려주고 있습니다. 자식 컴포넌트가 수정되기를 원한다면 새로운 props 를 전달하여 리렌더링을 통해 수정을 할 수 있습니다. 그러나 가끔 직접 자식을 수정해야 할 경우가 있을 수 있습니다.

리액트 공식문서에서 Ref 를 사용해야하는 바람직한 사례를 세가지를 들고 있습니다.

- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할때

- 애니메이션을 직접적으로 실행시킬때

- 서드파티 DOM 라이브러리를 React 와 같이 사용할때

그리고 사용하지 말아야하는경우 지양해야 하는 경우도 있습니다.

- 선언적으로 해결될 수 있는 문제에 대해서는 ref 사용을 지양

React는 선언적 프로그래밍으로 만들어 졌기때문에 돔에 접근하여 돔을 업데이트하는 세부적인 사항에 대해서는 사용자가 신경쓰지 않아도 되도록 구현되어 있습니다. 그런 간혹 돔에 직접 접근이 필요한 경우가 있는데 이때 ref 를 사용하여 접근할 수 있습니다.

리액트 16.3 이후부터는 ~~React.createRef()~~ API 를 사용할 수 있고 이전 버전에서는 콜백 ref 를 사용해야 합니다.

리액트는 ~~클래스컴포넌트~~와 ~~함수컴포넌트~~ 두가지로 작성할 수 있는데 최근 트랜드는 함수컴포넌트를 쓰고 있습니다. 클래스와 다르게 함수는 인스턴스가 없기 때문에 함수컴포넌트에 직접적으로 ref 속성을 사용할 수 없습니다. 그래서 이때 사용할 수 있는 방법이 ~~forwardRef()~~ 라는 함수 입니다.

# forwardRef()

리액트 컴포넌트를 forwardRef() 라는 함수로 감싸게되면 해당 컴포넌트는 두번째 매개변수를 갖습니다. 이를 통해 외부에서 ref props 을 전달하여 사용할 수 있습니다.

정리하자면 forwardRef() 는 기존 클래스 컴포넌트에서 인스턴스를 활용하여 사용하던 ref 속성을 함수컴포넌트에서는 사용이 불가능하기때문에 외부로 ref 를 전달할 수 있도록 해주는 함수 입니다.

~~forwardRef()~~ 를 사용했을경우 리액트 개발자 도구에서 컴포넌트 이름이 노출되지 않을 수 있기때문에 이를 해결하기위해 아래와 같은 방법을 사용할 수 있습니다.

## material-ui 에서 사용중인 방법

~~forwardRef()~~ 로 감쌀때 익명함수가 아닌 이름이 있는 함수를 넘겨주는 방법입니다.

const Input = React.forwardRef(( function Input(props, ref) {} ))

## chakra-ui 에서 사용중인 방법

~~displayName~~ 속성에 이름을 설정합니다.

export const Input = forwardRef((props, ref) => {...})
if (__DEV__) {
	Input.displayName = "Input"
}

## ant-design 에서 사용중인 방법

~~forwardRef()~~ 함수의 호출 결과로 기존 컴포넌트 대체하기

// ==== Input ======//
const Input = forwardRef((props, ref) => {...})
export default Input

//====== index ========//
import InternalInput from './Input'

const Input = InternalInput
export default Input

Custom Input Radio

.log('FE') — Thu, 10 Mar 2022 18:25:18 +0900

input 의 타입중 ~~radio~~ 는 브라우저마다 기본 스타일이 다르게 보여집니다.

그리고 일반적인 css 스타일을 적용해서는 원하는대로 스타일을 바꾸기가 어렵습니다.

때문에 ~~label~~ 과 ~~input~~ 이 가진 특성을 활용하면 커스텀한 라디오를 만들 수 있습니다.

<div class="wrap">
    <div>
      <input id="custom1" type="radio" name="custom" value="custom1" />
      <label class="circle" for="custom1"></label>
      <label class="text" for="custom1">text</label>
    </div>
    <div>
      <input id="custom2" type="radio" name="custom" value="custom2" />
      <label class="circle" for="custom2"></label>
      <label class="text"  for="custom2">text2</label>
    </div>
    <div>
      <input id="custom3" type="radio" name="custom" value="custom3" />
      <label class="circle" for="custom3"></label>
      <label class="text"  for="custom3">text3</label>
    </div>
  </div>

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;
  align-items: center;
  justify-content: center;
}

.circle::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 14px;
}

input[type=radio]:checked + .circle::after {
  background: red;
}

input[type=radio]:checked ~ .text {
  color: red;
}

const wrap = document.querySelector('.wrap')
wrap.addEventListener('change', (e) => {
  console.log(e.target.value)
})

스크립트코드는 선택한 라디오의 값을 가져오는 코드입니다.

이벤트 버블링의 특성을 활용하여 이벤트 위임형식으로 만들었습니다.

이벤트 바인딩을 부모에만 걸어 코드의 양을 줄이고 메모리도 절약할 수 있습니다.

개발자를 시작하려는 선택의 기로에선 사람들에게..

.log('FE') — Fri, 4 Mar 2022 23:49:41 +0900

들어가는 말

IT에서 종사한지는 5년, 그 중 프론트개발자로 일한지는 3년이 되었습니다.

여러 커뮤니티를 보고 활동하면서 시작하는 분들의 질문이 많이 올라오는걸 보고 해당 글을 작성하게 되었습니다.

아직 저도 많이 부족한 부분이 있지만 그래도 현직에 있는 입장에서 내가 만약 처음 개발을 시작한다면 어떤것들 부터 시작했을지를 생각하며 조금이나마 시작하는 분들에게 도움이 되고자 포스트를 작성합니다.

우선 저도 비전공자로 국비교육과정을 수료하고 이곳저곳 거쳐서 현재 직장에 자리잡게 되었습니다.

~~수료 후 => 3개월 => 6개월 => 2년 => 현재~~

그때 당시엔 퍼블리셔로 교육을 받았습니다. ~~html, css, jQuery, 포토샵, 일러스트, 동영상편집~~ 툴까지 잡다하게 배웠었습니다.

지금도 배우는 내용 종류만 달라졌다뿐이지 국비는 거의 통합교육입니다. 대학교육으로 따지자면 학부수준때 배우는 수박 겉핥기의 전공교육 과정정도?

예를들자면 프론트개발자 교육인데 JAVA, Python, jQuery 같은것들이 포함되어있거나

모바일 과정인데 ReactNative, IOS, Android, Flutter 를 다 알려준다고 하거나

또는 프론트과정인데 React, Vue, Svelt 모든 프레임워크를 다 다뤄본다던가....

나쁜건 아닌데 결국 나중엔 알아야하는 부분들도 있긴한데 당장에 취업을 목적으로 배운다기엔 사실 광범위하기도하고 실무에서 저 모든걸 다 쓰지도않습니다.

게다가 프레임웍이나 라이브러리는 시간이 지나면 언제든지 다른도구로 교체될 수 있고 사내에서도 언제든지 교체할 수 있는 선택사항으로 열어 둘 수 있는 부분이라 도구자체에 집중하는건

결국 그 도구가 교체되면 아무것도 못하게 되는거랑 같다고 생각합니다.

여기까지 대략적인 제 이야기와 제 생각을 적어봤습니다.

선택

프로그래밍 언어를 배우기에 앞서 여러가지 선택에 기로에 놓이게 될겁니다. 인지하지 못했을수도있지만 결국 현재 내 삶의 결과는 내가 지금까지 해온 연속적인 선택의 결과인만큼

선택이란 미래의 나를 만들어 낼 수 있는 중요한 관문입니다.

개발자로서의 커리어를 선택하는 분들의 타입은 다양한것같습니다.

타직종 재직자의 커리어 전환
비전공자의 신입 취업
중고신입
전공자

이 중 제 글에 해당 되는 분들은 타직종에서의 커리어 전환이시거나 비전공자의 신입 취업에 해당할것같습니다.

아무래도 중고신입분이나 전공자분들은 애초에 기본적으로 갖고있는 정보도 있을거고 아무래도 전공자는 좀 더 출발선에서는 유리한 입장이라고 볼 수 있을것같습니다.

그럼 가장 첫번째로 해야할 선택이 무엇이 있을까요. 바로 학습과정의 선택입니다.

국비지원 교육
사교육 부트캠프
기업 부트캠프
온라인 강좌 독학

일단 웹 개발을 하기로 했고 웹 개발중에서도 프론트엔드를 선택했다고 가정합니다. ( 분야를 정하는것부터 고민입니다.. )

우선 객관적인 장단점부터 확인해보겠습니다.

국비지원

우선 돈이 안들어요 오히려 돈을 받고 교육을 받을 수 있죠 (최대 장점)

다만 중도에 포기하거나 했을때 패널티도 존재합니다

그리고 여러곳에 존재하기때문에 집에서 가장 가까운곳을 선택할 수도 있겠죠

단점은 필요없어 보이는 과목도 그냥 다 포함하고 있다는겁니다.

그리고 수강하는 사람들의 이해도나 실력이 천차만별이라는거죠 - 학습 분위기에 영향을 끼침

내돈이아니라 국비지원이기때문에 중도 이탈자도 쉽게 발생합니다. - 학습 분위기에 영향을 끼침

사교육 부트캠프

최대단점 비쌉니다. 3개월 6개월에 몇백만원씩 하죠 그래도 요즘엔 사교육 부캠이 국비지원으로 모집하는 케이스도 많이 생긴것같습니다.

이건 국비나 사교육이나 공통사항인데 강사에 따라서 교육의 퀄리티가 천차만별이라는겁니다 이건 진짜 복불복이라 어쩔 수 없는 부분인것같긴합니다.

장점은 비싼돈 내고 온만큼 수강생들의 열정이 남다르고 이는 곧 인맥 네트워크로 이어지기도 합니다.

중도 이탈자가 적고 어쨋든 무조건 결과물은 만들어 집니다. 그리고 국비보다는 해당 직무에 특화된 교육을 받을 수 있습니다.

기업 부트캠프

유료도있고 무료도있는걸로 알고있습니다. 다만 사전 테스트과정을 빡세게 거칩니다. 알고리즘이나 기본 지식에 대해서 테스트를 통과하고 면접까지 통과해야 합니다.

단점은 사실 없지않나? 라고 생각합니다. 실제 개발자를 운영하는 기업에서 진행하기때문에 커리큘럼도 탄탄하고 각종 테스트를 통과한 사람들이라 평균 지식이 비슷하기때문에

뒤쳐지는 사람때문에 속썩을일도 없습니다.

본인이 열심히만 한다면 취업 연계까지도 갈 수 있고 개발자로서 첫 스타트로 가장 추천되는 코스라고 할 수 있을것같습니다.

그러나 테스트를 보는만큼 비전공자나 지식이 전무한 상태로서는 그림의 떡 이라고 보는게 맞겠죠

온라인 강좌 독학

2021.10.22 - [프론트엔드/Assignment] - 프론트개발 학습 사이트 정리

프론트개발 학습 사이트 정리

기존에 작성된 개발자 학습사이트 정리 에 대한 유입이 꽤나 지속적으로 이루어지고 있는데 시간이 지나다보니 접근이 안되는 링크도있고 업데이트가 필요할것같아서 재정리하려고 합니다. Ude

code-reading.tistory.com

요즘 워낙 좋은 컨텐츠들이 많아서 유무료 온라인 강좌나 영어를 잘하신다면 유데미나 유튜브에 풀린 영상만으로도 충분히 독학이 가능합니다.

다만 혼자 하다보니 방향성을 잃거나 늘어지거나 허송세월 시간만 날리는 상황이 발생할 수도 있습니다.

커리큘럼과 가이드만 제대로 잡혀있는 상태라면 그거대로 내 입맛에 맞는 온라인강좌나 책으로 독학해도되는 가성비 제일 갑인 방법이기도 합니다.

선택의 시간

돈이 없다면 국비
약간의 투자가 가능하고 개인관리가 철저하다면 유무료 인강과 책을 통한 독학
돈이들어도 난 빨리 취업해야겠다 사교육 부캠
알고리즘이나 기반 지식이 있어서 제대로된 코스를 밟겠다 기업부캠

사실 선택을 하는데 있어서 저런 사유가 절대적인 사유는 될 수 없습니다. 각자 사정이 다르고 상황이 다르기때문에

단지 조금이나마 인생의 갈림길에서의 큰 선택에 약간의 도움이라도 되기를 바랍니다.

취업을 위한 학습 방법

자 그럼 저런 과정을 어쨋든 통하면 다 개발자가 될 수 있나? 라는 질문을 한다면 네니요 입니다.

무슨말이냐면 개발자로 취업은 할 수 있습니다. 어쨋든 IT 종사자는 될 수 있어요. 남들이 못하는거 난 할줄 아니까

근데 어떤곳을 가냐 그것이 문제입니다.

어떤 교육기관이나 방식을 선택했던 사실 지금부터가 중요합니다.

교육기간동안 그리고 수료후에 어떻게 학습했냐에 따라서 격차가 벌어지게 됩니다.

저는 왜? 라는 궁금증울 품으면서 배운걸 반복적으로 실습하고 수행하여 내것으로 만드는 과정이 무조건 있어야 한다고 생각합니다.

요리도 처음엔 모르니까 레시피를 보고 하지만 익숙해지면 부재료를 첨가하기도하고 맵거나 달게 마음대로 조리할 수 있는것처럼

부재료를 넣어서 요리할 수 있을만큼의 숙달이 되도록 해야합니다.

왜 라는 궁금증은 아마 계속 개발자로 일하기위해서 습관적으로 형성해야하는 능력이 아닐까 싶습니다.

예시

가장 처음에 HTML, CSS 를 접하게 됩니다.

어떻게 작성해야하는지 어떤 태그들이 있는지 어떤 속성을 갖고있는지 이러한 것들을 배우게 됩니다.

강사마다 다를수있곘지만 여기서 단순히 어떻게 작성하면된다 라는 사용법을 배웠다면 스스로 학습할때는

왜 해당 마크업언어가 생기게 되었는지 HTML, CSS 는 어떤 목적으로 생겨난건지 하는 의문이 필요하고 그에 대해 스스로 알아봐야 합니다.

또 다른 예시

이제 마크업언어를 어느정도 학습하고 JavaScript 를 배우게 됩니다. 이때 원시값과 객체에 어떤 종류가 있다 라고 배웠다면

이렇게 원시값과 객체로 구분짓는 이유가 무엇인지 각각의 차이점은 무엇인지 브라우저에서 어떻게 해석되는 차이점이 있는지를 스스로 학습해야합니다.

궁금한거나 모르는게 있을땐 바로바로 강사에게 물어보고 피드백 받는것이 가장 좋겠지만 여러 사람이 함께 하기에 눈치도있고 제약이 존재합니다.

왜 라는 의문을 갖는데 있어서 어떤 의문을 가져야 할지 모르겠다 라고 하는분이 있다면 좀더 근본적인 얘기를 해보겠습니다.

개발자는 뭘 하는 사람이고 뭐하는 직업일까요?

앱을 만들고 웹을 만들고 서버를 다루고 이건 사실 표면적인 역할이고 좀더 근본적인 부분으로 들어가면

프로그래밍 기술을 바탕으로 문제를 해결하는 사람이라고 정의할 수 있을것같습니다.

여기에 왜라는 의문을 어떻게 가져야 할지 답이 있습니다.

HTML 은 왜 어떤 문제를 해결하기위해 사용될 수 있는지?
CSS 는 어떤 문제 또는 불편함을 해결하기위해 사용될 수 있는지?
스타일은 선언하여 사용하는 방법에 여러가지가 있는데 왜 이런 방법들이 있고 어떤 차이점 장단점이 존재하는지?
JS 는 어떤 문제를 해결하기위해 등장 하였는지?

아키텍쳐나 클린코드 디자인패턴 알고리즘 등 개발하면서 마주하게되는 여러 개념들이 결국은 어떤 문제 혹은 불편함을 해결하기위해 등장하게 되었습니다.

웹의 깊은 역사까진 아니더라도 최소한 현재 배우고있고 내가 사용하고있는 기술의 등장배경 어떤 문제를 해결하기위해 어떤 철학을 갖고있는지 정도는 알 수 있도록 의문을 가져야 합니다.

만약 어떤 개념을 학습해야할지 그래도 어떤 의문을 가져야할지 모르겠다 라고 한다면

프론트엔드면접 질문 또는 개발자 면접질문 이라는 키워드로 검색하면 정말 많은 자료들이 있습니다.

해당 자료에 나와있는 키워드와 면접 질문을 바탕으로 공부를한다면 단순히 교육을 듣고 강의를 듣는것보다는 훨씬 얻어가는것도 많고 이해의 폭이나 접근하는 시야가 달라질 수 있습니다.

자주 묻는 질문

1. 전공자와 비전공자의 차이가 채용에 얼마나 영향을 끼치는지?

모든 질문과 내용은 웹 개발자중에서도 프론트개발자를 기준으로 말씀드립니다.

엄청 중대한 영향력을 행사하는 기준은 아닌것같습니다. 다만 비슷한 수준이라 생각된다면 전공자에게 좀더 마음이 갈것같긴합니다.

웹 특히 프론트 개발에 있어서는 전공여부가 그렇게 큰 진입장벽으로 작용하지는 않습니다.

조금만 배우고 포기하지않는다면 누구나 웹페이지 하나정돈 만들 수 있다고 생각합니다.

다만 여기서 누구나 만들 수 있는 웹 페이지는 정말 단순한 정적페이지에 한해서라고 얘기할 수 있을것같습니다.

실제 서비스는 매우 복잡한 내용들이 포함되어있고 이를 아주 잘 구현해야합니다.

그리고 무조건 100% 200% 에러상황 문제가 발생하는 상황에 마주하게됩니다. 개발자는 결국 문제를 해결하는 사람인데 마주하게된 문제를 해결할 수 없다면 개발자라고 할 수 없겠죠. 근데 이 문제를 해결할때 결국 근본적인 해결을 하려면 코어지식이 필요합니다.

한가지 예를 들자면 Maximum call stack 이란 에러를 마주하게 될 수 있습니다. 이때 스택은 자료구조의 하나로 퀵하고 쌍을 이루는 개념입니다. 그리고 자바스크립트는 싱글스레드로 동작한다고 하는데 그게 콜스택과 연관이 있습니다.

자바스크립트의 콜스택은 실행컨텍스트가 쌓이는 곳이며 메모리 저장소로 분류되는 만큼 최대로 쌓을수 있는 스택이 정해져 있습니다. 때문에 이 스택이 넘치는 호출이 쌓이게되면 저런 에러를 마주하게 됩니다.

이런식으로 어떤 에러를 마주했을때 메세지가 어떤 의미인지 원인이 무엇인지 알아야 해결할 수 있습니다. 그리고 그 바탕엔 자료구조, 자바스크립트의 동작원리, 그리고 브라우저에서 자바스크립트를 해석하는 엔진에 대한 복합적이고 근본적인 코어지식을 알고 있어야합니다.

즉 웹페이지를 구현할 수 있다가 개발자의 영역이라기보단 프론트개발을 하려면 웹페이지 구현은 사실 당연한 기본 능력이자 소양입니다. 더 중요한건 프론트와 웹과 브라우저와 관련된 문제상황에 직면했을때 해결할 수 있는지 혹은 해결하기위한 기본적인 지식을 갖추고 있는지 이걸 이해할 수 있는지 이런 부분이 사실 더 중요하다고 할 수 있을것같습니다.

이런 부분을 충분히 면접에서 또는 포폴에서 보여준다면 전공의 유무는 그렇게 중요하지 않다고 생각되고 이러한 이유때문에 비슷한 느낌이 든다면 전공자쪽을 좀더 선호한다 라고 얘기할 수 있을것같습니다.

2. 자격증에 대한 가산점은 얼마나 해당되는지

프론트중에서도 회사에따라서 외부사업을 통해 성장하는 회사인지 아니면 회사의 이름으로 자사 서비스를 운영하는 회사인지에 따라서 갈릴것같습니다. 외주나 프로젝트 수주를 통해 성장하는 회사는 중급 또는 고급개발자 같은 분류로 금액을 책정하고 수주를 받을 수 있는 어떤 기준이 되는데 이땐 자격증을 가진 사람을 우대해서 뽑겠죠

일반 자사 서비스를 운영하는 회사에서는 그냥 아 자격증이 있구나 하고말지 가산점이나 당락여부에 전공과 마찬가지로 큰 영향력은 없습니다. 가산점과 상관없이 그냥 해당 자격증공부를 통해 어떤 기본적인 지식을 쌓거나 자존감을 올리기위한 수단이라면 준비해보는것도 좋을것같습니다.

3. 신입기준 연봉수준은 어느정도가 적당한지

이건 사람마다 개인적인 기준이나 생각이 달라서 참고만 하면될것같은데 3000정도면 신입 초봉으로 나쁘지 않은 수준이다 라고 생각할것같습니다. 에이 말도안돼 저렇게 적다고? 라고 생각하신다면 평균보다 더 잘하고 실력 쌓아서 좋은곳 더 많은 연봉을 주는곳으로 가시면 될것같습니다. 바운더리를 얘기를 해보자면 2800~6000 정도로 천차만별이라 ...... 결국 잘하는 사람이 더 많이받고 가겠죠?

4. 고졸로 취업하려는데 불이익은 없는지

음 표면적인 불이익은 없어요 근데 그 회사가 최초 고졸 채용시 그 사람에게서 어떤 느낌을 받았느냐 어떤 경험을 했느냐에 따라서 프레임이 씌워져서 어떤 회사에선 기피할수도 있을것같습니다. 저도 2년이상 있었던 회사가 두군데인데 둘다 고졸채용이 있었습니다. 근데...별로 좋은모습은 본적이 없네요 그런 모습들이 고졸이라서 철이없어서 아직 어려서 경험이 부족해서...이런 프레임들이 사람인지라 은연중에 뇌리에 박혀서 부정적인 경험을 했다면 ....이건 꼭 고졸이기때문이 아니더라도 다른 케이스일때도 마찬가지일것같네요 신입을 채용하는데 고졸 대졸 상관없이 너무 빨리 그만두면 경력직만 뽑으려 하겠죠 신입에 대한 좋은 경험이 없으니까요

5. 포트폴리오가 꼭 필수 사항인지

포트폴리오가 필수인 회사는 제출을 하라고 합니다. 그래서 무조건 이라기보단 회사마다 다르긴한데

그래도 무언가 어필을 하려면 면접에서 이야기 보따리를 풀 수 있는 포폴 하나정돈 있으면 좋을것같습니다.

여기서 중요한건 클론코딩 포폴인데 괜찮은지 실제 운영사례가 있는 포폴이어야 하는지 디자인이 구린데 이렇게 해도 되는지 등등이 있는데 디자인은 사실 보기좋은음식이 먹기도좋다고 예쁘게 만들면 좋긴하죠 그 예쁘게 만들기가 어려워서 그렇지 아무튼 엄청 스트레스 받아가며 할 부분은 아니라고 생각합니다. 클론코딩은 정의를 좀 해야할것같은데 블로그나 강의를 보고 따라만든것이 클론코딩이 아닌

실제 운영중인 특정 서비스를 바탕으로 이 서비스가 갖고있는 기능들을 동일하게 구현해보는거라고 할 수 있을것같습니다.

즉 누군가의 코드를 따라서 쳐서 클론코딩이 아니라 서비스의 기능을 내가 스스로 똑같이 구현해 보는것이 클론코딩의 목적입니다.

그냥 남의코드 따라만 쳐서 완성한건 이야기할것도없고 아무 의미가 없습니다.

딱 한 페이지를 만들더라도 거기에 들어간 기능들을 내가 손수 고민해가면서 만들어 본거라면 1페이지던 10페이지던 포폴이 한개이던 다섯개이던 별로 중요하지 않다고 생각합니다.

위의 내용들은 굴지의 대기업이냐 IT 공룡 기업들이냐 중소기업이냐 스타트업이냐에 따라 조금씩 다를 수 있습니다.

제가 작성한 글이 어떤 정답도 아니고 무조건 이렇다 이런것도 아닙니다. 다만 해당 직종을 선택하는데 있어서 조금이나마 도움이 되길바라고 저도 이런 생각을 갖기까지 아무 생각없이 지냈을때 왜 그리고 코어지식을 쌓아야겠다는 생각을 좀더 빨리 했으면 좋았겠다 라는 정도 차원에서 작성하게 되었습니다.

크롬 확장 프로그램 알아보기 (2)

.log('FE') — Tue, 4 Jan 2022 13:21:05 +0900

2021.12.23 - [프론트엔드/Project] - 크롬확장프로그램 알아보기 (1)

크롬 확장 프로그램 알아보기 (1)

최근 사내에서 업무의 효율성을 높이기위해 개인적으로 진행한 크롬 익스텐션을 개발하였는데 그 과정에서 알게된 내용들을 정리하려고 합니다. 크롬 익스텐션 크롬브라우저에서는 다양한 확

code-reading.tistory.com

원래 한번에 작성하려고 했다가 내용이 생각보다 길어질것 같아서 시리즈형태로 나눠서 작성합니다.

messaging pass

크롬 API 메제징 교환 방식

이전에 ~~content.js~~ 라는 파일을 만든적이 있었습니다. ~~content~~ 는 확장 프로그램이 아닌 웹 페이지의 컨텍스트에서 실행되기 때문에 나머지 확장 프로그램의 스크립트나 페이지와 통신하기위하 별도의 방법이 필요합니다. content 가 웹 페이지의 컨텍스트에서 동작한다는 증거를 들자면 ~~content~~ 에서는 웹 페이지의 ~~DOM~~ 을 조작할 수 있습니다. 그러나 ~~background~~ 에서는 안되죠.

또 ~~content~~ 에서 ~~console.log~~ 를 찍어보면 해당 탭의 콘솔창에서 로그를 확인할 수 있습니다. ~~background~~ 내에서 ~~console.log~~ 는 확장 프로그램의 별도의 워커를 띄워야 확인 할 수 있습니다.

때문에 다시한번 얘기하자면 content 와 나머지 확장 프로그램 스크립트와 데이터를 주고받기 위해서 messaging pass 를 사용하고 있습니다.

# 단일요청 보내기

~~chrome.runtime.sendMessage~~ - content 스크립트 => 확장 프로그램 스크립트로 요청 보낼때

~~chrome.tabs.query~~ - 확장 프로그램 스크립트 => content 스크립트로 요청 보낼때

# 단일요청 수신하기

~~chrome.runtime.onMessage.addListener~~ - content 스크립트, 확장 스크립트 동일

위와같이 컨텐트 스크립트에서 확장프로그램으로 단일요청을 보내게되면 ~~브라우저의 현재 활성된 탭~~의 개발자도구 콘솔창에서 로그를 확인할 수 있습니다.

반대로 확장스크립트에서 컨텐트 스크립트로 보낸 메세지의 결과를 확인하려면 확장프로그램을 실행한 페이지에서 마우스 우클릭 검사를 클릭하게되면 ~~확장프로그램의 개발자 창~~이 별도로 띄워지고 해당 콘솔에서 응답받은 결과를 확인할 수 있습니다.

# 지속되는 연결

~~chrome.runtime.connect~~ - content 스크립트 => 확장프로그램 스크립트로 연결 요청할 때

~~chrome.tabs.connect~~ - 확장 프로그램 스크립트 => content 스크립트로 연결 요청할 때

# 지속되는 수신

~~chrome.runtime.onConnect.addListener~~

예제 코드

Message passing - Chrome Developers

How to pass messages between extensions and content scripts.

developer.chrome.com

사실 해당 내용에 대해서는 제대로 아직 이해를 하지 못했습니다. 문서에서는 사용사례로 자동양식 채우기를 예시로 들었는데 혹시 해당 내용에 대해서 정확한 이해를 하신분 댓글로 설명해주시면 감사할것같습니다. 단일요청과의 차이를 비교할 수 있으면 더 좋을것같습니다.

Content Script

1부에서는 ~~background.js~~ 에 스크립팅 형식으로 ~~content.js~~ 를 추가해 주었습니다. 좀 더 다양하게 활용하려면 ~~매니페스트~~에 설정을 추가하여 사용할 수 있습니다.

// manifest.json
{
...
"content_scripts": [
{
"matches": ["http://*"],
"css": ["style.css"],
"js": ["content.js"],
}
]
}

matches : 해당 url 과 일치할때 스크립트를 활성화 합니다.

css: 일치하는 페이지에 삽입할 css 파일 목록 입니다. 배열에 입력하는 순서대로 삽입됩니다.

js: 일치하는 페이지에 삽입할 스크립트 입니다.

매니페스트에 설정하는 방식은 ~~정적 선언~~으로 주입하는 방식입니다.

~~컨텐츠 스크립트~~는 웹 페이지의 컨텍스트에서 실행됩니다. ~~DOM~~ 을 활용할 수 있고 방문하는 웹 페이지의 세부정보를 읽어 전달할 수 있습니다. 만약 일치가 아니라 제외하고픈 url 이 있다면 ~~"exclude_matches": []~~ 를 매니페스트에 설정하면 됩니다.

1부에서 매니페스트가 아닌 background 에서 content 스크립트를 지정하여 사용하는 방식이 ~~프로그래밍 삽입 방식~~ 입니다.

이때 접근에 대한 호스트권한이 필요하기때문에 매니페스트에서 ~~"permissions": ["activetab"]~~ 을 설정하였습니다.

chrome.storage

메세지 패싱으로 데이터를 주고 받을수도 있지만 웹에서 ~~localstorage~~ 를 활용하는것처럼 크롬 확장 프로그램 API 로 storage 를 제공하고 있어 이를 활용할 수도 있습니다. localstorage 와 동일한 기능을 제공하지만 몇가지 차이점이 있습니다.

객체로 저장할 수 있습니다 (localstorage 는 문자열로 저장)
~~storage.sync~~ 를 활용하여 자동으로 동기화 시킬 수 있습니다.
저장할 수 있는 아이템 개수가 512개 로 제한이 있습니다.

storage 를 사용하기위해서는 매니페스트에 설정을 추가해야합니다

"permissions": ["storage"]

사용방법은 간단합니다.

chrome.storage.sync.set({ key: 'test '})
chrome.storage.sync.get( [ 'key' ] ).then( result => console.log( result.key ) )

API 참조

크롬 확장 프로그램은 메세지패싱만 잘 활용하여 데이터를 주고받고나면 나머지는 기본적으로 웹을 개발하는것과 동일합니다. 어떤식으로 메세지를 주고받고 어떤 스크립트에서 어떤 처리를 할 수 있는지 명확히 이해한다면 얼마든지 상상만으로 갖고있던 여러 유용한 확장 프로그램을 개발할 수 있습니다.

저는 확장 프로그램으로 웹 페이지의 폼 데이터를 저장해두었다가 다시 불러와 set 해주는 어플리케이션을 만들었습니다.

사내용으로 만든거라 따로 검색이 되거나 링크가 공개되어있지는 않은데 비슷한 예제를 만들어서 올릴 예정입니다.

.log('FE')

flowith io

Cursor Bugbot

개발자 관련 컨퍼런스 모음

1. NAVER DEVIEW

2. TOSS SLASH

3. FEConf KOREA

4. 우아콘

5. If KAKAO

6. JSConf KOREA

7. INFCon

8. TECH VERSE

프론트엔드 과제 전형 유형

1. 순수 자바스크립트 구현

2. 라이브러리 또는 프레임워크를 사용한 구현

개발자 도서 추천

언제 리액트를 시작해야할까?

기준을 정해보자

리액트랑 연결해보기

지금당장 시작해라

forwardRef 알아보기

# Ref

# forwardRef()

## material-ui 에서 사용중인 방법

## chakra-ui 에서 사용중인 방법

## ant-design 에서 사용중인 방법

Custom Input Radio

개발자를 시작하려는 선택의 기로에선 사람들에게..

들어가는 말

선택

국비지원

사교육 부트캠프

기업 부트캠프

온라인 강좌 독학

선택의 시간

취업을 위한 학습 방법

자주 묻는 질문

크롬 확장 프로그램 알아보기 (2)

messaging pass

# 단일요청 보내기

# 단일요청 수신하기

# 지속되는 연결

# 지속되는 수신

Content Script

chrome.storage