스파르타

pwd : 내 위치를 알려줌ls(list) : 내 폴더 안에 있는 폴더 & 파일 내역을 보여줌ls-a(list all) : 숨겨진 파일(보통.으로 시작) 모두 볼 수 있다.cd 폴더명(change directory) : 폴더를 이동.. 상위폴더로 이동폴더명/폴더명 으로

스파르타 부트캠프를 수강하고 첫번째 프로젝트인 팀원 소개하기 페이지 만들기를 시작했다.역할 분담에서 와이어프레임과 상세페이지 단을 맡게 되었는데 pigma툴로 와이어프레임을 만들고 싶어 도전해보았다.팀원들과 회의에서 필요한 페이지와 나열 방법 기능에 대해 이야기 하였고

header의 메뉴를 아이콘을 눌렀을 때가 아닌 사용자의 편리성과 실용성, 가독성을 생각하여 다시 메뉴로 복귀메뉴에 커서를 올렸을 때 효과를 주어 가독성을 키우기(css디자인 사용(::before))상단 스크롤 프로그래스바 구현전체적으로 상세 페이지, 메인 페이지 cs

⭐️프로젝트명 : 누구인가? > 프로젝트기간 : 7/15~7/18 최종배포 : 7/19 배포된 링크 : https://shyunis.github.io/sparta_first/index.html#member-desc 참여인원 : 6명 🌼 날짜별 세부 진행사항 > 첫

피드백 받았던 header + footer를 와이어프레임 디자인에 추가하고 본격적으로 웹사이트 만들기를 시작했다.와이어프레임 상세페이지와이어프레임 메인페이지header, footer 영역과 상세페이지의 자기소개칸을 만들었다.grid활용하여 자기소개란 배치링크들 연결상세

fetch를 사용한 컴포넌트화원하는 위치로 페이지이동 & 스크롤 이동마우스 hover 시 class add&removegrid를 사용한 카드만들기 + slider효과 주기nav 메뉴바 icon눌러서 보이게 한 후 화면 상단 오른쪽 위치 고정시키기css에서 scroll바

: 팀 프로젝트가 끝난 이후 내 git repository로 파일을 옮겨와 배포하려고 했다. git으로 바로 배포하려고 구글링을 하니 두 가지 방법이 나왔다. git clone, git fork 비슷해보이지만 차이점이 있었고 이번기회에 정리하고 기억해두려 한다.git

: Data type, Operator(연산자), 함수(function), 조건문, 객체(Object), 배열(Array), 반복문, break, continueUX(User Experience)= 사용자 경험JS 언어의 특징객체 지향 프로그래밍 지원객체 지향 프로그램

: 데이터의 구성, 검색, 사용을 효율적으로 처리 > 기존의 객체 또는 배열보다: key / Valuekey에 어떤 데이터타입(유형)도 다 들어올 수 있다.Map은 키가 정렬된 순서로 저장되기 때문이다.기능: 검색, 삭제, 제거, 여부 확인주요 메서드new Map()

기본형(Primitive Type)참조형: 값의 저장방식, 불변성 여부에 따라 나뉨복제의 방식a. 기본형 : 값이 담긴 주소값을 바로 복제b. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제불변성의 여부a. 기본형 : 불변성을 띔b. 참조형 :

🌟 영화제작사이트 만들기 // Database연결 const API_KEY = "fbf16579bff5b8c3f6664841d9dd0613"; const URL = https://api.themoviedb.org/3/movie/popular?apikey=${APIKEY}&language=en-US&page=1; fetch(URL) .then((re...

영화 사이트 예술관련 사이트인 만큼 맨처음에는 팝하고 눈에 많은 것이 들어오기 보다는 눈길을 잡아끌게 디자인하고 싶었다...!디자인을 생각하고 몇번을 갈아엎었다... 웹디보다는 js가 중요하지만 이것또한 욕심이 났다...! 몇 번을 갈아엎고 만은 HTML + CSS!!

