Sparta x 이노베이션 캠프 (69) 썸네일형 리스트형 내돈내여 : Front-end code convention code convention 1. NAMING CONVENTIONS (중요: 잘 지켜야 함!!) Compenents 이름: Pascal case (첫 단어를 대문자로 시작) Non-components: Camel case (띄어쓰기 대신 대문자로 단어 구분) 상위 폴더에 속해있는 파일들 이름 직관적으로, 알아보기 쉽게 통일 (ex: mypage folder > Myinfo.jsx , Mylikes.jsx, Myplan.jsx …) 속성명: Camel case로 작성 (className, onSubmit, onChange…) inline 스타일: Camel case로 작성 2. BUG AVOIDANCE null 또는 undefined 일 수 있는 값은 optional chaining 연산자 (?.)사용 3.. 내돈내여 : Github-flow & Git commit message convention Github-flow 전략 FE member's branches(eunji, hyelim, dada): 각자 기능 개발하는 브랜치(feature브랜치 역할) semi: 각 멤버의 branch들을 merge한 배포 전 테스트용 브랜치 (develop 브랜치) 사용전략 각 멤버의 기능 개발 branch에는 기능이 추가 될 때 마다 리뷰와 사인이 끝난 후 수시로 push 한다. 기능 구현이 완료 되면 semi로 pull request 하여 merge. semi에서 기능 개발 branch들을 병합한 후 오류 수정 및 검토 ⇒ master 브랜치에 pull request 하여 merge. master: 실제 배포가 될 브랜치. semi 에서 테스트 후 병합. 빌드 후 배포 Git commit message con.. 실전 프로젝트 - 내돈내여 (React + Spring) 광고 없는 여행 후기 내돈내여로 떠나기 ✈️ Back-End Github 👀 Front-End Github 👀 🧑🏻💻👩🏻💻 팀원 소개 서비스 개요 내 돈내고 내가 여행하는, 진정성있는 국내 단기 여행 정보 공유 플랫폼 서비스 서비스 아키텍쳐 Front-end node.js, 사용자 요청에 따른 각기 다른 웹사이트를 보여줄 수 있도록 동적 웹 호스팅이 가능한 EC2와, 리버스 프록시로서의 역할을 하며 서버가 SSL 요청을 처리하는데 드는 비용이 없는 nginx를 이용해 데이터 보안을 위해 https 환경으로 끊김없는 서비스를 제공 할 수 있고 많은 레퍼런스를 가진 PM2를 통한 무중단 배포를 하였고, 리액트 상태를 전역으로 관리하고 사용이 편리한 Redux-toolkit을 사용하였습니다. 또한 클라이언.. TIL: 자바스크립트의 특징 자바스크립트란 JavaScript 객체 기반의 스크립트 프로그래밍 언어. 인터프리터 혹은 just in time 컴파일 프로그래밍 언어로 일급함수를 지원한다. 자바스크립트로는 웹의 동작을 구현할 수 있다. 주로 웹브라우저에서 사용되지만 Node.js같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. 현재 자바스크립트의 최신 표준은 2015년 발표된 ECMAScript6. just in time : JIT 컴파일 또는 동적 번역은 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이다. 일급 함수 : 함수를 다른 변수와 동일하게 다루는 언어를 일급 함수를 가졌다고 표현. 일급 함수를 가진 언어에서.. TIL: 프로그래밍, 컴파일러와 인터프리터 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 해결해야 할 문제(요구사항)를 명확히 이해한 후에 적절한 문제 해결방안을 정의할 필요가 있다. 0과 1 밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구를 설명하는 작업이며, 그 결과물이 바로 코드이다. 컴파일러, 인터프리터? 컴파일러란 특정 프로그래밍 언어로 씌여진 프로그램 을 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 말한다. 컴파일러는 고급 프로그래밍 언어를 실행 프로그램으로 만들기 위해서 저급 프로그래밍 언어로 바꾸는데 사용된다. 원래문서 (소스코드 혹은 원시코드) => 출력된 문서 (목적코드) 인터프리터란 프로그래밍 언어의 소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다... TIL : useMemo, useEffect, useCallback 각 사용법, 차이 invalid Hook call 에러가 나는 원인에는 여러가지가 있는데 Hook에 대해 잘 모르는 상태로 쓸 때 에러 확률이 높다. 특히 커스텀 Hook을 만들어 사용할때! Custom Hook을 쓰는 이유는 use로 시작하는 여러가지 Hook을 하나로 묶기 위함임. useEffect 목적 : 뭔가가 바뀌면 어떤 동작을 자동으로 실행하기 위해 사용한다. 인자 인라인 콜백함수: 의존성 리스트에 있는 항목 중의 하나가 업데이트 되면 실행시킬 동작 의존성 리스트: 이 리스트에 있는 요소가 업데이트되면 콜백함수를 다시 작동. useEffect(()=>{어떤 동작},[뭔가]); 사용 예 useState와 함께 사용하는 예시 const [ state, setState ] = useStae('idle'); //프로세.. TIL : 카카오맵 지도 범위 재설정 하기 (Trouble Shooting, 코드리팩토링 ver.2) 내가 짠 코드를 리펙토링하면서 실전프로젝트에서 쓰는 카카오맵을 지도 범위 재설정을 해주었다. 예전 코드는 맵이 보여지는 컨테이너를 삼항연산자를 이용해 어떤 경우에 무슨 좌표를 보여 줄 지를 결정했다. 예전 맵 예외처리에 관한 포스팅 TIL : React 카카오 api 맵 예외처리, 카카오맵 중심좌표 이동시키기 실전 프로젝트 3주차. 벌써 반이나 지나갔다. 개발하고있는 어플리케이션은 여행후기공유 플랫폼이고 Minimum Viable Product (MVP)는 1. 소셜로그인 (네이버, 카카오) 2. 회원가입시 여행관련 관심사 선 nonjee888.tistory.com 예전에 맵을 보여주는 방식은 일일이 center 좌표를 데이터에서 뽑아내서 찍어주는 방식이었다면 이번 리펙토링은 라이브러리에서 제공하는 샘플.. TIL : JavaScript 데이터타입 자료구조를 알아보자. 원시값 : 객체를 제외한 모든 타입은 불변 값을 정의한다. 이를 원시값이라고 한다. Boolean : true or false Number: 1. 배정밀도 부동소수점 숫자 (double precision floating number) 로 알려진 64비트 형식의 IEEE-754에 저장. 2. BigInt : 일반적인 숫자는 2⁵³ 이상이거나 - 2⁵³ 이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어짐. 아주 특 별한 경우에만 사용됨 null : 어떤 값이 의도적으로 비어있음을 표현한다. 불리언 연산에서는 거짓으로 취급된다. undefined: 값을 할당하지 않은 변수는 undefined값을 가진다. 그리고 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우에 .. 이전 1 2 3 4 ··· 9 다음
