① 리액트란 ?

리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.

② 막 정리

• 백엔드가 정보를 꺼내주는 역할이라면 프론트엔드는 정보를 효율적으로 보여주는 역할을 하는 것
• 웹의 최전방에서 가이드 역할을 해준다.
• 유저 범위가 광범위하기 때문에 모든 사용자들이 편하게 이용가능하도록 한다는 점에서 사회기여가 가능하다.
• 리액트는 자유도가 높아서 직접 컴포넌트 구현이 가능한다. 
• 리액트 과정에 앞서 해야할 것은 if문과 for문, map함수, 반목문을 숙지해야 한다.
• 또한, web환경에 대한 전반적인 이해와 배열, 딕셔너리 이해가 필요하다.
• 리액트와 뷰의 차이점은 템플릿을 사용하는가에 대한 여부이다. (뷰는 템플릿 사용)
• 리액트가 숙달이 되었을때 뷰를 사용하는 것을 권장한다.
• 백엔드개발자와 프론트엔드 개발자 모두 웹을 만드는 개발자이기 때문에 서로에 대한 이해가 필요하다.
• 자바스크립트는 근본이 없는 언어라 믁시적형변환 이슈가 있지만, 또 장점으로는 자유롭고 호환성이 좋다는 점이 있다.

③ 웹퍼블리셔 vs 프론트엔드 개발자의 차이

웹퍼블리셔는 html과 css를 이용하여 디자이너가 구상한 디자인을 옮기는 사람이고, 프론트엔드 개발자는 가지고온 정보를 표현하는 기술이 필요한 사람이다. 사실 국외에서는 웹퍼블리셔라는 직무가 따로 없기때문에 두가지 능력 모두 필요하다.

④프로젝트의 코어를 잡는다?

사용하는 언어에 따라 다르지만 백엔드의 경우 코드를 예쁘게 펙토리화 한다는 의미

⑤ 개발자 연봉차이?

프론트엔드 백엔드 포지션이 문제가 아니라, 실력에 따라 차이가 난다.

⑥ 잘하는 개발자?

개발자는 엔지니어와 연구자 두 분류로 나눌 수 있다. 엔지니어의 관점에서는 코드를 잘 가져와 빨리 쓰고 요구사항을 잘 캐치하여 빠르게 구현하고 해결하는 사람. 연구자의 경우는 고도화된 기술을 개발하는 사람이라고 볼 수 있다.

• 좋은 개발자가 되기 위해선 최대한 많은 패턴을 사용해보고, 변화구를 던져보며 다양한 시도를 해봐야한다.
• 그리고 불편하다고 생각하는 부분은 항상 기록하여 어떻게 개선하면 좋을지 생각하고 구현해봐야한다. 
• 신입에게 풀스택을 요구하는 회사는 가면 안된다. 개고생함
• 스타트업으로 갈 경우에도 이미 프러덕트가 출시되고 유저들이 꽤 확보된 시리즈 b,c 이상으로 가야 차근차근 단계별로 배울 수 있다.
• 국내와 해외 사이트는 트랜드 차이가 있지만 기술스택은 비슷하다. 
• 정부사이트를 제외하면 국내외 대부분의 회사는 리액트를 사용한다.

⑦ doint good job vs working well

항해99 다면평가는 실력, 성장, 몰입, 협업 이 4가지 항목으로 이루어져 있다.

doing good job은 시간이 해결해 주는 부분이다. 반면에 working well은 스스로의 노력이 필요하다.

워킹웰이란 프로젝트를 할 때 스무스하게 아무런 이슈없이 잘 할 수 있는 사람을 의미한다. 워킹웰 하는 사람이 되자.

주특기 세션을 통해 세가지 기술과 관련된 모든 설명을 들었다. 

나의 셩향은 분명 프론트엔드가 맞는 것 같은데, 유튜브 자료와 현업에 있는 사람들의 후기를 보자니 자바를 공부하는게 길게 보았을 땐 맞는 것 같아서 머리터지게 고민이 된다. 개발자라는 직업을 진짜로 하게 될지, 하더라도 얼마나 하게 될지 모르는데 그냥 성향에 맞는 것을 선택하는게 맞을지, 그래도 어려운 것을 도전하고 안정적으로 가는게 맞는지 모르겠다.내일 오후 2시까지 결정을 해야하는데 여전히 고민이 된다. 아마 자바 스프링으로 갈 것 같은데, 사실 자신이 없다. 내가 제발 끝까지 포기하지 않고 잘 완주할 수 있기를 ㅜ_ㅜ 

튜터님이 추천해주신 자바스크립트 사이트

https://javascript.info/

공통적으로 설명해 주셨던 Frontend와 Backend 비교

지금 배우고자 하는 언어(자바, 자바스크립트)를 선택하는 것은 영원한 결정이 아니다. 앞으로 계속 다 필요에 의해 다양하게 배우게 될 일이 있을 것이다. 그러나 프론트엔드를 할 것인지, 백엔드를 할 것인지는 신중하게 결정해야 한다. 이 포지션은 바뀔 가능성이 희박하기 때문이다. - 라고 말씀해 주셨다. 

그리고 개발자가 되기를 결심한 것은 좋은 선택을 한 것이라고 하셨다. 수요가 아직도 많고 개발자에 대한 대우가 좋아지고 있기 때문. 반면에 단점이라 함은, 초반 진입이 어렵다는 점이다. 다른 말로 하면, 진입장벽만 넘으면 아주 매력 있는 직무라고 하심. 항해99가 좋은 점은 협업에서 개발자들이 일하는 환경과 동일하다는 것에 높은 평가를 하셨다.

1. Node.js

Node.js 는 언어는 아니고 Javascript를 작성하는 flatform 이다. 언어와 플랫폼을 혼동하지 않도록 주의한다.

항해99의 Node.js 수업에서 중요한 두 가지는

1. 자바스크립트를 완전히 익히기.

2. API 기능을 잘 이용하기.

① 특징

• 마이크로서비스에 적합
• 가볍다 - 효율적이고 빠르다. 자바보다 최소 CPU 메모리가 몇 배 낮다.
• 비용이 많이 안들기 때문에 스타트업에서 많이 사용한다.
• 안정성 문제가 있었으나 과거에 비해 많이 발전되었다.
• 대기업에서도 필요에 따라 사용이 늘어나는 추세이다 (트렌드가 변하고 있음)
• 해외에서는 Java보다 Node.js 를 더 많이 사용하는 편.
• Javascript를 사용하기 때문에 Spring에 비해 상대적으로 쉽다.
• 자바스크립트를 사용하기 때문에 프론트엔드로 넘어가기 쉽다.
• Spring은 Framework, Java의 JVM을 역할을 하는 것이 Node.js 이다.

② 수업을 통해 배우게 될 것

• 1-2주 차 : JS문법을 빡세게 배운다 + 과제/문제 풀이(복붙하는 코딩이 아니라 직접 코드 작성하기)
• Rest API 서버 개발 방법을 배운다 (취업에 필수)
• 로그인 기능 구현 : 쉽게 구현할 수 있는 라이브러리가 있지만, 수업에서는 보다 원초적인 방법으로 하나하나 직접 코드를 작성하여 구현하는 법을 배울 예정.
• 데이터베이스 사용 (관계형/비관계형 동시에 사용할 예정) 어떤 것인지 이해하고 넘어가는 정도
• 웹 소캣 이용 - 브라우저 실시간 알림 기능이다. (쇼핑몰에서 많이 사용) - 실전프로젝트에 유용하게 이용 가능
• 테크니컬한 부분보다 원리를 코드 작성을 통해 이해하는 커리큘럼이 될 것.
• 시간이 촉박하기 때문에, 핵심만 뽑아서 배울 예정. 어떤 게 중요한지, 알아야 하는지를 짚어주는 강의

