전체 글111 나.. 리액트 아예 처음인데 어떻게해? (create-react-app 맨땅에 헤딩 #2) 1. 들어가며(지난시간 복습) 안녕하세요 콥스랩 기술블로그입니다! 지난 포스팅에선 간단한 react 프로젝트를 만들어보기 위해 npx create-react-app이라는 명령어를 입력해보았습니다. 그랬더니요? 아래와 같이 여러 파일들이 저절로 다운로드가 됐었고 터미널 창에 아래와 같이 입력했더니?? npm start 이런 화면이 나왔었습니다. 우리는 public폴더부터 구경을하다가 index.html 파일을 알아봤어요. ‘일단 어떤 코드라도 써보자..’라는 생각이 들었죠? 그래서 index.html파일에 아래와 같이 입력해봤어요. index.html 넌 도대체 뭐니? 그랬더니요? 이렇게 바로 반영이 되었던 것을 볼 수 있었습니다. 그런데 분명 우리가 보고 있던 index.html파일엔 저 리액트 로고와 .. 2023. 7. 8. 나.. 리액트 아예 처음인데 어떻게해? (create-react-app 맨땅에 헤딩 #1) 1. 들어가며 안녕하세요 콥스랩 기술블로그입니다! 오늘은 React에 대해 알아보겠습니다. 어떤 방식으로 알아볼거냐면요, HTML, CSS, Java Script기초 지식만 있고 리액트가 아예 처음인 사람의 입장에서 독학한다는 마음가짐으로 알아볼 것입니다. 리액트가 처음이신 분, 무엇인지 아직 감이 잘 안 잡히시는 분, 남들이 “프론트엔드하려면 리액트는 해야지”라고 해서 일단 배워볼까 하시는 분 리액트를 공부하려고 하는데 어떤식으로 첫 발걸음을 내딛어야하는지 잘 모르시겠는 분 그런 분들은 본 글을 한 번 천천히 읽어보시면서 따라해보시면 좋을 것 같아요! 사진 삭제 사진 설명을 입력하세요. 2. 리액트 시작하기 지금부터 저는 리액트에 대해 아~~무 것도 모르는 사람이라고 가정합니다. 제가 알고 있는 지식은.. 2023. 6. 26. 원격저장소로 프로젝트 관리하기 : Github Desktop 안녕하세요 콥스랩 기술블로그입니다! 오늘 알아볼 내용은 github desktop이라는 프로그램을 이용하여 내가 진행중인 프로젝트 혹은 다른 사람들과 함께 작업하는 프로젝트를 관리하는 방법에 대해 알아보겠습니다. 1. 들어가며 이런 상상을 해볼까요 철수는 평소에 자신의 사무실에서만 회사일을 작업합니다. 그러다 철수가 할 일이 너무 많아져 이제는 집에서도 작업을 하게 생겼습니다. (불쌍한 철수..) 자, 철수는 어떻게하면 회사에서 하던 작업물을 집으로 가져올 수 있죠? 그리고, 철수는 어떻게하면 사무실에 가지 않고도 자신의 상사에게 작업물을 컨펌받을까요? 당장 떠오르는 생각 몇 가지가 있어요. 첫 째, USB에 작업물을 담아서 집에 가져온다 → 작업 후 이메일로 컨펌받는다. 둘 째, 작업물을 압축하여 내 .. 2023. 6. 21. 리그오브레전드(LOL) 게임정보 불러오기(Riot Apis) 안녕하세요 여러분 콥스랩 기술블로그입니다! 여러분들은 혹시 여가시간에 무얼 하며 보내시나요? 저같은 경우엔 보통 운동이나 게임, 혹은 친구들을 만나서 식사(를 빙자한음주)를 하며 시간을 보내는데요😆, 그 중 게임에 대한 이야기를 조금 해보려고합니다. 저는 최근에 리그오브레전드(이하 롤)라는 게임을 다시 시작했습니다. 아마 여러분들 중에 꽤 많은 분들이 이 게임을 하실테고, 하시지않더라도 게임 이름 자체를 안들어본 분들은 없을 거라고 예상합니다. 롤을 해보신 분들은 아시겠지만, 롤을 하다보면 가장 많이 이용하는 사이트가 하나 있죠? 바로 롤 전적 검색 사이트인데요. 내 전적을 검색한다든지 혹은 내 친구의 전적을 검색한다든지 아니면 내가 좋아하는 프로게이머의 전적을 검색할 때 자주 사용하죠. 그렇다면 이러한.. 2023. 6. 13. 영화제목 맞히기 게임 (javascript) 안녕하세요 콥스랩 기술 블로그입니다! 이번 시간엔 자바스크립트를 활용하여 영화제목을 맞히는 게임을 만들어보겠습니다. 오늘의 내용은 다음과 같습니다. 게임 구경해보기 게임 로직에 대해 알아보기 기능별 코드 알아보기 1. 게임 구경해보기 1-1) 시작 처음 시작화면입니다. 제한시간을 설정한 뒤, 게임시작 버튼을 누르면 게임이 시작됩니다. 사진 삭제 사진 설명을 입력하세요. 1-2) 인플레이 사진 삭제 사진 설명을 입력하세요. 1-3) 정답을 맞혔을 때 정답개수가 1증가하고, 남은개수는 1 감소합니다. 다음 영화를 화면에 보여줍니다. 1-4) 제한시간이 모두 지나갔을 때 사진 삭제 사진 설명을 입력하세요. 남은시간이 0초가 되면 “시간초과” 메시지와 함께, 내가 맞히지 못한 영화의 제목이 **출력(alert).. 2023. 6. 11. Flex & Grid 안녕하세요 콥스랩 기술 블로그입니다! 오늘은 웹페이지의 레이아웃을 조정할 수 있는 CSS 기능인 Flex와 Grid에 대해 이야기해보겠습니다. 그리하여 오늘 함께 알아볼 내용으로는 아래와 같습니다. Flex와 Grid가 어떤 기능인지 알아본다. Flex와 Grid의 대표 속성들을 알아본다. Flex와 Grid를 실제로 프로필카드에 적용해본다. 왜 사용할까? 우선, 본격적으로 Flex와 Grid에 대해 알아보기 전, 우리는 이 기능을 왜 사용하는지를 알아봐야겠죠? 다음의 사진처럼 프로필카드를 만들었다고 가정해보겠습니다. 사진 삭제 사진 설명을 입력하세요. 사진 삭제 사진 설명을 입력하세요. 하나의 프로필 카드를 이루는 html 코드는 아래와 같습니다. 최민식님의 프로필카드 예시입니다. 최민식 1962년생 .. 2023. 5. 22. 이전 1 2 3 4 ··· 19 다음
