Programming 36

[브라우저, HTML] JavaScript 파일 비동기 처리(defer, async)

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

[실무에서 필요했던 단단한 기초 시리즈] 분기처리에 사용하는 연산자 뽀개기 (feat. falsy, nullish, &&, ||, ??)

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

TypeScript 기본 문법

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

[TypeScript] 훈련하기!

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

[Clean Code] 10. 클래스

작성일 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'..

[TypeScript] 외부 패키지 사용시, dev dependency 해결하기

문제 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 가 위치한..)에 {패키지..

[Clean Code] 9. 단위테스트

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

HTML의 본질과 시맨틱 웹

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

[Clean Code] 6. 객체와 자료구조

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