③ 고급 개발자가 될 수 있는 기반을 다지는 수업

• 좋은 개발자는 직접 코드를 작성할 수 있는 사람 (복붙 노노)
• 3류 개발자는 남이 작성한 코드가 없으면 코딩을 못하는 사람, 2류 개발자는 남이 작성한 코드를 '활용'할 줄 아는 사람, 1류 개발자는 남이 작성한 코드의 결함을 알고 더 개선시킬 수 있는 사람.
• 오픈소스 (남이 작성한 코드)를 많이 봐야 코딩 실력이 늘어난다 (결함을 발견하면서)
• 회사는 10가지를 얕게 아는 개발자 보다, 한 가지를 제대로 알고 기반이 탄탄한 개발자를 선호
• 한가지 언어를 잘하면 발전이 빠르다.
• 회사를 선택할 땐, 꼭 코드 리뷰를 하는 회사를 선택하자!
• 우리나라가 자바 공화국은 맞지만, 결코 Node.js의 채용 시장이 작지는 않다. 점유율이 올라가는 중.
• 어떠한 요구사항이 추가되더라도 흔들림 없는 튼튼한 코드를 스스로 짤 수 있는 개발자라면 취업문제없음.

2. Spring

코딩을 잘하는 것은 가독성이 높고 견고한 코드르 작성하는 것이다. 예술처럼 창의성이 필요한 직무라고 할 수 있다.

이 세션은 Q&A 형식으로 진행되었다.

① 특징

• 20년이 넘은 프레임워크로 안정적이다.
• 따라서 대기업과 정부기관에서 많이 사용한다.
• 사용하는 사람이 많은 프레임워크이기 때문에 현업에서 문제가 발생했을 때 해결방법을 보다 쉽게 찾을 수 있다.
• 사용 가능한 라이브러리가 많다는 장점이 있다.
• 스타트업에서 Node.js를 많이 사용하긴 하지만, 규모가 커지면 결국 Spring으로 갈아탐
• 비전공자에겐 Node.js보다 1.5배 정도 어려운 것을 감안해야 한다.
• 그러나 장기적을 봤을 때 자바로 시작하는 것이 훗날 다른 언어를 배우기에 훨씬 수월하다.
• 자바스크립트는 진입장벽이 낮지만 주니어를 벗어나 중급 이상이 될 경우 버그가 많이 발생한다.
• 그래서 Typescript를 사용하게 되는데, 결국 자바처럼 공부를 해야 되는 것은 같다.
• 백엔드 개발자라면 결국 자바를 사용해야 한다.
• 그러나 실제로 업무를 시작하게 되면 자바스크립트에서 자바로 전향이 쉽지 않다.
• 자바에서 노드로 직무로 채용 지원은 가능하지만, 노드를 배워서 자바 직무로 지원은 불가능함
• 요즘은 다 스프링 부트를 사용하기 때문에 수업은 스프링 부트(필수) + 스프링 시큐리티 (로그인 인증, 인가) 진행

※ 공통 개발자들의 고민

개발실력이 뒤쳐진다는 걱정. 따라서 계속 공부해야 하는 직무이다. 끊임없는 노력이 필요하다.

② 항해 99에서 배워야 할 것

• 일단 주 단위 프로젝트를 통해 어려운 스프링 언어도 익숙해질 수밖에 없다.
• 매주 고민과 노력으로 채워질 텐데, 얼마나 잘 만드냐 보다 고민을 통해 얼마나 성장을 했는지 히스토리를 만드는 것이 중요하다.
• 취업을 할 땐, 이 고민들로 이력을 만들어서 성장 스토리를 전하는 게 중요함.
• 중요한 건 스프링 원리를 잘 이해하는 것. 로직을 이해하면 다른 언어 공부를 배우기가 훨씬 수월하다.
• 개발자로서의 나이 장벽은 회사마다 다름
• 큰 회사일수록 백엔드 개발자가 프론트 개발자보다 많다.
• 어쨌든 결론은 주니어급 이후엔 어떤 언어를 하느냐가 중요하지 않고, 상황에 맞게 모든 언어를 잘 다룰 수 있어야 한다.
• 장기적으로 봤을 땐 자바로 시작하는 것이 좋다.

