시작하며... 이번엔 HTML 태그 중에서 이미지와 표 태그에 대해 알아볼 것이다. HTML 이미지 태그 img 태그 웹 상에 이미지를 넣기 위해 태그를 사용한다. img 태그 속성 - src, alt, title, width, height 태그의 속성 중에 많은 속성이 있는데 그 중 자주 사용되고 중요한 속성은 다음과 같다. src 필수 속성이며, 이미지의 경로를 넣는다. alt 대체 텍스트, 이미지가 보이지 않을 경우 대체 텍스트를 보여준다. title 이미지를 가져다 댔을 때 보임, alt의 대체제나 중복이 되어서는 안 됨 width, height 각각 넓이와 높이, px(픽셀) 단위로 길이 조절 img 이미지 태그 결과를 보면 왼쪽처럼 이미지가 나타나고 사진에다가 마우스를 가져다 댔을 때 titl..

시작하며... 이번엔 HTML 태그 중에서 나열과 관련된 태그에 대해 알아볼 것이다. HTML 목록 태그 li 목록 태그 태그는 목록들의 요소를 표현한다. list 의 약자로 또는 태그 안에 위치해야 한다. - HTML: Hypertext Markup Language | MDN HTML 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록(), 비정렬 목록(, 혹은 메뉴( (en-US)) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정 developer.mozilla.org ul 비정렬 목록 태그 태그는 unordered list 의 약자로 순서가 필요 없는 요소들을 나열할 때 사용된다. ul, li 태그 사과 오렌지 포도 샤인머스캣 거봉 청포도 요소 안에 하위 목록을 ..

시작하며... 이번엔 HTML 태그 중에서 인용에 관련된 blockquote, cite, q, mark, abbr 태그에 대해 알아볼 것이다. HTML 속성 태그를 설명하기 전에 HTML 속성에 대해 알아볼 것이다. HTML 속성은 무엇일까? 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값 즉 태그의 동작을 설정하고 제어하는 것이다. 예를 들어 처음 게시물에서 언어를 한국어로 바꿨을 때, 태그 안에 lang="en" 값을 lang="ko" 로 바꿨다. 이때 태그 안에 값을 넣어 설정하는 것이라고 할 수 있다. 자세한 설명은 아래 링크에서 확인가능하다. HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN HTML의 요..

시작하며... 나는 React도 할 수 있고, 프로젝트 경험도 있지만 매번 사용하는 HTML 태그만 사용하고, 비슷한 태그의 차이점과 내가 자주 사용하지 않는 것들에 대해 까먹고 있거나 모르는 것이 많다고 생각해서 다시 HTML 기초부터 공부해보기로 하였다. HTML 실습 준비 비주얼 스튜디오 먼저 가장 기본적인 비주얼 스튜디오를 설치한다. 그리고 내가 만든 html 파일을 웹상에서 새로고침 없이 볼 수 있도록, Live Server 라는 플러그인을 설치한다. 파일 생성 폴더를 생성하고 index.html 파일을 생성한다. 그리고 ! 를 입력하면 자동으로 HTML 기본틀이 생성된다. 웹 상에 나타나는 내용은 태그 라는 곳에 넣으면 된다. 그리고 언어를 기존 영어인 en 에서 한국어인 ko 로 수정해준다..

☘️ 시작하며... 첫 번째 게시물로 자바스크립트 고차함수인 map에 대해 알아보았다. [자바스크립트/JavaScript] 고차 함수 map 사용 방법 #1 ☘️ 시작하며... 코딩 테스트 공부를 하려고 자료구조를 공부하고 있는데 문제를 풀다가 도중에 내가 자바스크립트 고차함수에 대해 잘 모르고 있다는 것을 알게 되어 글을 작성하면서 공부할 jjang-j.tistory.com 이번 게시물은 filter에 대해 알아볼 것이다. ☘️ Array.filter() filter는 무슨 역할을 할까? filter 배열을 for와 같이 돌면서, true에 해당하는 요소로 구성된 새로운 배열을 생성하여 반환 사용 예시 배열 numArr가 있을 때, 홀수로 된 배열을 반환받고 싶으면 아래처럼 코드를 작성한다. filte..

☘️ 시작하며... 코딩 테스트 공부를 하려고 자료구조를 공부하고 있는데 문제를 풀다가 도중에 내가 자바스크립트 고차함수에 대해 잘 모르고 있다는 것을 알게 되어 글을 작성하면서 공부할 겸 정보를 알려주기 위해 해당 글을 작성하게 되었다. 첫 번째 게시물은 map 에 대해 알아볼 것이다. ☘️ 고차 함수란? 고차 함수란? 함수를 파라미터(인자)로 받거나 결과로 반환해 주는 함수(메서드) ☘️ Array.map() map은 배열을 for와 같이 돌면서, 결과로 배열을 반환해 준다. 사용 예시 배열 array가 있을 때, 각 요소에 2를 곱한 배열을 반환받고 싶을 때, 아래처럼 코드를 작성한다. map의 첫 번째 인자인 item은 배열의 각 요소이다. (인자 이름은 사용자가 원하는 대로 작성할 수 있다.) ..

☘️ 시작하며... 지난 게시물에서 GraphQL API를 만들어 보았고, 이번에는 Rest API를 GraphQL로 바꿔볼 것이다. 해당 게시물은 노마드코더 강의를 참고하여 작성했다.(무료 강의) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ 비주얼 스튜디오(vs code) GraphQL 확장 프로그램 Apollo GraphQL Rest API를 GraphQL로 바꾸기 전에 먼저 확장 프로그램에 대해 알아 볼 것이다. 아래 사진과 같이 GraphQL의 typeDefs를 작성하면 글씨 색이 초록색이라 가독성이 떨어지는 것을 볼 수 있다. 이럴때 vs code에서 Apollo GraphQL 확장 프로그램을 ..

☘️ 시작하며... 지난 게시물에서 GraphQL에 대해 알아보고 테스트 하였고, 이번에는 직접 GraphQL API를 만들어 볼 것이다. 해당 게시물은 노마드코더 강의를 참고하여 작성했다.(무료 강의) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ GraphQL API 만들기 초기 세팅 Apollo Server 란? Apollo 서버란 GraphQL API를 사용하는 서버를 개발할 수 있도록 도와주는 패키지 이다. 프로젝트 생성 비주얼 스튜디오에서 원하는 이름의 디렉토리를 만들고 node.js 프로젝트를 초기화하는 명령어를 입력해 준다. npm init -y 그리고 apollo server와 graphQ..

☘️ 시작하며... 요즘 GraphQL에 대해 많은 관심이 있으며 인기가 갈수록 높아지고 있다. 실제로 GraphQL를 사용하는 회사에는 페이스북, 깃허브, 핀터레스트, 에어비앤비 등이 있다고 한다. 그래서 GraphQL가 무엇인지 공부해보고 싶어 노마드코더에 있는 GraphQL 강의를 듣게 되었다. (무료 강의!!!!) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ GraphQL 이란? Rest API 단점 GraphQL은 Rest API의 단점을 해결하기 위해 만들어졌다. 그러면 Rest API의 단점은 무엇일까? GraphQL 홈페이지를 살펴보면서 알아볼 것이다. 첫 번째, over-fetching ..

☘️유틸리티 타입(Utility Types) keyof keyof를 사용하면 인터페이스의 key값을 유니온 형태로 받을 수 있다. // keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } // 'id' | 'name' | 'age' | 'gender' type UserKey = keyof User; Partial Partial은 옵셔널로 바꿔주어, 인터페이스의 일부분만 사용 가능하게 해 준다. // partial interface User { id: number; name: string; age: number; gender: "m" | "f"; } let admin: Partial = { id: 1, name..