
▶프로젝트 폴더 구성 크게 클라이언트 부분은 📁frontend 폴더에서 구성하였으며, 서버 부분은 📁backend 폴더에서 구성하였습니다. 📁 backend 폴더 본 폴더에서는 주로 Node JS 프레임워크를 이용하여 서버 관련 코드를 관리하였습니다. 📄src/api/index.js 파일 → api 연결 코드 📄src/api/mysql.js → 데이터베이스 연결 코드 📄server.js → 미들웨어 및 서버 연결 코드 📁 frontend 폴더 본 폴더에서는 React JS를 이용하여 클라이언트 관련 코드를 관리하였습니다. 📁css → 화면 구성에 이용할 css 파일들을 모아둔 폴더 📁view → 화면 구성에 이용할 컴포넌트 파일들을 모아둔 폴더 🔧 프로젝트 진행 방법 VS Code 라는 소스 코드 편집기..

▶facebook 프로젝트를 회고하기 전에 본 프로젝트는 코리아it 아카데미 프론트엔드 수업에서 강사님과 함께 진행한 프로젝트입니다😀 React JS와 Node JS 및 Maria DB를 기반으로 제작하였습니다. facebook을 테마로 구현한 기능은 다음과 같습니다. 회원가입 및 로그인 계정 찾기 및 탈퇴 게시물 불러오기 좋아요 기능 댓글 기능 게시판 ( 글 목록 불러오기, 글 내용 불러오기, 글 편집, 글 작성하기, 글 삭제하기) 📄 메인화면 📄 계정찾기 화면 📄 회원가입 화면 📄 홈 화면 📄 홈 화면 - 댓글 부분 📄 게시판 화면 📄 게시판 - 조회 화면 📄 게시판 - 글 작성 화면 📄 게시판 - 게시물 편집 화면 앞으로 위와 같이 구현한 기능에 대한 코드에 대해 다시 돌아보고 정리해 보는 글을 작..

▶타입스크립트란? 1. 타입스크립트란? 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript) 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 자바스크립트 냅두고 타입스크립트 왜 쓰는데..? 자바스크립트는 장점이자 단점이 존재합니다. 예를 들어 5 - 3 을 하게 되면 2가 나옵니다. 그런데 자바스크립트에서는 5 - '3' 도 2가 나오게 됩니다. 자바스크립트는 Dynamic Typing이 가능합니다. 그렇기 때문에 원래는 숫자 - 숫자만 가능하지만, 자바스크립트가 알아서 '3' 같은 경우에도 알아서 숫자로 바꿔서 계산해주게 됩니다. 이 점은 편리하기도 하지만 프로젝트가 커지면 단점이 되게 됩니다. 원하지 않은 부분에서도 이러한 자바스크립트의 특징들이 적..

▶스코프(Scope) 스코프(Scope)는 변수나 매개변수에 접근할 수 있는 범위를 결정합니다. 자바스크립트의 스코프는 함수와 블록 단위의 스코프로 나눌 수 있으며, 함수나 블록의 선언 위치에 따라 중첩된 스코프가 정의될 수 있습니다. 이번 글에서는 스코프의 종류와 렉시컬 스코프 규칙, 스코프 체인을 통한 검색 방법에 대해 설명할 것입니다. 그리고 자바스크립트의 유명한 특징인 호이스팅의 동작 방식과 모튤 스코프를 정의하고 사용하는 법에 대해서도 알아보겠습니다. 1) 함수 스코프와 블록 스코프 자바스크립트에서는 함수 스코프와 블록 스코프가 존재합니다. 우선 자바스크립트에서 가장 흔하게 사용되는 함수 스코프부터 알아봅시다. ▷함수 스코프와 var 함수 스코프는 말 그대로 선언된 함수 단위로 생성되는 스코프이..

▶함수 자바스크립트에서 함수는 가장 중요한 개념 중 하나이며 자바스크립트 함수만의 독특한 특징들이 있습니다. 함수의 특징을 얼마나 잘 이해하느냐가 자바스크립트 개발자로서의 역량을 판가름하는 기준이 될 수 있겠습니다. 단순한 함수 정의나 호출을 통해 결과 값을 얻는 것 이외에 this 바인딩, 클로저 등 자바스크립트 함수만의 특징을 제대로 이해하고 있어야 합니다. 1) 함수란 무엇인가? 함수는 객체의 특별한 형태이며 문(statement)으로 구성된 몸체를 가진 하나의 실행 단위입니다. function doSomething() { console.log('hello javascript'); } 또한 자바스크립트 함수는 일급 함수(first-class function)로서 다른 함수의 매개변수나 반환 값으로도..
- Total
- Today
- Yesterday
- HTML
- frontend
- 인프런
- next.js
- 프론트엔드 기초
- 타입스크립트
- 자바
- 딥러닝
- 디프만
- 리액트
- 스타일 컴포넌트 styled-components
- 데이터분석
- 프로젝트 회고
- jest
- rtl
- 프론트엔드
- Python
- 파이썬
- styled-components
- 자바스크립트
- 프론트엔드 공부
- react
- CSS
- testing
- 머신러닝
- 리액트 훅
- react-query
- 자바스크립트 기초
- JSP
- TypeScript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |