분류 전체보기
CORS란 무엇인가?
CORS란 무엇인가?
2022.08.16CORS란? 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처(프로토콜, 도메인, 포트번호)의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행한다. 쉽게 말해서 도메인, 프로토콜, 포트 번호가 하나라도 다를 경우에 출처가 다 른 교차 출처(Cross-Origin)라고 판단되며 브라우저에서는 보안 때문에 Cross-Origin HTTP 요청을 제한한다. 권한을 부여 받기 위한 Cross-Origin 요청은 서버에서 허가를 받아야 하는데, HTTP-header를 통해서 받을 수 ..
URL 이해하기
URL 이해하기
2022.08.15URL 이란 URL(Uniform Resource Locator)은 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 쉽게 말하면 웹 페이지를 찾기 위한 주소를 말한다. 흔히 웹 사이트 주소로 알고 있지만, URL은 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크 상 자원을 모두 나타낼 수 있다. 그 주소에 접속하려면 해당 URL에 맞는 프로토콜을 알아야 하고, 그와 동일한 프로토콜에 접속해야 한다. FTP는 FTP 클라이언트를 이용해야 하고, HTTP인 경우에는 웹 브라우저를 이용해야 한다. (출처 : 나무위키) URL 구조 이해하기 구성 요소 스킴(scheme) 호스트 주소(host) 포트 번호(port) 경로(path) 쿼리(query) 프래그먼트(fragment) 스킴 사용할 프로토콜을 의..
절차지향, 객체지향, 함수형 프로그래밍
절차지향, 객체지향, 함수형 프로그래밍
2022.08.04프로그래밍 패러다임 명령형 프로그래밍 : 무엇(What)을 할 것인지 나타내기보다 어떻게(How)할 것인지 설명하는 방식 절차지향 프로그래밍 객체지향 프로그래밍 선언형 프로그래밍 : 어떻게(How)할 것인지 나타내기보다 무엇(What)을 할 것인지 설명하는 방식 함수형 프로그래밍 명령형 프로그래밍 명령형 프로그래밍을 자동차 공장을 예시로 설명하자면 프레스 공정, 차체 조립 공정, 도장 공정, 의장 조립 공정, 검사/검수를 개발자가 심사숙고해서 체계적인 체제를 설계 후 작업하여 자동차를 만드는 사고이며, 자동차를 '어떻게' 만드는지에 초점이 맞춰져 있다. ex) "프레스 공정, 차체 조립 공정, 도장 공정, 의장 조립 공정은 각 역할을 완료하면 다음 공정으로 넘겨서 자동차를 생산해라" 선언형 프로그래밍 ..
위코드 수료, 마지막 회고
위코드 수료, 마지막 회고
2022.08.01위코드를 수강하는 동안 많은 회고를 남겼다. 마지막 회고는 생각을 정리하는 시간을 가지고자 한다. 기간 : 22.04.25 ~ 22.07.15 장소 : 위워크 선릉 2호점 무엇을 위해 부트캠프로 향했고 무엇을 얻을 수 있었는가? 개발자가 되기 위한 꿈을 가지고 예전에 국비교육을 이수한 적이 있었다. 국비교육을 수강하면서 프로젝트를 진행했는데 기간 내에 결과물을 보이기 위해서 개발자 도구에서 코드를 베껴오는데 시간을 쏟았다. 결국 내가 하고 있는 방식에 대해서 회의감이 들었고, 이렇게 해서는 내가 생각하는 개발자가 아니라는 결론을 내렸다. 그렇게 잘못된 방법으로 고생했던 프론트엔드에 관심이 생겼고, 다시 제대로 도전하고자 오프라인 부트캠프를 알아보게 되었다. 그러던 중 '위코드'를 알게 되었고, 물류센터에..
위코드 기업협업 회고
위코드 기업협업 회고
2022.07.26기업 협업 내용 식물관리 앱 서비스를 하고 있는 스타트업에서 인턴쉽(`22.06.20 ~ `22.07.15) 진행 Front-end 4명 참가 (각자 다른 UI 및 기능 구현) React Native를 활용한 앱 개발 Sourcetree를 활용한 Git-flow 경험 AI 식물 진단을 위한 카메라 UI 및 기능 구현 식물 진단 카메라 시연 식물 진단 카메라 소개 사진을 바탕으로 식물을 분석해주는 'AI 식물 진단' API를 사용하기에 앞서 사용자가 사용할 카메라 개발 'react-native-vision-camera' 라이브러리를 활용한 카메라 구현 https://github.com/mrousavy/react-native-vision-camera Github 코드를 보며 라이브러리를 사용하는 방법을 터득..
위코드 8주차 회고 - 2차 프로젝트 아워트립
위코드 8주차 회고 - 2차 프로젝트 아워트립
2022.06.19프로젝트 주제 : 여행 예약 플랫폼 사이트 마이리얼트립을 모티브 한 아워트립 기간 : 2022/06/07 ~ 2022/06/16 (10일) 코드 : 깃허브 바로가기 프로젝트 팀 팀명 : 아워트립 Front-end 손가영 : Nav, Footer, 마이페이지, 상세페이지 유하은 : 메인 페이지 윤경연 : 항공편 리스트 페이지, 결제 페이지 최현민 : 소셜 로그인 페이지, 로딩 페이지 Back-end 정병휘 최바다 개발 도구 🛠 Front-end HTML5 Styled-Component JavaScript(ES6) React.js react-router slick (library) Back-end Python Django MySQL Bcrypt pyjwt RESTful Collaboration Tools G..
[React] 카카오 소셜 로그인 구현하기
[React] 카카오 소셜 로그인 구현하기
2022.06.11웹 클론 코딩을 하면서 카카오 소셜 로그인 부분을 맡게 되었는데, 카카오 공식문서와 수많은 구글링을 통해서 구현하는데 2~3일 시간이 걸렸던 것 같다. 웹 카카오 로그인을 구현하는 방식은 크게 2가지가 있다. 하나는 JavaScript SDK를 이용하는 방식, 다른 하나는 REST API를 이용하는 방식인데 나는 REST API 방식을 이용하기로 했다. 카카오 로그인을 구현하면서 삽질을 굉장히 많이 했는데, 다음번에는 쉽게 구현해낼 수 있도록 글로 정리하고자 한다. kakao developers 소셜 로그인을 처음 구현하려면 카카오 로그인 전체적인 흐름을 우선 이해해야 한다. 이 모든 내용은 kakao developers 공식문서에 담겨 있으며 꼼꼼히 읽어 보아야 한다. 서비스를 등록하는 법부터 시작해서..
Styled Component 사용하기
Styled Component 사용하기
2022.06.08📝 개요 React, Vue, Angular와 같은 라이브러리, 프레임워크가 인기를 끌면서 재활용 가능한 컴포넌트 기반 개발이 주류가 되고 있다. 여러 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모두 담는 코드를 많이 사용하고 있다. React는 이미 JSX를 통해 HTML을 포함하고 있고, Styled Component 라이브러리를 사용하여 CSS를 JavaScript에 삽입할 수 있다. 설치 To download styled-components run => npm install --save styled-components SASS는 불충분? CSS 클래스명에 대한 고민 문제 가이드가 없으면 복잡해지는 구조 방대한 스타일 정보로 인한 스크롤 지옥 CSS 클래스 조건부 ..
위코드 6주차 회고 - 1차 프로젝트 남바완
위코드 6주차 회고 - 1차 프로젝트 남바완
2022.06.06프로젝트 주제 : 쿡킷 사이트 클론 코딩 - 밀키트 판매 서비스 (e-commers) 기간 : 2022/05/23 ~ 2022/06/02 (11일) 프로젝트 팀 🌼 팀명 : 남바완(Namba1) Front-end 김혜수 : 회원가입 페이지, 로그인 페이지, Footer 박주영 : 리뷰 페이지 천은별 : 메뉴 리스트 페이지, 상품 상세 페이지 최현민 : 메인 페이지, Nav Back-end 임한구 : 모든 기능 API 구현 개발 도구 🛠 Front-end : HTML / CSS / SCSS / JavaScript(ES6) / React.js Back-end : Python / Django Web Framework / MySQL / Bcrypt / JWT 협업 도구 : Git / Github / Trello..