세션을 통해 나처럼 비전공자인 분들이 비슷한 고민을 하고 있다는 것을 알 수 있었다.

1. 개발 지식이 거의 없는데 과연 스프링 수업 과정을 따라갈 수 있을지, 그리고 따라간다 한들 취업 시 경쟁력이 있을지

2. 해외취업을 고려한다면 노드가 스프링보다 유리할지

3. 현업 시니어 개발자들이 생각하는 좋은 개발자의 조건은 무엇인지 : 견고한 코드를 스스로 작성하려고 노력하는 사람. 당장 작성한 코드를이해하지 못하더라도 주 단위 프로젝트를 어떻게든 수행하는 능력이 있는 사람.

아직 시작도 안 했지만, 나도 자바라는 언어가 너무 어렵게 느껴져 두려움이 생겼다. 스프링을 생각하고 있었지만, 과연 내가 할 수 있을지, 로그인 페이지 구현도 못하고 이해도 못하는데 가능할지 참 생각이 많았다. 그래도 오늘 세션의 매니저님 말을 통해 용기를 좀 얻었다.

<비전공자가 주특기로 Java Spring를 선택했을 때 현실>

• 꾸준함이 있으면 전혀 문제가 없다. 습관이 중요하다. (하루에 하나씩 알고리즘을 풀고 필요한 개발언어를 공부)
• 그날그날 기록해서 정리하는 것이 중요하다. (TIL, WIL )
• 본인이 재미있어하는가를 보고 판단해서 주특기를 선택한다.
• 의지와 노력이 가장 중요하다.
• 전공자라고 해서 꼭 더 지식이 있다거나 잘하는 것은 아니다.

플라스크 라우팅

- route() 함수 : 플라스크의 함수. 복잡한 URL를 쉽게 함수로 연결하는 방법을 제공

- 플라스크에서는 @app.route() 데코레이터(decorator) 함수를 통해서 라우팅을 실행한다.

- 라우팅 방법으로는 정적 라우팅 방법과 동적 라우팅 방법이 있다.

1. 정적 라우팅

- 정적 라우팅은 @app.route()함수에 직접적으로 라우팅할 주소를 지정한다. 

- 처음 메인페이지를 만들 때, 위의 그림과 같이 정적 라우팅으로 메인 페이지와 세부 페이지를 직접 연결하였다.

- 그러나 세부 페이지가 많아 진다고 하면, 모든 페이지를 코드로 만들어 정적 라우팅으로 지정하기에는 너무 불편하고, 같은 코드가 반복되어 보기 좋지 않다는 문제점이 있다. 

- 이 부분은 동적 라우팅 함수로 개선이 가능하다.

2. 동적 라우팅

- 정적 라우팅처럼 직접 URL을 지정하는 것이 아닌 상황에 따라 다른 URL 변화하는 동적 적용을 하는 방식.

- 동적 라우팅은 여러 URL을 한 함수에 적용할 수 있어서 변하는 주소에 따라서 그에 맞는 페이지를 로드해 준다.

- URL에 동적인 변수를 사용하려면 원하는 위치에 "<변수>" 형태로 추가한다.

- 해당 변수는 URL과 일치하는 뷰 함수의 인자로 사용할 수 있다.

[출처]

https://littlezero48.tistory.com/72 (소영님 감사합니다 ♥)

https://m.blog.naver.com/dsz08082/221798793729

https://hiio.tistory.com/41

지난번 회의 이후로 JWT토큰을 이요한 로그인과 회원가입 서버를 구현하는 것을 각자 공부하고 시도해보기로 했다.

