드디어 .. 4일간의 대장정이 끝이났다. 무슨 CRUD하는데에 4일이 걸리냐고 비웃을 수 있지만, 1달전에 바닐라자바스크립트로 구현 된 아고라스테이츠의 코드도 이해못하고 남의 걸 보고 타이핑 하기 바빴던 내가, 리액트로 리팩토링을했고, 서버를 만들어서 서버에 연결했으며,CRUD구현에 결국 성공했다. 프론트엔드 개발자로써 최소한의 백엔드 소양이라고 생각하기에 유난히 내손으로 끝내고 싶었던 것 같다. 구현화면 서버 터미널에 400 or 500응답이 오는 건 참을 수 있었다. 하지만 .. 프리플라이트 요청만 오는건 참기 힘들었다.후우후우 느낀 점 사실 뭐 대단한거나 기발한 프로젝트를 한 것도 아니고 CRUD 하나 구현한걸로 왜 이렇게 호들갑 떠나 싶기도 하겠지만... 나에겐 굉장히 큰 의미가 있는 4일이었다...

구현화면 핵심 코드 FlightDataApi.js import flightList from '../resource/flightList'; import fetch from 'node-fetch'; if (typeof window !== 'undefined') { //flightList 데이터를 로컬스토리지에 flight라는 키를 지정하고 그 안에 넣어준다. localStorage.setItem('flight', JSON.stringify(flightList)); } export const getFlight = async(filterBy = {departure: '',destination: ''}) => { // 현재 condition값은 {departure: '입력값',destination: '입력값'} ..

결과물 장난으로 누군가가 '생일축하글 쓰는 페이지 만들면 축하해주러 갈게요~ ' 라고 말한게 자꾸 머리에 멤돌았다. 내가 나의 생일에, 나의 생일만을 위한 게시판을 만들고 그 게시판에 함께 부트캠프 커리큘럼을 진행하고있는 동기들에게 축하를 받는다면 신선한경험이자 리프레쉬 할 기회라고 생각해서 만들고 말았다. UI/UX , 디자인 까지 고려하기에는 시간이 촉박했가에 (2월1일 생일인데 1월31일에 얘기가 나옴.) 기본적인 CRUD와 야매 로그인 기능만 넣고 배포해버려따. 한 서너명에게 축하받을거라고 생각했는데, 생각보다 많은 사람들이 오셔서 축하해주시고 동기부여를 받았다고 해주시니 기분이 너무 좋았다. 이전 생일들은 항상 친구들과 술자리를 가지거나 밤새 파티를 했다. 물론 그런 시간도 즐거운 추억이였지만,..

구현화면 리액트 트위틀러 회고 삭제 기능을 구현하겠다고 토요일 저녁시간을 모두 사용했다 ㅠㅠ 하지만 결국 구현은 못했다.. 로컬스토리지는 localstorage.remove(키 이름) 으로 삭제하거나, ocalstorage.clear()로 로컬저장소 내에 데이터를 모두 삭제한는 방법 뿐이다. 하지만 나는 모든 트윗의 데이터를 tweet이라는 로컬스토리지 key 안에 모두 넣어놨기때문에 삭제기능을 구현하려면 key안에 value를 삭제해야하는데 로컬스토리지의 메소드만으로는 불가능 한 것 같다. 머리를 박고 고민을 하던 중 삭제기능을 구현할 실마리를 찾았다. 로컬스토리지JSON.parse를 이용해 배열로 바꿔서 가져온다 => 로컬스토리지 배열을 splice()로 원하는 요소를 제거한다. => 원하는 요소가 ..

구현화면 느낌 점 SPA의 개념에 대해 이해가 됐다. 전통적인 웹페이지는 요청을 보내면 HTML파일을 통째로 보내주는 방식이였기에, 서버에 불필요한 트래픽도 많이생기고 유저도 기다리는 시간이 길어 질 수 밖에 없는 구조였다. 예를 들자면 나는 햄버거가게에서 감자튀김만 먹고싶지만 감자튀김을 먹으려면 햄버거세트를 시켜야하는 상황인것이다. 주문을 받은 주방은 감자튀김만 원하는 유저맘도 모르고 열심히 먹지도 않을 햄버거까지 만드는 바람에 감자튀김을 받아보는 시간이 늦어지게 된다. 하지만 SPA는 감자튀김을시키면 감자튀김만 내오는 아주 스마트한 방식이기때문에, 유저는 좀 더 쾌적한 경험을 할 수 있다.

구현화면 구현미구현 Bare Minimum Requirement 디스커션 나열 기능 script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다. CSS 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다. style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다. colorhunt, dribbble에서 적절한 색 조합, 디자인을 참고합니다. 디스커션 추가 기능 script.js를 수정하여 디스커션 추가 기능을 구현합니다. section.form__container 요소에 새로운 아고라 스테이츠 질문을 추가할 수 있는 입력 폼을 제작합니다. 형식은 자유입니다. 아이디, 본문을 입력하고 버튼을 누르면 실제 화면에 디스커션이 추가되어야..