본문 바로가기

분류 전체보기

 (24)
2023년 자바스크립트의 최신 문법 알아보기 👀 React, Vue, Svelt 와 같은 프레임워크를 이용하여 보다 더 편리한 프론트엔드 개발이 가능해졌지만, 그 기반에는 항상 자바스크립트가 있다. 자바스크립트는 초기 비개발자를 위한 언어를 모토로 생성되었기 때문에 쉽게 사용할 수 있지만, 그로 인해 생기는 불편한 점이 있었다. ⏤ 예를 들면 var 를 이용하여 중복 선언과 호이스팅을 통해 선언 전에 사용이 가능했지만, ( 오류를 저하시켜야 비 개발자들이 잘 사용할 수 있을 것이란 믿음에 ) 실제로 개발하다 보니 디버깅이 어려워서 let, const 를 해결책으로 발전 ⏤ 그래서 자바스크립트를 꾸준히 발전시키는 사람들이 있다. TC39 문서를 통해서 자바스크립트가 변화하는 동향들을 확인할 수 있다. (Proposal 칸을 확인해야 최종적으로 자바스크립..
2022년 회고 2022년 회고를 4일이 지나서야 쓰는 게으름뱅이 바로 나에요. 연말 휴가와 함께 온 감기 때문에 늦게 썼다고 나를 위로하며 .. 01 , 인턴 생활 시작 부트캠프가 끝나가면서부터 다양한 회사에 많이 지원했었다. 상반기에는 기술적인 면에서 스스로 준비 안되어있다는 걸 알면서 지원했다.(그럼에도 서류 합격을 대부분 할 수 있었던 것 일이 매우 감사했다.) 하반기는 나를 설명하고 설득하는 능력이 부족했던 것 같다. 그래서 최종에서 떨어지는 일이 잦았고, 많이 슬퍼했던 것 같다. 마지막으로 남은 인턴 ..✨ 면접이 원래 2번이었다가 1번으로 바뀌어서 굉장히 마음이 편안했다. 기술에 대한 개념을 물어보는 질문들이 주가 아니라, 내가 그 기술에 대해서 어떻게 생각하는지에 대해 물어봐주셔서 편하게 답변할 수 있었던..
리액트의 VirtualDom 이 어떻게 실제 DOM 에 반영할까 1 - Diffing 알고리즘 리액트를 사용하시는 이유 중 하나가 가상돔 때문이라고 생각이 드는데, 리액트의 가상DOM 이 실제 DOM과 어떻게 비교를 해서 실제 DOM에 반영을 하는지 궁금해서 찾아보게 된 내용입니다. 이 글을 통해서 왜 리액트에서 Key 를 유니크한 값으로 설정해야하는지에 대해 알게되실 수 있을 것 같습니다 🙏 Heuristic 알고리즘 VirtualDom과 실제 Dom 을 비교할 때 따지고 보면 전체 Dom을 순회하는 것인데 오히려 성능 저하가 일어나지 않을까라는 생각이 듭니다 🤔 이런 고민에 대해 리액트는 휴리스틱 알고리즘으로 해결했습니다. 해결법이 정확히 해결되는가에 대한 문제를 배제하고, 경험과 직관을 통해, 일반적으로 좋은 해결법이나, 보다 간단한 해결법을 찾고자 하는 방법이다. 휴리스틱에 대한 정의가 와..
테오의 스프린트 13기 ⏤ 여행앤유 회사에서 너무 바쁜데 잠은 잘 못자서 스프린트에 참석하기로 했다. 개발은 혼자할 수 있어도, 협업은 혼자할 수 없기 때문에 스프린트를 통해 어떻게 디자이너/백엔드/프론트엔드가 효율적(더 많은 커뮤니케이션 비용을 낭비하지 않을 수 있는 방법)으로 협업할 수 있는지에 대해 배웠다. 내가 참여하게 된 프로젝트는 여행과 관련된 프로젝트였다. (2월에 해외여행에서 요기나게 쓸 수 있을 것 같아서) 아이디어 공유 프로젝트 아이디어가 선정되고 본인들이 생각하고 있던 해당 페이지에서의 기능들을 나열하는 일을 했다. fall이 다양한 레퍼런스를 찾아주셔서 수월히 진행할 수 있었다. 처음으로 피그잼을 통해 아이디어 회의를 했는데 좋은 툴인 것 같다 🫶 스프린트는 5일차동안 진행되는 프로젝트여서 결과물을 내기에 헤비한 아이..
카엔프(KEP)에서의 FE 인턴 생활 카엔프에 인턴으로 입사한지도 벌써 2개월이 지났다 😮 9월부터 썼다 지웠다를 반복하고 있는데 이제서야 탈고를 하게 되었다. (별거 아닌 글이 아닌데 탈고? 라는 단어가 웃기지만) 입사하고 한 달은 오피스 출근하며 지. 본가에서 판교까지 교통이 너무 힘들어서 쉽진 않았지만 버스에서 계속 자면서 오니까 그럭저럭 괜찮았다. 그리고 인턴 처음 시작하면서 배울 것들이 많아서 한 달이 빠르게 지났고, 지금은 재택으로 바꿨다. 재택을 신청해서 모니터가 배송왔다 💻 이 모니터가 맥북 레티나랑 찰떡인 것 같은데 가격 보고 내려놨다. (휴일에는 이 모니터로 넷플릭스도 보고 아주 좋다 >
[이펙티브 타입스크립트| 3장] 타입 추론 전통적으로 '정적 타입', '명시적 타입'이 전통적으로 쓰였다. 타입스크립트는 그에 반해 타입 추론을 적극적으로 수행하는데, 이를 통해 불필요한 코드를 줄일 수 있다. 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입스크립트를 사용할 때 모든 타입을 명시적으로 작성하지 않아도 된다. 모든 변수에 타입을 선언하는 것은 비생산적이다. let x:number=12; // 비효율적 위와 같은 코드가 비효율적인 이유는 let으로 선언했을 때 이미 number 타입이 추론되기 때문이기 때문이다. 타입 추론이 된다면 명시적으로 타입 구문을 넣지 않아도 된다. 타입스크립트는 숫자 및 문자열 뿐만 아니라 더 복잡한 객체 또한 추론이 가능하다. let과 다르게 const 를 사용하면 더 정확한 타입 추론이 가능..
[이펙티브 타입스크립트| 2장] 타입스크립트의 타입 시스템 12. 함수 표현식에 타입 적용하기 자바스크립트(그리고 타입스크립트)는 함수의 문장(statement)와 함수 표현식(expression)을 다르게 인식한다. 함수의 문장과 함수 표현식 타입스크립트에서는 함수 표현식으로 사용하는 것이 좋다. const add=(a:number, b:number):number => return a+b; const minus=(a:number, b:number):number => return a-b; 위와 같이 사용하던 것을 아래와 같이 사용할 수 있다는 이점 때문이다. type calNum=(a:number, b:number)=> number; const add:calNum =(a, b) => return a+b; const minus:calNum=(a, b) => ret..
[이펙티브 타입스크립트 | 1장] 타입스크립트 알아보기 1장 타입스크립트 알아보기 💻 들어가기 전, 타입스크립트는 인터프리터 언어 (파이썬, 루비)로 실행되는 것이 아니고, 저수준 언어로 컴파일(자바, 씨언어) 되는 것도 아니다. 또 다른 고수준 언어인 자바스크립트로 컴파일 되며, 실행 역시 타입스크립트가 아닌 자바스크립트로 이루어진다. 그렇기 때문에 자바스크립트와의 관계가 매우 중요하다. 인터프리터 언어, 저수준 언어, 고수준 언어 1 . 자바스크립트와 타입스크립트의 관계 타입스크립트는 흔히 자바스크립트의 타입이 추가 된 상위 집합이라고 생각한다. 그러나 반은 맞고, 반은 틀리다. 모든 자바스크립트는 타입스크립트에 포함되지만, 일부의 자바스크립트만이 타입 체크에 통과하기 때문이다. 오류를 뱉어낼 수 있는 자바스크립트를 타입스크립트를 사용함으로서 예방이 가능..

티스토리툴바