분류 전체보기

[React] Webpack으로 React 시작하기 2 - react, typescript, eslint, prettier

2022.12.29 - [react] - [React] Webpack으로 React 시작하기 1 - webpack, babel-loader [React] Webpack으로 React 시작하기 1 - webpack, babel-loader Webpack Webpack은 모던 자바스크립트 어플리케이션을 위한 모듈 번들러이다. Webpack은 프론트엔드 개발 환경에서 주로 사용하고 있는 모듈 번들러이다. HTML, CSS, Javascript, 이미지 등을 모두 하나의 파 min-kyung.tistory.com 길고 험난한 웹팩 설정의 길.. react 설치 npm i react react-dom 이제 대략적인 웹팩 설정을 마치고 리액트를 설치한다. typescript 설치 및 설정 파일 npm i -D ty..

[React] Webpack으로 React 시작하기 1 - webpack, babel-loader

Webpack Webpack은 모던 자바스크립트 어플리케이션을 위한 모듈 번들러이다. Webpack은 프론트엔드 개발 환경에서 주로 사용하고 있는 모듈 번들러이다. HTML, CSS, Javascript, 이미지 등을 모두 하나의 파일로 번들링한다. 의존 모듈이 하나의 파일로 번들링된다. React와 Webpack 프로젝트를 시작하면서 Webpack 번들러를 사용해서 리액트 개발 빌드 환경을 직접 구성하기로 하였다. 그냥 CRA를 쓰면 안되나? 웹팩 설정은 사실 귀찮고 boilerplate라고 작성해주어야하는 부분이 많아서 이를 간단하게 설정하고 싶은 경우에는 Create React App인 CRA를 사용할 수 있다. 리액트 공식문서에도 최소한의 툴체인으로 시작하는 방법으로 CRA를 소개하고 있다..ㅎ ..

[Javascript][Node.js] Github actions를 이용해서 README 자동 업데이트하기

프로그래머스 코딩 테스트 문제를 풀고 깃허브 레포지토리에 풀이를 올리는 스터디를 진행하고 있었다. 스터디는 아래와 같이 진행된다. 1. 문제를 풀고 통과한다. 2. 통과된 풀이를 [레벨/문제명.js] 파일 형식으로 푸시한다. 3. README에 풀이 링크를 추가한다. 매일 하루에 한 문제 이상을 푸는 것을 목표로 했고 위와 같은 행동이 반복되던 찰나 .. 어쩐지 엄청난 귀찮다🤔 2번만 수행하면 3번 과정이 자동으로 수행될 수 없을까? README를 작성하는 방식은 아래와 같다 README 작성하기 무작정 풀이 파일을 올리게 되면 문제 개수가 많기 때문에 나중에 다시 찾아보기가 어렵다. README에 테이블로 정리해놓으면 어느 문제인지 + 어떻게 풀이했는지를 쉽게 확인할 수 있다. - 번호 - 문제 개수를..

제로베이스 커넥to프론트엔드 후기

안녕하세요 7월 27일입니다. 제로베이스 커넥to프론트엔드 과정에 참여한지 벌써 3주차째입니다 3년 같은 시간이었습니다 저는 아직 대학교 재학중인데 방학 때 열심히 살아보자 + 주변 친구들이 다 칼취업함 (애들아 같이 가;) 을 이유로 해당 과정에 참여하게 되었습니다 커넥to 준비 후기는 블로그에 작성해뇠으니 필요하신 분들은 참고하시면 되겠습니다 2022.07.11 - [분류 전체보기] - 제로베이스 커넥to 최종합격 후기 - 지원 / 서류 / 자기소개서 / 면접 제로베이스 커넥to 최종합격 후기 - 지원 / 서류 / 자기소개서 / 면접 커넥to를 지원하면서 어떻게 준비해야할지 막막해서 검색했을 때 정말 자료가 없었어요 .. 블로그글 딱 2개정도 봤던거같아요 다음 기수에 지원하는 분들께 도움이 되고자 글..

[CSS] Negative margin (음수 마진)

Negative Margin (음수 마진) 1. static인 경우 1. top, left에 음수 마진을 적용한 경우 See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen. top 또는 left 방향으로 해당 요소가 이동한다 첫번째 요소에 margin-top: -50px를 하면 두번째, 세번째 요소도 함께 top 방향으로 50px만큼 이동한다 2. right, bottom에 음수 마진을 적용한 경우 See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen. 다음 요소를 right 또는 bottom만큼 이동시킨다. 즉, 해당 요소와 다음 요소가 겹치게 된다 첫번째(top에 음수마진)과는 달리 ..

display, position, float 속성 간의 관계

Normal flow (일반적인 흐름으로 배치되는 경우) Normal flow란 순차적으로 박스가 배치가 되는 경우다 Normal flow에서 박스들은 formatting context를 따릅니다. CSS 2.2 에서는 table, block, inline이 해당된다 블록 레벨의 박스는 block formatting에 속하고 인라인 레벨의 박스는 inline formatting에 속하고 table formatting은 https://www.w3.org/TR/CSS22/tables.html 여기에 작성되어 있다 Block formatting context float, position이 absolute인 요소, 블록 박스는 아니지만 inline-block, table-cell, table-caption과 같..