분류 전체보기
-
우아한테크코스 한 달 생활기Study/일상·회고 2023. 3. 18. 16:41
벌써 우테코에 들어온지 한 달이 훨씬 넘었다. 우테코에서 느낀 몇 가지를 정리해보려고 한다. 우선 프론트엔드 개발을 희망하는 나는 이번 2월에 컴공을 졸업하자마자 바로 우테코에 합류했다. 전공 생활 중에 자바스크립트는 미지의 영역이었다. 학교 커리큘럼 상 중요도가 떨어지는 자바스크립트는 소외될 수 밖에 없었고, 오로지 독학만 가능한 환경이었다. 학교에서 학과 홈페이지를 유지보수하고 기능 개발을 하던 나는 백엔드, 프론트엔드, 데이터베이스, 서버 등등 가리지 않고 어깨 넘어 학습을 해왔다. 이 중 가장 흥미로우면서 나의 역량을 최대한 보일 수 있는 분야가 프론트엔드라고 생각했다. 안타깝게도 학교에서는 자바스크립트의 중요성에 대해서 크게 강조하지 않는다. 현실적으로 학교 입장에서는 빠듯한 커리큘럼으로 인해 ..
-
JavaScript의 customElements에서 Proxy을 활용한 객체 변화 감지Frontend/JavaScript 2023. 3. 3. 14:13
앞서 작성한 글을 완벽하게 숙지하고 사용하시다 보면 attribute 값을 업데이트 하는 과정에서 여러 의문이 들 것입니다. ??? : observedAttributes() 와 attributeChangedCallback() 으로 태그의 attribute 값이 바뀌는 것을 감지해주는건 알겠는데… ??? : 여기에 render() 함수를 걸어두면 attribute값이 바뀔 때 렌더링도 자동으로 최신화해주는 것도 알겠는데.. ??? : attribute는 텍스트만 넘겨줄 수 있고, attribute를 감지하는 것이지 엘리먼트 내부의 상태값을 감지하는 것은 아니지 않나? 객체가 변했을 때 렌더링이 자동으로 일어나게 할 수 없을까? customElements을 그렇게 만들어 보겠습니다. class MyProxy..
-
JavaScript에서 customElements를 활용하여 독립적인 상태 관리하기Frontend/JavaScript 2023. 3. 1. 17:38
과거의 정적인 웹 페이지 구현과 달리, html을 동적으로 적절하게 관리한다는 것은 결코 쉽지 않습니다. 특히 SPA를 구현할 때, 많은 분들이 비슷한 고민을 겪게 될 것으로 생각됩니다. 동적인 화면 변화가 잦다면 정적인 html은 큰 도움을 주지 못합니다. html이 없으면 사용자에게 어떤 것을 보여줄 수 없지만, 그렇다고 해서 처음 부터 모든 태그들이 고정된 자리를 잡는 것은 동적인 웹 페이지를 그리는데 큰 도움을 주지 못할 가능성이 큽니다. 특히 ajax의 등장 이후, 웹 페이지를 동적으로 관리하려는 시도는 차츰 늘어오다가, 이를 해결하기 위해 상태 관리를 중심으로 한 react, vue, angular 등이 웹 프론트엔드 기술의 대세로 떠올랐고, 과거의 jquery는 이제 영광을 뒤로하고 퇴장을 ..
-
.onsubmit과 .addEventListener의 차이Frontend/JavaScript 2023. 2. 27. 16:57
다음 두 예제 코드를 봅시다. 예시 1 : .onsubmit 제출 const form = document.getElementById('foo'); form.onsubmit = function (event) { event.preventDefault(); console.log(event.target.bar.value); }; 예시 2 : .addEventListener 제출 const form = document.getElementById('foo'); form.addEventListener("submit", function (event) { event.preventDefault(); console.log(event.target.bar.value); }); 이 코드들의 실행 결과를 예상해보면, form 태그..
-
JavaScript 클래스 문법은 어떻게 쓰는 것일까?Frontend/JavaScript 2023. 2. 22. 15:45
프로토타입의 설명은 생략하였습니다. 클래스 자바스크립트는 프로토타입 기반의 객체지향 언어입니다 클래스 문법은 ES6(2015)에 와서야 추가되었습니다. 클래스 문법이 등장 하기 전에는 어떤 방식으로 객체지향 프로그래밍을 할 수 있었을까요? 클래스를 사용한 객체 생성 먼저 널리 알려진 클래스 기반 프로그래밍 언어이자 객체지향 프로그래밍 언어의 대표주자로 불리는 Java와 비교를 하면서 예시를 들겠습니다. JavaScript는 알고 Java를 모르시는 분이 다음과 같은 문법을 보게된다면 뭔가 어디서 본듯 한 느낌을 받을 것입니다. Java의 클래스 사용법 public class Car { String name; int position; public Car(String name) { this.name = na..
-
2022년을 보내며, 그리고 새해 다짐Study/일상·회고 2023. 1. 10. 05:11
비록 2022년이 지나서 지금은 2023년이지만 뒤늦게 쓰는 회고록 인생을 살면서 그저 그렇게 지나가는 해도 있기 마련이라고 생각합니다. 하지만 2022년은 굉장히 잊지 못할 한 해로 남을 것 같다는 생각이 듭니다. 2021년의 연말 3학년이 끝나가던 2021년 말 까지만 해도 어떤 진로로 나아가야할지 확정하지 못해서 이것저것 다 공부했던 저는 Java가 제 주력 언어 중 하나였습니다. Java가 우리나라에서는 정말 강력한 언어 중 하나기에 미래가 보장된다는 점, 디자인 패턴이 굉장히 납득이 가는 방식이라 설계와 유지보수가 편했다는 점, 학교에서 수준 높은 Java 강의를 지속적으로 수강할 수 있었다는 점 등 여러 이유로 자연스럽게 Java를 해왔고, 계속 이쪽으로 나아갈 것으로 생각했습니다. 하지만 그..
-
우아한테크코스 5기 (FE) 최종 코딩테스트 후기Study/일상·회고 2022. 12. 21. 15:23
이전 글 [회고] 우아한테크코스 5기 프리코스 (FE) 개요 지난 4주(10월 31일 ~ 11월 23일)간 우아한테크코스 5기 프리코스의 웹 프론트엔드에 참여했습니다. 작년만 하더라도 제 진로에 대한 고민이 깊어 백엔드로 갈지, 프론트엔드로 갈지 명확하게 leirbag.tistory.com 프리코스 종료 이후 프리코스가 끝나고 그 동안 밀린 할 일을 처리하기 시작했습니다. 몇 달 동안 준비했던 대학생논문경진대회에도 나가고, 기말고사도 보고, 학교에 제출해야 하는 각종 서류들을 하나씩 처리해가면서 다시 일상으로 돌아와서 해야할 일을 하기 시작한 것이었습니다. 그동안 바빠서 읽지 못했던 JavaScript Deep Dive도 다시 펴고, 학교에서 새롭게 제의 받은 토이 프로젝트에도 참여하는 등 다시 하고 싶..
-
우아한테크코스 5기 프리코스 (FE) 1차 합격!Study/일상·회고 2022. 12. 14. 15:15
프론트엔드로 전향한지 1년이 다 되어가는 시점에서 큰 행운이 찾아왔습니다. PR 기준으로 약 800~900명이 지원했고, FE 기준 50명 최종 선발인원의 2배수인 100명 정도에게만 코딩 테스트의 기회를 준다고 하셨습니다. (라이브 방송에서 매번 말씀하시던 내용이라 이렇게 알고 있습니다.) 프리코스 끝나고도 더 최선을 다할 수 있지 않았나 후회와 고민의 시간을 가지면서 고통스러웠던 몇 주간의 기다림 끝에 1차 관문을 통과했네요 오예