남남이루의 고군분투 🌳

Intro 풀스택 인턴으로 근무하며 Web Frontend 개발을 처음 했을 때, 도대체가 JavaScript 파일에서 DOM을 조작하는 코드가 HTML의 스크립트 태그 선언 위치에 따라 언제는 페이지에 반영이 되고, 언제는 안 되는 오류를 겪은 적이 있다. 당시 (본인 제외 유일한 개발자였던) 백엔드 사수는 "스크립트 태그 위치 바꾸면 되던데요?"라고 해주셔서 해결은 했으나, 당시에는 그 이유를 명확히 밝히지 못했었다. 웹 사이트의 디자인을 맡는 것이 CSS, 구조를 맡는 것이 HTML이라면, 살아 숨쉬는 Action을 담당하는 것이 JavaScript라고 비유하곤 한다. 이 때 JavaScript가 서버와 데이터를 왔다리 갔다리 하기 위해서는 JS파일의 비동기 처리를 확실하게 이해해야 한다. "Jav..

| 실무에서 일하면서 느꼈던 헷갈리기 쉬운 기초를 모아보는 시리즈 포스팅 대상 독자 and 연산자, or 연산자를 사용할 때 결과를 별도로 찍어본다 조건에 따른 컴포넌트 분기 처리할 때 if문만 사용한다 도대체 falsy, nullish가 뭐야 요구사항 예시 Case 1 : 데이터가 있을 때는 데이터를 화면에 표시해주고 OR 데이터가 없을 때는 'no data'를 표시해줘요. Case 2 : 객체의 속성을 화면에 표시하고 싶은데 해당 속성이 없을 때 예외처리를 하지 않으면 에러가 나요. Intro 조건에 따라 다른 컴포넌트를 표시하는 일은 프론트에서 자주 겪는 문제입니다. 이 때 실무에서는 주로 && || 또는 삼항 연산자를 사용하는데요, 조건에 들어가는 데이터가 0인지, undefined인지에 따라 연..

타입스크립트의 기본 타입 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..

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..

작성일 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 플러그인

문제 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 프로젝트를 두..

작성일 2023. 3. 2 범위 Clean Code 도서, Chaper 6. 객체와 자료구조 참고 자료 : groom의 CLEAN CODE JAVASCRIPT clean-code-typescript 🚿 타입스크립트를 위한 클린코드 - 한글 번역판 [Clean Code] 6. 객체와 자료구조 👌 객체 : 동작을 공개하고, 자료를 숨김. 동작변경없이 새객체 타입 추가에 용이 다만 기존 객체에 새 동작 추가하기가 어려움 👌 자료구조 : 자료 노출 ⇒ 새 동작 추가하기 쉬움. 다만 기존 함수에 새 자료 추가하기 어려움 📍 새로운 자료 타입을 추가하는 유연성이 필요하면 객체가 더 적합 다른 경우로 새로운 동작을 추가하는 유연성이 필요하변 자료 구조와 절차적인 코드가 더 적합 자료추상화 이미지 변수 사이에 함수라는..