재혁의 기술블로그 재혁의 기술블로그

대규모 웹 애플리케이션 개발의 기초안녕하세요, 프론트엔드 개발자로 일하고 있는 임재혁입니다.자바스크립트의 모듈화와 번들러에 대해서 알아보겠습니다.목차대규모 애플리케이션, 모듈화의 필요성전역 스코프 오염 문제를 극복하기 위한 방법마치며참고1. 대규모 애플리케이션, 모듈화의 필요성모듈이란?모듈은 재사용 가능한 코드 단위로, 보통 파일 단위로 구성되며, 클래스나 함수들을 캡슐화합니다.ES6 이후 자바스크립트는 export와 import 키워드를 통해 모듈 간 의존성을 명시적으로 관리할 수 있게 되었습니다.// module.jsexport const hello = () => console.log('Hello!');// app.jsimport { hello } from './module.js';hello(); /..

변수 1. 변수란 무엇인가? 왜 필요한가? 메모리 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 각 셀은 고유의 메모리 주소를 갖는다. 메모리 공간에 직접 접근하는 것은 위험하므로 변수를 사용한다. 변수 값의 위치(값이 저장된 메모리 공간)를 가리키는 상징적인 이름 변수는 어디에 저장이 될까? 변수 이름을 비롯한 모든 식별자는 실행컨텍스트에 등록이 된다. 실행컨텍스트는 자바스크립트 엔진이 소소코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다. 변수 이름과 변수의 값은 실행컨텍스트 내에 key, value 형태의 객체로 등록되어 관리된다. 2. 식별자 어떤 값을 구별..

사고를 넓히기 위해서 기초적인것부터 심화까지 알고리즘 문제를 풀어보아야겠다 # 문제 - 345와 456이 입력값으로 들어올때 아래의 1,2,3,4를 구하시오. 345 x456 ------ 2070 --- 1 1725 --- 2 13870 --- 3 ------------ 157320 --- 4 # 풀이 function solution(x,y){ const strB = String(y) let b = Array.from(strB) //['4','5','6'] b_1 = b[2] //6 b_2 = b[1] //5 b_3 = b[0] //4 console.log(Number(x) * Number(b_1)) console.log(Number(x) * Number(b_2)) console.log(Number(x)..

시작하면서 .. 먼저 웹 개발에서 이벤트 처리는 사용자와 상호작용하고 웹 어플리케이션의 동작을 제어하는 핵심 요소 중 하나이다. HTML의 계층적 구조로 인해 이벤트가 발생한 요소에서부터 상위 요소로 연쇄적으로 이벤트가 전파가 되는데 여기에는 이벤트 캡쳐링과 버블링이라는 두 개념이 존재한다. 이벤트를 흐름을 제어하는 방법과 이벤트 캡쳐링 , 버블링에 대해서 알아보겠습니다. 아래에 하나의 예시코드가 있다. 위에 핸들러는 에 할당이 되어있지만 , 태그를 클릭해도 동작을한다. 왜 그럴까? HTML 요소의 계층적 구조와 연쇄적 이벤트 흐름 HTML 문서의 각 요소들은 태그 안의 태그가 위치하는 식으로 중첩된 형태로 구성되어 있다. 이러한 계층적 구조 특징 때문에 만일 HTML 요소에 이벤트가 발생할 경우 연쇄적..

# 프로젝트의 목적 - 네이버 shopping insight api를 통해 각 시간대 , 성별 , 장치에 따른 키워드별 정보를 연령을 기준으로 시각화 한 프로젝트. #중요하게 생각한 부분 - 반복적으로 사용하는 components들의 재사용 - 오랜만에 사용하는(?) redux-tookit - chart - hosting and deploy # 기술 스택 node , express ,aws lamda , aws-gateway react, typescript redux-toolkit styled-components, Antd rechart.ts # 폴더 구조 client ├── public ├── ├── ├── src ├── apis ├── componetns ├── containers ├── hooks ..

# 프로젝트를 하게 된 배경 반응형이나 다양한 UI/UX 요소들을 연습하기에 e-commerce가 좋다고 생각이 들었고 사이드 프로젝트를 진행하게 되었다. # 구현사항 - Home Main 화면으로 상품의 리스트가 렌더링 되고 필터링이 가능함 - Product detail modal 상품 리스트들의 요소들을 클릭하면 각 요소의 디테일한 정보와 수량이나 색상들을 선택 할 수 있는 모달 - Shopping list 장바구니로 모달에서 선택된 상품이 담기고 삭제가 가능함 # 폴더구조 및 간략 설명 ├── public ├── images ├── productData ├── banner.json ├── product.json ├── src ├── atoms (for recoil) ├── componetns ├──..

TypesScript에서 enum 사용을 지양하는 이유 enum이란? enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능. 임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있음. 타입스크립트도 다른 언어와 마찬가지로 enum타입을 제공함 //아무것도 지정하지 않은 경우 0부터 숫자를 매김 enum Days { Monday, //0 Tuesday, //1 Wedensday, //2 Thursday, //3 Friday, //4 Saturday, //5 Sunday, //6 } // 임의의 숫자나 문자열을 할당할 수도 있다 enum Days { Monday\='Monday' Tuesday\='Tuesday', Wedensday\=&#39..

프로젝트를 하게 된 배경 작년 이맘때 쯤 부트캠프를 마치고 취업준비를 하다가 가고 싶었던 회사가 생겼었다. 집 근처에 있기도 했고 투자도 많이 받은 회사였는데 감사하게도 서류를 통과 시켜 줬고 회사 페이지를 클론 코딩 하라는 과제를 받았다. (과제 제출 후 합격을 했지만 다른곳에 붙어서 다른곳을 가게 되었다) 회사를 다니고 7개월이 지난 시점에 전에 했던 과제를 새로 하면서 내가 어느정도 성장을 했는지 궁금하기도 했고 또 여전히 가고 싶던 회사여서 무례하다고 생각이 들 수 도 있지만 퇴근 후 틈을 내서 다시 클론 코딩을 진행 후 메일과 함께 과제를 제출했다. (열의에 감사하다는 답변과 함께 경력 미달로 인해 다음을 기약했다.. ) 프로젝트에 대한 간략한 설명은 아래 링크에 있으므로 README.md에 없..