전체 글73 [프론트엔드스쿨] WIL 14주차 제로베이스 프론트엔트 스쿨 14주차 WIL Weekly I learned... 1. 좋은 코드란 무엇인가에 대해 고민하고, 클린 코드를 위한 방법들을 정리해보았다. 2022.11.01 - [JavaScript] - [스터디] 자바스크립트 코드 품질 이 주제는 개발자가 되기로 한 이상 평생 안고가야 하는 주제인것 같다. 아직은 익숙하지 않은것들이 너무 많아서 클린 코드까지 신경써야 한다는게 어려운거 같기도 했지만, 즐거운 고민이기도 한 것 같다. 좋은 코드를 찾아 떠나는 여정에 발을 들였으니, 잘 헤쳐나가볼수 있길! 아쉬운 점 / 추후계획 - 벌여놓은것들을 어떻게 잘 마무리 할지, 시간을 어떻게 사용해야 할지는 항상 고민이다. 어영부영하다가 리액트 강의 들을 시간이 너무 없어서 2배속으로 훑어라도 보자는 .. 2022. 11. 6. [스터디] 자바스크립트 코드 품질 좋은 코드란? 코드로 문제를 잘 해결하는 것도 중요하지만, 사람이 읽기 좋게 쓰는것도 중요하다. 함께 일하는 사람들은 물론 미래의 나를 위해서도 필요하다. 즉, 좋은 코드란 가독성이 좋은 코드이다. 좋은 코드, 클린 코드를 위한 여러가지 추천이 있지만, 사실 같이 일하는 사람들과의 규칙을 준수하는 것이 가장 중요하겠다. 이 글에서는 공부를 하는 입장에서 문서나 책에서 추천하는 방법들을 몇가지 정리해보도록 하겠다. (다른 자료를 참고하여, 예제를 복사하지 않았습니다. 상세한 조건들은 reference글들을 참고바랍니다.) 코드 품질 향상을 위한 방법들... 1. 적당한 간격 아래 그림과 같이 적당한 공백과 들여쓰기, 띄어쓰기가 필요하다. 가로 들여쓰기 : 스페이스 2개 혹은 4개를(혹은 탭) 사용하는 것이.. 2022. 11. 1. [프론트엔드스쿨] WIL 13주차 제로베이스 프론트엔트 스쿨 13주차 WIL Weekly I learned... 1. 과제에도 나왔던 프록시를 스터디를 하면서 다시 정리해보았다. 2022.10.25 - [JavaScript] - [스터디] JavaScript Proxy 2. 리액트의 state - 함수 컴포넌트 내부적으로 상태를 관리할 때 사용 - useState 라는 hook 함수를 import하여 사용한다. - 구문: const [state, useState] = useState( ) - useState( ) 는 컴포넌트의 re-rendering을 발생시킨다. - state를 부모로 끌어올려서 자식 컴포넌트들에서 내려받아 사용할 수도 있다. 아쉬운 점 / 추후계획 - 리액트 과제를 하기전 강의를 듣고 있는데 진도가 왜이렇게 느린지 모.. 2022. 10. 30. [스터디] JavaScript Proxy Proxy Proxy 의 사전적 정의는 대리인, 대용물이다. 자바스크립트에서의 Proxy도 대리인처럼, 특정 객체를 감싸 객체에 가해지는 작업을 중간에 가로채고 재정의 한다. 문법 let p = new Proxy(target, handler) Proxy: proxy객체 생성자 target : proxy할 원본 객체로 함수, 클래스, 다른 프록시 등 모든 객체 가능 handler : 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체, 여기서 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의한다. 즉, 여기서 proxy 설정을 한다. 트랩이 없는경우, target에 작업이 수행된다. 트랩이 있는 경우, 트랩이 실행되어 proxy가 작업을 처리한다. 사용하기 트랩의 역할 JS의 객체에 작업을 하면.. 2022. 10. 25. [프론트엔드스쿨] WIL 12주차 제로베이스 프론트엔트 스쿨 12주차 WIL Weekly I learned... 1. 스터디를 진행하면서 모듈 import/export 방법들을 정리했다. 2022.10.19 - [JavaScript] - [스터디] 자바스크립트 모듈 [스터디] 자바스크립트 모듈 모듈이란? 자바스크립트로 개발하는 애플리케이션이 커지면서, 파일을 분리하여 사용하게 되었고, 이 때 분리된 파일을 모듈이라고 한다. 즉, 클래스 하나/ 복수의 함수로 구성된 라이브러리 peach-milk.tistory.com 2. JS과제를 끝냈다. 그래서 간단한 회고를 작성해본다. (자세한 내용은 적을 수 없기에 내용을 제외한 회고이다.) 1) 좋았던 점 - 이를 통해 DOM조작 하는 것을 많이 배울 수 있었다. - 요구사항이라는 제한사항이 있.. 2022. 10. 23. [스터디] 자바스크립트 모듈 모듈이란? 자바스크립트로 개발하는 애플리케이션이 커지면서, 파일을 분리하여 사용하게 되었고, 이 때 분리된 파일을 모듈이라고 한다. 즉, 클래스 하나/ 복수의 함수로 구성된 라이브러리 하나로 구성된 파일이라고 보면 된다. 역사 이전에는 자바스크립트 자체적으로 모듈 시스템을 지원하지 않아서 아래의 모듈 시스템들이 사용되었었다. AMD CommonJS UMD 2015년, 모듈 시스템이 표준으로 등재되었고, 아래에서 모듈을 사용하는 방법을 소개하도록 하겠다. 모듈 내보내기 / 가져오기 모듈은 export / import 지시자를 통해서 내보내고 가져올수 있다. 그 방법은 개체가 여러개일때와 한개일때의 경우로 나눠서 소개하겠다. 1. 여러개의 함수가 있는 라이브러리 형태의 모듈 1.1 내보내기 1) 선언부 앞.. 2022. 10. 19. 자바스크립트의 에러 (에러객체 / try...catch) 자바스크립트에서 에러가 발생하면, 스크립트가 즉시 중단되고 콘솔에 에러가 출력된다. Error 객체 런타임 오류 발생시 JS는 에러 객체를 생성하고 이를 던진다. 에러 객체에는 에러에 대한 상세 내용이 담겨있다. 1. 생성자 Error( ) - new Error( ) - 매개변수로 message, fileName, lineNumber를 넣을수도 있다.(옵셔널) - 함수로 호출할 수도 있다. 2. 인스턴스 속성 name - 오류 타입 설명을 위한 이름 (초기값: Error) message - 오류 메시지, 사람이 읽을 수 있는 오류 설명 stack - 스택 추적을 위한 비표준 속성 - 디버깅 목적으로 주로 사용됨 3. 오류 타입 name 설명 SyntaxError 문법적으로 유효하지 않는 코드 해석시 발생.. 2022. 10. 11. [프론트엔드스쿨] WIL 10주차 제로베이스 프론트엔트 스쿨 10주차 WIL Weekly I learned... 자바스크립트 스터디를 진행하면서 강의를 들으며 빠르게 지나쳤던 개념들을 다시 살펴보았다. 1. Class - 클래스에 대해 공부하고 퀴즈형식으로 복습해보았다. 2022.10.03 - [JavaScript] - [스터디/퀴즈] Class 2. Custom event - 직접 만든 이벤트 - 생성자 let event = new Event(typeArg[, options]); - typeArg : 이벤트 이름을 나타냄, 문자열로 작성 - options : 하기 속성을 포함하는 객체 - detail : 이벤트의 세부 정보값, 기본값은 null, 처음 선언되면 변경할 수 없다. (읽기 전용 속성) - Event() : 생성자의 옵션에 .. 2022. 10. 9. [스터디/퀴즈] Class 학습 후 확인을 위해 문제를 만들어 보았다. 정답 및 해설은 더보기에 작성하였다. 1. 다음 코드에서 console에 출력되는 것은? class Student { constructor(name) { this.name = name; } test() { console.log(`${this.name}은/는 시험을 봅니다`); } } console.log(typeof Student); 정답 및 해설 ▼ 더보기 정답: function 클래스는 함수이다. 2. 위의 코드에서 새로운 Student 인스턴스를 생성하기 위해 아래의 코드를 작성하였으나, 에러가 발생하였다. 에러 없이 인스턴스를 생성되도록 하려면 어떻게 수정해야 할까? const Potter = Student('Potter'); 정답 및 해설 ▼ 더보기 .. 2022. 10. 3. 이전 1 ··· 3 4 5 6 7 8 9 다음
