전체 글
Vue.js + Firebase로 페이스북(facebook) 로그인 연동하기
Vue.js + Firebase로 페이스북(facebook) 로그인 연동하기 지난 회원가입/로그인 구현하기에서 페이스북 로그인 기능을 추가하는 게시물이다. Vue.js + Firebase로 이메일 회원가입&로그인 구현 우선, 기존의 파이어베이스 콘솔에서 Authentication의 로그인 방법으로 들어가자 우리는 이메일/비밀번호를 활성화 시켜서 회원가입과 로그인을 가능하도록 구현했었다. 위 사진처럼 페이스북도 상태를 사용으로 만들어야 한다. 아래에 나오는 OAuth 리디렉션 URI를 복사하고, facebook for developers로 이동한다. Facebook for developers 링크 Facebook Developers Facebook 사용자와 연결할 수 있는 코드 AI, 비즈니스 도구, 게임..
Vue.js + Firebase로 이메일 회원가입/로그인 구현하기
Vue.js + Firebase로 이메일 회원가입/로그인 구현하기 Vue.js와 Firebase를 통한 이메일 로그인을 구현해보자 우선 설치해야할 npm (터미널에서 입력) $ npm -i -g @vue/cli $ npm -i -g @vue/cli-init 아래 @vue/cli-init은 2.0버전을 사용하기 위해 설치하는 것이다. vue-cli는 템플릿 기반 프로젝트 초기 구성을 간편하게 할 수 있도록 도와준다! 프로젝트 생성하기 $ vue init webpack "프로젝트 이름" 환경설정을 해주면 vue 프로젝트가 생성된다. 이제 해당 경로로 들어가서 npm 설치를 진행하자 $ cd "프로젝트 이름" $ npm install 만약 npm install 후에 `vulnerabilities` 알림이 뜨면..
[데이터베이스] 트랜잭션(Transaction)
트랜잭션(Transaction) 트랜잭션의 개념 데이터베이스의 상태를 변환시키는 하나의 논리적 작업 단위를 구성하는 연산들의 집합 상태를 변화시킨다는건? → SQL을 통해 DB에 접근하는 것 트랜잭션으로 일어나는 예시와 필요한 상황 예시 ※ 트랜잭션이 적용된 상황 사용자가 게시물을 등록한다. (INSERT → SELECT) (등록으로 INSERT 문이 실행되고, 리스트에 추가된 모습을 보여주기 위해 다시 SELECT문 진행) ※ 트랜잭션이 필요한 상황 은행에서 A가 B에게 송금하려고 할때 송금 버튼을 누른 후 돈이 빠져나가고, B에게 돈이 들어가기 전에 전산 장애가 발생해서 B가 돈을 받지 못한 경우 Commit과 Rollback이 뭔지 설명하시오 commit : 트랜잭션 하나의 작업이 성공적으로 끝..
Vue CLI + Spring Boot 연동하여 환경 구축하기
Vue CLI + Spring Boot 연동하여 환경 구축하기 프론트엔드는 Vue.js로, 백엔드는 Spring Boot를 이용해서 프로젝트를 진행하려고 한다. 스프링에서 Jsp를 통해 view를 구축해봤지만, 이번엔 Vue.js를 활용해서 View를 모두 넘겨주려고 한다. 스프링에서 컨트롤러를 통해 DB 관리나 데이터에 관한 비즈니스 로직을 잘 처리하고, 이에 대한 값을 활용해 Vue에서 화면으로 뿌려줄 탬플릿을 만들어나가는 진행 방식이 되지 않을까 생각된다. 개발 툴은 VS Code로 진행한다. VS Code 다운로드 Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favo..
브라우저 동작 과정에 대해 알아보자 (DOM, Parsing)
브라우저 동작 방법 "브라우저가 어떻게 동작하는지 아세요?" 웹 서핑하다보면 우리는 여러 url을 통해 사이트를 돌아다닌다. 이 url이 입력되었을 때 어떤 과정을 거쳐서 출력되는걸까? web의 기본적인 개념이지만 설명하기 무지 어렵다.. 렌더링..? 파싱..? 브라우저 주소 창에 http://naver.com을 입력했을 때 어떤 과정을 거쳐서 네이버 페이지가 화면에 보이는 지 알아보자 (오픈 소스 브라우저(크롬, 파이어폭스, 사파리 등)로 접속했을 때로 정리) 브라우저 주요 기능 사용자가 선택한 자원을 서버에 요청, 브라우저에 표시 자원은 html 문서, pdf, image 등 다양한 형태 자원의 주소는 URI에 의해 정해짐 브라우저는 html과 css 명세에 따라 html 파일을 해석해서 표시함 이 ..
Javascript와 Node.js로 Git을 통해 협업하기
Javascript와 Node.js로 Git을 통해 협업하기 협업 프로젝트를 하기 위해서는 Git을 잘 써야한다. 하나의 프로젝트를 같이 작업하면서 자신에게 주어진 파트에 대한 영역을 pull과 push 할 때 다른 팀원과 꼬이지 않도록 branch를 나누어 pull request 하는 등등.. 아직 제대로 활용해보지 못했기 때문에 이번에 정리해보자! 참고 : 네이버D2 링크 Prerequisites Required Description Git We follow the GitHub Flow Node.js 10.15.0 LTS Yarn 1.12.3 or above Git과 GitHub을 활용한 협업 개발 Git : 프로젝트를 진행할 때 소스 코드의 버전 관리를 효율적으로 처리할 수 있게 설계된 도구 Git..
![[Java] 컴파일 과정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdjypD%2FbtqvW2UYOVN%2FBbrwEZCEa4BEnUMfe3Kquk%2Fimg.png)
[Java] 컴파일 과정
[Java] 컴파일 과정 자바를 많이 사용하기는 하지만, 막상 컴파일 과정을 설명하라하면 말문이 막힌다;; 면접에서도 가끔 나오는 주제이므로 정리해보자 HelloWorld.java 파일을 실행하기 위해 Run 버튼을 눌렀을 때 진행되는 과정은 아래와 같다. 1. HelloWorld.java가 javac.exe을 통해 컴파일 진행 2. HelloWorld.class가 생성됨 ( byte code ) → byte code는 반 기계어 상태로, 컴퓨터가 읽을 수 없다. 따라서 변환 과정이 필요함 3. HelloWorld.class를 java.exe로 실행 4. 클래스 로더를 통해 HelloWorld.class를 JVM으로 가져온다. (JVM은 현재 진행을 시도하는 OS에 맞게 변환시켜줌) 5. Byte Cod..
TDD(Test Driven Development) 이해하기
TDD(Test Driven Development) TDD : 테스트 주도 개발 '테스트가 개발을 이끌어 나간다.' 우리는 보통 개발할 때, 설계(디자인)를 한 이후 코드 개발과 테스트 과정을 거치게 된다. 하지만 TDD는 기존 방법과는 다르게, 테스트케이스를 먼저 작성한 이후에 실제 코드를 개발하는 리팩토링 절차를 밟는다. 작가가 책을 쓰는 과정에 대해서 생각해보자. 책을 쓰기 전, 목차를 먼저 구성한다. 이후 목차에 맞는 내용을 먼저 구상한 뒤, 초안을 작성하고 고쳐쓰기를 반복한다. 목차 구성 : 테스트 코드 작성 초안 작성 : 코드 개발 고쳐 쓰기 : 코드 수정(리팩토링) 반복적인 '검토'와 '고쳐쓰기'를 통해 좋은 글이 완성된다. 이런 방법을 소프트웨어에 적용한 것이 TDD! (소프트웨어 또한 반..
클린코드(Clean Code)와 리팩토링(Refactoring)
클린코드와 리팩토링은 의미만 보면 비슷하다고 느껴진다. 어떤 차이점이 있을지 생각해보자 클린코드 클린코드란, 가독성이 높은 코드를 말한다. 가독성을 높이려면 다음과 같이 구현해야 한다. - 네이밍이 잘 되어야 함 - 오류가 없어야 함 - 중복이 없어야 함 - 의존성을 최대한 줄여야 함 - 클래스 혹은 메소드가 한가지 일만 처리해야 함 얼마나 코드가 잘 읽히는 지, 코드가 지저분하지 않고 정리된 코드인지를 나타내는 것이 바로 '클린 코드' 1 2 3 4 5 6 public int AAA(int a, int b){ return a+b; } public int BBB(int a, int b){ return a-b; } cs 두 가지 문제점이 있다. 1 2 3 4 5 6 7 public int sum(int a..
삼성 상시 SW 역량테스트 A형 후기
삼성에서 주최하는 소프트웨어 역량테스트 시험이다. 최근 상시로 변경되면서 시험 횟수도 많아졌다. (단, 1년에 3회로 제한되어있다.) 사이트 : 링크 SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! www.swexpertacademy.com 회원가입 후, 사이트에 올라온 문제를 주어진 난이도에 맞는 3문제를 풀면 응시 지원이 가능하다. 일정은 사이트에서 직접 확인해야하고, 시험 접수하는 사람이 워낙 많기 때문에 열린 후 바로 신청하지 않으면 바로 마감되므로 조심해야 한다. A형이 검정 유형 중에서는 가장 낮은 난이도지만, 실제 입사 전에 진행되는 코딩테스트 난이도와 같은 수준이다. C형은 실제 실무자도 많이 갖고 있지 않다고 하니.. 극악의 난이..