본문 바로가기
JSX 2020. 4. 10. React(리액트)란 JavaScript UI 라이브러리다. * 라이브러리(Library)는 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 재사용할 수 있도록 Class나 Function으로 만들어진 것이다. React에서는 JSX 표현을 사용한다. JSX(Syntax extension for JavaScript) JSX는 JavaScript 확장 버전으로 HTML + JavaScript라 보면 된다. 1 const hi = Hi; cs 위 처럼 HTML과 자바스크립트 코드를 혼용해서 사용할 수 있다. JSX는 자바스크립트 문법이 아니라 브라우저가 해석하지 못해 오류가 난다. 따라서 JSX 문법이 포함된 React.js를 사용하기 위해 해당 파일을 정규 자바스크립트로 변환시키는 컴파일..
[JS] 중복되지 않는 알파벳으로 이루어진 가장 긴 문자열 찾기 2020. 4. 10. [ 문제 ] String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이 반환 더보기 * 기본 조건 str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환) str = "abcabcabc"; // return은 3 // => 'abc' 가 제일 길기 때문 str = "aaaaa"; // return은 1 // => 'a' 가 제일 길기 때문 str = "sttrg"; // return은 3 // => 'trg' 가 제일 길기 때문 [ 풀이 ] 2020.04.10 많이 어려웠다. 처음에는 split으로 하나하나 쪼개서 str[0]과 같은 문자를 만났을 때 잘라서 새로운 배열에 저장하고, 뒤의 문자와 비교하는 식으로 생각했다. 하지만 'sttrg'라는 문자를 만났을..
HTTP 기초 2020. 4. 8. HTTP(HyperText Transfer Protocol) - 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 프로토콜(통신 규약) - hypertext markup language - 웹 상에서 네트워크로 서버끼리 통신을 할 때, 어떠한 형식으로 서로 통신하자 규정해 놓은 것이 '통신 형식' 혹은 '통신 구조' - 프론트엔드 서버와 클라이언트 간의 통신, 백엔드와 프론트엔드 서버간의 통신에 사용 ㅁ HTTP 문자 이해하기 - HyperText(연결된 HTML), Transfer(전송), Protocol(규약) - 규약은 서로 약속or합의한 내용으로, 컴퓨터 끼리 의사소통을 하기 위해 만든 언어이다. - 사람은 목소리로 소통하듯이, 컴퓨터는 HTTP에서 정한 규약인 이진법(비트)로 서로 어떤 내용..
자료 구조(Data Structure) (2) - Array(배열) 2020. 4. 7. Array(배열)는 자바스크립트 카테고리에서 한 번 다룬적이 있다. (2020/03/03 - 배열(Array) (1) - 생성, 접근, length) 이번 글은 배열을 어떻게 쓰는지 보다, 배열의 특성, 장단점에 대해 다룰 것이다. (자료 구조에 저장하는 데이터는 일반적으로 요소(element)라 한다) Array 특징: "순차적(ordered)으로 데이터를 저장한는 자료 구조" - 주로 서로 연결된 데이터들을 순차적으로 저장할 때 사용 - 순서가 상관 없더라도, 서로 연결된 데이터들을 저장할때 사용 - 삽입(Insertion) 순서대로 저장 (즉, 새로 삽입되는 요소는 배열의 맨 끝에 위치한다) - 이미 생성된 것도 수정 가능(mutable) - 동일한 값 여러번 삽입 가능 - Multi-dimenti..
[JS] 특정 수가 나오는 index 찾기 2020. 4. 7. [ 문제 ] 더보기 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return - nums: 숫자 배열 - target: 두 수를 더해서 나올 수 있는 합계 - return: 두 수의 index를 가진 숫자 배열 예) var nums = [4, 9, 11, 14] var target = 13 nums[0] + nums[1] = 4 + 9 = 13 이므로, return 값은 [0, 1] * target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정한다 [ 풀이 ] 2020.04.06 함수 형태가 nums[i] + nums[j] = target으로 나와야 하니, 처음에는 for문을 두 번 돌릴 생각을 했지만, 많이 써보지 않..
자료 구조(Data Structure) (1) - 소개 2020. 4. 6. "코딩은 알고리즘과 자료구조, 이 두가지로 이루어진다" - 리누스 토르발스 코딩을 안 해보신 분들도 개발자 채용 프로세스에 '알고리즘 시험'이 있다는 걸 들어본적이 있을 것이다. 그렇다면 과연 자료구조란 무엇일까? 자료 구조(Data Structure)란 데이터에 편리하게 접근하고 변경하기 위해 데이터를 저장하거나 조직하는 방법이다. 어떤 상황에서든 다 통하는 만능 자료 구조는 없으며, 각각의 자료 구조의 장단점을 이해하고 목적에 맞는 자료구조를 사용해야 한다. 말이 약간 어렵다. 실생활로 비유를 들자면 결제 방식과 같다고 볼 수 있다. 어디에서 결제하느냐에 따라 결제 방식이 다를 수 있다. A 서점에서는 체크카드를 써야 페이백을 해주든가, B 음식점에서는 신용카드를 써야 할인을 해준다. 혹은 쿠폰을 가..
[JS] 문자의 첫번째 위치 반환하기 2020. 4. 5. [ 문제 ] get_find 함수 작성하기 더보기 문자와 문자열이 주어졌을때, "get_find" 함수는 주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환합니다. Notes: 문자열의 첫번째 문자는 인덱스 값 0 을 가집니다. 만약 문자열에 해당 문자가 여러번 나타나면, 첫번째로 나타나는 위치를 반환해야 합니다. 만약 문자가 문자열에 존재하지 않는다면, -1 을 반환해야 합니다. indexOf 함수를 사용하지 마세요. const output = get_find('a', 'I am a hacker') console.log(output) // --> 2 [ 풀이 ] 2020.04.05 function get_find(str, sentence) { // console.log(sentence.incl..
웹 동작 원리 기초 2020. 4. 4. 우리가 구글로 가고 싶을 때 검색창에 한글로 구글을 쳐서 들어가거나, url창에 영문주소를 쓴다. 그러면 컴퓨터는 유저에게 원하는 페이지를 보여준다. 그렇다면 컴퓨터는 어떻게 영문주소를 인식하고 그 페이지를 그대로 우리에게 보여주는 것일까? 컴퓨터는 영문주소를 IP(숫자)주소로 바꾼 다음 해당 페이지로 찾아간다. 더 매끄러운 설명을 위해서는 몇 가지 단어 먼저 정의하겠다. 호스팅(Hosting, Web hosting service) 사용자의 요청이 오면 언제든 응답을 해야하기 때문에, 인터넷에 '항상' 연결되어 있고 '절대' 꺼지지 않는 호스트 서버(컴퓨터)에 홈페이지 구성파일(HTML, CSS, JavaScript)을 저장해 놓는다. 대표적인 서비스는 AWS, ec2/S3, cafe24 등과 같은 호스..

티스토리툴바