항해99 [TIL] d+16.5 리액트 공부 방향성에 대해 감이 잡히질 않는다. 이대로 돌리면 배열로 돌린 네모에 유니크한 키가 없다는 에러가 발생한다. 가상 돔과 진짜 돔을 비교해서 업데이트 시키려 할 때, 비교하기 위한 값이 필요한데, 이 값이 바로 key이다~ 원래는 각 요소마다 key가 중복되지 않도록 자동으로 들어가고, element 탭에선 확인 할 수 없는데(리액트 요소만 가지고 있음), map을 사용할 경우, ... 항해99메모state관리state관리 [TIL] d+16 과제 코드를 거의 99.9% 누리님의 도움으로 짜게 되었다... ㅠ. ㅠ (무한감사) 이게 뭐였더라...? 등)이 있어서, 앞으로는 그중 해소된 부분들을 정리해 보려고 한다~! (이게 진짜 TIL의 의미겠지...) 대부분 이미 강의 들으며 이해했던 부분이었는데, 정작 강의 영상 없이 코드만 짜보니 머릿속에서 연결이 안 되는 것들이 많았다. 엄청 바보같은(ㅋㅋ) 고민들밖에 없었어서 어디 물어보... 항해99리액트hh99ReactTILArray.fromArray.mapArray.from WIL 3 DOM, React 입문 주차 문서 객체 모델 (DOM) Document Object Model 정의: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것입니다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있... React항해99DOMDOM WIT 3주차 회고록 드디어 악명 높은(?) 주특기 주차가 왔다. 나는 주특기로 리액트를 선택했고 미리 선행을 하지 않아도 괜찮다는 말만 듣고 정말 리액트에 대해 아무것도 모른채로.. 수행해야하는 것은 메인으로 개인프로젝트였는데 일주일의 평점을 남기는 사이트를 만들면 되었다. ✏️ 작업 과정 나 정말 미쵸벌겠어 아직도 이해 안가는 것이 한가득...근데 전부 이해하고 넘어가려면 영생을 살아야할 것 같아서 일단 하면... WIL항해99WIL 항해99 - Week03 회고 이번주는 주특기 입문주였다. 아예 처음부터 맨땅에 헤딩하는 기분으로 무엇부터 해야할 지 모르는 상태로 시작하다보니 막막하기도 하고 갑자기 그냥 눈물이 막 나기도 했다 😭 2. 상세페이지는 요일별페이지로 들어가는 것 3. 점수 선택하기. (메인페이지로 가면 선택한 점수 반영은 안됨) 처음엔 반복문없이 페이지 7개에 동그라미와 세모도 쫙 그려버렸는데 아무리 생각해도 그 방법은 틀린 것 같아서 5... WIL항해99WIL 220326 Redux 사용방법 1. Redux 패키지 설치하기 리덕스를 사용하려는 프로젝트에서 redux : 리덕스 패키지 react-redux : 리액트에서 리덕스를 편하게 쓸 수 있게 해주는 패키지 2. 리덕스 모듈 생성 보통 리덕스를 사용할 때는, 모양새대로 aciton, actionCreator, reducer를 분리해서 작성한다 (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성) 덕스 ... React항해99TILReact 220325 리덕스 ❓ 상태 관리 도구란? 그런데 자식 컴포넌트들이 많아지면 상태 관리가 매우 복잡해진다 근데 최상위 컴포넌트에 있는 상태(state)를 100번째 자식 컴포넌트에서 참조해야 한다면 이런 현상을 Props drilling 이슈라고 한다 ❗ 상태 관리 라이브러리는 이런 복잡성을 해결해준다 상태 관리 라이브러리는 전역 상태 저장소를 제공한다 자식 컴포넌트들은 전역 상태 저장소에서 필요한 state를... React항해99TILReact 220324 useRef 자바스크립트에서는 특정 DOM을 선택해야 할 때, getElementById나 querySelector같은 DOM Select 함수를 사용해서 DOM을 선택한다 일반적으로 애플리케이션 대부분의 컴포넌트에서 DOM을 다루는 것은 권장되지 않는다 그럼에도 DOM을 직접 선택해야하는 상황이 생기는데 이럴 때 리액트에선 ref를 사용 우선 ref는 reference의 줄임말이자, 참조라는 뜻이다 D... React항해99TILReact 220404 회원가입 기능 강의 여러번 보면서 만들긴 했는데 아직 복잡해서 이해하기 위해 작성하는 글 Firebase Authentication 1. 파이어베이스 설치하기 2. shared/firebase.js에서 auth 설정 회원가입 구현하기 적용 순서 firebase.js에 만들어둔 auth 가져오기 리덕스에서 signupFB 함수 만들기 auth.createUserWithEmailAndPassword()로 가입... 항해99TILTIL TIL + 26일 리액트 심화 주차에 도달...! 오늘은 새로 지급된 리액트 심화 강의를 들었다. 이제 약간 본격적으로 진짜 리액트를 써보는 느낌...? 컴포넌트를 쪼개고 나누는 것을 배웠다. 컴포넌트가 잘게 쪼개지다 보니 props가 또 헷갈리기 시작... 요번에도 과제 뷰를 그리면서 강의를 듣는게 좋을 것 같아 내일부터는 바로 과제에 돌입하려고 한다..! 그래도 생각보다 컴포넌트 쪼개는게 재밌어서... 오... 항해99항해99 220324 문자열 내림차순으로 배치하기 내 풀이 밑의 다른 사람처럼 먼저 풀긴 했는데, 아스키코드로 풀어보고 싶어서 이렇게 풀었다 문자열을 split 함수를 사용하여 배열로 만들고 map 함수를 이용하여 아스키 코드로 이루어진 배열을 만든다 아스키 코드 배열을 큰 수부터 정렬해주고 for문으로 아스키 코드를 다시 문자로 바꾸고 answer 배열에 push 하고, join 함수로 문자열로 바꾸었다 2번째 풀이 split 해주고 정렬... 프로그래머스항해99TILTIL 220331 다른 사람의 풀이 내 풀이 left와 right로 받은 수를 배열로 만들었다 이중 반복문으로 약수가 나온다면 count에 +1을 해줘서 갯수를 파악했다 그 count를 arr라는 빈 배열에 넣어주었다 다음 반복문으로 조건문을 사용하여 arr 배열의 요소를 2로 나눴을 때, 0이 아니라면 홀수라는 의미이기 때문에 음수로 바꿔줬다 reduce 함수로 다 더해줬다 다른 사람의 풀이... 프로그래머스항해99TILTIL oop 객체지향? 그게 도대체 먼데? 절차적 프로그래밍 초기 프로그래밍 방식 컴퓨터가 해야할 일들을 쭈~욱 순차적으로 나열해 놓는 코딩 방식 예) AllInOneController 클래스의 각 API 처리내용 객체지향 프로그래밍 하나의 사물 (객체) 에 하나의 의미를 부여하는 것처럼 프로그래밍하는 것 "주제별"로 정리해서 메모한다. (ex. 주식 투자, 바리스타 공부) 예) 뭔가 자를 것이 필요하면 '✂️' 를 떠올림 (clas... 항해99OOPcs스터디OOP 220329 시저 암호 내 풀이 문자열 s를 split( )를 이용하여 arr이라는 배열로 바꾸고, 그 배열을 map함수를 통해서 문자인 경우 아스키 코드로 바꾼다 if문으로 공백일 때, 대문자일 때, 소문자 일 때를 조건으로 그 안에 삼항 연산자로 arr의 요소를 아스키 코드에서 문자열로 바꿔준다 반환받은 배열을 join 함수로 하나로 연결한다... 프로그래머스항해99TILTIL 부트스트랩으로 포스팅 박스 제작하기 완성본 이 포스팅 박스를 부트스트랩으로 만들어보았다. 작년에 부트스트랩 공부했을 때 도대체가 무슨 말인지 몰라서 많이 헤맸던 경험이 있다.. 원하는 템플릿만 잘 찾아서 넣으면 되는데...그게 그렇게 어려웠나보다.. 1.큰 박스 먼저 만들기 하나의 div 클래스를 만들어 한 묶음로 만들어주었다. 2.영화URL 부트스트랩에 있는 이메일 템플릿을 활용하여 코드를 가져왔다. 가져온 후에는 적절하게 ... 항해99스파르타코딩bootstrapTILWILTIL 220404 예산 내 풀이 입력받은 배열 d를 작은 수부터 정렬해주고 반복문으로 배열의 각 요소를 더하기 할당해주면서 budget에서 작은 수부터 빼주면서 answer += 1 해주었다 조건문으로 예산이 sum보다 작아지면 for문 break하도록 했다... 프로그래머스항해99TILTIL WIL. 4th week 4주차 리액트 숙련주차는 너무 너무 힘들었다.항해에서 준 스파르타강의에 베이스를 두지 않고 다른 강의들을 보고 따라하려 했으나 잘 되지 않았다. CS스터디 블로그의 내용만 보고 전공지식 겉햙기 하는 것을 추천하지 않고 전공책보다 쉽게 풀어써서 비전공자도 이해에 무리가 없는 이 책을 계속 읽기를 계속 하자고 했다. 그리곤 스파르타 강의 중 리덕스 파일을 여러개 만들어서 하는 프로젝트에 중점을 ... WIL항해99WIL HTML, CSS 기본내용 HTML은 뼈대, CSS는 꾸미기! 인스타그램에서 니꼴라스가 HTML과 CSS의 비유를 기가 막히게 들었던 기억이 있다. HTML은 민낯이고, CSS는 화장! 정말 적절한 비유인 것 같다. (나는 이런 비유를 좋아한다.) HTML은 크게 head와 body로 나뉜다. head안에는 페이지의 속성 정보를 담고, body안에는 내용을 담는다. head안에는 meta, script, link,ti... 항해99스파르타코딩CSSTILWILhtmlCSS 영화피디아 Ajax 로 붙이기 영화 평가가 담긴 카드섹션을 Ajax로 불러와봤다. 완성본 포인트는 API를 사용 / 호출해서 필요한 데이터를 가져와 활용하는 것! 필요한 정보인 제목, 내용, 이미지, 코멘트 그리고 별점! 필요한 정보를 각 변수에 담아주고 데이터를 넣어줘야 하는 곳 에 ${}으로 넣어준다. temp_html에 `` 을 넣어 $('#cards-box').append(temp_html)로 추가한다! 별점의 경... 항해99ajax스파르타코딩TILTIL jQuery + Ajax의 조합 연습 문제 실시간 서울시의 OpenAPI를 이용해서 모든 구의 미세먼지를 표기한다. 업데이트 버튼을 누를 때마다 새로 업데이트가 된다. button은 onclick으로 q1() 함수로 연결된다. 먼저 기본 ajax 구조에서 "GET" 방식으로 하고 url을 넣어준다. rows 변수에 response['RealtimeCityAir']['row'] 값을 담아 for문으로 구 이름과 미세먼지 수치 데이... 항해99스파르타코딩jqueryTILajaxTIL [항해99] 4/7 React(3) TIL < TIL > 1. immer Immer 를 사용하면 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer 가 불변성 관리를 대신 해준다. 그러나 immer를 사용하지 않는 코드가 성능적으로는 아주 조~금 더 빠르다! 2. rel 속성 - noreferrer, noopener, nofollow HTML에서 a태그는 페이지(문서)와 페이지를 연결하는 역할을 한... React항해99스파르타코딩클럽React 220404 웹 저장소(feat 토큰) 강의 여러번 보면서 만들긴 했는데 아직 복잡해서 이해하기 위해 작성하는 글 Cookie.js 1. 쿠키 만들기 setCookie 쿠키 만들어주는 함수 인자로 key값이 될 name, vaule가 될 id, 그리고 얼마 후에 만료시킬 건지를 정해주는 exp를 받는다 Date객체를 만들어서 먼저 현재 시간을 가져오고, 그 시간에 3일 더해주는 연산을 한다 (만료일을 3일 후로 하기 위해서) do... 항해99TILTIL [항해99] 3/27 WIL (4) 네번째 Keyword 1. 라이프사이클(클래스형 vs 함수형) React의 컴포넌트는 모두 Life Cycle을 가진다. 클래스형 컴포넌트는 render() 함수를 이용, UI를 구성할 JSX 코드를 반환해주는 형식으로 구성된다. 생성될 때 (마운트 시 - mount) constructor, render, componentDidMount .. 업데이트할 때 render, componentDi... React항해99WIL스파르타코딩클럽React 2주차 알고리즘 주차(3) 버블 정렬은 첫 번째 자료와 두 번째 자료와 검사해 조건에 맞게 위치를 변경하고 또 두 번째와 세 번째 자료와 검사하는 식으로 마지막까지 하나씩 교환하면서 자료를 정렬하는 방식입니다 버블 정렬 예시 1과 3을 비교하고 1 < 3 이기 때문에 1을 앞으로 보냅니다 3과 2를 비교하고 2 < 3 이기 때문에 2를 앞으로 보냅니다 3과 4를 비교하면 3 < 4 이기 때문에 그대로 둡니다 선택 정렬... 항해99항해99 [D+97] 항해99 10일차 (31,32) 중복 된 인덱스를 삭제하기 위해서 반복문 안에 조건문을 넣어줬다. 조건은 ex) arr[1]과 arr[2]가 같은지 아닌지 확인하고 그 후 변수 answer에 push를 해주는 것으로 답을 도출했다. 배열들의 요소들을 더해주기 위해서 반복문을 돌려줬다. numbers[i] +numbers[i+1]을 했더니 답이 이상하게 도출돼서 i+1로 시작하는 j의 반복문을 작성해서 i반복문의 요소들을 하... JavaScriptTIL항해99프로그래머스JavaScript [항해99] 3주차 Restful API, package.json에 대해 수신한 표현을 통해 클라이언트가 리소스를 조작할 수 있어야 한다(이렇게 할 수 있는 충분한 정보가 표현에 포함되어 있기 때문). 클라이언트에 반환되는 자기 기술적(self-descriptive) 메시지에 클라이언트가 정보를 어떻게 처리해야 할지 설명하는 정보가 충분히 포함되어야 한다. 하이퍼미디어: 클라이언트가 리소스에 액세스한 후 하이퍼링크를 사용해 현재 수행 가능한 기타 모든 작업을 찾을... 항해99항해99 항해 사전 준비기간 4주차 강의 정리 Flask 시작하기 – 서버만들기 1) Flask Framework: 서버를 구동시켜주는 편리한 코드 모음. 2) 새 프로젝트 생성 후 flask package 설치 3) 통상적으로 flask 서버를 돌리는 파일은 app.py라고 명명 4) 위 코드는 flask 서버를 만드는 기본 코드 (뼈대) Flask 시작하기 - HTML파일주기 4) App.py: flask 서버를 구동하는 파일 Fla... 항해994주차7기사전준비강의4주차
[TIL] d+16.5 리액트 공부 방향성에 대해 감이 잡히질 않는다. 이대로 돌리면 배열로 돌린 네모에 유니크한 키가 없다는 에러가 발생한다. 가상 돔과 진짜 돔을 비교해서 업데이트 시키려 할 때, 비교하기 위한 값이 필요한데, 이 값이 바로 key이다~ 원래는 각 요소마다 key가 중복되지 않도록 자동으로 들어가고, element 탭에선 확인 할 수 없는데(리액트 요소만 가지고 있음), map을 사용할 경우, ... 항해99메모state관리state관리 [TIL] d+16 과제 코드를 거의 99.9% 누리님의 도움으로 짜게 되었다... ㅠ. ㅠ (무한감사) 이게 뭐였더라...? 등)이 있어서, 앞으로는 그중 해소된 부분들을 정리해 보려고 한다~! (이게 진짜 TIL의 의미겠지...) 대부분 이미 강의 들으며 이해했던 부분이었는데, 정작 강의 영상 없이 코드만 짜보니 머릿속에서 연결이 안 되는 것들이 많았다. 엄청 바보같은(ㅋㅋ) 고민들밖에 없었어서 어디 물어보... 항해99리액트hh99ReactTILArray.fromArray.mapArray.from WIL 3 DOM, React 입문 주차 문서 객체 모델 (DOM) Document Object Model 정의: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것입니다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있... React항해99DOMDOM WIT 3주차 회고록 드디어 악명 높은(?) 주특기 주차가 왔다. 나는 주특기로 리액트를 선택했고 미리 선행을 하지 않아도 괜찮다는 말만 듣고 정말 리액트에 대해 아무것도 모른채로.. 수행해야하는 것은 메인으로 개인프로젝트였는데 일주일의 평점을 남기는 사이트를 만들면 되었다. ✏️ 작업 과정 나 정말 미쵸벌겠어 아직도 이해 안가는 것이 한가득...근데 전부 이해하고 넘어가려면 영생을 살아야할 것 같아서 일단 하면... WIL항해99WIL 항해99 - Week03 회고 이번주는 주특기 입문주였다. 아예 처음부터 맨땅에 헤딩하는 기분으로 무엇부터 해야할 지 모르는 상태로 시작하다보니 막막하기도 하고 갑자기 그냥 눈물이 막 나기도 했다 😭 2. 상세페이지는 요일별페이지로 들어가는 것 3. 점수 선택하기. (메인페이지로 가면 선택한 점수 반영은 안됨) 처음엔 반복문없이 페이지 7개에 동그라미와 세모도 쫙 그려버렸는데 아무리 생각해도 그 방법은 틀린 것 같아서 5... WIL항해99WIL 220326 Redux 사용방법 1. Redux 패키지 설치하기 리덕스를 사용하려는 프로젝트에서 redux : 리덕스 패키지 react-redux : 리액트에서 리덕스를 편하게 쓸 수 있게 해주는 패키지 2. 리덕스 모듈 생성 보통 리덕스를 사용할 때는, 모양새대로 aciton, actionCreator, reducer를 분리해서 작성한다 (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성) 덕스 ... React항해99TILReact 220325 리덕스 ❓ 상태 관리 도구란? 그런데 자식 컴포넌트들이 많아지면 상태 관리가 매우 복잡해진다 근데 최상위 컴포넌트에 있는 상태(state)를 100번째 자식 컴포넌트에서 참조해야 한다면 이런 현상을 Props drilling 이슈라고 한다 ❗ 상태 관리 라이브러리는 이런 복잡성을 해결해준다 상태 관리 라이브러리는 전역 상태 저장소를 제공한다 자식 컴포넌트들은 전역 상태 저장소에서 필요한 state를... React항해99TILReact 220324 useRef 자바스크립트에서는 특정 DOM을 선택해야 할 때, getElementById나 querySelector같은 DOM Select 함수를 사용해서 DOM을 선택한다 일반적으로 애플리케이션 대부분의 컴포넌트에서 DOM을 다루는 것은 권장되지 않는다 그럼에도 DOM을 직접 선택해야하는 상황이 생기는데 이럴 때 리액트에선 ref를 사용 우선 ref는 reference의 줄임말이자, 참조라는 뜻이다 D... React항해99TILReact 220404 회원가입 기능 강의 여러번 보면서 만들긴 했는데 아직 복잡해서 이해하기 위해 작성하는 글 Firebase Authentication 1. 파이어베이스 설치하기 2. shared/firebase.js에서 auth 설정 회원가입 구현하기 적용 순서 firebase.js에 만들어둔 auth 가져오기 리덕스에서 signupFB 함수 만들기 auth.createUserWithEmailAndPassword()로 가입... 항해99TILTIL TIL + 26일 리액트 심화 주차에 도달...! 오늘은 새로 지급된 리액트 심화 강의를 들었다. 이제 약간 본격적으로 진짜 리액트를 써보는 느낌...? 컴포넌트를 쪼개고 나누는 것을 배웠다. 컴포넌트가 잘게 쪼개지다 보니 props가 또 헷갈리기 시작... 요번에도 과제 뷰를 그리면서 강의를 듣는게 좋을 것 같아 내일부터는 바로 과제에 돌입하려고 한다..! 그래도 생각보다 컴포넌트 쪼개는게 재밌어서... 오... 항해99항해99 220324 문자열 내림차순으로 배치하기 내 풀이 밑의 다른 사람처럼 먼저 풀긴 했는데, 아스키코드로 풀어보고 싶어서 이렇게 풀었다 문자열을 split 함수를 사용하여 배열로 만들고 map 함수를 이용하여 아스키 코드로 이루어진 배열을 만든다 아스키 코드 배열을 큰 수부터 정렬해주고 for문으로 아스키 코드를 다시 문자로 바꾸고 answer 배열에 push 하고, join 함수로 문자열로 바꾸었다 2번째 풀이 split 해주고 정렬... 프로그래머스항해99TILTIL 220331 다른 사람의 풀이 내 풀이 left와 right로 받은 수를 배열로 만들었다 이중 반복문으로 약수가 나온다면 count에 +1을 해줘서 갯수를 파악했다 그 count를 arr라는 빈 배열에 넣어주었다 다음 반복문으로 조건문을 사용하여 arr 배열의 요소를 2로 나눴을 때, 0이 아니라면 홀수라는 의미이기 때문에 음수로 바꿔줬다 reduce 함수로 다 더해줬다 다른 사람의 풀이... 프로그래머스항해99TILTIL oop 객체지향? 그게 도대체 먼데? 절차적 프로그래밍 초기 프로그래밍 방식 컴퓨터가 해야할 일들을 쭈~욱 순차적으로 나열해 놓는 코딩 방식 예) AllInOneController 클래스의 각 API 처리내용 객체지향 프로그래밍 하나의 사물 (객체) 에 하나의 의미를 부여하는 것처럼 프로그래밍하는 것 "주제별"로 정리해서 메모한다. (ex. 주식 투자, 바리스타 공부) 예) 뭔가 자를 것이 필요하면 '✂️' 를 떠올림 (clas... 항해99OOPcs스터디OOP 220329 시저 암호 내 풀이 문자열 s를 split( )를 이용하여 arr이라는 배열로 바꾸고, 그 배열을 map함수를 통해서 문자인 경우 아스키 코드로 바꾼다 if문으로 공백일 때, 대문자일 때, 소문자 일 때를 조건으로 그 안에 삼항 연산자로 arr의 요소를 아스키 코드에서 문자열로 바꿔준다 반환받은 배열을 join 함수로 하나로 연결한다... 프로그래머스항해99TILTIL 부트스트랩으로 포스팅 박스 제작하기 완성본 이 포스팅 박스를 부트스트랩으로 만들어보았다. 작년에 부트스트랩 공부했을 때 도대체가 무슨 말인지 몰라서 많이 헤맸던 경험이 있다.. 원하는 템플릿만 잘 찾아서 넣으면 되는데...그게 그렇게 어려웠나보다.. 1.큰 박스 먼저 만들기 하나의 div 클래스를 만들어 한 묶음로 만들어주었다. 2.영화URL 부트스트랩에 있는 이메일 템플릿을 활용하여 코드를 가져왔다. 가져온 후에는 적절하게 ... 항해99스파르타코딩bootstrapTILWILTIL 220404 예산 내 풀이 입력받은 배열 d를 작은 수부터 정렬해주고 반복문으로 배열의 각 요소를 더하기 할당해주면서 budget에서 작은 수부터 빼주면서 answer += 1 해주었다 조건문으로 예산이 sum보다 작아지면 for문 break하도록 했다... 프로그래머스항해99TILTIL WIL. 4th week 4주차 리액트 숙련주차는 너무 너무 힘들었다.항해에서 준 스파르타강의에 베이스를 두지 않고 다른 강의들을 보고 따라하려 했으나 잘 되지 않았다. CS스터디 블로그의 내용만 보고 전공지식 겉햙기 하는 것을 추천하지 않고 전공책보다 쉽게 풀어써서 비전공자도 이해에 무리가 없는 이 책을 계속 읽기를 계속 하자고 했다. 그리곤 스파르타 강의 중 리덕스 파일을 여러개 만들어서 하는 프로젝트에 중점을 ... WIL항해99WIL HTML, CSS 기본내용 HTML은 뼈대, CSS는 꾸미기! 인스타그램에서 니꼴라스가 HTML과 CSS의 비유를 기가 막히게 들었던 기억이 있다. HTML은 민낯이고, CSS는 화장! 정말 적절한 비유인 것 같다. (나는 이런 비유를 좋아한다.) HTML은 크게 head와 body로 나뉜다. head안에는 페이지의 속성 정보를 담고, body안에는 내용을 담는다. head안에는 meta, script, link,ti... 항해99스파르타코딩CSSTILWILhtmlCSS 영화피디아 Ajax 로 붙이기 영화 평가가 담긴 카드섹션을 Ajax로 불러와봤다. 완성본 포인트는 API를 사용 / 호출해서 필요한 데이터를 가져와 활용하는 것! 필요한 정보인 제목, 내용, 이미지, 코멘트 그리고 별점! 필요한 정보를 각 변수에 담아주고 데이터를 넣어줘야 하는 곳 에 ${}으로 넣어준다. temp_html에 `` 을 넣어 $('#cards-box').append(temp_html)로 추가한다! 별점의 경... 항해99ajax스파르타코딩TILTIL jQuery + Ajax의 조합 연습 문제 실시간 서울시의 OpenAPI를 이용해서 모든 구의 미세먼지를 표기한다. 업데이트 버튼을 누를 때마다 새로 업데이트가 된다. button은 onclick으로 q1() 함수로 연결된다. 먼저 기본 ajax 구조에서 "GET" 방식으로 하고 url을 넣어준다. rows 변수에 response['RealtimeCityAir']['row'] 값을 담아 for문으로 구 이름과 미세먼지 수치 데이... 항해99스파르타코딩jqueryTILajaxTIL [항해99] 4/7 React(3) TIL < TIL > 1. immer Immer 를 사용하면 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer 가 불변성 관리를 대신 해준다. 그러나 immer를 사용하지 않는 코드가 성능적으로는 아주 조~금 더 빠르다! 2. rel 속성 - noreferrer, noopener, nofollow HTML에서 a태그는 페이지(문서)와 페이지를 연결하는 역할을 한... React항해99스파르타코딩클럽React 220404 웹 저장소(feat 토큰) 강의 여러번 보면서 만들긴 했는데 아직 복잡해서 이해하기 위해 작성하는 글 Cookie.js 1. 쿠키 만들기 setCookie 쿠키 만들어주는 함수 인자로 key값이 될 name, vaule가 될 id, 그리고 얼마 후에 만료시킬 건지를 정해주는 exp를 받는다 Date객체를 만들어서 먼저 현재 시간을 가져오고, 그 시간에 3일 더해주는 연산을 한다 (만료일을 3일 후로 하기 위해서) do... 항해99TILTIL [항해99] 3/27 WIL (4) 네번째 Keyword 1. 라이프사이클(클래스형 vs 함수형) React의 컴포넌트는 모두 Life Cycle을 가진다. 클래스형 컴포넌트는 render() 함수를 이용, UI를 구성할 JSX 코드를 반환해주는 형식으로 구성된다. 생성될 때 (마운트 시 - mount) constructor, render, componentDidMount .. 업데이트할 때 render, componentDi... React항해99WIL스파르타코딩클럽React 2주차 알고리즘 주차(3) 버블 정렬은 첫 번째 자료와 두 번째 자료와 검사해 조건에 맞게 위치를 변경하고 또 두 번째와 세 번째 자료와 검사하는 식으로 마지막까지 하나씩 교환하면서 자료를 정렬하는 방식입니다 버블 정렬 예시 1과 3을 비교하고 1 < 3 이기 때문에 1을 앞으로 보냅니다 3과 2를 비교하고 2 < 3 이기 때문에 2를 앞으로 보냅니다 3과 4를 비교하면 3 < 4 이기 때문에 그대로 둡니다 선택 정렬... 항해99항해99 [D+97] 항해99 10일차 (31,32) 중복 된 인덱스를 삭제하기 위해서 반복문 안에 조건문을 넣어줬다. 조건은 ex) arr[1]과 arr[2]가 같은지 아닌지 확인하고 그 후 변수 answer에 push를 해주는 것으로 답을 도출했다. 배열들의 요소들을 더해주기 위해서 반복문을 돌려줬다. numbers[i] +numbers[i+1]을 했더니 답이 이상하게 도출돼서 i+1로 시작하는 j의 반복문을 작성해서 i반복문의 요소들을 하... JavaScriptTIL항해99프로그래머스JavaScript [항해99] 3주차 Restful API, package.json에 대해 수신한 표현을 통해 클라이언트가 리소스를 조작할 수 있어야 한다(이렇게 할 수 있는 충분한 정보가 표현에 포함되어 있기 때문). 클라이언트에 반환되는 자기 기술적(self-descriptive) 메시지에 클라이언트가 정보를 어떻게 처리해야 할지 설명하는 정보가 충분히 포함되어야 한다. 하이퍼미디어: 클라이언트가 리소스에 액세스한 후 하이퍼링크를 사용해 현재 수행 가능한 기타 모든 작업을 찾을... 항해99항해99 항해 사전 준비기간 4주차 강의 정리 Flask 시작하기 – 서버만들기 1) Flask Framework: 서버를 구동시켜주는 편리한 코드 모음. 2) 새 프로젝트 생성 후 flask package 설치 3) 통상적으로 flask 서버를 돌리는 파일은 app.py라고 명명 4) 위 코드는 flask 서버를 만드는 기본 코드 (뼈대) Flask 시작하기 - HTML파일주기 4) App.py: flask 서버를 구동하는 파일 Fla... 항해994주차7기사전준비강의4주차