나만의 편의점 찾기 플랫폼 - Fun편log - Fun편log팀은 프론트엔드 개발자 2명 백엔드 개발자 1명이 팀을 이뤄 11월 15일부터 12월 22일까지 포트폴리오 멘토링 프로젝트를 진행했습니다. 프론트엔드 개발자 두 분은 비전공자 개발자로써 독학으로 html/css, React를 공부하였으나 취업에 쓸만한 근사한 포트폴리오가 없어 지원하셨고, 백엔드 개발자 분은 Windows 개발자로 계시다가 백엔드 개발자로 전향하기 위해 지원하셨습니다. 3명의 멘토(설계, 백엔드, 프론트엔드)의 강의, 설계&코드 리뷰를 받으면서 개발을 진행했습니다. 🏠 Github Fro

프론트엔드도 반드시 테스트를 해야하는 이유 예전에는 프론트엔드가 복잡하지 않아 프론트엔드 테스트를 잘 진행하지 않았습니다. 그러나 프론트엔드의 중요성이 강조되고, 백엔드의 다양한 기능들이 프론트엔드로 옮겨오면서 프론트엔드가 점점 더 중요해지고, 프론트엔드를 관리 할 필요성이 생기기 시작했죠. 이 과정에서 React, Vue등 다양한 프론트엔드 프레임워크가 생기기 시작합니다. typescript도 javascript의 자유성을 일정 부분 포기하는 대신 프론트엔드 소프트웨어를 더 잘 관리하기 위해서 만든 언어라고 할 수 있습니다. 이렇게 프론트엔드 관리와, 프론트엔드 코드의 퀄리티의 중요성이 대두 되면서 프론트엔드 테스팅도 같이 주목받기 시작합니다. 왜 코드 관리와 코드 퀄리티 향상을 위해서 테스트가 필요할까요? 테스트는 코드가 의도한대로 동작한 다는 것을 보장해 줍니다 코드 작성 후 손으로 하나하나 동작을 확인하다보면 확인하지 못

이전 포스팅에서는 React가 어떤 특징을 가지는 프레임워크인지 알아보았습니다. 이번 포스팅에서는 React를 실제로 다루기 위해서 개발환경을 구성하도록 해보겠습니다. 사용 목적에 따른 개발환경 | 개발 환경 | 주요 사용처 | |:--------:|---------| | CDN | 기존 웹 사이트에 리액트 코드를 추가할때 사용 | | Create-React-App(CRA) | Single Page App 개발 | | Next.js | Server Side Rending 개발| | Gatsby | Static Site 개발| React App을 개발하기 위해 사용할 수 있는 선택처는 위의 표에서 보듯이 CDN, CRA, Next.js, Gatsby가 있습니다. CDN은 script 태그를 통해 React를 추가하여 React를 사용하는 방법으로, 주로 기존에 만든 웹 페이지가 있는데 부분적으로 React로 옮겨가기 위해서 사용합니다. 관심 있으신 분은

가장 많이 사용하는 프론트엔드 프레임워크는 당연 리액트입니다. 프론트엔드 개발영역이 크지 않던 시절엔 프론트엔드 구인 광고에는 약 70% 이상이 리액트 개발자를 원하고 있습니다. 리액트는 어떤 이유로 가장 인기있는 프레임워크가 되었을까요? 이번 포스팅에서는 리액트의 장단점을 알기위해 리액트의 특징에 대해 알아보겠습니다. 선언형 프로그래밍 프론트엔드 개발자는 html + css로 사용자에 눈에보이는 웹 페이지(DOM)를 만들고, javascript를 통해 DOM을 조작하는 개발자입니다. React 이전에는 DOM을 조작하기 위해서 Document API나 Jquery를 통해 조작할 DOM을 검색하고 내용을 조작하였습니다. 위의 코드 처럼 Document를 id나 class와 같은 식별자로 가져온 다음 DOM의 속성을 직접 변경하였습니다. 이러한 개발 방식은 직관적임으로 javascript가 어떤식으로 DOM을 조작하는지 볼 수 있다는 장점이 있지만 개발의 범위가 넓어 질

우리는 웹 개발을 할 때, 앱 개발을 할 때, 인공지능 개발을 할 때, 게임 개발을 할 때, 어떤 개발을 하던 우리는 프레임워크를 사용해서 개발을 합니다. 그렇다면 프레임워크 먼가.. 느낌상 라이브러리 비슷한거 같긴 한데 정확히 무엇일까요?? 프레임워크(Framework)란? 프레임워크(Framework) 라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어입니다. 일 구조, 혹은 작업 구조라는 뜻과 같이 프레임워크는 어떠한 일을 처리하기 위한 구조를 제공합니다. 프레임워크 위에서 개발을 하면 우리는 일을 하기위한 전체 구조와 동작방식을 만들지 않습니다. 프레임워크로 개발을 할 경우 전체 동작방식은 프레임워크가 제공하고 우리는 프레임워크의 일정 부분만 개발합니다. 예를 들어 웹 프레임워크의 경우 HTTP 요청이 오면 Path, Params, Header, Body로 파싱 및 디코딩을 수행하고 보안/인증 설정에 따라 보안/인증

안녕하세요 카우치코딩입니다. 이전글 [* Firebase로 Google 로그인 구현하기 (Spring + React 예제) ](https://velog.io/@couchcoding/Firebase%EB%A1%9C-Google-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-Spring-React-%EC%98%88%EC%A0%9C) [* Firebase로 Google 로그인 구현하기 (Spring 파트) ](https://velog.io/@couchcoding/Firebase%EB%A1%9C-Google-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-Spring-%ED%8C%8C%ED%8A%B8) 이전 포스팅에서는 Java Spring을 통해서 Resource Server 부분을 구현해보았는

안녕하세요 카우치코딩입니다. 이전 포스팅에 이어 구글 로그인응 이용하기 위하여 Java Backend(SpringBoot)를 통해 Resource Service를 구현하는 것을 배워보겠습니다. 예제는 자바로 진행하나 구조를 익히면 다른 백엔드 프레임워크에서도 사용할 수 있을 것입니다. 위 그림에서 6-9에 해당되는 로직입니다. 1. 프로젝트 셋업하기 Fireba