TIL series
1.[TIL] 231019
프로그래머스 코딩 기초 트레이닝 Day0 출력\--> 코딩 기초 트레이닝에서 언어를 JavaScript로 선택했더니 처음 보는 입출력 문제부터 나와서 당황했다. js도 입출력이 기본인가?!일단 전체적인 틀이나 css를 구상했다.처음 생각한건 이런 모양에 포스터 위에 마
2.[TIL] 231020
"JS 엔진은 코드 실행 전 모든 변수 정보를 알고 있다. (가상개념)"호이스팅 규칙1) 매개 변수 및 변수는 선언부를 호이스팅2) 함수 선언은 전체를 호이스팅 \+ 함수 정의 방식에 따라 호이스팅 달라짐 호이스팅은 코드 실행 전 변수/함수 선언을 해당 스코프
3.[TIL] 231023
첫번째 개인 프로젝트는 TMDB 오픈 API를 이용해 인기 영화 데이터를 불러오는 것이었다.jQuery라이브러리 없이 순수 바닐라 js로 구현해야하고 몇 가지 조건들이 있었다.↓ 과제 예시 화면구현해야 하는 주요 기능 1) TMDB 오픈 API에서 인기영화 20개의
4.[TIL] 231024
두번재 팀 프로젝트는 직전에 만들었던 영화 정보 페이지를 더 개선하고 기능을 추가하는 것이다. 새로운 API는 불러오지 않고 기존의 TMDB에서 불러온 것을 활용하기로 했다.인기영화 20개를 인기순 / 평점순 / 사전식 / 개봉일순으로 나타내기영화 상세페이지 따로 구현
5.[TIL] 231025
메인페이지와 상세페이지에 공통으로 들어가는 header부분과 footer부분의 html 뼈대와 css부분을 github를 이용해 공유했다.API에서 불러오고 sorting 옵션에 맞게 화면을 구성하는 내용까지 했다. 검색 기능 정상 작동까지 완료.↓ 사전식 정렬↓ 검색
6.[TIL] 231026
setItem 메소드를 이용한다. localStorage는 key값과 value값을 갖는 객체 형태로 저장된다. 이미 저장된 key값이 있으면 덮어쓰기 된다. (중요!) localStorage에 객채를 저장하고 싶다면 JSON.stringify를 이용해 JSON 문자열
7.[TIL][React] yarn start 했을 때 "something is already running on port 3000." 해결 방법
오늘은 내배캠 React 입문 주차이다.바닐라 js는 가볍게 혼자 공부한 적이 있었지만 React는 완전히 처음 접하는 거라 강의를 꼼꼼히 보면서 공부를 시작했다. 실습을 따라하면서 크게 어려운 부분은 없었지만 상대경로를 jsconfig.json을 이용해 절대경로로 지
8.[TIL] 231106의 TIL
문제 설명문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다.먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다.이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로
9.[TIL] 알고리즘 기본문제 쫌쫌 풀어보기
앗 이렇게 풀 수도 있구나!! 하는 것들 위주로 기록문제 설명문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요.제한 조건s의 길이는 1 이상 5이하입니다.s의 맨앞에는 부호(+, -)가 올 수 있습니다.s는 부호와 숫자로만 이루어져있습니다.
10.[프로그래머스] 기본출력문제들
: 문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요:정수 a와 b가 주어집니다. 각 수를 입력받아 입출력 예와 같은 형식으로 출력하는 코드를 작성해 보세요.:문자열 str과 정수 n이 주어집니다.str이 n번 반복된 문자열을 만들어 출력하는 코드를
11.뉴스피드 프로젝트 S.A.
하루를 되돌아 보고 감사한 점 5개를 매일 작성하는 서비스를 만드는 것이 이번 프로젝트의 목표이다.home 페이지에서 다른 사람이 작성한 감사일기를 볼 수 있고, 댓글 기능을 구현할 예정마이 페이지에서 내가 작성한 감사일기를 볼 수 있고, 수정 및 삭제 기능을 구현할
12.뉴스피드 프로젝트 중간점검(1)
: 마이페이지에서 사용자가 작성한 감사일기를 한번에 볼 수 있고 수정/삭제가 가능하다.기능을 우선적으로 구현했다.감사일기 수정/삭제 기능 구현: 사용자 정보 더미데이터와 감사일기 더미데이터를 .json파일로 작성해 테스트 했다.수정/삭제 기능은 화면을 새로고침 했을 때
13.감사일기 KPT 회고
사용자 인증 기능: 구글과 GitHub을 이용한 로그인 기능은 사용자의 편의성을 높이고, 데이터 보안을 확보하는 데 도움이 되었습니다.데일리 감사 일기 기능: 사용자가 매일 감사한 것을 5가지 작성하고 공유할 수 있는 기능은 긍정적인 커뮤니티 환경을 조성하는 데 기여하
14.메타 태그와 오픈 그래프
HTML 문서의 <head> 태그 내에 포함되는 태그 : 웹 페이지의 정보를 설명하고 브라우저와 검색 엔진에게 추가적인 정보를 제공하는 역할을 한다. : 웹 페이지의 제목, 설명, 키워드, 문자 인코딩 등을 설정할 수 있고, 이 정보들은 검색 결과에 표시되
15.react로 인증 서비스가 들어간 그룹 아티스트 팬레터함 만들기
vercel 배포 링크: https://fan-letter-adv.vercel.app/Redux Toolkit으로 리팩토링 및 json-server 를 이용한 REST API 통신https://github.com/rjc1704/react-persona
16.카카오맵 API와 CRA를 이용해 장소 공유 서비스 만들기 S.A.
🎄♨🔥산타의 핫스팟🔥♨🎄 (..가제..)연말 크리스마스 분위기를 느낄 수 있는 공간을 지도에 추가하고 멋진 사진과 함께 공유해보세요~!~!redux / toolkit, thunk, queryKakao 지도 APIFirebaseGithubRTK 으로 상태 관리카
17.Where2Go (어디가지🍆) 프로젝트 S.A. (미완성)
프로젝트 명 : Where2Go (어디가지🍆)소개한 줄 정리 : 자랑하고 싶은 숨은 명소들, 함께 즐기고 싶은 특별한 장소들을 공유하는 지도 기반의 소셜 플랫폼 입니다내용 : ‘어디가지?’ 는 지도 기반의 소셜 플랫폼으로, 여러 사용자들이 자신만의 특별한 스팟을 공
18.Where2Go (어디가지🍆) 프로젝트 KPT 회고
도⭐⭐팀 분위가 너무 좋았다모르는 것이 있을 때 같이 고민해주고 답을 찾는 과정이 좋았다깃헙 룰이 잘 지켜졌다고 생각한다마⭐⭐초기 프로젝트 세팅 : 프로젝트 초기 설정을 탄탄하게 해서 편했다팀원간의 활발한 의사소통 : 의견 공유와 피드백을 통한 프로젝트 퀄리티 향상gi
19.최종 팀 프로젝트 S.A.
아이디어실시간 채팅차트커머스 기능캘린더지도뮤직 플레이어matter-js (물리 엔진 기능)clayful (커머스 회원, 결제 기능)react-player (음악 플레이어 기능)toast ui editor(마크다운 에디터 기능) ⇒ @uiw/react-md-editor일
20.[TIL] 최종 프로젝트 db구성 및 와이어 프레임 수정
오늘은 종일 와이어프레임을 수정했습니다..!! 기초가 탄탄해야 튼튼한 건물을 세우는 것 처럼 자세하고 정성들여 만든 와이어프레임이 멋진 웹페이지를 완성하는데 큰 도움이 될 것이라고 믿으며..!! 우선 어떤 테이블이 필요한지, 테이블마다 어떤 필드가 필요한지 스프레드시트
21.React Hook Form으로 회원가입/로그인 구현하기
Performance of React Hook FormPerformance is one of the primary reasons why this library was created. "성능이 곧 react-hook-form을 만든 이유"내부적으로 성능 최적화를 고려해
22.[TIL] DB에서 읽어온 정보가 들어있는 헤더 만들기
오늘을 모든 페이지에 공동으로 들어가는 헤더를 만들었습니다. 작업 속도가 거북이보다 느렸던게 아주 큰 흠이지만, 이전 프로젝트에서 정확히 이해하지 못하고 넘어갔던 부분을 조금씩 알아가는 느낌이 들어 다행이라는 생각이 듭니다. 오늘 공부한 부분을 내일 개발할 부분에 적용
23.🥵에러가 나는데 실행이 된다?!🥵
나를 환장하게 하는 빨간줄오늘 뭔가 영차영차해서 장바구니 컴포넌트를 만들려고 했다. (오늘 완성하고 싶었는데)와 TIL쓰려고 코드 복사하면서 잉?이거 왜 이렇게 생겼냐? 싶은걸 고쳤더니 에러가 6개에서 2개로 줄었다..!!그래서 오늘 무엇을 했는가http://
24.'intrinsicAtrributes&...형식에서 선언된..'에러 해결하기
여기서 계속생각보다 간단히 해결되는 문제였다..cartItem 상단에서 props로 받아온 cart값을 콘솔에 찍어봤을 때 값이 {cart: {...}}형태로 받아오는 것을 확인했다.그래서CartItem이 받아오는 props 타입을 cart:{...}에 맞게 cart:
25.[TIL] 장바구니 구현하기 - 총 결제금액
어제 하루종일 삽질한 문제 해결장바구니에서 총 결제 금액이 문제였다,, 카트 컴포넌트에서 상품 수량이 변경되면 거기에 맞게 바로바로 업데이트 됐으면 좋겠는데!!처음에 생각한 로직은 페이지 처음 로드할 때 db에서 불러온 초기값을 가지고 총 결제금액을 계산한 후, 각 컴
26.[TIL] 데이터 생성 및 결제페이지 css
admin 페이지에서 직접 데이터를 입력해 supabase의 store 테이블과 product 테이블에 넣어주었다.tada~!🧞♀️장바구니 페이지와 결제 페이지에서 사용되는 컴포넌트를 수정했다. 할인가격을 적용했다.장바구니에 있는 데이터와 유저 데이터를 불러오고 페
27.tailwindCSS로 스켈레톤 적용하기
서버에서 데이터를 불러오는 동안 유저가 심심하지 않게 애니메이션이 들어가 있는 스켈레톤을 적용했다.나이쓰한 테일윈드 덕분에 간단하게 스켈레톤을 구현했다. (className에 animate-pulse넣어주면 되더라~)완성한 컴포넌트를 로딩되는 상황에 넣어주면 된다.적용
28.전체 동의 버튼 만들기 (그런데 이제 react-hook-form을 곁들인)
맨 위에 체크박스를 체크하면 밑에 두 개도 체크되게 하고 맨 위에 체크박스 체크 해제하면 밑에 두 개도 체크 해제되게 하고 다 체크되어있다가 밑에 두 개 중 하나 체크 해제하면 전체 동의 버튼도 해제하게 하는 그런 체크박스를 만들었다. react-hook-form setValue를 이용하면 뚝딱 해결할 수 있다.