전체 글 (63) 썸네일형 리스트형 블로그 이전합니다. 안녕하세요. 지미입니다. 티스토리에서 그간 제가 경험했던 것, 공부하는 것을 공유하고 있었습니다. 하지만 개발 지식을 주로 공유하는 저에게 코드가 의도대로 발행되지 않는 것은 번거로운 추가 작업을 의미하였습니다. 특히, 들여쓰기는 어떨 때는 예상대로 나오고 어떨 때는 그게 아니라 일일이 들여쓰기를 맞춰주는 것은 스트레스였습니다. 그래서 블로그 플랫폼을 검색해본 결과, velog가 개발자 친화적 플랫폼이고 저에게도 가장 맞는 것으로 판단하여 velog로 이전하였습니다. 아래는 제 velog 주소입니다. https://velog.io/@dkdlel102 dkdlel102 (Jimmy) - velog 번들링과 웹팩 웹 개발 초기와 달리 현재의 웹 개발은 훨씬 복잡해지고 인터랙티브 해졌습니다. 그렇기 때문에 초.. 원티드 프리온보딩 8조 8번 과제: 컴포넌트 렌더링 개선 후기 8번 기업 과제에서 제가 담당한 컴포넌트는 목록의 아이템 컴포넌트입니다. 제가 만든 컴포넌트와 연동되는 컴포넌트들은 검색 창 컴포넌트와 모달 창 컴포넌트였습니다. 그중에서도 모달을 어떻게 재사용하면서 아이템에서 이벤트가 발생할 때 화면에 보여줄 지 고민하였고 개선 과정을 공유하려고 합니다. 저는 초기에 컴포넌트 구조를 다음과 같이 짰습니다. +-- index +-- search bar +-- itemgroup +-- item, modal 리스트 ... 하지만 이렇게 되니 props으로 받아온 data 리스트의 반복문을 돌면서 item과 함께 모달도 생성될 수 있었습니다. 조건부 렌더링으로 화면에 보여지지는 않지만 리스트 개수만큼의 조건을 dataList가 바뀔 때마다 거쳐야 한다는 것은 비효율적이라고 생.. 번들링과 웹팩 웹 개발 초기와 달리 현재의 웹 개발은 훨씬 복잡해지고 인터랙티브 해졌습니다. 그렇기 때문에 초기의 방식을 사용하게 되면 변수 이름의 충돌 가능성 많은 js 파일 다운로드로 인한 네트워크 부하 수동적인 반복 작업 (파일, 이미지 압축 등) 위와 같은 부작용이 발생하였습니다. 그래서, 번들링이 등장하였습니다. 번들링이란 여러 자원들을 하나로 묶는다는 뜻입니다. 이로 인한 장점은 다음과 같습니다. 코드의 모듈화 리소스 최적화 반복 작업의 자동화 그러면, 번들러의 대표 주자인 웹팩에 대해 알아보겠습니다. 웹팩은 모듈 단위의 코드 작성을 가능하게 합니다. 여기서 모듈이란, 어플리케이션을 구성하는 특정 기능에 기여하는 자원 전부를 일컫습니다. Javascript, css, image, icon, font 등이 모.. DOM의 개념과 조작 방법 DOM (Document Object Model)은 HTML 요소를 Object처럼 다룰 수 있는 Model입니다. 우리는 Javascript를 사용한다면 DOM으로 HTML을 조작할 수 있습니다. DOM을 조작할 수 있는 주요 메서드와 개념을 살펴보도록 하겠습니다. Node vs. Element Node는 DOM API 상에 존재하는 모든 것들입니다. Element는 Node의 부분 집합으로 div나 span 같은 특정한 태그가 포함된 요소를 뜻합니다. document.createElement(>) const newDiv = document.createElement('div'); 새로운 element를 만드는 메서드입니다. DOM에 새로운 element가 생성되었지만 붕 떠 있는 상태입니다. 즉, DO.. 프리온보딩 첫째날! 원티드 프리온보딩 프론트엔드 교육과정에 들어온 첫째 날이었습니다!! 오늘 배운 내용들이 기본이라는 것을 깨달으니 더욱 열심히 공부해야겠다는 생각이 듭니다. 오늘 배운 내용으로 페어로 모의 면접을 진행했는데 확실히 면접관의 입장에서 어떤 대답, 태도를 보여줘야 하는지 녹화본을 보니 와닿네요... 완주는 당연하고 매일매일 목표로 한 것은 반드시 끝마친다라는 다짐을 제 자신에게 하며 교육과정에 임하겠습니다!!!! 면접 예상질문: HTML, CSS, Javascript 기본 HTML - 일반적으로 CSS 태그를 head 사이에 위치시키고, script 태그를 body가 끝나기 직전에 위치시키는 이유? HTML과 CSS는 한 줄씩 읽고 실행합니다. head 태그에 css를 위치시키면 HTML과 CSS를 동시에 렌더링 할 수 있게 되어 전체적인 렌더링 속도가 빨라집니다. HTML이 한 줄 씩 읽고 실행하다가 script 태그를 만나면 js를 실행하게 되는데 이럴 경우 사용자에게 화면이 보이는 시간이 HTML 렌더링만 할 때보다 느려지기 때문에 HTML를 모두 파싱하고 js를 실행될 수 있도록 대부분의 경우 마지막에 위치시키는 것이 좋습니다. 만약, DOM에 접근할 일이 없고 가장 빠르게 실행하고 싶은 경우에는 head 태그 안에 위치시키는 것이 좋습니다. - 태그들의 차이점? .. JSX의 개념과 문법 import logo from "./logo.svg"; import "./App.css"; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 리액트를 이제 사용하기 시작하는 분들이라면 이런 코드가 낯설 수 있습니다. 이런 코드는 JSX라고 하며 자바스크립트 (이하 JS)의 확장 문법으로 XML과 매우 비슷한 모양을 하고 있습니다. 이 JSX는 끝까지 이 형태가 유지되는 것이 아니라 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환됩니다. (바벨은 코드를 변환하여 크로스 브라우징을 가능하게 해주는 트랜스 파일러) 자, 그러면 JSX.. React란 한때, 자바스크립트 (이하 JS)는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 수행하고 있습니다. 나아가 브라우저뿐만 아니라 모바일, 데스크톱 어플리케이션에서도 널리 쓰이고 있습니다. 우리가 보통 사용하는 웹 아키텍처는 흔히 들을 수 있는 MVC (Model View Controller), MVVM (Model View View Model), MVW (Model View Whatever) 패턴 등이 있습니다. 모델은 어플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 부분입니다. 컨트롤러는 사용자에게서 요청이 들어오면 모델 데이터를 조회하거나 수정하여 변경 사항을 뷰에 반영합니다... 이전 1 2 3 4 ··· 8 다음
