본문 바로가기
728x90
반응형

source-code229

Web Service 기초 1. Web Service? 웹 서비스란 뭘까? 여러 대답이 가능하겠지만, 모든 설명은 다음과 같은 뿌리에서 출발한다. 바로... "우리는 웹 서비스로부터 원하는 정보를 얻는다!" 클라이언트가 이떠어떠한 정보를 제공해달라고 요청(Request)하면, 서버는 내부에 저장된 리소스들 중, 해당되는 정보를 담아 응답(Response)해주는 것이 전체적인 Web Service의 흐름. 즉 우리가 웹 서비스를 만든다!라고 말을 할 때, 여기에 숨겨진 뜻은... 이용자들의 요청을 처리할 수 있는 서버를 만드는 것!이라 할 수 있겠다. 와우! 그렇다면 이 때, 클라이언트의 요청과 서버의 응답을 통해 무엇이 오고 가는 걸까? → 요 녀석이 바로 HTML! 2. HTML 그럼 HTML은 또 뭘까. 우와! 간단히 말해 H.. 2021. 4. 4.
기본 환경설정하기 1. VS code 비주얼 스튜디오 코드. 간단히 말해 코드 작성을 좀 더 용이하게 만들어주는 코드 편집기라 할 수 있다. 제일 먼저 Visual Studio 홈페이지에 접속! code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and clo.. 2021. 3. 31.
Custom Hooks 1. useInput 2. useTabs useEffect → ComponentDidMount / ComponentDidUpdate / ComponentWillUnMount / (마운트 되고 나서 / 업데이트 되고 나서 / 언마운트 될 때) 3. useTitle 4. useClick 5. useConfirm & usePreventLeave 6. useBeforLeave 7. useFadeIn hook을 이용해 transition 효과 2021. 3. 31.
Git Repository 초기화하기 Git을 이용하다보면, 실수로 올리지 말아야 할 파일을 push하는 경우가 생긴다. 아무리 지우려 애써봐도 이미 올라간 파일(및 기록)을 지우기란 쉽지 않은 일. 이런 상황에서 쉽게 레포지토리를 초기화할 수 있는 방법을 알아보자. 1. 로컬 저장소의 .git 디렉토리 삭제 2. 잘못된 파일 삭제 or 수정 후 로컬 저장소에서 다시 git init 수행 → 초기화! 3. 초기화에 등록될 파일 추가 git add. 4. 초기화에 등록될 파일 커밋 git commit -m "커밋 메시지" 5. 초기화 시킬 원격 저장소 추가 git remote add origin "url" 6. 현재 상태를 원격 저장소에 적용 git push --force --set-upstream origin master (이를 통해 git.. 2021. 3. 31.
Insta 클론 코딩 _ 자잘자잘 에러 해결 역시 React를 통해 인스타 클론 코딩을 하던 중... 버튼 클릭을 하면 숫자를 올렸다 내렸다 하는 기능(좋아요)을 만드려는데, 요런 에러와 만났다. 이것이 해당 코드! liked라는 상태(true/false)와 likeNum이라는 상태(누르면 +-1)를 선언해줬다. TogggleLike가 작동(onClick이벤트)되면 liked의 상태를 !liked로 업데이트하고, liked가 true면 likeNum에 +1을, false면 likeNum에 -1을 넣어 setLikeNum으로 업데이트! 잘 적었다고 생각했는데... Assignment to constant variable이란 녀석을 만난 것. 요놈이 무엇인고 찾아보니... constant, 즉 상수에 variable한 값을 지정했기 때문에 생긴 문제란.. 2021. 3. 29.
API 요청으로 데이터 사용하기 React로 인스타 클론 코딩을 하던 와중, User 정보가 담긴 데이터가 있으면 좋겠다는 생각이 들었다. 그렇다고 직접 Object들을 담은 Array를 만들(수는 있겠지만)고 싶지는 않으니, User 데이터를 가진 서버에 API 요청을 보낸 후 이를 사용해보고자 했다. (API : https://jsonplaceholder.typicode.com/users) 이전에 책에서 했던 외부 API 연동 부분을 참고하면 되겠군! 2021.03.18 - [Frontend/React] - 리액트를 다루는 기술 _ 14장 리액트를 다루는 기술 _ 14장 눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1.. 2021. 3. 26.
CSS _ 헷갈 속성 정리 2 1. 선택자 다음과 같은 상황에서... 에 접근 : div > a 에 접근 : div > a > p or div p 에 접근 : div + li → div 기준 바로 다음에 오는 li에 접근! 2. div 내 text 세로 가운데 정렬 이렇게 속성을 주면... (CloneName은 "TodoClone"을 둘러싸고 있는 div) height만 늘어나고 글자는 본래 위치에 남고 만다. text 세로 가운데 정렬을 위해 line-height 속성을 div 높이만큼 준다! line-height는 줄 높이를 정하는 속성! (참고 : www.codingfactory.net/10639) normal : 웹브라우저에서 정한 기본값(보통 1.2) length : 길이로 줄 높이를 정함. number : 글자 크기의 몇 .. 2021. 3. 24.
리액트를 다루는 기술 _ 22장 슉슉슉 읽고 넘어가는 중... 22장. MongoDB 서버 개발 시 DB를 이용하면 웹 서비스에서 사용되는 데이터를 저장하고, 효율적으로 조회하거나 수정할 수 있다. 기존에는 대부분 MySPL, OracleDB, PostgreSQL 같은 관계형 데이터베이스를 사용했다. 하지만 요 녀석들의 단점은... 1. 데이터 스키마가 고정적 - DB에 들어갈 데이터 형식이 고정적이라 새로운 형식의 데이터가 추가되면 기존 데이터를 몽땅 수정해야 한다. 2. 확장성 - 저장, 처리할 데이터양이 늘어나면 여러 컴퓨터에 분산시키는 것이 아닌, DB 서버의 성능을 업그레이드하는 방식. MongoDB는 이런 한계를 극복한 문서 지향적 NoSQL DB! 즉 데이터의 구조가 자주 바뀐다면 문서 지향적 DB가, 까다로운 조건으로 데.. 2021. 3. 24.
리액트를 다루는 기술 _ 21장 내게는 Django 뿐일 줄 알았는데... 21장. 백엔드 프로그래밍 : Node.js 웹 애플리케이션을 만들 때, React와 같은 프론트엔드 기술만으로 필요한 기능을 모두 구현할 순 없다. 왜? 데이터를 여러 사람과 공유하려면... 저장할 공간이 필요하니까! 이를 위해 우리는 서버를 만들어 데이터를 저장해 여러 사람과 공유한다. 그러나 서버에 데이터를 무작정 담는 것은 아니다! → 이러한 규칙을 지정하는 것이 백엔드(서버) 프로그래밍이라 생각하면 좋을 듯! 21-1) Node.js 알아보기 Node.js는? 웹 브라우저뿐만 아니라 서버에서도 JS를 사용할 수 있는 런타임! Node.js 환경에서 웹 서버를 구축할 때는 보통 Express, Hapi, Koa 등의 웹 프레임워크를 사용한다. 여기서는 K.. 2021. 3. 23.
728x90
반응형

티스토리툴바