WIL [항해99] 4/10 WIL (5) 다섯번째 Keyword Axios Axios란? - Axios는 node.js와 브라우저를 위한 Promise기반 HTTP클라이언트이다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 쉽게 말해 벡엔드와 프론트엔드가 통신을 쉽게 하기 위해 ajax와 더불어 사용한다. 사용방법 axios 객체는 아래와 ... ReactWIL항해99스파르타코딩클럽React [패스트캠퍼스 프론트엔드 과정] 5~10일차(2주차 - 2022.04.15~20) 시맨틱 웹이란 무엇인가? 시맨틱 웹은 의미로 적인 웹이라는 뜻으로 웹 상의 정보에 잘 정의된 의미 를 부여함으로써 사람뿐만 아니라 컴퓨터도 쉽게 문서의 의미를 자동화 하여 처리 할 수 있도록 한 것이다. 시맨틱 웹의 목적 시맨틱 웹의 목적은 검색엔진이 크롤링 할 때 , HTML 코드 만으로 그 의미를 인지하게 하기 위함이다. HTML 로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사... WIL국비지원프론트엔드WIL 내일배움캠프 15주차 주간 회고(WIL) URL, HTTP, HTTPS URL이란, 인터넷 상에서 사이트(HTML 페이지, CSS 문서, 이미지 등)같은 자원의 위치를 나타내는 것이다. URL 구조를 보면 맨 앞에 [통신 프로토콜] http가 있는데, http인 사이트도 있고 https인 사이트도 있다. HTTP(HyperText Tranfer Protocol) 앞서 말했듯이 HTTP는 월드 와이드 웹(WWW) 상에서 정보를 주고 ... 주간회고WILWIL WIL. 6th week 6주차 미니프로젝트 주차는 협업이 어떻게 이뤄지는지 알 수 있는 주차였다. 전 주차까지는 파이어베이스를 이용하여 웹사이트를 만들었지만 이번에는 백엔드에서 만든 서버와 프론트에서 만든 클라이언트 페이지가 상호작용하는 사이트를 만들었습니다. 이 formdata로 가져오는게 문제가 있어서 삽질을 하다가 결국 이미지 뿐만 아니라 모든 데이터를 formdata로 묶어서 가져올 수 있다는 것을 발견하여... 항해99WILWIL Java와 예외 처리 Exception : Checked 예외 RuntimeException : Unchecked 예외 Checked 예외를 선언하면 throws 예외를 필수로 선언해야 하지만 컴파일 타임에 오류를 잡아 주기 때문에 안전하다는 장점이 있다. 하지만 실무에서는 Checked 예외가 발생하면 받아서 unchecked 예외로 변환한 뒤 던져준다. 실무에서는 어떠한 이유들로 Checked 예외보다 Unc... WILSpringJavaJava [정글] WEEK02 - WIL : 컴퓨팅사고로의 전환 2 이번 2주차에는 이분탐색 분할정복법 스택 큐 우선순위큐 에 대한 내용들을 공부하고 관련 문제들을 풀어보았다. 간단하게 개념 및 구현코드로 정리해보려고 한다. 이분탐색 (Binary Search) 정렬되어있는 리스트에서 원하는 값을 빠르게 찾기 위한 알고리즘으로, 리스트를 절반으로 나누고 중간에 위치한 값과 원하는 값을 비교하여 범위를 좁혀가는 과정으로 진행된다. 분할정복법 (Devide an... 정글알고리즘WILweek02WIL WIL | 항해99 2주차 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있습니다. 실제 세상에서 사물의 개념을 프로그램에서 객체라고 볼 수 있습니다. 그리고 그 사람은 이름 혹은 나이, 주민등록번호 등의 정보를 갖고 있고, 걷거나 뛸 수 있습니다. 그리고 객체는 이름, 나이 혹은 주민등록번호와 같이 상태(state)를 갖고 있으며, 걷거나 뛰는 행위(behavior)를 할 수 있습니다. 사람 뿐만 아니라 자동... WIL항해99WIL WIT 3주차 회고록 드디어 악명 높은(?) 주특기 주차가 왔다. 나는 주특기로 리액트를 선택했고 미리 선행을 하지 않아도 괜찮다는 말만 듣고 정말 리액트에 대해 아무것도 모른채로.. 수행해야하는 것은 메인으로 개인프로젝트였는데 일주일의 평점을 남기는 사이트를 만들면 되었다. ✏️ 작업 과정 나 정말 미쵸벌겠어 아직도 이해 안가는 것이 한가득...근데 전부 이해하고 넘어가려면 영생을 살아야할 것 같아서 일단 하면... WIL항해99WIL 항해99 Weekly I learned <실전 프로젝트 편> <websocket Stomp 실시간 초대알림 구현> 따라서 메세지를 전송하고 / 받아서 처리하는 부분이 확실하게 구조로 정해져있기 때문에 명확하게 인지하고 개발할 수 있다. 우체통(Topic)이 있다면 집배원(Publisher)이 신문을 우체통에 배달하는 행위가 있고, 우체통에 신문이 배달되는 것을 기다렸다가 빼서 보는 구독자(Subscriber)의 행위가 있다. 이때 구독자는 다수가 될 수 있다. 클라이언트는 SEND, SUBSCRIBE 명... WILWIL 항해99 - Week03 회고 이번주는 주특기 입문주였다. 아예 처음부터 맨땅에 헤딩하는 기분으로 무엇부터 해야할 지 모르는 상태로 시작하다보니 막막하기도 하고 갑자기 그냥 눈물이 막 나기도 했다 😭 2. 상세페이지는 요일별페이지로 들어가는 것 3. 점수 선택하기. (메인페이지로 가면 선택한 점수 반영은 안됨) 처음엔 반복문없이 페이지 7개에 동그라미와 세모도 쫙 그려버렸는데 아무리 생각해도 그 방법은 틀린 것 같아서 5... WIL항해99WIL [엘리스AI트랙4기] 2주차 개발일지-자바스크립트 I (아직 미완성입니다... 작성 중...) 전체 목차 중요한 부분 중요한 부분 소제목 전체 목차 중요한 부분 중요한 부분 소제목 전체 목차 중요한 부분 중요한 부분 소제목 전체 목차 중요한 부분 중요한 부분 소제목 중요한 부분 중요한 부분 소제목 고민한 내용 소제목 한 줄 평 2주차를 11주차에 적는 나... 미루기의 신으로 임명... WIL엘리스AI트랙4기WIL 부트스트랩으로 포스팅 박스 제작하기 완성본 이 포스팅 박스를 부트스트랩으로 만들어보았다. 작년에 부트스트랩 공부했을 때 도대체가 무슨 말인지 몰라서 많이 헤맸던 경험이 있다.. 원하는 템플릿만 잘 찾아서 넣으면 되는데...그게 그렇게 어려웠나보다.. 1.큰 박스 먼저 만들기 하나의 div 클래스를 만들어 한 묶음로 만들어주었다. 2.영화URL 부트스트랩에 있는 이메일 템플릿을 활용하여 코드를 가져왔다. 가져온 후에는 적절하게 ... 항해99스파르타코딩bootstrapTILWILTIL 22.04.05 WIL Spring & IoC & DI State/Behavior State and Behavior 다른 엔터티와 구별할 수 있는 식별자를 가지고 있고 시간의 흐름에 따라 지속적으로 변경이 되는 객체 어떤 객체가 다른 객체를 필요로 할때 , 다른 객체와 협력할 때 의존성이 생기게 된다. 자바 어플리케이션이 개발된 초반에는 개발자가 제어권을 가지고 있어, 자바 객체를 생성하고 의존성 주입 등이 개발자가 직접 수행했다고 한다. IoC... WILdev-courseSpringSpring 22.04.04 Maven & Gradle Maven Dependency 관리 Maven Coordinates version : 프로젝트 버전 ex) 5.2.15.RELEASE, 1.0-SNAPSHOT Transitive Dependencies(의존성의 의존성) 컴팡리 의존성은 프로젝트의 컴파일, 테스트 실행에 라이브러리가 필요할 때 사용 provided : 일반적으로 JDK 또는 컨테이너가 해당 라이브러리를 제공할 때 설정. 즉 웹... mavenSpringdev-coursegradleWILSpring [정글] WEEK00 - WIL : JWT, jinja2 JWT는 이 로그인/로그아웃 기능을 구현하는 방법 중 하나이다. 회원의 로그인 상태를 유지하기 위해서는 일단 Client에서는 로그인 되었다는 정보를 가지고 있어야 하고 Server 또한 이 사용자가 로그인에 성공했다는 정보를 가지고 있어야 한다. Client에서는 이 data를 browser의 쿠키에 저장했다가 Server에 요청을 보낼때마다 쿠키를 다시 전달하고 Server에서 이 쿠키와... WILweek00jinja2로그인정글개발일지JWTJWT WIL(항해99 3주차), 라이프사이클, react hooks React의 R자도 몰랐던 내가 항해99 3주차 주특기 심화주차를 수강하며 이번 주차의 키워드인 라이프사이클과 react hooks에 대해 배운 것과 느낀점에 대해 기록하려고 남기는 글. 주특기 심화 진행기간: 2021-09-30 ~ 2021-10-08 (진행 중) 라이프사이클이란 컴포넌트가 렌더링 되고부터 사라지는 순간까지 즉, 말 그대로 컴포넌트의 생명주기를 뜻한다. 클래스형 컴포넌트에서... lifecycleWILReact HooksReact Hooks WIL#4 ) Nov. 2nd Week (2) CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다. .html 파일과 .css 파일을 연결시킬 수 있다. .html, .css, .js 세 종류의 파일을 연결하는 방법 HTML tag 영역에 head tag와 body tag가 포함되어 있다. [html lang="en"] : 언어지정을 할 수 있다. fetching 시간을 절약할 수 있으나, JS가 DOM 요소를 조... keywordsWILNov2Nov2 개발일지 2주차 총 정리 2주차: jQuery, Ajax 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다. [코드스니펫] jQuery CDN 수업 자료를 잘 따라온 분이라면, 나홀로메모장 코드에 이미 다음과 같이 임포트 되어있을거예요. css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이... 개발일지jqueryajaxjsonWILWIL
[항해99] 4/10 WIL (5) 다섯번째 Keyword Axios Axios란? - Axios는 node.js와 브라우저를 위한 Promise기반 HTTP클라이언트이다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 쉽게 말해 벡엔드와 프론트엔드가 통신을 쉽게 하기 위해 ajax와 더불어 사용한다. 사용방법 axios 객체는 아래와 ... ReactWIL항해99스파르타코딩클럽React [패스트캠퍼스 프론트엔드 과정] 5~10일차(2주차 - 2022.04.15~20) 시맨틱 웹이란 무엇인가? 시맨틱 웹은 의미로 적인 웹이라는 뜻으로 웹 상의 정보에 잘 정의된 의미 를 부여함으로써 사람뿐만 아니라 컴퓨터도 쉽게 문서의 의미를 자동화 하여 처리 할 수 있도록 한 것이다. 시맨틱 웹의 목적 시맨틱 웹의 목적은 검색엔진이 크롤링 할 때 , HTML 코드 만으로 그 의미를 인지하게 하기 위함이다. HTML 로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사... WIL국비지원프론트엔드WIL 내일배움캠프 15주차 주간 회고(WIL) URL, HTTP, HTTPS URL이란, 인터넷 상에서 사이트(HTML 페이지, CSS 문서, 이미지 등)같은 자원의 위치를 나타내는 것이다. URL 구조를 보면 맨 앞에 [통신 프로토콜] http가 있는데, http인 사이트도 있고 https인 사이트도 있다. HTTP(HyperText Tranfer Protocol) 앞서 말했듯이 HTTP는 월드 와이드 웹(WWW) 상에서 정보를 주고 ... 주간회고WILWIL WIL. 6th week 6주차 미니프로젝트 주차는 협업이 어떻게 이뤄지는지 알 수 있는 주차였다. 전 주차까지는 파이어베이스를 이용하여 웹사이트를 만들었지만 이번에는 백엔드에서 만든 서버와 프론트에서 만든 클라이언트 페이지가 상호작용하는 사이트를 만들었습니다. 이 formdata로 가져오는게 문제가 있어서 삽질을 하다가 결국 이미지 뿐만 아니라 모든 데이터를 formdata로 묶어서 가져올 수 있다는 것을 발견하여... 항해99WILWIL Java와 예외 처리 Exception : Checked 예외 RuntimeException : Unchecked 예외 Checked 예외를 선언하면 throws 예외를 필수로 선언해야 하지만 컴파일 타임에 오류를 잡아 주기 때문에 안전하다는 장점이 있다. 하지만 실무에서는 Checked 예외가 발생하면 받아서 unchecked 예외로 변환한 뒤 던져준다. 실무에서는 어떠한 이유들로 Checked 예외보다 Unc... WILSpringJavaJava [정글] WEEK02 - WIL : 컴퓨팅사고로의 전환 2 이번 2주차에는 이분탐색 분할정복법 스택 큐 우선순위큐 에 대한 내용들을 공부하고 관련 문제들을 풀어보았다. 간단하게 개념 및 구현코드로 정리해보려고 한다. 이분탐색 (Binary Search) 정렬되어있는 리스트에서 원하는 값을 빠르게 찾기 위한 알고리즘으로, 리스트를 절반으로 나누고 중간에 위치한 값과 원하는 값을 비교하여 범위를 좁혀가는 과정으로 진행된다. 분할정복법 (Devide an... 정글알고리즘WILweek02WIL WIL | 항해99 2주차 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있습니다. 실제 세상에서 사물의 개념을 프로그램에서 객체라고 볼 수 있습니다. 그리고 그 사람은 이름 혹은 나이, 주민등록번호 등의 정보를 갖고 있고, 걷거나 뛸 수 있습니다. 그리고 객체는 이름, 나이 혹은 주민등록번호와 같이 상태(state)를 갖고 있으며, 걷거나 뛰는 행위(behavior)를 할 수 있습니다. 사람 뿐만 아니라 자동... WIL항해99WIL WIT 3주차 회고록 드디어 악명 높은(?) 주특기 주차가 왔다. 나는 주특기로 리액트를 선택했고 미리 선행을 하지 않아도 괜찮다는 말만 듣고 정말 리액트에 대해 아무것도 모른채로.. 수행해야하는 것은 메인으로 개인프로젝트였는데 일주일의 평점을 남기는 사이트를 만들면 되었다. ✏️ 작업 과정 나 정말 미쵸벌겠어 아직도 이해 안가는 것이 한가득...근데 전부 이해하고 넘어가려면 영생을 살아야할 것 같아서 일단 하면... WIL항해99WIL 항해99 Weekly I learned <실전 프로젝트 편> <websocket Stomp 실시간 초대알림 구현> 따라서 메세지를 전송하고 / 받아서 처리하는 부분이 확실하게 구조로 정해져있기 때문에 명확하게 인지하고 개발할 수 있다. 우체통(Topic)이 있다면 집배원(Publisher)이 신문을 우체통에 배달하는 행위가 있고, 우체통에 신문이 배달되는 것을 기다렸다가 빼서 보는 구독자(Subscriber)의 행위가 있다. 이때 구독자는 다수가 될 수 있다. 클라이언트는 SEND, SUBSCRIBE 명... WILWIL 항해99 - Week03 회고 이번주는 주특기 입문주였다. 아예 처음부터 맨땅에 헤딩하는 기분으로 무엇부터 해야할 지 모르는 상태로 시작하다보니 막막하기도 하고 갑자기 그냥 눈물이 막 나기도 했다 😭 2. 상세페이지는 요일별페이지로 들어가는 것 3. 점수 선택하기. (메인페이지로 가면 선택한 점수 반영은 안됨) 처음엔 반복문없이 페이지 7개에 동그라미와 세모도 쫙 그려버렸는데 아무리 생각해도 그 방법은 틀린 것 같아서 5... WIL항해99WIL [엘리스AI트랙4기] 2주차 개발일지-자바스크립트 I (아직 미완성입니다... 작성 중...) 전체 목차 중요한 부분 중요한 부분 소제목 전체 목차 중요한 부분 중요한 부분 소제목 전체 목차 중요한 부분 중요한 부분 소제목 전체 목차 중요한 부분 중요한 부분 소제목 중요한 부분 중요한 부분 소제목 고민한 내용 소제목 한 줄 평 2주차를 11주차에 적는 나... 미루기의 신으로 임명... WIL엘리스AI트랙4기WIL 부트스트랩으로 포스팅 박스 제작하기 완성본 이 포스팅 박스를 부트스트랩으로 만들어보았다. 작년에 부트스트랩 공부했을 때 도대체가 무슨 말인지 몰라서 많이 헤맸던 경험이 있다.. 원하는 템플릿만 잘 찾아서 넣으면 되는데...그게 그렇게 어려웠나보다.. 1.큰 박스 먼저 만들기 하나의 div 클래스를 만들어 한 묶음로 만들어주었다. 2.영화URL 부트스트랩에 있는 이메일 템플릿을 활용하여 코드를 가져왔다. 가져온 후에는 적절하게 ... 항해99스파르타코딩bootstrapTILWILTIL 22.04.05 WIL Spring & IoC & DI State/Behavior State and Behavior 다른 엔터티와 구별할 수 있는 식별자를 가지고 있고 시간의 흐름에 따라 지속적으로 변경이 되는 객체 어떤 객체가 다른 객체를 필요로 할때 , 다른 객체와 협력할 때 의존성이 생기게 된다. 자바 어플리케이션이 개발된 초반에는 개발자가 제어권을 가지고 있어, 자바 객체를 생성하고 의존성 주입 등이 개발자가 직접 수행했다고 한다. IoC... WILdev-courseSpringSpring 22.04.04 Maven & Gradle Maven Dependency 관리 Maven Coordinates version : 프로젝트 버전 ex) 5.2.15.RELEASE, 1.0-SNAPSHOT Transitive Dependencies(의존성의 의존성) 컴팡리 의존성은 프로젝트의 컴파일, 테스트 실행에 라이브러리가 필요할 때 사용 provided : 일반적으로 JDK 또는 컨테이너가 해당 라이브러리를 제공할 때 설정. 즉 웹... mavenSpringdev-coursegradleWILSpring [정글] WEEK00 - WIL : JWT, jinja2 JWT는 이 로그인/로그아웃 기능을 구현하는 방법 중 하나이다. 회원의 로그인 상태를 유지하기 위해서는 일단 Client에서는 로그인 되었다는 정보를 가지고 있어야 하고 Server 또한 이 사용자가 로그인에 성공했다는 정보를 가지고 있어야 한다. Client에서는 이 data를 browser의 쿠키에 저장했다가 Server에 요청을 보낼때마다 쿠키를 다시 전달하고 Server에서 이 쿠키와... WILweek00jinja2로그인정글개발일지JWTJWT WIL(항해99 3주차), 라이프사이클, react hooks React의 R자도 몰랐던 내가 항해99 3주차 주특기 심화주차를 수강하며 이번 주차의 키워드인 라이프사이클과 react hooks에 대해 배운 것과 느낀점에 대해 기록하려고 남기는 글. 주특기 심화 진행기간: 2021-09-30 ~ 2021-10-08 (진행 중) 라이프사이클이란 컴포넌트가 렌더링 되고부터 사라지는 순간까지 즉, 말 그대로 컴포넌트의 생명주기를 뜻한다. 클래스형 컴포넌트에서... lifecycleWILReact HooksReact Hooks WIL#4 ) Nov. 2nd Week (2) CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다. .html 파일과 .css 파일을 연결시킬 수 있다. .html, .css, .js 세 종류의 파일을 연결하는 방법 HTML tag 영역에 head tag와 body tag가 포함되어 있다. [html lang="en"] : 언어지정을 할 수 있다. fetching 시간을 절약할 수 있으나, JS가 DOM 요소를 조... keywordsWILNov2Nov2 개발일지 2주차 총 정리 2주차: jQuery, Ajax 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다. [코드스니펫] jQuery CDN 수업 자료를 잘 따라온 분이라면, 나홀로메모장 코드에 이미 다음과 같이 임포트 되어있을거예요. css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이... 개발일지jqueryajaxjsonWILWIL