그 후에 각자 어떤 페이지를 맡으면 좋을지 얘기를 나눠보기로 했다.

3일 정도의 시간을 가진 결과 소영님과 민승님이 로그인과 회원가입 서버 구현에 성공하셨다.

난 소영님과 민승님이 공유해주신 자료를 봐도 암호화 토큰을 이용한 코드가 잘 이해되지 않았다.

마지막 날 소영님이 팀원들을 위해 게더에서 코드 설명을 하나씩 차근차근해주셨다. (감사합니다 !!ㅜㅜ)

소영님의 노력에도 불구하고 나의 뇌는 그것이 무슨 말인지 이해하지 못했다. (좌절 ㅠㅠ)

일단 더 이상 지체할 수는 없기 때문에 각자 페이지를 맡아서 뼈대를 만들어 오기로 했다.

우리는 회의를 통해

• 랜딩페이지 (현빈님)
• 로그인 페이지 (소영님)
• 회원가입 페이지 (민승님)
• 메인 페이지 (나)
• 세부 페이지 (미경님)

이렇게 맡아서 뼈대를 만들어 다음날 만나기로 했다.

이미 소영님과 민승님은 페이지를 구현하신 거나 다름없기 때문에 추후에 민승님께서 CSS를 좀 더 손봐주시기로 했다.

뼈대만 만들어 오긴 할 거지만 통일성을 위해 다음과 같은 기본 규칙을 정했다.

1. 디자인 논의 페이지 전체 색상 : 전체 - 흰색 바탕 느낌 / 버튼 검정색으로

2. 폰트 : Noto Sans Korean 로 통일 굵기로 차이성 두기 

3. 마진 & 패딩 : 천천히 정해 보는 걸로! (나중에 정하는 걸로)

4. 로고 -> 16조 (글씨 조금 특이한 거로 해서 로고처럼)

5. 사이트 이름 : 코딩 라이프 (코라 -> 콜라 -> 흰&빨&검)

내가 맡은 부분 :

1. html 

일단 기획서에 나와있는 양식과 비슷하게 메인 페이지 화면을 만들어 보았다.

웹 개발 종합반을 들었을 땐 이미 작성된 코드를 사용했기 때문에 모든 게 쉬웠는데, 막상 혼자 페이지를 만드려니

이 간단한 작업조차도 오랜 시간이 걸렸다. 

특히 아이콘 이미지마다 사이즈가 달라서 각각 다른 사이즈를 적용해 주어야 하는 부분이 조금 오래 걸렸다.

아직 투박하긴 하지만, 일단 뼈대는 아래와 같이 완성해 보았다.

2. 세부 페이지 이동

다음으로 내가 구현해야 할 부분은 아이콘을 클릭했을 때 그 기술과 관련된 세부 페이지로 이동하는 서버 작업을 해주는 것이었다.

생활코딩 유튜브를 통해 보았던 건데도 막상 하려니 코드가 기억이 나질 않았다. 팀원분들한테 도움을 요청했고, 이미 회원가입 페이지 구현을 마치신 민승님이 힌트를 주셨다. 사실 힌트라기보다 정답을 알려주셨다.

페이지 이동을 위해 사용해야 할 코드는 다음과 같다.

자세한 내용은 아래 링크 참조하기! 

1. onclick="location.href= 'link'

2. @app.route('/name')

def move_page(): return render_template('name.html')

https://itun.tistory.com/491

3. 부트스트랩 그리드로 반응형 웹사이트 만들기

화면을 만든 후, Frontend & Backend박스가 화면 페이지가 줄어들면 박스 하나가 아래로 들어가게끔 반응형 웹사이트를 구현하고 싶었다. 아래 유튜브 동영상을 참고하여 부트스트랩 코드를 가져와 구현해 보았다.

https://www.youtube.com/watch?v=3Az_hKsL9L8 

그리하여 일단 2차적으로 끝내본 메인 페이지 화면!

개발 우선순위 목록

