Sparta Coding Club 30

스파르타 코딩클럽 React 리액트 기초반 4주차 정리 - Keyframes, Firebase 설정부터 연동, 컬랙션 가져오기/추가/수정/삭제까지

Keyframes animation에서 사용하는 속성 중 하나, css 에서 사용하며 styled-component를 통해 js파일에서도 사용 가능하다. CSS 에서의 사용예시 더보기 @keyframes 키프레임이름 { 0%{초기 형태} 50%{변화 중간의 형태} 100%{변화 완료된 형태} } animation : 키프레임이름 1s ease ; styled-component 에서의 사용 예시 더보기 import React from 'react'; import styled, {keyframes} from "styled-components"; function App() { return ( ); } const 키프레임이름 = keyframes` 0%{초기 형태} 50%{변화 중간의 형태} 100%{변화 완료..

[항해뀨 3기] 2주차 회고

저번주차 회고에는 팀프로젝트가 기대된다고 적었지만.. 아쉽게도 이번주차는 팀프로젝트가 아니었다!! 개인별로 주특기 강의를 듣고 개인 과제를 하는 2주차. 나는 당연하지만..React! 팀이 나누어져있긴하지만 서로 돕기 편하다는 것 외엔 큰 의미가 없었다. 앞선 기수분들은 어떤지, 다른 주특기분들은 어떤지 모르겠지만 리액트쪽은 팀에 큰 상관없이 서로 대화 좀 해본 사람들끼리 질문이 오고가는듯? 내 경우에도 같은 팀원분들보다 이전에 휴게실에서 대화 좀 해본 분들이나 내가 직접 가서 도움을 드리겠다 한 경우 외엔.. 음, 팀원사이에서 질문이 오고간적이 별로 없는듯하다! 내가 궁금한것이 생기면 보통 검색으로 90퍼센트는 해결하고 그 외에는 실무관련이나 좀 더 깊은 정보였기에 슬랙에서 여쭤봤다. 아무튼, 이번 주..

스파르타 코딩클럽 React 리액트 기초반 1~3주차 후기

정리보단 후기로 들어오는 사람이 있을거같아서 후기부터 조신하게 적고 정리는 따로 글을 생성하겠습니다.. 리액트를 공부하기위해 필요한 지식은 다음과 같습니다. HTML CSS Javascript (바닐라 = 순수 자바스크립트) "필요한 지식 아무것도 몰라요" 생활코딩의 WEB1부터 듣는걸 추천드립니다. https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 자바스크립트의 경우, es6버전의 자바스크립트에 대해 핥아먹어보는 ..

[항해뀨 3기] 1주차 회고

어제 TIL을 쓰려고했는데... 1주차 프로젝트를 하며 늦게자고 일찍 일어나는 생활을 하며 쌓인 피로감과 약간의 알코올이 들어가니 기절을 했다. 이번 WIL 키워드는 JWT 와 API 인데.. 사실 JWT는 이론적부분만 알고 프로젝트에서 관련 부분은 다른 팀원분이 맡아 코딩을 해주셨다. 세명밖에 없어서 빡세게 한 만큼 딱딱 분단을 할 수 밖에 없었던..ㅠ 그래도 알고있는거라도 적어야겠지? JWT 란 무엇인가? https://jwt.io/ JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io JSON 웹 토큰은 두 당사자 간에 ..

스파르톤 생존일지

작성 시작 시간 오후 8시 10분. 아직 게더 링크가 오지 않았다.. 스파르톤 동안 스파르타 코딩 클럽의 자바 수업을 아주 작살내버려야겠다! 하고 생각했지만 작살나는건 나일것같은 불안감.. 오전 9시부터 공부를 시작해서 점심저녁에 밥을 먹고 휴식, 지금은 깔끔하게 공부를 다시 시작하기 위해 게더 링크를 기다리고 있다. 스파르톤 시작하면 객체지향 퀴즈 풀어야지.. 오후 8시 20분 게더 입장! 9시부터 제대로 시작이라했는데.. 설마 1시간마다 생존일지쓰는거, 쓸때마다 새글을 써야하나?! 수정으로 이 글 하나에 업데이트하면 확인이 어려울까..흠..! 그럴거같으니 이따 새 글로 올려야겠당..ㅎ.. ..아니다. 한 글에 써도 되잖아?! 그럼 9시에 돌아오는걸로~^^ 9:00 pm 시작인가?! 항해 99 하는 분..

웹개발 종합반 5주차.. aws 서버 구매, 모두가 볼 수 있는 페이지 만들기

...어떻게 써야하지 이거. aws 서버는 https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2 여기서 구매하면 된다. 저걸 구매하고, ip 주소를 받고 filezilla, robo3t, 구매한 도메인까지 연결하면.. 끝 이 아니다. "aws서버를 구매한다" 는건 24시간 원활하게 돌아갈 수 있는 남의 컴퓨터를 사서 거기에 서버를 만들어두는 것.. 즉, 남의 컴퓨터를 원격 조종해야한다! 그럼 원격조종 방법에 대해 알아보자. 보통 서버 구매할때 os가 리눅스인걸로 구매한다고 한다. 오픈소스니까..! 근데 리눅스는 키보드 컨트롤을 한다. 어떻게 해야할까. gitbash 라는게 있다. 설치한다. 실행한다. 창 하나가 뜬다..

웹개발 종합반, 왕초보 시작반 4주차. Flask? Post? Get?

...뭐부터 써야하지?? 일단.. Flask 로컬 개발환경 만드는 법을 .araboza 파일 구성은 아래와 같다. 누가 이거 보고 venv에도 하위에 머 생선된다구욘~ 할 수도 있겠지만 (그전에 아무도 이걸 안볼거같다.) 다른 에디터는 모르겠고, 파이참은 그걸 자동생성해주니까 뺐다. 파란색은 나중에 파이참에서 생성해주는 것들이다. 프로젝트 파일은 아무폴더나 미리 만들어주고 파이참을 실행시키자. File > New Project 이런 창이 하나 뜬다. 최상단 Location 에서 파일버튼을 눌러 미리 생성해둔 프로젝트 파일을 지정해준다. 그 아래 Location 에서 파일 루트의 맨 뒤에 venv 가 있는지 확인하고 없다면 그냥 적어서 추가한다. 설치한 파이썬이 3.8 이상인지 확인하고 맨 아래 Creat..

웹개발 종합반, 왕초보 시작반 3주차. Python 파이썬 기초 냠냠

어려운 듯.. 쉬운 듯.. 아리송한 파이썬. 처음에는 '뭐야 자바스크립트랑 비슷하네?' 생각이 들었지만 웹크롤링을 건들면서 '아니 이거 완전 다른 거잖아?' 싶어 졌다. Python 누구나 한 번쯤 들어본 이름이다. 코딩해본 사람들에게는 '아 파이썬? 그거 쉬운 거야~'라고 하지만... 애매하다. 쉬운 건 아니지만, 그렇게 어렵진 않다. 비전공자에 고졸이 뇌에 힘주면 할 수 있을 정도? 자바스크립트 기초를 할 수 있다면 파이썬의 언어 자체는 낯설지 않다. 단어만 조금 다르고 의미는 같거나 비슷한 정도로만 다르다. 자바스크립트에서 let const var로 변수를 선언했다면 파이썬에서는 그냥 선언하면 된다! 그냥 a = 0이라고 처음부터 적어버리면 된다. 함수는 function이 아닌 def를 사용한다. ..

웹개발 종합반, 왕초보 시작반 2주차. JS, jQuery 그리고 Ajax

jQuery.. 순수 자바스크립트의 짜증나는 그 길고 긴~ 문장을 함축시켜주는, 귀차니즘과 저하된 기억력으로 괴로운 이들에겐 정말 빛과 소금같은 존재 아닐까? 순수 자바스크립트로 할 때는 '도큐먼트..어쩌구..저쩌구..뭐더라..' 이러던걸 $('') 이걸로 끝내버린다니. 물론 나처럼 실무학원갔다가 제이쿼리 위주로 수업을 받아버린 나머지 막상 자바스크립트 실력은 저~기 아래 심해와 같을수도 있다. 하지만 제이쿼리, 너무 편리하다. 요즘 인터넷 찾아보면 제이쿼리도 이제 한물 갔다는데... 안돼!! 가지마!!! 아무튼, 자바스크립트와 제이쿼리는 그렇다치고.. 2주차의 하이라이트, Ajax. 어디서 많이 들어본 이름이지만 이게 뭔지 하나도 몰랐다. 어쩐지 간지나니 어디가서 아는척 하고싶다고 생각했다. Ajax란..

웹개발 종합반, 왕초보 시작반 1주차. 기본적인 html, css, js

정말.. 기본이다. 기본적인 html, css, js 를 알고있다면 1주차는 건너뛰어도 될 정도! 하지만 부트스트랩을 몰랐기에.. 전부 들었다. html, css 는 어려운게 아니니 쓸것도 없지만 js는 헷갈리던 for문을 제대로 파악할 수 있게 되었다. (그리고 방금 떠올린 사실인데, 숙제를 제출했으나 버튼 동작을 넣지 않았다..맙소사.) 다른 실무학원에서도 js를 배웠지만 여기만큼 쉽게 이해되진 않았다. 어쩌면 내가 이미 어느정도 자바스크립트를 아는 상태라 그런걸지도. 내가 헷갈렸던 for문에 대해 적자면, for(i=0; i