남남이루의 고군분투 🌳

타입스크립트의 기본 타입 Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 변수에 타입 지정 const name:string = 'Nami'; 변수명 바로 옆에 콜른으로 타입명을 작성함으로써 해당 변수의 타입을 지정할 수 있다 함수에 타입 지정 const Add(a:number, b:number): number { return a+b; } 함수명 바로 옆 괄호 내부에는 파라미터의 타입을 지정하고, 괄호가 끝난 다음에는 return값의 타입을 지정할 수 있다. 타입은 이렇게 바로 옆에 하나씩 지정하거나, 타입이나 인터페이스로 선언하고 해당 타입이나 인터페이스의 변수를 작성해줄 수 있다. interfac..

Array Types in TypeScript (원문 바로가기) 23. 8. 19 발행 _ TkDodo’s blog 글을 시작하기 전에.. 이 포스팅은 ReactQuery의 co-maintainer인 TkDodo의 블로그 글을 의역해 정리한 글이다. 해당 블로그는 ReactJs, TypeScript, 비동기에 대한 글이 주기적으로 올라오고 있다. Array 과 string[] 두 표기법의 공식 번역 용어를 찾을 수 없어 전자는 제너릭 노테이션(제너릭 표기법), 후자는 배열 노테이션(배열 표기법)이라 칭하겠다. * TanStack/Query Github (https://github.com/TanStack/query)) 제너릭 노테이션 Array VS 배열 노테이션 string[] 두 노테이션 함수적 차이 ..

Day1 2023-07-10 기본 타입 외우기 - boolean, number, string, array, tuple, enum, any, void, null playground에서 실습하기let color: string = "blue"; let age: number = 12; let list: number[] = [1,2,3]; let list: Array = [1,2,3];let 변수명 : 타입 = 값; let 변수명 : 타입[] = [값]; 아니면 let 변수명 : 객체명 = [값]; self check 튜플로 선언하기 튜플은 언제 쓰는지 배열을 선언하기, 2가지 방법 집합에 사용하는 자료형 enum 선언하기 void의 사용 number로 선언된 변수에 null이 할당될 수 있다. (O/X) num..

6개월의 인턴이 끝났을 때 꼭 당근마켓이 아니더라도, 만족할 만한 회사에 다닐 수 있게 되길 개발자로서 6개월의 경력을 오롯이 인정받을 수 있는 실력을 갖추기 내가 성장한 내용을 기록으로 확인할 수 있길 어떤 개발자로서 포지셔닝하기 위해, 나의 어떤 점이 강점이 될 수 있는지 이해할 수 있길 지속적으로 네트워킹 할 수 있는 인연을 만들었길 개발자라는 소개를 어색해하지 않게 되길 충분한 기여를 했다고 느끼길 실무에서의 의사소통, 협업 방식 배우기 공백 최소화하기 남기고자 하는 기록의 종류 분기별 목표와 달성 여부 초기 목표 - 온보딩 후기, 개발 목표, 팀의 업무 프로세스, 프로젝트 구조 중기 목표 - 적응 후기, 회사 소개, KPT, 성장 전략 중간점검 말기 목표 - 채용 준비, 알고리즘 준비 분기별 회..

작성일 2023. 5. 23 범위 Clean Code 도서, Chaper 10. 클래스 참고 자료 : groom의 CLEAN CODE JAVASCRIPT ES6의 클래스가 ES5의 함수보다 낫다? CASE 1: 상속이 필요하다 ⇒ 클래스 사용 CASE 2: 크고 복잡한 객체가 필요하다 ⇒ 클래스 사용 CASE 3: 그 외 ⇒ 함수 사용 즉, 때에 따라 쓴다. 상속 안 하고 크지 않은 객체라면 함수를 사용한다. 메소드 체이닝 사용하기 ex. 클래스 내부에서 메소드 체이닝을 구현하기 위해 return this 를 덧붙이면 된다. 메서드 체이닝을 사용하면 객체를 반복해서 작성하지 않고, 코드가 매우 깔끔해진다! 체이닝 X 예 class Car { constructor() { this.make = 'Honda'..

웹 코드에디터 code jar TypeScript 조건 처리 도와주는 ts-pattern 라이브러리 TypeScript 에러 더 보기 편하게 도와주는 pretty-ts-errors VScode 플러그인

작성일 2023. 자료 제목 2023-06 소식 본 머리글 'Naver-FE-News'는 Naver FE 엔지니어들이 큐레이션해 발행하는 뉴스레터에 대한 개인적인 기록입니다. 인상 깊은 아티클 CSS Optimization을 위한 속성 조정 blur 범위 줄이기, blur effect를 위한 렌더 줄일 수 있음 대신에 새로운 layer 만들어서 GPU 가속을 높이는 transform: translateZ(0)를 덧붙이면 됨 border-radius,, 속도 성능에 영향을 많이 준다.. 픽셀 작게 할 수록 좋다.. (요새 많이 썼는데..!), 아니면 이미지로 대신 써라 그 외 성능에 영향을 주는 속성들 background image(lazy loading 적용 추천) box-shadow (blur값 작게,..

문제 canvas-confetti 패키지 사용하고 싶었다! 폭죽 효과 타입 추론이 안 되는 패키지의 함수는 바로 사용할 수 없음, 추론할 수 없다는 에러 발생 해결 yarn이나 npm 에 @types/{패키지나 라이브러리명} 추가해주기 yarn add -D @types/canvas-confetti yarn add --dev @types/canvas-confetti npm install -D @types/{패키지명} npm install --save-dev @types/{패키지명} (-D 옵션은 개발 빌드할 때만 쓰는 패키지를 설치할 때 쓴다,,~ 옵션 위치도 맨 뒤거나 명령어 다음이거나 상관없는듯, 맨 뒤에 써야겠다 다음엔) 또는 root 디렉토리 (App.js, App.tsx 가 위치한..)에 {패키지..

작성일 2023. 3. 12 범위 Clean Code 도서, Chaper 9. 단위테스트 참고 자료 : groom의 CLEAN CODE JAVASCRIPT clean-code-typescript 🚿 타입스크립트를 위한 클린코드 - 한글 번역판 TDD의 세 가지 법칙 실패하는 단위 테스트를 작성하기 전에는 실제 코드를 작성하지 말라, (단위 테스트가 실패할 때 까지, 즉, 테스트를 극한까지 짜보고 실제로 들어가라) 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성하라 실패하는 단위테스트를 통과할 정도로만 실제 코드로 작성하라 깨끗한 테스트 코드 테스트 코드에서 가장 중요한 것은 가독성 F I R S T : 명료한 테스트를 위한 규칙 Fast 테스트는 빈번하게 실행되므로 빨라야 합니다...

HTML 왜 해? 처음 HTML을 접한 건 경영학부 수업인 MIS 경영정보시스템이었다. 다짜고짜 HTML문법 알려주고 브라우저에 띄우라는데, 머리 속에 물음표만 가득했다. PowerPoint로 10초면 그릴 수 있는 걸 굳이 타이핑을 친다? 신기하긴 한데 내 컴퓨터에서 밖에 안 보인다고? 이렇게 하찮아 보이기만 했던 HTML이 어떤 역사를 거쳐 지금처럼 발전해왔는지, 웹 프로그래밍에 있어 얼마나 중요한 기반이 되는 지 꿈에도 몰랐다. 개발자로서 처음 화면을 구성할 때, 화면에 대시보드 JavaScript....를 검색해서 나오는 여러 코드들을 망라해서 읽었다. 도무지 패턴을 알 수 없었고, 자동완성 되게 할 거면 meta랑 head는 왜 쓰는 것이며.. 같은 의문이 있었다. Frontend 프로젝트를 두..