페이지 개발 내용 우선 순위 (major, minor)

플로우차트

와이어프레임

1. 랜딩페이지

• 해당 페이지를 제작하시는 분의 자유도에 따라 이미지나 일러스트 혹은 문구를 추가하시면 됩니다!
• 랜딩 페이지의 문구 및 디자인은 임시입니다.

1. 페이지 메인 타이틀
2. 페이지 일러스트
3. 로그인 페이지 > 클릭 시 로그인 페이지로 이동합니다.

2. 로그인 페이지

• 랜딩페이지에서 [Login] 버튼 클릭 시 이동

1. 로그인 페이지 메인 타이틀
2. 이메일 입력 인풋필드
   1. “@”, “.” 가 포함되어 있지 않은 경우 오류 메세지가 생성됩니다.
   2. ex. “유효하지 않은 이메일 형식입니다.”
3. 비밀번호 입력 인풋필드
   1. 인풋필드 타입은 password 입니다. <input type=”password”>
4. 로그인 버튼
   1. 이메일이나 비밀번호가 틀릴 경우 오류 메세지가 생성됩니다.
   2. ex. “이메일 혹은 비밀번호가 맞지 않습니다.”
   3. 문제가 없다면 메인페이지로 이동합니다.
5. 회원가입 페이지 이동 버튼
   1. 회원가입 페이지로 이동할 수 있는 버튼입니다.
   2. 텍스트버튼 형식입니다.
   3. 클릭 시 회원 가입 페이지로 이동합니다.

3. 회원가입 페이지

1. 회원 가입 페이지 메인 타이틀
2. 이메일 입력 인풋필드
   1. “@”, “.” 가 포함되어 있지 않은 경우 오류 메세지가 생성됩니다.
   2. ex. “유효하지 않은 이메일 형식입니다.”
3. 비밀번호 입력 인풋필드
   1. 인풋필드 타입은 password 입니다. <input type=”password”>
4. 회원가입 버튼
   1. 클릭 시 “회원가입 완료”라는 메세지가 생성됩니다.
   2. 자동으로 로그인 후 메인 페이지로 이동합니다.
5. 로그인 페이지 이동 버튼
   1. 로그인 페이지로 이동할 수 있는 버튼입니다.
   2. 텍스트버튼 형식입니다.
   3. 클릭 시 로그인 페이지로 이동합니다.

4. 메인 페이지

1. 메인 페이지 메인 타이틀
2. 프론트엔드 토픽을 확인할 수 있는 구역입니다.
3. 프론트엔드 관련 토픽을 선택할 수 있는 아이콘입니다.
   1. 각 아이콘 클릭 시 해당 주제의 세부 페이지로 이동합니다.
4. 백엔트 토픽을 확인할 수 있는 구역입니다.
   1. 각 아이콘 클릭 시 해당 주제의 세부 페이지로 이동합니다.

5. 세부 페이지 → 크롤링 가능여부 파악하기, CSS 디테일 

1. 세부 페이지 메인 타이틀
   1. 메인 타이틀은 구분 > 세부 순서로 나눠집니다.
      1. ex. FrontEnd > Html
      2. ex. BackEnd > Java
2. 클릭 시 외부로 이동할 수 있는 썸네일(링크)입니다.
3. 해당 영상에 관한 제목입니다.
4. 해당 영상에 관한 description 입니다.
   1. 크롤링이 가능할 경우 영상 제목과 description도 같이 크롤링 되어야합니다.
   2. description이 50자가 넘어갈 경우 “…”으로 표시됩니다.
      1. 이때 [더보기] 버튼을 추가해서 외부로 이동할 수 있는 링크로 할지 아직 생각 중
      2. [더보기] 했을 때 카드 자체가 길어지며 내용이 전부 보이는 형식은 구현 어려울지도 모름
      3. 그때 상황에 맞춰서 해보는 것으로!

출처 : https://www.notion.so/d474b46390ff43d0a80e2124328f6bf7