본문 바로가기
반응형

공부

 (111)
React 입문 2 (컴포넌트, jsx) React Components란?📖리액트에서 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것을 말합니다! 개념적으로 컴포넌트는 javascript 함수와 유사합니다. 함수형 컴포넌트// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)function Welcome(props) { return Hello, {props.name};}// 훨씬 쉬운 표현을 해보면 아래와 같죠.function App () { return hello} 클래스형 컴포넌트class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}  JSX란?📖JSX(j..
React 입문 1 (SPA, CSR, SSR, 라이브러리) React란 📖UI를 만들기 위한 라이브러리입니다. 1. React가 라이브러리인 이유프레임워크라고 불리기에는 제공해야 하는 기능이 부족하고 `상태관리(Redux)`, `라우팅(React-router-dom)` 등 개발자가 직접 제어하기 때문입니다.  프레임워크 vs 라이브러리📖1. 프레임워크개발자가 기능 구현에만 집중할 수 있게 애플리케이션의 구조 또는 틀을 제공하기 때문에 프레임워크가 정한 규칙과 구조 내에서 개발을 진행할 수 있습니다. 2. 라이브러리라이브러리는 특정 기능을 수행하는 코드의 집합으로 필요에 따라 선택적으로 사용할 수 있습니다.ex) `React.js` `react-router-dom` `redux` 3. 제어의 역전 (IoC)개발 시 `제어`를 하는 것은 개발자의 역할인데 프레임..
[팀 프로젝트] 영화 검색 사이트 팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/  요구 사항 📌필수 구현 사항✅ TMDB 오픈 API 이용✅ 영화 정보 상세 페이지 구현✅ 상세 페이지 영화 리뷰 작성 기능 구현     ✅ 비밀번호 암호화✅ github PR 사용한 협업✅ UX를 고려한 validation check 도전 과제✅ CSS flex, grid, 반응형 UI 구성✅ 상세 페이지 리뷰 수정 및 삭제 기능✅ 메인 페이지 정렬 기능 (이름, 별점, 개봉일 등) 추가 기능 ✅ 홈 화면..
[팀 프로젝트] 영화 검색 사이트 회고 Keep (현재 만족하는 부분) 😁적극적인 피드백모르는 부분이나 로직이 생겼을 때 팀원들과 공유해 문제를 해결해 나아가는 모습이 좋았습니다. 역할 분담역할 분담이 잘 된 것 같아 기능 개발을 순탄하게 진행했던 것 같아서 좋았습니다! 네이밍 컨벤션 및 주석네이밍 컨벤션을 정하고 시작해서 변수명이나 함수명에서 충돌이 발생하지 않아서 좋았습니다! 그리고 주석을 적재적소에 잘 사용해 코드를 이해하는데 도움이 많이 됐습니다! 마감 시간 준수제시간에 제출하는 게 다하지 못 하더라고 중요한 것이었는데 프로젝트 구현사항에 버그가 없이 완벽하게 구현사항을 해결하고 제출했다는 점에서 좋았습니다!  Problem (불편하게 느꼈던 부분) 😥초기 세팅각자 다른 prettier를 사용하여 공백이나 여백이 달라 머지 시 문제..
javascript 심화 7 (클로저) 클로저 📖1. 개념`클로저`는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 2. 렉시컬 스코프어디서 `호출했는지`가 아니라 어디에 `선언`했는지에 따라서 상위 스코프가 결정되는 것입니다!const x = 1;function foo() { const x = 10; bar();}function bar() { console.log(x);}foo(); // 1bar(); // 1 bar 함수는 foo 함수 내부에서 `호출`됐지만 전역에서 `선언`되었기 때문에 전역변수 x를 참조하게 돼서 1을 출력하게 됩니다! 3. 함수가 선언된 렉시컬 환경간단하게 설명하면 `클로저`란 외부 함수의 변수에 접근할 수 있는 내부 함수입니다!function outerFunc() { // 외부 함수의 변수 var x..
[트러블 슈팅] 영화 검색 사이트 (TypeError, 애니메이션, 이미지 로딩) [팀 프로젝트] 영화 검색 사이트팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/  요구 사항 📌필수 구mingos-habitat.tistory.com영화 검색 사이트 개발을 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다. 1. TypeError: Cannot read properties of null (reading 'addEventListener')발생한 오류 🔥`common.js`에서 사용하는 formatMovie 메서드를 `detailPag..
javascript 심화 6 (이벤트 루프) 이벤트 루프 📖자바스크립트의 특징이벤트 루프를 설명하기 전에 자바스크립트의 특징에 대해 간단히 알아보겠습니다. ❗중요 키워드 `싱글 스레드`, `비동기` 자바스크립트는 한 번에 하나의 작업만을 처리하기 때문에 싱글 스레드 언어입니다. 비동기로 동작하기 때문에 싱글 스레드임에도 불구하고 동시에 작업을 수행할 수 있습니다.그러나 `비동기로 동작하는 핵심 요소`는 자바스크립트가 아닌 `브라우저`가 가지고 있습니다! 브라우저의 기본 구조 구성 요소`Heap` : 메모리 할당이 발생하는 곳입니다. `Call Stack` : 실행 컨텍스트를 저장하는 자료구조(LIFO)로 함수를 호출하면 Call Stack에 push 됩니다. `Web APIs` : 브라우저에서 제공하는 API로 DOM, AJAX, setTimeo..
슬랙(Slack)에 깃허브(Github) 알람 연동하기 오늘은 Slack에서 Github commit, pull, pr 등 알림을 받을 수 있는 방법에 대해 소개해보려고 합니다! Slack 📖1. Github 설치우선 slack에 접속하셔서 Github App 설치를 해주셔야 합니다. 더보기 -> 자동화 -> github 검색 -> 추가  그리고 액세스 권한 설정을 하시고 허용 버튼을 눌러주시면 됩니다.  2. 레퍼지토리 연결 github를 설치하셨다면 github 앱에 접속해 주시면 됩니다. 채팅창에 알림을 받길 원하는 git repository 주소를 입력해 주시면 됩니다./github subscribe https://github.com/smu06030/movie-app-team12  그리고 `Connect Github account` 버튼을 눌러 Gi..

티스토리툴바