참조형타입은 값을 직접 가지지 않고 해당 값이 저장된 메모리 주소를 가리킴.얕은복사(shallow Copy): 얕은 복사는 배열의 참조를 복사하는 것으로 원본 배열과 복사된 배열이 동일한 객체를 참조한다. 따라서 한 배열을 수정하면 다른 배열에도 영향을 미침깊은복사(D

영화검색사이트 : https://shyunis.github.io/movieSearch_project1/깃허브 주소 : https://github.com/sHyunis/movieSearch_project1.git나는 fetch관련기능, 검색기능은 ind

git switch -c 브랜치 이름 or git checkout -b 브랜치이름github settings 에서 Default branch 를 Dev branch로 변경Dev 클릭후 update클릭 새로운 브런치에서 코드 수정git pushgit의 Pull reque

내가 만들었던 개인프로젝트를 기반으로 상세페이지, 마이페이지 여러가지 기능들을 추가하기로 되었다. 회의를 진행하여 새롭게 만들 기능을 정하고 각자 기능들을 분배했다.javascript fetch url baseurl로 엮어서 재사용성 증가시키기코드컨벤션 수정즐겨찾기(

메인페이지 nav바 추가상세페이지 댓글 (등록,수정,삭제)프로젝트를 빌드업 하면서 페이지들이 늘어났고 로그인, 회원가입, 마이페이지가 추가로 생기게 되어 깔끔하게 정리할 수 있는 곳이 필요했다..!햄버거 아이콘을 눌렀을 때 나타나고 X표시하면 닫을 수 있도록 자바스크

팀원들과 함께 상세페이지 빌드업을 하고있다.내가 맡은 부분은 상세페이지쪽에서는 댓글작성과 비슷한 장르 fetch로 불러오는 부분이었다.삭제랑 비슷한 과정을 거쳐서 만들었지만 수정을 하기 위해 다시 입력을 받고 입력 받은 것을 대체 시켜주는 과정을 구현하고 생각하는 것이

상세페이지 댓글 수정 기능 prompt창에서 모달창을 띄우는 것으로 변경(팀원분이 댓글 수정을 prompt창을 띄워서 하는 것이 아닌 새로운 모달창을 띄워서 만드는 것이 어떨까 하는 제안을 해주셨고 좋은 제안이라고 생각이 들어 수정하게 되었다.먼저 모달 창을 띄우기 위

팀원들 함께 노력해 만든 영화커뮤니티 페이지 moview프로젝트가 끝이 났다.이번에 팀장으로서 최종발표까지 맡게 되었으며 git세팅 작업, dev 브랜치에서 main브랜치로 옮겨 배포하고 시연하며 오류를 수정해나가는 일을 맡았다.git 배포주소 : https:

스코프에 따른 분류(유효범위)글로벌 스코프 : 어디서든 사용가능블록 스코프 : 중괄호 안함수 스코프 : functionconst , let , var재할당 가능성에 대한 분류const - 상수(값이 변경되지 않는 변수)변수선언은 가장 먼저 const 변경될 때에만 le

yarn create react-app 폴더이름: CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드도구, CRA대신 Esbuild를 사용해서 속도가 빠르다.yarn create vite my-first-vite-react-app --template react빠른 콜드

현재까지 만든 화면업로드중..이번에 새롭게 시작한 프로젝트 부터는 리액트로 작업하게 되었다. 리액트 컴포넌트를 이용하여 props, state를 적극활용해보려고 노력하려고 한다...! 필요한 기능들을 구현하려면 어떤 것이 필요한 지 생각해보기정보입력받기정보저장하기정보

올림픽 메달개수 업데이트 & 제거 기능 개발 & 금메달 많은 순 정렬// 삭제시 페이지결과 삭제 버튼 클릭시 삭제버튼이 눌러진 index를 찾아 이전의 데이터에서 filter처리하여 삭제버튼이 클릭된 index와 다른 것들만 볼 수 있도록 설정했다.// 업데이트시 페이

기술적 관점가상 DOM (Virtual DOM)Routing 이점 ⇒ Browser 위에서 Mobile App 처럼 동작함개발 경험 관점컴포넌트 기반UI를 독립적이고 재사용 가능한 여러 컴포넌트로 분리함으로써, 대규모 애플리케이션의 개발과 유지보수를 용이하게 합니다.선

css in js 스타일로 원하는 영역에만 스타일을 적용시킬 수 있다.Yarn add styled componentsGlobalStyle or styled from styled-componentscss-in-js를 사용함으로써 style을 적용할 때 조건문, 변수 등

useCallback()으로 초기화를 한다.초기화로 예시사용const initCount = useCallback(()=>{}): value를 캐싱한다.무거운 컴포넌트나 데이터 값을 최초에 한번만 값을 가져오는 용도로 많이 사용But, 하지만 남발해서 썼을 때는 데이터를

CRA나 Vite를 사용하지 않고 React 어플리케이션을 구성해보기이유 : CRA는 간편하게 설정을 자동화해 주지만, 커스터마이징에 제약이 많아 실무에서 한계가 있을 수 있음CRA대신 Webpack과 Babel을 이용해 React 프로젝트를 설정하는 방법을 익힌다.번

redux아래 slices폴더생성(컨벤션)counterSlice.js 생성초기 상태값 설정counterSlice에 createSlice생성createSlice는 객체(name, initialState, reducers)를 인자로 받음counterSlice.jsconfi

Firebase : Google이 운영하는 플랫폼, 실시간데이터베이스, 사용자인증, 애널리틱스를 쉽게 이용할 수 있다.Parse : 자유도가 높은 오픈 소스 BaaS로, 커스터마이징이 가능해 많은 개발자한테 사랑받고 있음AWS Amplify : 강력한 AWS 클라우드

React.mjsindex.mjs

node-modules : 라이브러리 코드 보관함 public : static파일 모아놓는 곳 src : 코드 짜는 곳 package.json : 프로젝트정보 style넣을 땐 style={{스타일명 : '값'}] -쓸 수 없음 ex) font-size => font

react-create-app Create React App은 React의 Boiler Plate이다. 보일러 틀에 여러 개의 보일러를 찍어내듯, 초기 환경을 일일히 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 완료해놓은 틀이라고 보면 된다. Q. 프

MOC

지난 번 만들어둔 props-drilling으로 만들어둔 프로젝트에 불편함을 느끼면서 context를 사용하여 불필요한 props-drilling을 제거해 코드를 리펙토링 하기로 했다.src > contexts폴더를 생성, PokemonContext.jsx 파일을 만듬

Action: 애플리케이션에서 어떤 이벤트가 발생했음을 나타내는 객체Dispatcher: 발생한 Action을 받아서 다른 요소들에게 전달하는 역할Store: Action의 결과로 변경된 상태를 저장하는 공간View: 사용자에게 데이터를 표시하고, 또 다른 Action

지금까지 배웠던 React hook, react-route-dom 들을 이용하여 뉴스피드 사이트를 만들게 되었다. 저번에 이어 팀장을 맡게되었고 프로젝트 관리, 일정 관리 등 신경써야 할 부분들을 놓치지 않고 챙기기 위해 많이 노력할 것이다.팀원들과 함께 주제를 정하기

supabase회원가입 new Project생성 title, 비밀번호, 국가 설정 vscode 프로젝트에서 supabase폴더생성 supabase폴더이동 yarn init -y yarn add @supabase/supabase-js Supabase 클라이언트 설정:

나는 이번에 프로젝트, 깃 초기세팅을 하고 supabase를 이용해 회원가입, 로그인, 로그아웃을 하고 해당 사이트들의 디자인을 맡았다. 회원가입할 때의 정보를 auth 에서 public으로 연결해 정보들을 사용할 수 있도록 연결해주었다.굉장히 시간을 많이 소비하고 헤

대부분의 사이트에서는 사용자들의 많은 유입과 편리를 위해 1분회원가입, 소셜로그인 기능을 제공한다...!오늘은 supabase를 사용하여 소셜로그인 기능 개발을 해보았다로그인 화면에서도 회원가입 창에서도 공통적으로 똑같은 UI가 들어갈 것 같아 SocialSign.js

기본 로그인 회원가입 구현이 끝난 뒤 로그인 여부에 따른 사이트별 접근성을 부여하였다. 마이페이지, 레시피작성은 로그인을 한 대상자들에게만 접근성을 주었다.이미 context를 사용해 전역에서 로그인 상태를 관리하고 있었기에 여기에서 처음 페이지를 로딩할 때 뿐만 아

클라이언트-서버 모델 기반 동작(클라이언트가 요청 서버가 응답 반환)무상태성: 모든 요청 독립, 이전 쵸엉의 정보를 기억하지 않음 이를 무상태라고 함확장성유연성 : 다양한 데이터 형식 ex)텍스트, 이미지, 비디오요청 메세지 \- 요청 라인 : 메서드(GET,PO

다운로드 UI가 있을 때 또는 UX 저해시키는 불필요한 네트워크 요청을 제거하기 위해 사용대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있다.: 서버 요청이 정상적

lodash는 JavaScript 유틸리티 라이브러리, 배열, 객체, 문자열 등의 데이터 조작을 쉽게 할 수 있는 함수들을 제공한다.성능 최적화와 코드 가독성을 높이는데 유용,throttle, debounce 같은 함수도 포함되어 있다.인증(authentication)

MBTI TEST로 개인의 취향을 알고 공유할 수 있는 페이지

프로젝트 명 : 공연 공유 페이지소개한 줄 정리 : 공연을 공유하고 검색할 수 있는 페이지내용 : 메인페이지 - 현재 상영중인 공연(일주일), 내 위치 주변 공연장 카테고리 - 장소로 검색하기, 장르로 검색하기, 검색바 (+시간되면 날짜 포함)

: 상세페이지 정보는 KOPIS의 개발 PDF를 참고하여 상세데이터 API를 연결하였다. URL뒤에 개별 id를 붙여서 가져오는 방법으로 작성하였다. XML데이터를 json으로 변환해주고 data정보는 zustand를 사용해 저장해주었다. axios를 사용하여 api를

상세페이지의 지도를 연결하고 맨 처음 zustand를 사용해서 api를 연결하고 데이터를 저장했다. tanstackQuery로 댓글 작성 기능을 만들고 zustand로 데이터를 저장할 필요없이 tanstackQuery로 관리하는 것이 더 좋을 것 같다는 피드백을 받았다

메인페이지 스크린샷 2024-09-20 오후 4 45 08상세페이지 커뮤니티 페이지카테고리 페이지 내일배움캠프 5진스프로젝트명   :  커튼콜진행 기간  :   24.09.11 ~ 24.09.23프로젝트 세팅 : yarn create vite --temp