프론트엔드

Project/PROlog

[PROlog] CRUD 게시판 만들기 프로젝트 시작

1. 백엔드를 전공하는 친구에게 연락이 왔다. 이번 겨울방학 동안 동아리에서 진행했던 프로젝트가 끝이 났다. https://www.behance.net/gallery/192520373/-MOCU 모두의 쿠폰, MOCU 모두의 쿠폰, MOCU 게시: 2024년 2월 27일 www.behance.net (저번 겨울방학 동안 개발한 프로젝트의 포트폴리오는 위 링크를 통해 참고할 수 있다.) 프로젝트가 끝나기 하루 전 날, 갑자기 친구한테 카톡이 왔다. 백엔드를 공부하고 있는 친구였다. 지금 하고 있는 프로젝트가 끝나면 같이 프로젝트를 할 생각이 없냐고. 프로젝트를 하면서 프론트엔드 실력을 더 기르고 싶었기에 바로 수락했다. 프로젝트가 끝나고 며칠 뒤, 우리는 프로젝트에 대한 회의를 했다. 만들고자 하는 프로젝..

Frontend

[프론트엔드] 내가 보려고 쓰는 ESlint, Prettier 세팅

ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구 Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구 ESLint 설치 ‘npm install -D eslint 명령어 입력 -D를 입력하는 이유는 devDependencies에 설치하기 위함 → 실제 프로덕션에는 필요없기 때문 ‘npx eslint —init’ 명령어 입력 각 프로젝트마다 eslint 설정 ctrl+shift+p 입력해서 settings.json(User settings)에 들어가서 밑의 코드 입력 "editor.fontFamily": "D2Coding ligature", "editor.line..

Frontend/React

[React] createElement, ReactDOM, JSX에 대해서

createElement React에서는 createElement 함수를 통해 React 요소를 생성할 수 있다. 하지만 실제로 createElement를 쓰는 경우는 많지 않기에, 이해만 하고 넘어가자. createElement를 쓸 때 첫 번째 argument는 root에 들어갈 HTML 태그이며, 두 번째 argument는 props가 포함된 object, 세 번째 argument는 content이다. ※ chatGPT의 createElement에 대한 설명도 첨부한다. React.createElement(type, [props], [...children]) type: React 요소의 타입을 나타냅니다. 예를 들어, HTML 요소라면 문자열로 "div", "span" 등을 사용하며, 사용자 정의 ..

Frontend/React

[React] React를 활용하여 시간/분 , 킬로미터/마일 변환기 만들기

밑 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의 중 일부 내용을 포함하고 있습니다. React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다. (밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 이 강의을 듣다보면 Super Converter를 만들게 되는데, Super Converter는 React의 State를 활용해서 시간/분 , 킬로미터/마일 중 변환하고 싶은 것을 골라 데이터를 입력하면 변환을 시켜주는 프로그램이다. 코드 실행..

Frontend/HTML, CSS

[CSS] 얄코의 CSS 강의를 듣고

보호되어 있는 글입니다.

퀵차분
'프론트엔드' 태그의 글 목록