전체 글

✍️개요 가로배치는 웹사이트에서 가장 많이 쓰이는 요소 중에 하나 입니다. 위는 네이버 메인페이지에서 가져온 부분입니다. 위에서도 가로배치가 쓰이고 있고, 애플스토어에서도 위와 같이 가로배치 레이아웃이 쓰이는 것을 알 수 있습니다. 매우 흔한 레이아웃입니다. 오늘은 flexbox를 이용하여 가로배치 하는 법을 포스팅 하도록 하겠습니다. ✍️ 프로젝트 초기상태 및 flex 지금 위에있는 Block들을 가로배치 하고 싶습니다. 이때 가로배치하고 싶은 요소들의 부모에 해당하는 요소 다음과 같이 속성을 줍니다. .flex-parent{ display: flex; } 위와 같이 가로배치가 되기는 합니다만.. 크기가 컨텐츠의 크기만큼 줄어듭니다. 🖐 이제부터 나올 내용은 flex-items 즉, 위 코드에서 fle..

npm init react-app . 위와 같이 터미널에 입력한다. 여기서 ' . " 은 현재 디렉터리를 의미한다. create-react-app 을 설치할 거냐고 물어본다. y를 입력하면 된다. 이 과정을 끝내면 아래와 같이 여러 폴더 및 파일들이 자동으로 생긴다.

See the Pen white-space by Taejin Kim (@kimtaejin3) on CodePen. 위를 보면 white space가 없을 경우에는 텍스트의 길이가 부모의 너비보다 커지면 그대로 벗어나게 됩니다. 그러면 한 번 white space를 만들어 봅시다. See the Pen white-space2 by Taejin Kim (@kimtaejin3) on CodePen. 위와 같이 부모의 너비를 벗어나지 않으며 줄바꿈이 됩니다. 대체 왜 줄바꿈이 생기는 걸까요???? css의 white-space 속성을 알면 궁금증이 풀리게 됩니다. mdn으로 가보죠!! white-space 속성의 초기값이 normal 이라고 되어 있습니다. normal의 의미는 무엇일까요? 위를 통해 norma..

1. npm run build 실행!! 2. 아래와 같이 package.json 에 추가 위에서 dist 파일은 지정해준 build 폴더의 경로 3. github pages 설치 npm install gh-pages --save-dev 4. 다시 package.json 추가 "deploy": "gh-pages -d build" 나의 경우는 build를 dist로 바꾸었다. 5. npm run deploy 실행 npm run deploy 6. 위와 같이 gh-pages가 만들어졌으니 pages에서 gh-pages 브런치를 선택! 7. 호스팅 완료!! 8. reference https://velog.io/@heony/gh-pages gh-pages로 내 React 웹사이트 배포하기 GitHub 레포지토리의 ..

https://taejinkim-devlog.tistory.com/27 [Javascript project] 달력 To-Do-List 만들기 제가 자바스크립트로 처음 만들었던 프로젝트를 공유하고자 합니다. 잘 작성한 코드는 아니라 다른 사람이 보기에 힘들 수 있지만 구현해보고 싶으신 분들은 아래의 레포지토리를 참고하시면 taejinkim-devlog.tistory.com 한 거에 비해 많은 분들이 블로그를 찾아와 주신 게 감사하고 그 중 대부분은 위 포스팅을 통해서 였다. 하지만 이것에 대한 문제점이 있다. 1. 기존 코드의 문제점 시간이 지나고 보니 이 코드를 다시 파악하기까지 시간이 걸렸고 새로운 기능을 추가하기에도 쉽지많은 않았던게 변수를 전역적으로 선언하고 함수에서 그것을 쓰는 형태로 작업을 하다..

1. 리액트를 사용하고 싶은 프로젝트의 디렉터리에 들어간다. 2. 아래의 명령어를 통해 노드 프로젝트를 생성-초기화 하며 package.json을 만든다 npm init -y 3. JSX 컴파일을 위한 Babel을 설치한다. npm install --save-dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react babel-loader는 웹팩과 같이 사용하기 위해 다운해준다. 4. Webpack 설치 npm install --save-dev webpack webpack-cli webpack-dev-server 5. htmlWebpackPlugin 설치 npm install --save-dev html-webpack-plu..

운영체제는 자바스크립트를 단일 스레드에서 실행한다. 그러면 이것이 자바스크립트에 미칠 영향은

CRA ( create-react-app) 를 사용하고 있지 않다면 이 블로그 포스팅이 도움이 될 것이다. 1. React 17 이전 function Hello() { return Hello, world!; } 위 코드는 jsx 문법을 이용하고 있으며 이는 babel을 통해 js로 변환된다. function Hello() { return React.createElement('h1', null, 'Hello, world!'); } 위와같이 변환이 되는데 import React from 'react' 를 생략한다면 React를 읽을 수 없다는 에러메세지가 출력된다. 이를 해결하기 위해서 모든 js파일에 react를 import 를 해주어야 했다. 1. React 17 이후 리액트는 17버전 이후부터 아래와 ..