번들링 번들링이란? 번들링은 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미합니다. 프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 입니다. 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받습니다. 이 파일을 브라우저가 실행하여 웹 애플리케이션을 사용자에게 제공합니다. 웹팩 webpack은 2022년 9월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다. Webpack이란 Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러입니다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하..

📍자료구조의 특징 대부분의 자료구조는 특정한 상황에 놓인 문제를 해결하는 데에 특화되어 있습니다. 따라서 많은 자료구조를 알아두면, 어떠한 상황이 닥쳤을 때 적합한 자료구조를 빠르고 정확하게 적용하여 문제를 해결할 수 있습니다. 특정 문제를 해결하는 데에 적합한 자료구조를 찾아 데이터를 정리하고 활용할 줄 알면, 상황에 가장 적합하고 정확한 코드를 작성하는데 도움을 줍니다. 📍자료구조의 분류 수많은 선배 개발자들은 무수한 상황에 데이터를 효율적으로 다룰 수 있는 여러 방법을 연구해 두었습니다. 무수한 상황의 예시 번호를 다 알지 않아도, 이름을 아는 것만으로 전화를 할 수 있는 방법은 무엇이 있을까? 웹 브라우저에서 뒤로 / 앞으로 가는 방법은 무엇이 있을까? 게임 매칭을 잡을 때, 수많은 사람을 통제하..

📍목표 설정 💡 목표: 핀테크 기업 목표로 내년 상반기에 취업하기 부트캠프에서 꼭 얻고 싶은 것 탄탄한 프런트엔드 기초 배운 건 읽고 끝내지 말고 바로 코드로 쳐서 활용해보기 면접에서 자주 나오는 중요한 키워드들은 말로 설명해보고 녹화 피드백(두괄식 요약→설명) 알고리즘 스터디 진도 맞춰서 문제 풀기 즐겁게 공부하는 습관 익히기 잘 안될 결과를 두려워하지 말고 눈앞에 있는 과정을 즐기면서 공부하자 남과 비교하지 말고, 내 회고를 보면서 과거의 나와 비교하자 꾸준히 공부하는 습관 → 주 6회 이상 잔디심기 도전! 매끄럽게 협업할 수 있는 커뮤니케이션 능력 이해한 개념을 1차로 블로그에 글로 작성하고 2차로 말로 설명해보는 연습 나의 다짐 정규 수업 시간 이후 3시간 이상 추가 학습하기 추가 학습 시간이 길..

📌웹 표준 웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있습니다. 2000년대 초에는 브라우저간 호환이 되지 않아서 화면이 아예 정상적으로 나오지 않는 일도 있었습니다. 이러한 상황을 막고 웹을 정상적으로 구동시키기 위해서는 개발자들이 각 브라우저마다 따로 개발을 해주어야만 했습니다. 이런 수고를 없애고 웹 개발의 형식을 통일 시킨 것이 바로 웹 표준입니다. 최신 웹 브라우저들은 모두 웹 표준을 지원합니다. 따라서 웹 표준에 따라 웹 페이지를 작성하면 사용자가 어떤 브라우저를 사용하든..

리덕스의 역사 MVC 아키텍처의 한계 리덕스는 flux 패턴이 적용된 상태 관리 라이브러리입니다. flux 패턴은 MVC 패턴의 한계를 극복하기 위해 만들어졌습니다. MVC 패턴의 구조는 이렇게 생겼습니다. Controller는 Model에 정의된 데이터를 조회하거나 업데이트하는 역할을 하며, 변경된 Model의 데이터를 View에 반영해 줍니다. 또한 사용자는 View를 통해 데이터를 입력하고 Model에 반영되며, View와 Model은 데이터를 양방향으로 주고받는 형태입니다. 이 패턴은 작은 규모에서는 관리가 가능했지만 규모가 커질수록 문제를 야기했습니다. 프로젝트가 커질수록 수많은 View와 Model들이 생겨나게 되었고 데이터가 어디로 흐르는지 파악하기 어려워졌습니다. 이러한 이유로 새 기능을 ..

컬럼 그리드 시스템 Margin 가로가 좁은 스마트폰 특성상 양쪽 여백이 10px로 좁게 들어갔습니다. 홈 탭의 마지막 카드 콘텐츠는 마진을 넘겨서 보여줌으로서 다음 콘텐츠에 대한 궁금증을 자극하여 가로로 스크롤을 유발하도록 했습니다. Column 스마트폰에 맞는 표준적인 컬럼 갯수인 4개를 사용해서 제작되었습니다. 컬럼에 맞게 버튼과 컨텐츠들이 대칭적으로 잘 정렬되어 있습니다. Gutter 버튼들 사이에 Gutter는 넓게 주어서 각 버튼을 구분하는 느낌을 주었습니다. 카드 컨텐츠 사이는 버튼보다 좁에 만들어서 각 주제별로 묶인 콘텐츠들이 독립적으로 보이지않게 했습니다. 전체적으로 스마트폰에 잘 맞는 배치를 가지고 각 아이템들이 잘 정돈되어 있다고 판단됩니다. 추가적으로 화면 크기에 변화에 유연하게 대..

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템. GUI(Graphical User Interface)와 물리적 UI를 모두 포함하지만 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다. UX(User Experience, 사용자 경험)는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UI와 UX의 관계 UX는 UI를 포함한다. 하지만 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. UX에 영향을 주는 이 많은 요소 중에 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI다. 좋은 프론트엔드 개발자라면 제품이나 서비스의 UI가 사용자로 하여금 가능하면 좋은 UX를 가질 수 있도록 해야한다. UI/UX 사용..

목표 설정 💡 목표: 핀테크 기업 목표로 내년 상반기에 취업하기 부트캠프에서 꼭 얻고 싶은 것 탄탄한 프런트엔드 기초 배운건 읽고 끝내지 말고 바로 코드로 쳐서 활용해보기 면접에서 자주 나오는 중요한 키워드들은 말로 설명해보고 녹화 피드백(두괄식 요약→설명) 백준 알고리즘 중급 강의 문제(골드 상위 티어)까지 풀기 → 알고리즘 스터디 진도 맞춰서 문제 풀기 즐겁게 공부하는 습관 익히기 잘 안될 결과를 두려워하지 말고 눈앞에 있는 과정을 즐기면서 공부하자 남과 비교하지 말고, 내 회고를 보면서 과거의 나와 비교하자 꾸준히 공부하는 습관 → 주 6회 이상 잔디심기 도전! 매끄럽게 협업할 수 있는 커뮤니케이션 능력 이해한 개념을 1차로 블로그에 글로 작성하고 2차로 말로 설명해보는 연습 나의 다짐 정규시간 후..

[SEB FE] Section 2 Daily Coding computeSquareRoot 💡 바빌로니아 법의 점화식을 사용해 Math.sqrt을 구현하기 문제 수를 입력받아 제곱근 값을 소수점 두 자리까지 리턴해야 합니다. 입력 인자 1 : num number 타입의 정수 (num >= 2) 출력 number 타입을 리턴해야 합니다. 최대 소수점 둘째 짜리까지 구합니다. (소수점 셋째 자리에서 반올림) 주의 사항 Math.sqrt 사용은 금지됩니다. 입출력 예시 let output = computeSquareRoot(9); console.log(output); // --> 3 output = computeSquareRoot(6); console.log(output); // --> 2.45 힌트 소수점 처..

컴포넌트 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점입니다. 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나갑니다. 즉, 상향식(bottom-up)으로 앱을 만듭니다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다. 그래서 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일입니다. Props 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 이는 데이터 흐름이 하향식(top-down)임을 의미합니다. 이 원칙은 매..