프론트엔드 썸네일형 리스트형 [React] 프로젝트를 위한 React 세팅 - ES7 https://youtu.be/zATkDm0e_CM?si=HkNhOlTJozjISY0c 본 포스팅은 John Ahn님의 유튜브 강의를 참고했습니다. 오늘은 프로젝트 만들기에 앞서 클라이언트 폴더와 파일 구조를 만들어서 세팅하는 시간을 가져보도록 하겠습니다. 만드는 과정은 일반적이니까 생략하고 구조를 설명하겠습니다. 저번 시간까지 만든 서버 파일들은 서버 폴더에 넣었고 클라이언트 폴더를 새로 만들어서 기존에 있던 소스 파일들과 components폴더와 views 폴더를 만들었습니다. components 폴더에는 components코드들이 작성된 파일들이 들어가 있고, views 폴더에는 프로젝트에서 만들 페이지들이 들어가 있습니다. hoc 폴더는 Node.js의 Auth와 같은 역할로 페이지를 이동할 때 .. 더보기 [React] 투두리스트 웹 만들기3 에러가 난 원인이 components에 있는 TodoContext함수를 인식을 못해서 였는데 폴더 이름과 함수 이름을 바꿔 보아도 해결되지 않아서 TodoContext함수만 따로 빼주었습니다. + 버튼을 누르면 45도 회전시켜서 X버튼으로 보이게 하고 할일을 입력할 수 있는 인풋 창이 생성됩니다. 여기서 처음 알게 된 것은 box-sizing: border-box; 라는 css 속성인데 border-box로 설정하면 요소의 width 값은 '콘텐츠 크기 + 좌우 padding 값 + 좌우 border 값'으로 계산되는 것입니다. width: 100%; 즉 width값이 100%이기 때문에 요소의 크기와 width 값이 동일하게 적용됩니다. 이제 UI 부분은 모두 구현된 것 같고 기능을 구현해 보도록 하겠.. 더보기 [Next.js] 개발환경 셋팅 요새는 React 보다는 Next.js를 쓰는 것이 인기라고 하네요. 저도 트렌드를 따라서 Next.js 공부를 해보려고 합니다. Next.js는 React문법을 기본으로 사용하기 때문에 공부하기 수월할 것 같습니다! 먼저 개발환경 셋팅을 해보겠습니다. Node.js 18버전 이상이 필요하다고 하네요. 왼쪽 버튼을 눌러 다운받아 줍니다. 에디터는 VScode를 그대로 사용하면 될 것 같습니다. 코드를 짤 폴더도 만들어 주겠습니다. 그리고 이것을 VScode에서 열어주면 되겠네요. 폴더를 연 다음 터미널을 열어서 npx create-next-app@latest --experimental-app 명령어를 입력해줍니다. 그러면 이렇게 에러가 발생합니다. 하하,, 구글링을 해 볼 차례입니다. 생각보다 쉽게 해결.. 더보기 [React] 배경이미지 삽입과 폰트 디자인 저번 시간에 이어서 웹페이지를 꾸며보겠습니다. 웹페이지가 너무 휑해 보이지 않나요? 오늘은 배경이미지를 넣어보겠습니다. 먼저 app.css 파일로 넘어가 줍니다. 이미지를 넣기 위해선 다운받은 이미지를 드래그 혹은 직접 소스 폴더에 넣어 주셔야 합니다. 그다음 app.css에서 body 태그를 하나 만들어줍니다. body { background-image: url(./hearts-1215842_960_720.jpg); } 그리고 background-image: urp(이미지 경로); 이렇게 코드 넣어주시면 됩니다. 적용 되었는지 한 번 확인해 볼까요? 이제 좀 그럴듯 해 보이네요 하지만 여기서 문제점이 조금 있습니다. 웹페이지 사진이 사이즈가 맞지 않아서 2장이 반복되서 보입니다. 배경이미지 전용 css.. 더보기 [React]를 사용하는 토이프로젝트 시작! 방학동안 열심히 놀았네요. 늦었지만 지금이라도 작은 토이프로젝트를 시작해보려고 합니다. 저는 과자를 꾸준히 사먹는 편입니다. 하지만 먹고싶은 것을 가득 쌓아놓고 막상 먹으려 하면 결정장애가 오곤합니다. 그래서 이번 프로젝트로 만드려는 것은 카테고리 별로 과자를 나눠서 임의로 먹을 과자를 선택해주는 프로그램입니다. 그럼 시작해볼까요! 개발은 VSC(Visual Studio Code)를 사용하는 React 웹앱을 만드려고 합니다. 먼저 프로젝트 파일들을 집어넣을 폴더를 만들어 줍니다. 초기 설정하는 법은 폴더를 만들고 Shift + 우클릭 후 파워쉘을 연다음 npx create-react-app 폴더이름 이렇게 코드치시면 됩니다. 그리고 터미널에 npm start를 치고 잘 구동되는지 확인합니다. 저는 기존.. 더보기 [Figma] 입문자들을 위한 사용법 현재 재학중인 대학교에서 우연치 않게 팀 프로젝트를 마주하게 되었습니다. 소프트웨어 공학이라는 전공인데 팀별로 투두리스트 앱을 만드는 것이 과제로 주어졌습니다. 저희 팀은 아이폰 개발을 하시던 분이 있었기 때문에 아이폰 앱을 만드는 반향으로 진행하였습니다. #벡엔드 Frame work: springboot 2.7.1 DB : MySql Was : AWS (EC2, RDS) Design : Figma ▲ 유즈케이스 다이어그램 백엔드 2분 디자인 2분 프론트엔드 1분으로 역할 분담을 하였고 저는 Figma를 이용한 디자인이 처음이었지만 맡게 되었습니다. Figma는 아이폰 앱을 디자인을 할 수 있는 개발 도구로 코딩할 필요가 없는 것이 장점이며 개발 툴의 가시성이 좋기 때문에 입문자도 쉽게 이해하고 개발할 .. 더보기 이전 1 다음
