전체 글31 현대자동차 클론 현대자동차 클론 html과 css 연습을 위해 현대자동차의 실제 웹사이트를 클론코딩 해보았습니다. 최대한 똑같이 구현해보려 노력했으며, 사진엔 없는 로그인 페이지와 검색버튼 또한 만들었습니다. 플렉스와 그리드를 이용하였고, 완벽하진 않지만 반응형으로 만들었습니다. 이번 도전으로 css를 다루는 스킬이 늘은거 같아 기분이 좋습니다. 이미지 링크 현대자동차클론 2021. 6. 23. Linux 기본 명령어 Linux 기본 명령어 pwd: 현재 위치를 확인 mkdir: 새로운 폴더를 생성 ls: 폴더나 파일의 목록을 출력 nautilus (Ubuntu), open (macOS): 현재 폴더를 파일 탐색기로 연다 cd: 폴더에 진입 touch: 새로운 파일을 생성 cat: 파일의 내용을 터미널에 출력 rm: 폴더나 파일을 삭제 rm -rf : 옵션 r은 폴더를 지울 때 사용, 옵션 f는 질문을 받지 않고 지울 때 사용 mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경 cp: 폴더나 파일을 복사 do: 관리자 권한을 이해할 수 있다. ls -l : 폴더나 파일의 포맷을 전부 표현, 하나의 파일 또는 하나의 폴더는 한 줄에 출력 drwxr-xr-x 에서 d는 폴더, -은 파일, ls -a : 숨어있는 폴더나 .. 2021. 6. 23. 2021.06.23 2021.06.23 오늘은 처음으로 Linux 기반의 운영체제인 Ubuntu의 기본 사용법과 node.js에 대해 공부를 했다. node.js는 조금 익숙했지만 윈도우즈에 익숙했던 나는 ubuntu의 터미널 생소했고 약간 불편했다. 아직까지 윈도우로 개발 공부하면서 딱히 문제가 생겼던 적은 없었지만, 나중에 서버를 개발하다보면 윈도우에서 지원하지 않는 부분이 있다고 한다. 그러니 지금부터라도 ubuntu를 사용해서 익숙해져야 할 필요가 있을거 같다. 명령어들을 블로그에 정리해서 눈에 자주 익혀야 겠다. 2021. 6. 23. 2021.06.22 2021.06.22 어제 만들었던 계산기를 내 나름대로 다시한번 만들어 보았다. 원래는 숫자를 입력하고 연산자를 누르면 전에 입력했던 숫자가 사라져서 어떤 숫자들을 입력했는지 확인할 수 없었지만, 새로 만든 계산기는 엔터를 눌러야지만 계산이 된다. 사칙연산 순서에 맞춰서 *나 /가 있으면 가장 먼저 계산한다. 연산자를 두번 연속 입력(2++3)하는 것은 안되게 했고, 2+4- 이렇게 입력을 하면 자동으로 마지막에 있는 -는 빼고 계산을 한다. 계산 결과가 잘 나오는 것을 확인할 수 있다. 2021. 6. 22. 2021.06.21 2021.06.21 오늘은 계산기를 만들어 보았다. 코드스테이츠를 시작하기 전에 미리 독학을 조금 했기에 그렇게 어렵지는 않았지만, 생각할게 조금 있었다. 평소 pseudocode를 작성하지 않고 코딩하는 습관 때문에 시간이 좀 더 걸린 거 같다. 왜 pseudocode를 먼저 작성해보는지 조금 알 거 같다. querySelector를 이용해 DOM 요소를 조작하였고, CSS로 나름 이쁘게 꾸며보려고 노력하였다. 과제 제출하는 과정을 통해 현업에서 Github를 어떻게 이용하는지 조금이나마 배울 수 있었다. 2021. 6. 21. 3Witter 3Witter 여러 강의를 참고하여 데이터베이스를 이용해 만들어본 Twitter clone 설계없이 생각나는 대로 구현을 하느라 코드가 깔끔하지 못하고, 완성도가 부족하다. 또 데이터 베이스를 이용한게 처음이라 데이터를 어떻게 저장하여야 효율적인지 몰랐다. 설계의 중요성을 깨달았으니 다음번엔 이보다 좀 더 완성도 있게 만들어 봐야겠다. Setup axios dayjs firebase sweetalert2 @fortawesome Authentication, 이미지, 데이터 저장 firebase / Authentication, 데이터 저장 Cloudinary / 이미지 저장 사용 로그인화면 firebase로 로그인 기능을 만들었다. e-mail 기능은 미완성 메인화면 메인화면에선 모든 사용자의 트윗을 확인할.. 2021. 6. 19. Cloudinary 사용 시 발생하는 mixed content 해결 방법 Cloudinary에 이미지를 업로드 하면, 파일 데이터를 response로 받습니다. 이 데이터 안에 url이 두종류가 있는데, 하나는 http 또 다른 하나는 https 링크를 담고 있으므로 잘 확인해서 url이 아닌 secure_url을 이용하면 이 문제는 해결이 됩니다. 처음에 자꾸 콘솔에 경고가 떠서 문제가 뭔지 해결하느라 상당히 애먹었던 부분입니다 2021. 6. 18. 알면 좋은 자바스크립트 최신 문법 알면 좋은 자바스크립트 최신 문법 Shorthand property Object에서 속성과 값이 같을 때 생략이 가능하다 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer Optional Chaining Object?. 로 사용하며 객체 내 참조가 null일 경우 에러가 발생하는 대신 undefined으로 리턴을 한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining Spread Syntax iterable 문자열, 배열의 요소를 펼쳐주는 문법이다. 배열이나 객체를 복사할 수 있.. 2021. 6. 17. 정규표현식(RegExp) 정규표현식(RegExp) 정규식, Regular Expression 역할 문자 검색 문자 대체 문자 추출 테스트 사이트 https://regexr.com/ 정규식 생성 // 생성자 new RegExp("표현", "옵션"); new RegExp("[a-z]", "gi"); const regexp = new RegExp("the", "gi"); // 리터럴 /표현/플래그(옵션) /[a-z]/gi const regexp = /the/gi; 메소드 메소드 문법 설명 test 정규식.test(문자열) 일치 여부(Boolean) 반환 match 문자열.match(정규식) 일치하는 문자의 배열(Array) 반환 replace 문자열.replace(정규식, 대체문자) 일치하는 문자를 대체 const regexp = /.. 2021. 6. 16. Apollo GraphQL with Prisma GraphQL : 페이스북에서 만든 쿼리 언어로, API에 있는 데이터를 쉽고 정확하게 클라이언트에게 요청할 수 있는 기능을 제공한다. Setup npm install apollo-server graphql npm i prisma -D npm i @prisma-client -D Usage const {ApolloServer, gql} = require('apollo-server'); const typeDefs = gql\` // Schema definitions go here type Track { id: ID! title: String! } type Query { tracks : [Track] track(id: Int!) : Track } \`; const resolvers = { Query: { tr.. 2021. 6. 14. 이전 1 2 3 4 다음
