전체 글 (137) 썸네일형 리스트형 [바닐라 자바스크립트로 SPA 만들기] 3. 라우팅 사실상 SPA 구현의 핵심이라 할 수 있는 라우팅을 추가해 보자. 라우팅 구현하기 라우팅을 위한 주요 기능은 "프레임워크 없는 프론트엔드 개발" 도서의 라우팅 부분을 참고했으며, 전반적인 틀은 앞서 구현한 컴포넌트 기반 폴더 구조에 맞추었다. 폴더 구조 페이지 간 이동을 위해 파일을 추가했다. - HomePage.js: 초기 접근 페이지 - index.js: pages 컴포넌트의 export 모음 src/pages/HomePage.js 초기 접근 시 렌더링 되는 페이지로, 기존 App 컴포넌트의 역할을 대신하는 페이지 컴포넌트이다. 일단은 페이지 구분 용도이기 때문에 별 내용은 없다. import Component from '../core/Component.js'; export default class .. [바닐라 자바스크립트로 SPA 만들기] 2. 비동기 처리 지난 글에서는 카운터 컴포넌트를 통해 기본적인 SPA의 구조를 잡았다. 이번에는 조금 더 나아가서, API 통신을 위한 비동기 처리 컴포넌트를 만들어 보자. 비동기 컴포넌트 만들기 이 부분의 구조는 "프레임워크 없는 프론트엔드 개발" 도서의 HTTP요청 부분을 참고했으며, 더미 API를 통해 패치 컴포넌트를 만들어 볼 것이다. 폴더 구조 새롭게 추가된 부분은 다음과 같다. - api/http.js: HTTP 통신 메서드 모음 - components/List.js: API 결과를 출력할 리스트 컴포넌트 - pages/FetchPage.js: API 패치를 위한 페이지 컴포넌트 src/api/http.js Fetch API를 기반으로 HTTP 통신 메서드를 추상화한 파일이다. (참고 링크) 최대한 외부 라.. [바닐라 자바스크립트로 SPA 만들기] 1. 컴포넌트 만들기 개요 프레임워크 없이 바닐라 자바스크립트로 웹 애플리케이션을 만들 수 있는가? 뭐 만들 수야 있지만 굳이..?라는 생각을 가지며 지내온 시간이 꽤 흘렀다. 그리고 사실 웹 개발 입문 당시 DOM 하나하나를 조작하며 노가다스럽게 만들어본 경험만 있을 뿐, 효율적으로 바닐라 자바스크립트를 활용하는 방법은 몰랐기 때문에 뭐부터 시작해야 할지 잘 몰랐다. 하지만 취업을 준비하면서 바닐라 자바스크립트만을 활용한 과제를 해결해야 하는 순간이 있었기에, 바닐라 자바스크립트를 리액트스럽게 활용하는 방법을 알긴 알아야겠다는 생각이 들었다. 게다가 최근 "프레임워크 없는 프론트엔드 개발"이라는 책을 읽게 되면서 실습 겸, 간단하게 바닐라 자바스크립트로 SPA를 만들어 보았다. 컴포넌트 만들기 SPA의 구조를 잡기 위한 가.. [JS로 코테 준비하기] 17. 숫자 변환하기 https://school.programmers.co.kr/learn/courses/30/lessons/154538 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음 봤을 때는 간단해 보였는데, 시간 초과를 해결하는 데 꽤 많은 시간이 걸렸다. 다양한 풀이가 가능해서 기록해 두려고 한다! 1. 재귀 (시간 초과) 가장 먼저 떠올렸던 풀이로, 문제를 그대로 코드로 옮겼다고 볼 수 있다. x에서 y를 만드는 모든 과정을 처리하고, x를 y로 변환하는 순간 result값을 업데이트한다. function solution(x, y, n) { let result .. [JavaScript] 코어 자바스크립트 7장 - 클래스 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니www.yes24.com 💡 자바스크립트의 클래스를 이해하기 위해서는 프로토타입의 이해가 우선되어야 한다. 자바스크립트에서의 클래스자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않는다.그저 프로토타입을 클래스의 관점에서 접근해 상속 흉내를 것이다.프로토타입 체이닝에 의한 참조를 상속으로 이해하는 것이다. 예시를 통해 자세히 알아보자. 아래 Array와 arr를 클래.. [JavaScript] 코어 자바스크립트 6장 - 프로토타입 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡 프로토타입 기반 언어인 자바스크립트에서는 객체를 원형으로 삼고 이를 참조함으로써 상속과 비슷한 효과를 얻는다. 프로토타입 개념 이해하기 new 연산자로 Constructor를 호출하면 인스턴스가 만들어지는데, 이 인스턴스의 프로퍼티인 __proto__는 Constructor의 prototype을 참조한다. 생성자 함수의 prototype에 어떤 메서드가.. [JavaScript] 코어 자바스크립트 5장 - 클로저 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡A closure is the combination of a function and the lexical environment within which that function was declared. 클로저란? 클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. MDN에 따르면, 클로저란 함수와 그 함수가 선언될 당시의 lexical e.. [월간 회고] 2023년 5월 - 오락가락 📌 이번 달 회고 오락가락했던 5월. 지원서를 넣고 결과가 나오기 시작하면서 현실에 뚜까맞았다 🫠. 거의 주말마다 코딩테스트를 보고, 면접도 보고, 처음으로 탈락도 맛봤다. 어느 날은 자신감 폭발했다가도 어느 날은 세상 쭈글해지면서 감정에 조금은 휘둘리며 살았던 한 달이었다. 1. 취준 상황 남들에 비하면 그 수가 적지만, 작고 소중한 면접 경험이 생겼다. 아무리 인터넷에서 면접 후기를 뒤져보고 유튜브로 면접 대비를 해봤자 이게 잘 와닿지 않는다. 한 번이라도 실제를 경험하는 것이 내 현실을 가장 빠르게 파악할 수 있는 것 같다. 면접을 보면서 깨달은 점은 생각을 말로 뱉어내는 것이 생각보다 어렵다는 것이다. 특히 나는 말을 정말 못한다는 것을 깨달았다. 하고싶은 말은 많은데 정리가 안되니까 구구절절 T.. 이전 1 2 3 4 5 ··· 18 다음
