.log('FE')

순전히 제 흥미와 관심사 위주의 내용으로만 모았습니다 1. NAVER DEVIEW DEVIEW 2023 DEVIEW는 국내외 개발자들이 서로의 지식을 나누고, 탁월함을 추구하며, 함께 성장하는 컨퍼런스 입니다. deview.kr 2. TOSS SLASH SLASHㅣ개발자 컨퍼런스 www.youtube.com 3. FEConf KOREA FEConf Korea 프론트엔드 개발의 소중한 경험을 공유합니다! 프론트엔드 개발자에 의한! 프론트엔드 개발자를 위한! 프론트엔드를 개발하며 마주했던 치열한 고민과 깊은 인사이트를 공유하며 여러분과 함 www.youtube.com 4. 우아콘 WOOWACON 2022 우아한테크콘서트, 함께해요 woowacon.com 5. If KAKAO if(kakao)dev2022 함..

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

개인적으로 소유하고있으면서 두고두고 필요할때마다 챙겨보는 도서 목록을 정리해 봤습니다. 한번에 구매한건 아니고 필요할때마다 하나씩 사다보니 이렇게 된것같습니다. 개발관련 서적은 완독 보다는 그때그때 필요한 부분만 찾아보는 방식이 좋은것같습니다. 그리고 신입이었을때와 어느정도 연차가 있을때랑 같은 챕터를 읽어도 받아들이는 정도가 달랐던것같습니다. 더 성장하고 싶은 분들에게 조금이나마 도움이 되는 정보이길 바랍니다. http://www.yes24.com/Product/Goods/11681152 Clean Code 클린 코드 - YES24 애자일 소프트웨어의 혁명적인 패러다임을 제시하는 책이다. 저자 로버트 마틴은 오브젝트 멘토(Object Mentor)의 동료들과 힘을 모아 ‘개발하며’ 클린 코드를 만드는 ..

커뮤니티에서 자주 올라오는 질문중에 하나가 바로 언제 리액트를 시작해야하는지 이다. 아마 일정 경지에 올라야 리액트를 시작할 수 있다 라고 생각하는것같고 그리고 그 일정 기준이란게 있을거다 혹은 가이드가 존재하지않을까 라는 생각으로 질문하지 않을까 싶다. 리액트 즉 프론트개발을 공부하려면 기본적으로 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..

들어가는 말 IT에서 종사한지는 5년, 그 중 프론트개발자로 일한지는 3년이 되었습니다. 여러 커뮤니티를 보고 활동하면서 시작하는 분들의 질문이 많이 올라오는걸 보고 해당 글을 작성하게 되었습니다. 아직 저도 많이 부족한 부분이 있지만 그래도 현직에 있는 입장에서 내가 만약 처음 개발을 시작한다면 어떤것들 부터 시작했을지를 생각하며 조금이나마 시작하는 분들에게 도움이 되고자 포스트를 작성합니다. 우선 저도 비전공자로 국비교육과정을 수료하고 이곳저곳 거쳐서 현재 직장에 자리잡게 되었습니다. 수료 후 => 3개월 => 6개월 => 2년 => 현재 그때 당시엔 퍼블리셔로 교육을 받았습니다. html, css, jQuery, 포토샵, 일러스트, 동영상편집 툴까지 잡다하게 배웠었습니다. 지금도 배우는 내용 종류만..

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 폴더에 두개의 파일을 생성합니다. 위와같이 작성하고 확장프로..