전체 글 131

[엘리스 AI트랙] 04-04-01 React 심화 1

1. 자바스크립트 비동기의 등장 초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했기 때문에 JS에서는 별도의 비동기 처리가 필요하지 않았음 AJAX(Asynchronous Javascript And XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨 옛날옛날...에는 브라우저가 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달 ➡️ 브라우저는 서버로부터 받은 HTML을 새롭게 렌더링했다고 한다 😮‍💨 XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨 2. 자바스크립트는 single-threaded language 자바스크립트는 메인 스레드가 하나인 single-threaded 언어이기..

elice/토끼성장일지 2021.10.22 (2)

[BOJ] 9012 괄호 - Python

링크 https://www.acmicpc.net/problem/9012 9012번: 괄호 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 www.acmicpc.net 문제 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 부른다. 한 쌍의 괄호 기호로 된 “( )” 문자열은 기본 VPS 이라고 부른다. 만일 x 가 VPS 라면 이것을 하나의 괄호에..

PS:0 2021.10.21

[엘리스 AI트랙] 리액트 라우터(React-Router)

Declarative Routing for React 공식 문서에서는 React Router를 Declarative Routing for React로 정의하고 있다 이게 머야,,,싶어서 검색한 끝에 잘 설명해주는 글 발견 (🙋‍♀️ 멋진 코드 예제들이 있어요!) https://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js Difference between declarative and imperative in React.js? Recently I've been studying a lot about the functionality and the ways to use the Faceboo..

[엘리스 AI트랙] 04-02-01 ~ 04-02-02 React 기초 3

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 1. form 태그 작성할땐 type들을 잘 작성해주는것이 좋다 2. 함수가 선언됐는지(존재하는지) + 타입 확인을 한번 더 함으로써 에러 방지! if(typeof onInsert === "function" && inputValue) { // onInsert가 정상적인 함수인 지 확인하여 에러 방지 onInsert(inputValue); } 3. 리액트에서 style은 object로 표현해야한다 {name}님 안녕하세요 반갑습니다. 위와 같은 inline style의 property name은 camelCase로 적는다 첫번째 중괄호는 자바스크립트 표현을 사용하겠다는 의미 두번째는 object의 중괄호 SPA와 라우팅 Single Pa..

[엘리스 AI트랙] 엘리스 3기 4주차 후기 🦁

1. 음...진도 진짜 많이 밀려버렸어요...리액트 hook과 자료구조 큐가 특히 어려웠던 느낌... 아니 자료구조 분명 이해했다고 생각했는데 왜 문제 풀려고 하면 응용이 안되는건지,,,나는 모르게따 2. 파이썬이랑 JS랑 섞어서 문제풀이 하게 된다...0개 언어? 빨리 파이써닉한 코드 짜고 싶은데...!!!!!! 3. 융합전공을 했지만 주변에 프론트쪽 생각하는 사람이 없어서 항상 아쉬웠는데 여기는 넘쳐난다👍 정보 공유 감사합니다 다들...🔥 4. 자괴감...사실 이번 주차테스트 0점인데요... 사슴공부법의 일환으로 생각하고 더 열심히 해야겠다...끝까지 살아남는 사슴 나야나...나야나...🦌 일단 큐 문제 조지러 총총...⭐️

elice/🐰🏁 2021.10.17

[엘리스 AI트랙] 03-05-01 ~ 자료구조

1. 자료구조 자료를 저장하는 방법과 자료에 적용할 수 있는 연산을 구체적으로 제공한 것 각각 장단점이 있으며 구현하고자 하는 프로그램의 성능을 고려하여 알맞은 자료구조를 선택해야함 2. 추상적 자료형 어떤 자료와 그 자료에 대한 연산(동작)들의 수학적인 정의 이 정의를 구현하는 방법은 명시되어 있지 않음 추상적 자료형을 구체적으로 구현한 결과가 자료구조 3. 리스트 (추상적 자료형) 순서가 존재하며, 일렬로 나열된 값들이 들어있음 (1) 배열 (구현) 인덱스 가지고 있음 특정 위치의 자료 탐색 유리 (2) 연결 리스트(구현) 일렬로 저장된 값들이 노드의 형태로 저장되어 있음 자료의 삽입, 삭제에 유리 (3) 해시 테이블 충돌 해결 방법: 오픈 어드레싱 충돌이 발생했을 때 자료를 저장하기 위해 빈 공간을..

[엘리스 AI트랙] 03-04-03 React기초 2 (Hook)

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 1. Hook 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용 State Hook의 대표적인 예로 useState가 있음 다른 컴포넌트와 Hook 내에서만 사용 가능 이름은 반드시 use로 시작 최상위 level에서만(첫번째 중괄호) hook 호출 가능 ⭐️ 왜 Hook이 등장했냐면... 기존에는 컴포넌트 내에서 state와 생명주기를 관리하기 위해서 반드시 클래스형 컴포넌트를 사용 다소 복잡한 클래스형 컴포넌트를 보완하고 함수형 컴포넌트에서도 해당 기능을 사용할 수 있도록 이후 추가됨 (1)State Hook useState: 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook..

[엘리스 AI트랙] 03-04-01 ~03-04-02 React 기초 2

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 1. Props 컴포넌트에 원하는 값을 넘겨줄 때 사용 Javascript의 요소라면 모두 넘겨줄 수 있음(ex: 변수, 함수, 객체, 배열 등) 주로 컴포넌트의 재사용을 위해 사용 컴포넌트에 많은 로직이 들어가고 반환되는 jsx의 요소들이 많고 복잡하다면 props를 사용하는게 효율적 props는 읽기 전용⭐️ 왼쪽처럼 props의 값을 직접 변경할 경우 리액트가 재렌더링하는데 문제가 생길 수 있음 오른쪽처럼 새 변수를 생성해 복제해서 사용합쉬다 HTML에서의 checked, value ➡️ 초기값 리액트에서는 현재값 초기값을 지정하고 싶다면 defaultChecked, defaultValue 속성 사용하기 2. State 컴포넌트 ..

[엘리스 AI트랙] 211006 TIL

오늘은 7일인데 왜 6일자 TIL을 이제서야 올리냐면...흠흠 TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 리액트 1. SPA(Single Page Application) (1) 전통적인 페이지 서버에 특정 동작(ex: 로그인)을 요청 - 서버에서 HTML을 클라이언트에게 전달하면서 페이지 리로드 (2) SPA 페이지 JSON 형식으로 메세지만 서버로부터 받은 뒤 로그인 후에 바뀌어야 할 부분만 바뀌게 됨(ex: 로그인 -> 로그아웃 버튼) 페이지의 변경이 필요할 때 처음부터 모든 HTML을 불러오는게 아닌 변경된 부분만 바뀌게 된다. 2. Virtual DOM 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념 R..