항해99 [항해99] 4/10 WIL (5) 다섯번째 Keyword Axios Axios란? - Axios는 node.js와 브라우저를 위한 Promise기반 HTTP클라이언트이다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 쉽게 말해 벡엔드와 프론트엔드가 통신을 쉽게 하기 위해 ajax와 더불어 사용한다. 사용방법 axios 객체는 아래와 ... ReactWIL항해99스파르타코딩클럽React 항해 사전 준비기간 5주차 강의 정리 2) 프로젝트 생성 (디렉토리에 templates, static 폴더와 app.py) 버킷리스트 – POST 연습 (기록하기) 버킷리스트 – GET 연습 (보여주기) 5) AWS 인스턴스 중지 = 컴퓨터 끄기 / 인스턴스 종료 = 컴퓨터 반납 6) 따라서 새로 만들려면 인스턴스 종료 후 새로 만들기 7) Git bash 키고 아래 명령어 입력 9) ubuntu 뒤의 IP는 구입한 인스턴스의 ... 항해995주차7기사전준비강의5주차 220418 Intersection Observer 타겟 요소와 타겟의 부모 혹은 상위 요소의 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 API 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공 infinite scrolling 과 placeholder가 Lazy Loadi... React항해99React 항해99 마지막 회고 아마 항해에서 예상치 못하게 가장 바쁜 주차였던 것 같습니다. 괜찮은 이력서 작성을 위해 항해에서 현업 개발자분들의 이력서 피드백과 특강을 듣고 일반 이력서와 개발자 이력서는 많이 다르다는 것을 알게되었습니다. 그리고 이번 주차에 정말 도움이 되는 것을 뽑으라고 한다면 저는 모의 면접를 뽑고 싶습니다. 면접에 들어가시는 개발자 분들이 진행을 해주셨는데 생각했던것 보다 정말~~~ 많은 도움이 ... 부트캠프항해99항해99 후기부트캠프 WIL 6주차 귀엽쥬..?ㅎㅅㅎ 드디어 백엔드분들과의 협업이 시작되었다..! 내가 과연 잘 할수 있을까..? 싶었지만 결과적으론 잘 마무리가 되어서 다행이다. 개발자들을 위한 꿀템 추천 사이트 구현한 기능 ✅ 로그인, 회원가입 ✅ 게시글 (목록 가져오기, 추가하기, 삭제하기, 수정하기) ✅ 댓글 (목록 가져오기, 추가하기, 삭제하기) ✅ 마이페이지 - 유저 정보, 내가 쓴 글 불러오기 ✅ 게시글 카테고리 ... 항해99항해99 화성 땅 공동구매(토이프로젝트) *토이 프로젝트로 프론트 부분인 HTML과 서버 Flask가 통신할 수 있도록 API를 구축해본다. 이 전에 포스팅했던 내용과 동일하게 새 프로젝트 생성 후, 설정을 해준다. Flask의 규칙에 맞게 설정을 하면 되는데 이렇게 설치를 하고 인터프리터에서 flask, pymongo, dnspython을 설치한다. *API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> PO... 토이프로젝트TIL항해99get방식post방식APIFlask스파르타코딩API 무비피디아 만들기 API와 크롤링 프로젝트 세팅하기 flask, pymongo, dnspython, requests, bs4 패키지 설치 templates안에 index.html static app.py ! 새프로젝트 시 위 환경설정은 필수! 크롤링할 때는 requests 와 bs4 패키지를 설치해야한다! og:image / og:title / og:description 을 크롤링 할 목적으로 크롤링을 사용! 크롤링 기본 코... 크롤링TIL항해99get방식post방식API스파르타코딩API Flask 시작하기 -서버만들기 Flask 패키지 설치! 파일 > 설정 > 인터프리터 Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둡니다) ㄴtemplates 폴더 (html파일을 넣어둡니다) ㄴapp.py 파일 이렇게 세 개를 만들어두고 시작해야한다. 이제 각 폴더의 역할이 있다. templates 폴더의 역할은 HTML 파일을 담아두고, 불러오는 역할을 한다. ... TILFlask스파르타코딩항해99Flask 220415 useMemo 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수 react 생태계에서 렌더링 최적화를 위해 사용되는 Hook 메모이제이션이란 ❓ 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 리액트의 메모이제이션에는 특징이 있다 바로 이전의 값만 메모이제이션 한다는 것 메모이... React항해99TILReact WIL. 6th week 6주차 미니프로젝트 주차는 협업이 어떻게 이뤄지는지 알 수 있는 주차였다. 전 주차까지는 파이어베이스를 이용하여 웹사이트를 만들었지만 이번에는 백엔드에서 만든 서버와 프론트에서 만든 클라이언트 페이지가 상호작용하는 사이트를 만들었습니다. 이 formdata로 가져오는게 문제가 있어서 삽질을 하다가 결국 이미지 뿐만 아니라 모든 데이터를 formdata로 묶어서 가져올 수 있다는 것을 발견하여... 항해99WILWIL TIL +36일차 어제 쿠키를 이용해서 리덕스로 로그인까지 구현해 놓고 오늘 API와 연동을 해봐야겠다고 다짐..! 팀원 백엔드 분들이 작성해준 스웨거를 axios로 연결하니 데이터는 받아와지는데 아무값이나 넣어도 로그인이 되어버린다...! 그래서 요게 잘 작동이 되는건가...? 음 근데 분명히 axios 잘 작성한 거 같은데.. 값도 잘 넘겨줬구... 좀 끙끙대다가 여러 사람들의 도움을 받았는데 알고보니 i... 항해99항해99 2022.04.09 - 한 눈에도 빛나는 이력서 쓰기, 정원희연사님 특강정리 어떻게 하면 좋은 이력서, 선택받는 이력서가 될 수 있을까? 서류 전형에서 수 많은 이력서 중 다음 단계로 보내지지 않은 이력서가 정말 많음 담당자 입장에서 매력적인 이력서 이력서 내용이 면접 때 어떤 질문으로 이어질까? -> 내가 잘 대답할 수 있는 내용 위주로 작성 한 일에 대한 성과를 모르거나, 숫자로 표현할 수 없다. 내용에 대한 질문에 대답할 자신이 없다. 2. 탈락하는 이력서, 합... 이력서항해99특강이력서 220318 React DOM 'Document Object Model' 의 줄임말 HTML 문서의 요소들에 쉽게 접근하기 위해 계층으로 표현된 인터페이스 HTML 단위 (요소) 하나하나를 객체로 생각하는 모델 텍스트도 객체이고, 버튼도, 태그와 같은 element들도 객체가 될 수 있다. 위 코드에서 div는 h3, p, btn태그를 포함하고 있다 여기서 div 태그는 하위 요소들의 부모 요소라고 하고 div에 속해 있... React항해99TILReact [TIL] d+11 오늘 CS스터디는 내가 발표할 차례라 열심히 준비를 했는데, 갑자기 4챕터부터 난데없이 과학시간이 돼버려서 당황스러웠다 ㅋㅋㅋ 간만에 학교 다닐 때 생각나서 재밌었음... 오늘 풀지 못한 문제 점수 count를 올릴 때 왜 조건문에서 인덱스를 길이로 나눈 나머지 값을 구하는 건가 했는데, 아주 간단한 이유였다. 배열 내의 인덱스를 돌고 있을 땐 괜찮지만, 배열에 존재하는 인덱스를 넘어섰을 때... 항해99hh99알고리즘hh99 [D+98] 항해99 11일차(1) 오늘은 알고리즘 테스트 날! #1번 #2번 JavaScript 답안 포맷... 항해99JavaScriptTILJavaScript [D+98] 항해99 11일차 (2) _매서드정리 한주간 진행 된 알고리즘주차가 마무리됐다. 그제 모의고사에서 리플잇으로 문제푸는 법을 약간 헤맸어서 자신감이 떨어진 상태였는데 (그냥 콘솔만 밑에다 더 찍어주면 되는데 안쓰니까 그 쉬운것도 몰랐음) 오늘 봤던 시험 끝나자마자 잘보든 못보든 몸이 바로 늘어진다.😭 (후일담_알고리즘 테스트에 우리반 전원이 통과했다는 소식!! 멋져!🎊🎉🎊🎉) 오늘은 지난 일주일 간 알고리즘을 풀면서 30문제 정도... 항해99JavaScriptTILJavaScript [TIL] d+12 이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 원본 배열을 훼손하지 않는다. 원본 배열에 다른 배열을 더해주는 함수. 원본 배열을 훼손하지 않는다. 1. NVM 설치 (node.js 버전 관리 툴) - 버전 확인 : nvm --version - node.js 설치 : nvm install [설치할 버전 넘버] - 노드 버전 확인 : n... 항해99리액트hh99TILReactReact 220318 React JSX 공식 문서에는 문자열도 아니고 태그도 아니며 자바스크립트를 확장한 문법이라고 한다 이해하기 쉽게 설명하면 HTML을 품은 JS === JSX! 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트의 문법으로 변환된다 바벨은 JSX를 React.createElement( ) 호출로 컴파일한다 리액트에서는 JSX 문법을 사용하여 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다... React항해99TILReact WIL | 항해99 2주차 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있습니다. 실제 세상에서 사물의 개념을 프로그램에서 객체라고 볼 수 있습니다. 그리고 그 사람은 이름 혹은 나이, 주민등록번호 등의 정보를 갖고 있고, 걷거나 뛸 수 있습니다. 그리고 객체는 이름, 나이 혹은 주민등록번호와 같이 상태(state)를 갖고 있으며, 걷거나 뛰는 행위(behavior)를 할 수 있습니다. 사람 뿐만 아니라 자동... WIL항해99WIL 220320 React 바인딩 리액트에서의 바인딩을 알기 전에 자바스크립트에서의 this와 바인딩을 알고 있어야 한다 Javascript this 자바스크립트에서 객체 안 메서드에서 this는 그 메서드가 포함된 object를 의미 여기서 this는 A를 의미하며, A의 prop인 Hello를 받아 출력한다. 그러나 밑의 예제처럼 A.sayHello를 B에 할당하고 이를 출력해보면 undefined가 출력된다 이유는 th... React항해99TILReact 220322 리액트 Router 리액트는 SPA (Single Page Application) 방식으로, 새로운 페이지를 로드하지 않고 하나의 페이지 않에서 필요한 데이터만 가져온다 MPA (Multi Page Application) 는 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 방식이다 사용자가 회원가입 버튼을 누르면, 새로운 회원가입 html로 이동하는 방식 SPA 방식은 하나의 html 페이지 안에서 사용자... React항해99TILReact [항해99] 3/20 WIL (2) 두번째 Keyword 1. JavaScript의 ES란? Javascript의 탄생과정과 연관이 있는데, ECMAScript가 표준이고, Javascript는 이 표준의 구현체이다. 이때 ES는 ECMAScript의 약어이다. 즉 ES는 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격이다. 흔히 알고 있는 ES6(2015)은 최신 버전이 아니다. 이후 공개된 버전이 꽤 있다. 특히... React항해99WIL스파르타코딩클럽React 항해99 | [WIL] 2주차 - 객체지향 프로그래밍, JVM 객체지향은 우리가 살고 있는 세계를 모델링으로 한 개발 방법으로 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위인 "객체"들의 모임으로 바라보는 것이다. 반면에 객체지향은 순서와 상관없이 독립적으로 객체들이 상호작용하여 설계할 수 있으며 하나의 객체에 오류가 있어도 다른 객체에는 영향을 미치지 않게 된다. 클래스(Class) 객체를 생성하는 것으로 속성과 메서드를 정... Java항해99WILJava WIL 2주차 회고록 그동안 내가 알던 (유튜브)알고리즘은 잊자 이번 주는 알고리즘을 달리는 주차였는데 사실 알고리즘은 살면서 처음 풀어보는 것이었다... 나 같은 초심자들은 전부 그랬다는 말을 듣고 조금 위안이 되었다 ㅎㅎ (왕단순) 첫날은 각자 팀원끼리 한문제를 맡고 어떻게 풀었는지 공유하는 시간을 가졌는데 아직 자바스크립트 문법에 익숙하지 못한 나는 그냥 수학 문제 풀듯이.. 초중딩 수학 총동원해서 풀었다.... WIL항해99WIL 220330 신규 아이디 추천 팀원들과 같이 풀어본 풀이 1단계 - 소문자변환 2단계 - 특수문자 제거 3단계 - 연속되는 마침표 제거 4단계 - 처음과 끝 마침표 제거 5단계 - 빈 문자열이면 a 추가 6단계 - 15자 넘어가면 자르기 7단계 - 문자열이 2자 이하라면 마지막 글자 붙이면서 3자로 만들어주기... 프로그래머스항해99TILTIL WIL 2 알고리즘과 항해톡 그리고 JavaScript 엉엉 ㅠ0ㅠ 행렬을 몰라서 그랬다기보다 몰라도 문제를 잘 읽으면 이해가 됐을 법도 한데... 유튜브 강의를 보면서... 많이 풀어보고 문제를 어떻게 식으로 표현할 지 고민해야겠다. 자바스크립트 메소드도 공부하고, 콜백 함수에 대해서도 공부하고... 또 CS스터디에서도 블로그를 공유해주셔서 (그저 빛...:amaze:) 도움이 많이 됐다. 유튜브 ㅠ0ㅠ 기쁘다. 알고리즘조에서 계속 스터디를 하... 항해99JavaScript항해톡알고리즘JavaScript 220323 문자열 내 마음대로 정렬하기 나는 못 푼, 다른 팀원의 해설 빈 배열 2개를 만든다 반복문을 이용해서 각 문자열의 n번째 글자를 strings[i]의 맨 앞에 붙여주고, 빈 배열 중 하나인 strings2에 넣는다 채운 배열을 sort 함수를 사용해서 정렬한다 반복문으로 strings2의 요소들의 맨 앞글자를 지워주고 빈 배열인 answer에 넣고 반환한다 다른 사람의 풀이... 프로그래머스항해99TILTIL 항해99 개발일지 - 미니 프로젝트(2) ✅ "IntroDog" 은 애견인들의 의견을 교류할 수 있는 사이트입니다. ✅ 반려견을 키우면서 생기는 질문, 일상 등 사소한 것까지 다른 이들과 함께 교류할 수 있습니다! 레이아웃 구성 + 메인 페이지 + 검색 기능 구현 COMMUNITY 페이지 + 글 작성/삭제 + 댓글 작성/삭제 기능 구현 전반적인 백엔드 작업 로그인 + 회원가입 기능 구현 1. 토큰 인증 구현 3. 댓글 등록, 삭제 ... 미니 프로젝트항해99미니 프로젝트 [TIL] d+18 export export default 한 파일 내에 하나의 개체만 있다면 그냥 export default로 내보내면 되지만, 여러 객체가 있는 경우 export를 사용하여 원하는 객체를 골라 내보낼 수 있는 것 같다. (export { name1, name2, name3 }; 같은 식으로...) export default는 객체명을 임의로 설정할 수도 있다구 한다. 버튼 라우팅 histor... React항해99hh99React 이전 기사 보기
[항해99] 4/10 WIL (5) 다섯번째 Keyword Axios Axios란? - Axios는 node.js와 브라우저를 위한 Promise기반 HTTP클라이언트이다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 쉽게 말해 벡엔드와 프론트엔드가 통신을 쉽게 하기 위해 ajax와 더불어 사용한다. 사용방법 axios 객체는 아래와 ... ReactWIL항해99스파르타코딩클럽React 항해 사전 준비기간 5주차 강의 정리 2) 프로젝트 생성 (디렉토리에 templates, static 폴더와 app.py) 버킷리스트 – POST 연습 (기록하기) 버킷리스트 – GET 연습 (보여주기) 5) AWS 인스턴스 중지 = 컴퓨터 끄기 / 인스턴스 종료 = 컴퓨터 반납 6) 따라서 새로 만들려면 인스턴스 종료 후 새로 만들기 7) Git bash 키고 아래 명령어 입력 9) ubuntu 뒤의 IP는 구입한 인스턴스의 ... 항해995주차7기사전준비강의5주차 220418 Intersection Observer 타겟 요소와 타겟의 부모 혹은 상위 요소의 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 API 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공 infinite scrolling 과 placeholder가 Lazy Loadi... React항해99React 항해99 마지막 회고 아마 항해에서 예상치 못하게 가장 바쁜 주차였던 것 같습니다. 괜찮은 이력서 작성을 위해 항해에서 현업 개발자분들의 이력서 피드백과 특강을 듣고 일반 이력서와 개발자 이력서는 많이 다르다는 것을 알게되었습니다. 그리고 이번 주차에 정말 도움이 되는 것을 뽑으라고 한다면 저는 모의 면접를 뽑고 싶습니다. 면접에 들어가시는 개발자 분들이 진행을 해주셨는데 생각했던것 보다 정말~~~ 많은 도움이 ... 부트캠프항해99항해99 후기부트캠프 WIL 6주차 귀엽쥬..?ㅎㅅㅎ 드디어 백엔드분들과의 협업이 시작되었다..! 내가 과연 잘 할수 있을까..? 싶었지만 결과적으론 잘 마무리가 되어서 다행이다. 개발자들을 위한 꿀템 추천 사이트 구현한 기능 ✅ 로그인, 회원가입 ✅ 게시글 (목록 가져오기, 추가하기, 삭제하기, 수정하기) ✅ 댓글 (목록 가져오기, 추가하기, 삭제하기) ✅ 마이페이지 - 유저 정보, 내가 쓴 글 불러오기 ✅ 게시글 카테고리 ... 항해99항해99 화성 땅 공동구매(토이프로젝트) *토이 프로젝트로 프론트 부분인 HTML과 서버 Flask가 통신할 수 있도록 API를 구축해본다. 이 전에 포스팅했던 내용과 동일하게 새 프로젝트 생성 후, 설정을 해준다. Flask의 규칙에 맞게 설정을 하면 되는데 이렇게 설치를 하고 인터프리터에서 flask, pymongo, dnspython을 설치한다. *API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> PO... 토이프로젝트TIL항해99get방식post방식APIFlask스파르타코딩API 무비피디아 만들기 API와 크롤링 프로젝트 세팅하기 flask, pymongo, dnspython, requests, bs4 패키지 설치 templates안에 index.html static app.py ! 새프로젝트 시 위 환경설정은 필수! 크롤링할 때는 requests 와 bs4 패키지를 설치해야한다! og:image / og:title / og:description 을 크롤링 할 목적으로 크롤링을 사용! 크롤링 기본 코... 크롤링TIL항해99get방식post방식API스파르타코딩API Flask 시작하기 -서버만들기 Flask 패키지 설치! 파일 > 설정 > 인터프리터 Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둡니다) ㄴtemplates 폴더 (html파일을 넣어둡니다) ㄴapp.py 파일 이렇게 세 개를 만들어두고 시작해야한다. 이제 각 폴더의 역할이 있다. templates 폴더의 역할은 HTML 파일을 담아두고, 불러오는 역할을 한다. ... TILFlask스파르타코딩항해99Flask 220415 useMemo 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수 react 생태계에서 렌더링 최적화를 위해 사용되는 Hook 메모이제이션이란 ❓ 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 리액트의 메모이제이션에는 특징이 있다 바로 이전의 값만 메모이제이션 한다는 것 메모이... React항해99TILReact WIL. 6th week 6주차 미니프로젝트 주차는 협업이 어떻게 이뤄지는지 알 수 있는 주차였다. 전 주차까지는 파이어베이스를 이용하여 웹사이트를 만들었지만 이번에는 백엔드에서 만든 서버와 프론트에서 만든 클라이언트 페이지가 상호작용하는 사이트를 만들었습니다. 이 formdata로 가져오는게 문제가 있어서 삽질을 하다가 결국 이미지 뿐만 아니라 모든 데이터를 formdata로 묶어서 가져올 수 있다는 것을 발견하여... 항해99WILWIL TIL +36일차 어제 쿠키를 이용해서 리덕스로 로그인까지 구현해 놓고 오늘 API와 연동을 해봐야겠다고 다짐..! 팀원 백엔드 분들이 작성해준 스웨거를 axios로 연결하니 데이터는 받아와지는데 아무값이나 넣어도 로그인이 되어버린다...! 그래서 요게 잘 작동이 되는건가...? 음 근데 분명히 axios 잘 작성한 거 같은데.. 값도 잘 넘겨줬구... 좀 끙끙대다가 여러 사람들의 도움을 받았는데 알고보니 i... 항해99항해99 2022.04.09 - 한 눈에도 빛나는 이력서 쓰기, 정원희연사님 특강정리 어떻게 하면 좋은 이력서, 선택받는 이력서가 될 수 있을까? 서류 전형에서 수 많은 이력서 중 다음 단계로 보내지지 않은 이력서가 정말 많음 담당자 입장에서 매력적인 이력서 이력서 내용이 면접 때 어떤 질문으로 이어질까? -> 내가 잘 대답할 수 있는 내용 위주로 작성 한 일에 대한 성과를 모르거나, 숫자로 표현할 수 없다. 내용에 대한 질문에 대답할 자신이 없다. 2. 탈락하는 이력서, 합... 이력서항해99특강이력서 220318 React DOM 'Document Object Model' 의 줄임말 HTML 문서의 요소들에 쉽게 접근하기 위해 계층으로 표현된 인터페이스 HTML 단위 (요소) 하나하나를 객체로 생각하는 모델 텍스트도 객체이고, 버튼도, 태그와 같은 element들도 객체가 될 수 있다. 위 코드에서 div는 h3, p, btn태그를 포함하고 있다 여기서 div 태그는 하위 요소들의 부모 요소라고 하고 div에 속해 있... React항해99TILReact [TIL] d+11 오늘 CS스터디는 내가 발표할 차례라 열심히 준비를 했는데, 갑자기 4챕터부터 난데없이 과학시간이 돼버려서 당황스러웠다 ㅋㅋㅋ 간만에 학교 다닐 때 생각나서 재밌었음... 오늘 풀지 못한 문제 점수 count를 올릴 때 왜 조건문에서 인덱스를 길이로 나눈 나머지 값을 구하는 건가 했는데, 아주 간단한 이유였다. 배열 내의 인덱스를 돌고 있을 땐 괜찮지만, 배열에 존재하는 인덱스를 넘어섰을 때... 항해99hh99알고리즘hh99 [D+98] 항해99 11일차(1) 오늘은 알고리즘 테스트 날! #1번 #2번 JavaScript 답안 포맷... 항해99JavaScriptTILJavaScript [D+98] 항해99 11일차 (2) _매서드정리 한주간 진행 된 알고리즘주차가 마무리됐다. 그제 모의고사에서 리플잇으로 문제푸는 법을 약간 헤맸어서 자신감이 떨어진 상태였는데 (그냥 콘솔만 밑에다 더 찍어주면 되는데 안쓰니까 그 쉬운것도 몰랐음) 오늘 봤던 시험 끝나자마자 잘보든 못보든 몸이 바로 늘어진다.😭 (후일담_알고리즘 테스트에 우리반 전원이 통과했다는 소식!! 멋져!🎊🎉🎊🎉) 오늘은 지난 일주일 간 알고리즘을 풀면서 30문제 정도... 항해99JavaScriptTILJavaScript [TIL] d+12 이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 원본 배열을 훼손하지 않는다. 원본 배열에 다른 배열을 더해주는 함수. 원본 배열을 훼손하지 않는다. 1. NVM 설치 (node.js 버전 관리 툴) - 버전 확인 : nvm --version - node.js 설치 : nvm install [설치할 버전 넘버] - 노드 버전 확인 : n... 항해99리액트hh99TILReactReact 220318 React JSX 공식 문서에는 문자열도 아니고 태그도 아니며 자바스크립트를 확장한 문법이라고 한다 이해하기 쉽게 설명하면 HTML을 품은 JS === JSX! 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트의 문법으로 변환된다 바벨은 JSX를 React.createElement( ) 호출로 컴파일한다 리액트에서는 JSX 문법을 사용하여 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다... React항해99TILReact WIL | 항해99 2주차 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있습니다. 실제 세상에서 사물의 개념을 프로그램에서 객체라고 볼 수 있습니다. 그리고 그 사람은 이름 혹은 나이, 주민등록번호 등의 정보를 갖고 있고, 걷거나 뛸 수 있습니다. 그리고 객체는 이름, 나이 혹은 주민등록번호와 같이 상태(state)를 갖고 있으며, 걷거나 뛰는 행위(behavior)를 할 수 있습니다. 사람 뿐만 아니라 자동... WIL항해99WIL 220320 React 바인딩 리액트에서의 바인딩을 알기 전에 자바스크립트에서의 this와 바인딩을 알고 있어야 한다 Javascript this 자바스크립트에서 객체 안 메서드에서 this는 그 메서드가 포함된 object를 의미 여기서 this는 A를 의미하며, A의 prop인 Hello를 받아 출력한다. 그러나 밑의 예제처럼 A.sayHello를 B에 할당하고 이를 출력해보면 undefined가 출력된다 이유는 th... React항해99TILReact 220322 리액트 Router 리액트는 SPA (Single Page Application) 방식으로, 새로운 페이지를 로드하지 않고 하나의 페이지 않에서 필요한 데이터만 가져온다 MPA (Multi Page Application) 는 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 방식이다 사용자가 회원가입 버튼을 누르면, 새로운 회원가입 html로 이동하는 방식 SPA 방식은 하나의 html 페이지 안에서 사용자... React항해99TILReact [항해99] 3/20 WIL (2) 두번째 Keyword 1. JavaScript의 ES란? Javascript의 탄생과정과 연관이 있는데, ECMAScript가 표준이고, Javascript는 이 표준의 구현체이다. 이때 ES는 ECMAScript의 약어이다. 즉 ES는 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격이다. 흔히 알고 있는 ES6(2015)은 최신 버전이 아니다. 이후 공개된 버전이 꽤 있다. 특히... React항해99WIL스파르타코딩클럽React 항해99 | [WIL] 2주차 - 객체지향 프로그래밍, JVM 객체지향은 우리가 살고 있는 세계를 모델링으로 한 개발 방법으로 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위인 "객체"들의 모임으로 바라보는 것이다. 반면에 객체지향은 순서와 상관없이 독립적으로 객체들이 상호작용하여 설계할 수 있으며 하나의 객체에 오류가 있어도 다른 객체에는 영향을 미치지 않게 된다. 클래스(Class) 객체를 생성하는 것으로 속성과 메서드를 정... Java항해99WILJava WIL 2주차 회고록 그동안 내가 알던 (유튜브)알고리즘은 잊자 이번 주는 알고리즘을 달리는 주차였는데 사실 알고리즘은 살면서 처음 풀어보는 것이었다... 나 같은 초심자들은 전부 그랬다는 말을 듣고 조금 위안이 되었다 ㅎㅎ (왕단순) 첫날은 각자 팀원끼리 한문제를 맡고 어떻게 풀었는지 공유하는 시간을 가졌는데 아직 자바스크립트 문법에 익숙하지 못한 나는 그냥 수학 문제 풀듯이.. 초중딩 수학 총동원해서 풀었다.... WIL항해99WIL 220330 신규 아이디 추천 팀원들과 같이 풀어본 풀이 1단계 - 소문자변환 2단계 - 특수문자 제거 3단계 - 연속되는 마침표 제거 4단계 - 처음과 끝 마침표 제거 5단계 - 빈 문자열이면 a 추가 6단계 - 15자 넘어가면 자르기 7단계 - 문자열이 2자 이하라면 마지막 글자 붙이면서 3자로 만들어주기... 프로그래머스항해99TILTIL WIL 2 알고리즘과 항해톡 그리고 JavaScript 엉엉 ㅠ0ㅠ 행렬을 몰라서 그랬다기보다 몰라도 문제를 잘 읽으면 이해가 됐을 법도 한데... 유튜브 강의를 보면서... 많이 풀어보고 문제를 어떻게 식으로 표현할 지 고민해야겠다. 자바스크립트 메소드도 공부하고, 콜백 함수에 대해서도 공부하고... 또 CS스터디에서도 블로그를 공유해주셔서 (그저 빛...:amaze:) 도움이 많이 됐다. 유튜브 ㅠ0ㅠ 기쁘다. 알고리즘조에서 계속 스터디를 하... 항해99JavaScript항해톡알고리즘JavaScript 220323 문자열 내 마음대로 정렬하기 나는 못 푼, 다른 팀원의 해설 빈 배열 2개를 만든다 반복문을 이용해서 각 문자열의 n번째 글자를 strings[i]의 맨 앞에 붙여주고, 빈 배열 중 하나인 strings2에 넣는다 채운 배열을 sort 함수를 사용해서 정렬한다 반복문으로 strings2의 요소들의 맨 앞글자를 지워주고 빈 배열인 answer에 넣고 반환한다 다른 사람의 풀이... 프로그래머스항해99TILTIL 항해99 개발일지 - 미니 프로젝트(2) ✅ "IntroDog" 은 애견인들의 의견을 교류할 수 있는 사이트입니다. ✅ 반려견을 키우면서 생기는 질문, 일상 등 사소한 것까지 다른 이들과 함께 교류할 수 있습니다! 레이아웃 구성 + 메인 페이지 + 검색 기능 구현 COMMUNITY 페이지 + 글 작성/삭제 + 댓글 작성/삭제 기능 구현 전반적인 백엔드 작업 로그인 + 회원가입 기능 구현 1. 토큰 인증 구현 3. 댓글 등록, 삭제 ... 미니 프로젝트항해99미니 프로젝트 [TIL] d+18 export export default 한 파일 내에 하나의 개체만 있다면 그냥 export default로 내보내면 되지만, 여러 객체가 있는 경우 export를 사용하여 원하는 객체를 골라 내보낼 수 있는 것 같다. (export { name1, name2, name3 }; 같은 식으로...) export default는 객체명을 임의로 설정할 수도 있다구 한다. 버튼 라우팅 histor... React항해99hh99React 이전 기사 보기