전체 글 53

TypeScript 공부

Interface vs Class : interface 는 typescript 가 컴파일 타임(코딩할 때)에 타입 체크를 해주기 위한 '구조체' 같은 것(객체 타입을 정의하는 게 아님! 타입 체크를 위해 임시로 만드는 dummy 타입 이라 생각하자). 즉 컴파일 돼서 js 화 되면 사라진다. 반면에 class 는 객체 타입을 새로 정의하는 것이며, 객체 프로퍼티/메소드 를 갖고 있고, 컴파일 해서 js 화 해도 (런타임) 남아 있다. 불필요한 메모리/파일크기 낭비를 막기 위해선 interface 를 쓰면 되겠고, 클래스 로써의 기능이 꼭 필요한 경우라면 class 를 쓰면 되겠다. 참고 : https://stackoverflow.com/questions/51716808/when-use-a-interfac..

클린코드 IN 프론트엔드

팀 내 FE 소스코드는 대체로 잘 짜여진 코드, 모던한 VueJS, JS 의 장점을 잘 살린 코드였고 많은 구조 개선을 거친 것으로 보였다. 그럼에도 불구하고 처음 업무를 하는 나로썬 수정할 부분이 어디인 지 파악하기가 어려웠다. (물론 지금도...) 사무실에서 쉬면서 유튜브를 뒤적이고 있는데, TOSS SLASH 21 영상중 하나가 눈길을 끌었다. https://www.youtube.com/watch?v=edWbHp_k_9Y 제목 부터 '실무에서 바로 쓰는 FE 클린코드'..... 핵심 내용은 '추상화, 단일책임원칙' '코드가 짧다고 읽기 쉬운 코드가 아니다.' '코드가 길어져도 짧을 때 보다 읽기 쉬운 코드가 될 수 있다.' 로 보인다. 영상을 접하고 난 후엔 '이렇게 하면 다소 코드가 길어지고 파일..

vue 라이브러리 컴포넌트 배포 경험기 (vue, vite, npm, typescript, css)

최근 시작하는 몇 개의 사이드 프로젝트에서 '게시판' 기능이 필요했기에 아예 해당 컴포넌트를 라이브러리로 npm 에 배포해 사용하고자 npm 라이브러리를 만들었다. 라이브러리 결과물 : https://www.npmjs.com/package/vue-board-component vue-board-component ## This reusable component is bulletin board ('table' based on 'div( display: table )'). Latest version: 0.2.8, last published: 10 hours ago. Start using vue-board-component in your project by running `npm i vue-board-compon..

공부 링크들

스프링 Bean Scope : https://velog.io/@probsno/Bean-%EC%8A%A4%EC%BD%94%ED%94%84%EB%9E%80 스프링 Bean 생명주기 : https://dev-coco.tistory.com/170#%EC%-A%A-%ED%--%--%EB%A-%--%--%EB%B-%--%--%EC%-D%B-%EB%B-%A-%ED%-A%B-%--%EB%-D%BC%EC%-D%B-%ED%--%--%--%EC%--%AC%EC%-D%B-%ED%--%B- 스프링 Bean(싱글톤, 프로토타입) : https://atoz-develop.tistory.com/entry/Spring-%EB%B9%88%EC%9D%98-Scope-%EC%8B%B1%EA%B8%80%ED%86%A4%EA%B3%BC-%ED..

공부 링크

함수형 프로그래밍, 클로저의 역할 : https://gsmesie692.tistory.com/267 자바스크립트란? : https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/ 객체지향의 추상화란? : http://wiki.hash.kr/index.php/%EC%B6%94%EC%83%81%ED%99%94 객체지향 5대원칙 : https://blog.itcode.dev/posts/2021/08/15/liskov-subsitution-principle LSP(리스코프 치환 원칙) : https://flowingmooon.tistory.com/32 논/블로킹, 비/동기 : https://velog.io/@nittre/%EB%B8%..