Daily16 프리프로젝트 진행 중.... 스택오버플로우를 클론코딩하는 프리프로젝트를 진행 중이다. 내가 맡은 부분은 로그인페이지와 회원가입페이지. UI는 구현했고, 이제 기능구현을 위해 열심히 달리고 있다. 간단한 일일줄 알았더니, 생각보다 할 일이 많다. 그리고 무엇보다 잘잘한 오류들을 처리하는 것에 시간이 많이 쓰인다. 개발은 문제를 해결하는 것이라더니.... 정말 공감이 된다. UI를 구현하기까지도 수많은 오류들에 부딪혔었고, 해결해나갔었는데 시간에 쫓겨 상세히 기록을 해두지 못한 것이 아쉽다. 프리프로젝트는 일주일 정도 더 진행될테고, 그 다음에 메인프로젝트가 진행될텐데 아무리 시간에 쫓기더라도, 나의 성장을 위해서 매일 30분 ~ 1시간은 투자하여 내가 마주친 오류들과 그것들을 해결하는 과정을 기록으로 남겨두어야 겠다. 지금부터라도 기.. 2023. 6. 21. 사용자 요구사항 정의서 작성 후기 드디어 어제부터 프리 프로젝트(메인 프로젝트 진입 전 연습)가 시작되었다. 주제는 스택오버플로우 클론 코딩하기. 첫 시작은 사용자 요구사항 정의서를 작성하는 거였다. 그러기 위해서 우선 스택오버플로우의 구성요소들을 하나하나 살펴보았다. 코딩을 어느 정도 배웠으니(대부분 이론만 배웠지만) '클론 코딩 정도야 그렇게까지 어렵진 않겠지....? 새로운 걸 만드는 것도 아니고 따라하는건데 ㅎㅎ!' 라는 생각을 했었는데 정말 크나큰 오산이었다. 처음엔 자신만만했지만, 스택오버플로우를 샅샅히 뜯어보면서...... 정말 많은 것들을 생략할 수 밖에 없었다. 자칫 단순해 보일 수 있는 스택오버플로우 메인페이지 하나에 얼마나 많은 요소들이 들어가있는지 자세히 들여다보기 까지는 깨닫지 못했었다. 아무튼, 스택오버플로우를 .. 2023. 6. 15. 네트워크 기초 복습 프로토콜 통신규약, 서버에 요청을 하기위해서 꼭 지켜야하는 약속. 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 대화를 나눈다. 주요 프로토콜 OSI 7 Layers 프로토콜 이름 설명 7.응용계층 HTTP 웹에서 HTML, JSON 등의 정보를 주고 받는 프로토콜 7.응용계층 HTTPS HTTP에서 보안이 강화된 프로토콜 7.응용계층 FTP 파일 전송 프로토콜 7.응용계층 SMTP 메일을 전송하기 위한 프로토콜 7.응용계층 SSH CLI 환경의 원격 컴퓨터에 접속하기 위한 프로토콜 7.응용계층 RDP Windows 계열의 원격 컴퓨터에 접속하기 위한 프로토콜 7.응용계층 WebSocket 실시간 통신, Push 등을 지원하는 프로토콜 6.표현계층 5.세션계층 4.. 2023. 5. 3. fe-sprint-mini-node-server 생각 비교적 간단한 sprint 였지만, 사소한 실수들로 인해 많은 에러를 마주하였다. 열심히 구글링 해가며 오류를 해결해나가는 과정에서의 뿌듯함이 있었다. 요청의 body가 아래와 같이 되어야한다고 하는데 chunk와 Buffer 부분을 이해하지는 못했고 외우기에 그쳤다. let body = []; request.on('data', (chunk) => { body.push(chunk); }).on('end', () => { body = Buffer.concat(body).toString(); }); 2023. 4. 4. fe-sprint-statesairline-client fe-sprint-statesairline-client의 목표 💡 Part 1: 항공권 목록 필터링 🧩 Main 컴포넌트에서 항공편을 조회합니다 ✓ Main 컴포넌트 내 `search` 함수는 검색 조건을 담고 있는 상태 객체 `condition`을 업데이트해야 합니다 (24 ms) 🧩 Search 컴포넌트를 통해 상태 끌어올리기를 학습합니다 ✓ 검색 화면이 Search 컴포넌트로 분리되어야 합니다 (3 ms) ✓ Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 합니다 (5 ms) ✓ 상태 변경 함수 `search`는 Search 컴포넌트의 `검색` 버튼 클릭 시 실행되어야 합니다 (25 ms) 💡 Part 2: AJAX 요청 🧩 Side Effect.. 2023. 4. 3. fe-sprint-react-twittler-state-props-refernce 수도코드 작성해보기 import React, { useState } from 'react'; import Footer from '../Footer'; import Tweet from '../Components/Tweet'; import './Tweets.css'; import dummyTweets from '../static/dummyData'; import shortid from 'shortid'; const Tweets = () => { const [username, setUsername] = useState('parkhacker'); const [msg, setMsg] = useState(''); const [tweets, setTweets] = useState(dummyTweets); const [filteredTw.. 2023. 3. 28. 이전 1 2 3 다음
