TIL

오늘은 드디어 기능 3개를 다~ 구현 성공했다!!엊그제는 api를 이용해서 화면에 영화 리스트를 출력하는 기능,어제는 영화 ID를 보여주는 알럿창을 띄우는 기능을 구현했다.그리고 오늘은 대망의 제목 검색 필터링 기능을 구현하는 날!개인 과제의 필수 요구사항 3가지 중

오늘 하루 시작 오늘도 항상 그래왔듯 엊그제부터 진행하고 있는 개인과제를 풀고 있다! 어제는 api키만 가져오고서, 어떻게 해야할지 도저히 감이 안 잡혔었는데 튜터님들께 모르는 부분에 대해 질문드리고 머리 꽁꽁싸맨 결과.. 결국 영화 리스트를 불러오는 걸 성공했

어제는 카드 리스트들을 api에서 불러온 걸 화면에 출력해줬다면오늘은 그 카드를 누를 때 해당 영화의 id를 포함한 알럿창을 띄워주는 코드를 짜봤다.분명 듣기만 해선 엄청 쉬운 기능인 거 같은데 어라 왜 안 되지?? 라고 생각해 봤는데 function showMovi

어제 하던 개인과제를 이어서 하고 있다.. 어제 막힌 부분보단 조금은 진전이 있는 거 같다!! 일단.. 어제의 내가 잘못 쓴 코드를 보자 문제 직면 및 해결 >fetch('https://api.themoviedb.org/3/tv/top_rated?language=

조별과제를 끝내고 이제 개인 과제 시간인데 개인 과제는 아래 형식으로 주어졌다.Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다.영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다. TMDB A

프로그래머스 입문 문제제한사항2 ≤ my_string 길이 ≤ 52 ≤ n ≤ 10"my_string"은 영어 대소문자로 이루어져 있습니다.입출력 예 설명입출력 예 >"hello"의 각 문자를 세 번씩 반복한 "hhheeellllllooo"를 return 합니다.fun

안녕하세요, 오늘은 5일 간의 첫 미니 프로젝트의 끝을 알리는 날이자 많은 것을 배워가는 하루였는데요!! 다들 협업하면서 가장 중요한 건 뭐라고 생각하시나요? 저는 협업 스타일, 팀원과의 원할한 커뮤니케이션도 중요하지만 Git의 역할이 정말 중요하다는 걸 미니 프로젝트

안녕하세요~ 내일 오전 10시까지 제출을 앞두고 생각보다 빨리 저 포함 다른 팀원 분들도 전부 작업을 마치고 Github에 push 해주신 덕에 비교적 빨리 팀원끼리 승리의 치얼스를 외치며.. 이번 미니 프로젝트를 진행하며 배운 점도 많고 느낀 점도 참 많았는데요. 일

오늘도 어김없이 미니 팀 프로젝트 작업을 하면서 갑자기 머릿 속을 슥 지나가는 생각이 있었습니다."페이지가 너무 밋밋한데 페이지가 켜질 때 효과 같은걸 넣어볼까?"하면서 빠르게 css 애니메이션 효과에 대해 검색을 한 결과굉장히 쉬우면서도 간편한 @keyframes 라

안녕하세요~ 오늘도 어김없이 찾아온 즐거운 TIL 성장 기록 시간!미니 팀 프로젝트를 시작한 지 2일차인 오늘이지만 팀원 분들의 실력이 다들 월등하신 덕분에 생각했던 것보다 굉장히 잘 나아가고 있는 거 같아요내일배움캠프에서 약 4~50일 간의 사전캠프를 수강한 후에 어

오늘은 Git과 Github에 대해서 첫 수업을 들으며 배워봤는데요!오늘 배운 것들을 간략하게나마 정리해보겠습니다간혹 가다 헷갈려하는 분들이나 둘 다 같은 거 아닌가요? 하는 분들이 계시는데요! 저도 '둘이 뭐가 다른 거지??" 라고 생각했습니다ㅠㅠ (반성해 나 자신)

오늘은 알고리즘 수업을 들으면서 js로 구현하는 Queue(큐)에 대해 배웠다 간단하게 정리해보겠음일단 이 Queue의 정의, 특징을 순서대로 간단하게 설명해 보자면1.대기 행렬을 뜻한다. (줄을 서서 기다린다)2.Data(데이터)를 입력된 순서대로 처리할 때 주로 사

오늘은 Git 특강을 들었다! 한 2주 전에 올린 기본적인 Git에 관한 TIL은 작성한 적이 있는데, 그때 다룬 내용보다 좀 더 심화 과정인 거 같다오늘 배운 Git 명령어 3가지를 간략하게나마 정리다른 브랜치로 이동하고 싶을 때 사용하는 명령어이다. 예를 들어 방금

4월이 시작된지 얼마나 됐다고 벌써 5월이다.. 본격적으로 본캠프가 시작된 것도벌써 3주차 수요일인 걸 생각하면 시간 참 빠르다오늘은 본캠프 들어와서 진행하는 두 번째 팀 프로젝트 과제이다.전에 TIL을 작성하면서 진행했던 개인과제의 확장판? 이라고 보면 될 거 같다팀

오늘은 조별과제 2일차! 어제는 뒤로가기, 홈버튼을 만들어 놓은 채 구상만 하다 끝났는데 하려다 못 한 영화 검색창 유효성 검사 기능을 만들어 볼 것이다.좌측 상단 인풋창에 입력한 값이 30글자를 넘어가면 30글자를 초과했다는 경고창을 띄울 것이다. 이러한 생각 끝에

오늘도 어김없이 어제 진행하던 조별과제의 연장선어제 작업물을 남겼듯이 내가 맡은 역할에 대한 기능은 구현을전부 해놓았다. 그런데 이 메인 홈페이지가 켜질 때 그냥 띡 하고 출력되는 게 허전해 보이기도 하고 또, 영화 사이트 컨셉에 맞게 마우스 포인터 부분에 뭔가 관련된

let result = \[]; 로 빈 배열 생성let mathMax = 0; 써줌으로써 최대값 저장할 변수 만듬배열을 순회하며 최대값을 찾으면서 최대값과 같은 요소를 찾으면서 해당 최대값과 index 값을 result 변수에 넣어줌

배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 filter() 메서드와 배열의 요소에 특정 값이 포함되어 있는지 여부에 따라 true, false를 반환하는 includes() 메서드를 사용해 간단하게 풀이해 봤다.다른 사람의 풀이를 보면

오늘은 조별과제 제출 이틀 전, 얼추 다들 맡으신 기능을 다 구현하신 거 같아서 코드들을 살펴보고 있었는데역시 다들 엄청나게 잘하시는 거 같아서 부러우면서도 따라가고 싶은 욕심이 막 생긴다!코드를 보던 중, 중복되는 부분이 있는 거 같아서 코드의 가독성을 조금이라도 올

어제 리액트를 다 다운받고, 오늘 자고 일어나서 기분 좋게 npm start를 쳐봤는데.. 아니 이게 뭐야? 잘 된 줄 알았던 리액트 설치에 오류가 생겼나 보다. 구글링 해보니깐 나와 똑같은 오류를 겪으신 유저분께서 이미 코딩애플님의 조언대로 해결하신 것을 보고 바로

오늘은 5월 1일부터 오늘까지 진행했던 조별과제를 제출하는 날이다. 다른 팀원분들 코드를 보면 감탄만 나온다.. 얼마나 잘하시는 거지 ㅠㅠ 과제를 진행하면서 우리 팀이 기술적으로 어려움을 겪었던 부분에 대해서 적어볼까 한다. 기술적 어려움 1. li 태그의 k

조별과제를 끝나고 본격 React를 배우기 전 다시 한 번 js의 기초를 정리해봤다.웬만하면 const로 사용하고 let은 재할당이 필요한 값에만 사용 var를 사용하면 안되는 이유 : 논리적인 흐름에서 벗어나게 하기 때문에오류가 잦음, 코드 가독성 저하const와 l

오늘은 js의 기초 부분 중 module에 대해서 복습했다. 전에도 배웠지만 복습을 안해두면 다시 까먹을 거 같아서 오늘 복습을 진행했다. 그 외 js 이해도에 대한 문제를 풀어봤다. module에 대해서 JavaScript 모듈은 대규모 애플리케이션에서 코드를

오늘은 React 개인과제를 진행하는 1일차본격적으로 리액트를 배우는 과정에 들어서게 됐는데일단 다른 건 다 그렇다 치고 useState 훅의 사용법을아직도 정확하게 잘 모르겠다.. 아는듯 모르는듯 한 느낌이랄까대충 const id, setId = useState(기본

개인과제를 시작한 지 3일이 지났는데 얼추 필수 기능 구현은 다 했나? 싶었는데, 중요한 걸 하나 빼먹었기 때문에 휴일인 오늘도 추적추적 내리는 빗소리와 함께 코딩을 했다.(Working에 있는 카드랑 Done에 있는 카드랑 완료 버튼 위치가 왜 다름?..)해당 투두리

react를 활용하여 To do list를 만드는 개인과제를 제출까지 끝마쳤다. 개인과제를 진행하면서 기술적 어려움으론 리액트의 전체적인 이해도 부족도 있지만 특히 그 중에서도 useState에 대한 이해도 부족, 컴포넌트 분리 과정에 있어서 어려움을 겪었다.. 컴

개인과제를 제출하고 난 후, 개인과제 해설 영상이 업로드가 되어서 재제출을 하려고 개발 환경 구축부터 하려고 했는데 어제 과제 제출을 할 땐 개인과제를 처음 시작할 때 vite로 인한 react 생성, yarn도 설치가 안 되길래 이번에 vite, yarn을 다시

오늘 따로 공부를 못하고 프로그래머스 한 문제 밖에 풀지 않았다 흑흑나약한 나 반성해라..

아침부터 알고리즘 수업을 듣고, react 투두리스트 개인 과제를 제출한지 얼마 지나지 않아서 바로 또 개인과제를 발제 받았다.이번 개인 과제는 가계부를 만드는 건데, 이번 과제에선 crud 기능이 전부 들어가기 때문에 전보다 더 어려울 거 같다.과제를 들어가기에 앞서

React 숙련 1주차 강의 완강어제에 이어 오늘 드디어 숙련 1주차 강의를 끝까지 다 들었는데내가 이해를 못하는 건지 아니면 원래 처음엔 다 어려운 건지 모르겠는데Props Drilling부터 시작해서 useEffect, useRef, useContextmemoiza

📚 공부한 것들 알고리즘 탐험반 practice2-2 문제 풀기 React 숙련 강의 복습 시작 React 가계부 개인과제 세팅 알고리즘이 점점 어려워 지는 거 같다.. 그래도 우여곡절 끝에 겨우 풀이 성공 탐험반 문제 : 두 문자열의 교집합 문자 구하기 문제

어제 하던 거에 이어서 오늘은 헤더 부분 약간의 수정, 월별 버튼이 뜨게끔 하는 MonthForm을 구성하였다. 처음에는 화면이 왜 이렇게 요상하게 뜨지하고 한참을 고민해봤는데도 도저히 답이 안 나와서 너무나 힘들었던 것.. 저 MonthButton이 제대로 뜨게

자고 일어나서 브라우저 콘솔창을 보니 웬 이상한 [Error] React : received true for a non-boolean attribute 오류가 뜨는 것이 아닌가.. 구글링을 해보니 이러한 오류가 뜨는 이유는 내가 Styled Components의

오늘도 어김없이 개인과제 중인데 수요일까지 프롭스 드릴링 > context api > redux를 통한 리팩토링까지 진행해야 하는데 가능한..건가? 하하일단 라우터돔까진 튜터님의 도움을 받아서 어째저째 구현은 했는데 ㅠㅠㅠ redux를 통한 리팩토링까진 못 해도 con

어젠 상세 페이지까지 만들어뒀으니 오늘은 상세페이지에서의 수정, 삭제 기능을 만들어야 한다. 일단 수정 기능을 하기 위해서 과제 순서 가이드에선 useRef를 사용해서 풀이하라 해서 주어진 강의를 복습하면서 모르는 부분은 구글링을 통해 얼추 감을 잡은 거 같다.내가 구

// 문자를 공백 기준으로 단어 단위로 나눠줌 // map() 메서드를 사용할 변수 선언 // 각 단어를 문자 단위로 다시 나눈 뒤 반전시키고, 다시 하나의 단어 단위 문자열로 만듬 // 반전된 문자들을 하나의 문자열로 다시 만듬 func

알고리즘 탐험반 문제개인과제 해설 영상 참고 후 과제 재제출주어진 문자열을 반전시키시오. 문자열의 각 단어는 그대로 두고 단어의 순서만 반전시키시오. 단, reverse()를 사용하면 안 됨다른 분들의 답변을 보니 reduce()를 사용하는 것 외에도 forEach()

뉴스 피드라고 해서 꼭 우리가 흔히 아는 뉴스같은 느낌으로 쓰는 것은 아니다→ 블로그, 커뮤니티, SNS 전부 될 수 있음 뉴스를 보여주는 사이트가 아님!OUR KNOWLEDGE!“아워놀리지(Our Knowledge)” 는기본적으로 개발자들이 본인들의 코드를 공유하며

여기까진 사실 내가 따로 뭔가 한 건 없고 supabase 가이드 에서 보여준 코드 그대로 supabase 기본 셋업을 맡으신 분이 컴포넌트만 나눠놓은 건데.. supabase를 써본 적이 없어서 이 이후로는 뭘 건드려야 할지 감을 못 잡겠다.그리고 하나 궁금한 게 있

📖 진행한 공부 📖 알고리즘 입문 문제 2문제 뉴스 피드 프로젝트 로그인, 회원가입 기능 구현 알고리즘 문제 1. 꼬리 문자열 문자열들이 담긴 리스트가 주어졌을 때, 모든 문자열들을 순서대로 합친 문자열을 꼬리 문자열이라고 합니다. 꼬리 문자열을 만들 때 특정

📖 진행한 공부 📖 로그인 기능 수정 뉴스 피드 프로젝트 회원가입 기능 구현 로그인 기능 수정 어제 뭘 건드렸는지 회원가입을 진행한 아이디, 비밀번호로 로그인을 하면 계속 else일 때 뜨는 alert창이 계속 뜨는데, 또 로그인은 되는 이상한 현상을 겪고 있

📖 진행한 공부 📖 프로그래머스 알고리즘 입문 문제 홀수vs짝수 헤더 컴포넌트 디테일 수정 회원가입 절차 중복확인 프로그래머스 홀수 vs 짝수 문제 정의 : 정수 리스트 num_list가 주어집니다. 가장 첫 번째 원소를 1번 원소라고 할 때, 홀수 번째 원소들의

전역 상태 관리기능적인 부분은 다 완성했기에 이제 props drilling으로 props를 내려줬던 걸, 전역 상태 관리로 관리해주려 한다.일단 그 전에 git switch dev를 했는데 이런 오류가 떴다구글링을 해보니 이럴 땐 아래와 같이 명령어를 입력해주면 된다

📖 진행한 공부 📖 오류 수정 기능 설명 및 팀 회고 홈페이지에서 이것저것 살펴보다가 2개의 오류가 발생했는데 무슨 오류인지? 1.로그인 하면 alert에 닉네임이 뜨지 않고undefined가 뜨는 문제 일단 1번의 alert에 undefined가 뜨는 오류부

jwt 로그인, 회원가입 구현로그인과 회원가입 페이지에 대한 라우터 돔은 설정을 마쳐둔 상태고 AuthContext.jsx라는 파일을 하나 만들어 context api로 전역 상태 관리를 하려고 한다.로그인 기능에 앞서 회원가입 기능을 구현했다.스타일 컴포넌트의 코드는

📖 진행한 공부 📖 axios get 메서드로 정보 불러오기 로그인 유지 시간 설정

json server에서 axios로 데이터 불러오기지출 항목에 누가 썼는지 닉네임 보여주기react-query로 CRUD 리팩토링 해보기어제 로그인이 계속 일정 주기마다 풀리는 바람에 마이페이지 작업이나 홈페이지 작업 등 여러모로 불편한 점이 많아서 아예 유효시간을

react-query 삭제, 수정 구현json-server 배포AuthContext.jsx해당 리스트를 삭제할 때도 addMutation 처럼 인자로 newList를 받으면 되겠다 싶어서 코드가 비슷하네? 라고 생각했다큰 착각이었다. 왜 삭제가 안되는 걸까 의문에 사로

react-query 심화 이론1\. 무엇이며, 언제 사용하나?다운로드 UI가 있을 때, 또는 UX를 저해시키는 불필요한 네트워크 요청을 제거하기 위해 사용된다.대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로

📖 진행한 공부 📖 프로그래머스 서울에서 김서방 찾기 팀 프로젝트 발제 서울에서 김서방 찾기 나의 풀이 indexOf()를 통해 몇 번째 index에 있는지 찾아줬다 다른 사람의 풀이 똑같이 indexOf()를 사용했지만 return에서 저렇게 작성할 수도

📖 진행한 공부 📖 카카오 지도 API 연동 카카오 지도 API 연동 카카오 개발자사이트 (https://developers.kakao.com) 접속 개발자 등록 및 앱 생성 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등

📖 진행한 공부 📖 검색 키워드에 따라 위치가 바뀌도록 코드 변경 일단 오늘 공부하면서 가장 헷갈렸던 점은 분명 나는 키워드에 입력한 값대로 검색 결과가 바꼈으면 좋을 거 같은데 다른 걸 검색해도 왜 계속 기본 값으로 설정해둔 "서울 미술관" 만 결과 목록으로 표

📖 진행한 공부 📖 프로그래머스 Lv 1 콜라츠 추측 isLoading 디테일 수정 프로그래머스 콜라츠 추측 문제 정의 입출력 예 나의 풀이 테스트 결과 디테일 수정 ![](https://velog.velcdn.com/images/hwijinkim22/po

조별 과제 제출 결과물Zustand사용 기술 스택HTML5, TAILWINDCSS, JAVASCRIPT, REACTQUERYREACT, ZUSTAND버전 관리GITHUB, GIT협업툴FIGMA, SLACK간략한 구현 설명 사진메인 페이지 키워드에 xx박물관 혹은 미술관

📖 진행한 공부 📖 TypeScript를 시작하기 전 알아야 할 것들 TypeScript의 장점 및 기초 JavaScript의 약점 1. 실행 시간에 결정되는 변수 타입 JavaScript는 변수의 타입이 실행 시간에 결정 이에 따라 개발자의 실수로 인한

📖 진행한 공부 📖 프로그래머스 Lv 1. 문자열 내림차순으로 배치하기 TypeScript 기초 문자열 내림차순으로 배치하기 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문

📖 진행한 공부 📖 TypeScript 객체 타입 정의 및 제네릭 TypeScript 객체 타입 정의 type, interface가 있는데 둘이 큰 차이는 없으나 사용할 수 있는 메서드가 조금 다르다는 점 type으로 타입 정의 객체는 타입을 다시 재정의를

📖 진행한 공부 📖 개인과제 선택 구현 사항 TypeScript 개인과제 선택 구현 사항 개인과제를 vercel로 배포까지 마치며, 선택 구현 사항에 sort()를 사용해 나라를 나열하는 걸 구현해보라길래 한 번 구현을 해보려고 과제를 다시 열었다. 처음에는 Co

TypeScript 다형성, 제네릭TypeScript Classespoly란? => many, serveral, much, multimorphos란? => form, structurepolymorphos란? => poly + morphos => 여러 다른 구조즉, 여러

📚 진행한 공부 📚 NextJs 개요

📚 진행한 공부 Routing 📚 Routing 📖 01. 첫 installation : react와는 어떤 것이 다른지 특징 살펴보기 (1) 설치하기 npx create-next-app@latest or yarn create next-app 특별한 것이

Next.js를 이용한 개인과제구현 예시주어진 포켓몬 api를 이용해 홈페이지에 불러오기포켓몬을 클릭하면 해당 포켓몬의 상세 정보를 보여주는 페이지 만들기학습을 끝내면 아래 항목에 대한 자신감을 얻을 수 있음NextJS 의 라우팅 방식에 대한 이해NextJS 렌더링 방

📚 진행한 공부 개인과제 포켓몬 상세페이지 작성 개인과제 포켓몬 상세페이지 작성 PokemonDetail 컴포넌트 pokemondetail/[id]/page.tsx 위에서 만들어 둔 포켓몬디테일 컴포넌트를 여기로 불러오기만 하면 됐다. 문제없이 잘 들어가지는

📚 진행한 공부 Next.js Route Handlers TypeScript 복습 📗 Route Handlers [공부 목표] Next.js로 프로젝트를 세팅하고 React와의 차이점 이해 Next.js의 특징인 파일 기반 라우팅 이해 파일 기반 라우팅에 꼭 필요

오늘은 딱히 뭘 공부했다기보단 팀 과제 발제 날이었기에 발제 받고, 팀끼리 프로젝트 주제 정하고 프로젝트명 정하고 이것저것 상의하며 시간을 다 보냈음한줄소개: 사용자 맞춤 음악 추천 및 재생 사이트 (spotify API 사용)내용: 사이트 접속 시 로그인 / 회원가입

어제 진행하려고 했던 스포티파이 API를 이용한 프로젝트는.. 이런저런 문제로 인해 다른 주제로 노선을 틀었음

📚 진행한 공부 메인페이지 포켓몬 위치 조정 🔫 트러블슈팅 새로고침 시 HTTP 404 오류 ✅ (해결) 📖 메인페이지 포켓몬 위치 조정 해당 코드에서 부분을 건드려 주면 분명 포켓몬의 위치를 내 마음대로 설정할 수 있어야.. 하는데 왜 도대체 왼쪽 상단에

📚 진행한 공부 포켓몬을 선택한 포켓몬으로 변경 📖 포켓몬을 선택한 포켓몬으로 변경 전엔 포켓몬 한마리만 덩그러니 놓아져 있었는데, 팀원 분들과의 회의 후에 좋은 아이디어를 얻었다. 위에는 여러 포켓몬을 배치해 두고 아래에는 직접 조작이 가능한 포켓몬 한 마리

📚 진행한 공부 나열된 포켓몬과 선택된 포켓몬의 교체 이슈 해결 🔫 페이지 새로고침 시 404 오류 해결 🔫 📖 나열된 포켓몬, 선택된 포켓몬 교체 이슈 해결 진행하다 보니 또 하나 겪게 된 문제가 있었는데, 바로 메인 포켓몬의 교체 이슈였다. 일단 해당

심화프로젝트를 진행하면서 느꼈던 점들평가 점수: 10점점수의 이유:다소 어렵게 느껴지는 프로젝트였음에도 불구하고 주기적인 회의, 팀원 간의 피드백 등 팀원 간의 커뮤니케이션이 잘 이루어졌고, 이번 프로젝트를 진행하면서 필수로 구현해야 하는 기능들에 대해 놓친 점이 없는

우주 여행 사이트1\. 레퍼런스https://www.virgingalactic.com/https://www.hanwhaspacehub.com/2\. 컨셉→ 우주 여행사 사이트→ 우주 여행 관련 정보들을 담고, 각 행성에 대한 여행 비용 같은 것 나타내

기획안질문해야 할 것

📖 기술면접 질문 LIST 1. Optimistic Update에 대해 설명해주세요. 의도: UX를 신경 써서 개발하고 있는지 확인하기 위한 질문 답안) > Optimistic Update는 이름에서 유추할 수 있다시피 서버에 요청이 잘 갔겠지? 하고 긍정적으로 생각

📖 CORS이 나오게 된 배경 (Cross-Origin Resource Sharing) 요즘엔 프론트엔드 레이어와 API 서버 레이어를 따로 구성하는 경우가 많은데, 웹 프론트엔드 사이드 따로, 서버 따로 둔다는 거임 이런 경우에 보통 웹 프론트엔드에서 다른 도메

클로저는 함수와 그 함수가 선언된 어휘적 환경(lexical environment)의 조합입니다. 쉽게 말해, 클로저는 함수가 선언된 위치에서의 변수를 기억하고 그 함수가 어디서 호출되더라고 그 변수를 참조할 수 있는 기능입니다.클로저를 이해하면 자바스크립트의 중요한

13\. eslint 같은 linter가 중요한 이유를 설명해주세요.의도: 협업을 위한 프론트엔드 개발 환경을 구축할 수 있는지 확인답안)linter는 코드 품질을 향상 시키고, 일관된 스타일을 유지하게 해주는 도구입니다. linter를 사용하면 여러 안티 패턴에 대해

1 > 2번 세션으로 넘어갈 때, 2번 세션이 1번 세션을 서서히 덮는 듯한 모션을 구현하기 위해 useEffect 코드를 수정했습니다. 이렇게 해주니 원하는 대로 구현은 잘 됐으나 문제점을 하나 발견했습니다. 바로 페이지가 처음 렌더링 됐을 시에, 혹은 새로고침을

📖 GSAP에 대해 GSAP란? GSAP(GreenSock Animation Platform)는 JS 기반의 강력한 애니메이션 라이브러리로, 웹 페이지에서 부드럽고 복잡한 애니메이션을 쉽게 구현할 수 있게 해주는 라이브러리입니다. GSAP의 핵심 기능 1.애니메이션

모든 렌더링 작업이 클라이언트(브라우저)에서 수행됩니다.서버는 초기 HTML 파일만 전달하고, 나머지 콘텐츠는 클라이언트가 js를 통해 동적으로 가져와 렌더링합니다.초기 페이지 로딩 후 빠른 페이지 전환이 가능해 사용자 경험이 향상됩니다.서버 부하가 줄어듭니다. 검색

1\. 변수를 선언할 때 쓰는 var,let,const의 차이에 대해 알려주세요.의도: 자바스크립트 기본 지식, 스코프에 대한 이해도, 추가로 호이스팅에 대한 지식을 가지고 있는지 확인답안)var의 경우에는 함수 스코프를 가지며, 초기화 전에 접근하면 호이스팅 덕분에

2번째 섹션에서 supabase planets 테이블에 등록돼있는 img와 tours 테이블에 등록돼있는 price를 갖다 쓰기 위해서 hooks 폴더 내에 useFetchTourDetail 커스텀 훅을 만들었습니다.useFetchTourDetail.tsx

useFetchTourDetail 커스텀훅을 만들고, 메인에 그대로 가져오기만 하면 되는 건데.. supabase 테이블에서 이미지, 행성 이름을 가져오는 건 성공했는데 왜인지 가격은 tourPrice가 false일 때 뱉어내는 텍스트를 보여주고 있습니다.콘솔창엔 to

어제는 등록된 6개의 행성에 대한 정보를 모두 보여주는 코드를 작성했었는데, 오늘은 선택된 가운데 행성만 행성의 이름 및 여행 가격을 표시하게끔 코드를 작성해봤습니다.이를 위해선 위에서 작성해둔 isActive를 활용해서 isActive일 때 (해당 행성이 선택된 행성

자기소개 시 나는 \~~한 개발자다 혹은 이러한 관점을 가지고 있다 어필하기협업 시 있었던 트러블에 대해 얘기할 때, 본인이 어떤 식으로 풀어나갔는지 문제 해결 능력을 어필강점을 얘기할 때, 업무와 연관지어 어필하기질문에 대한 대답을 할 때 본인 생각을 먼저 말한 다음

오늘은 중간발표를 마치며, 튜터님의 피드백을 간략하게 적었습니다스크롤을 올렸을 때 자연스럽게 딱 그 페이지만 보이게끔2번째 섹션 opacity로 하이라이트를 주면 좋음불필요한 코드 정리ex) console.log커스텀훅 탄스택 쿼리로 수정2번째 섹션 이미지 변경

메인페이지 page.tsx에 있는 useEffect 로직 커스텀훅으로 작성useVideoLoaded.tsuseSlideAnimation.tsuseScrollTrigger.ts

useFetchGoods.tsxuseFetchTourDetail.tsx(main)/page.tsx

커스텀훅 수정 및 ???

애니메이션 안 되는 오류 수정 애니메이션이 안 되는 이유는, 비디오를 불러오기 전에

폰트 적용 및 사소한 css 위치 조정, 날짜 포맷팅 함수를 추가했습니다.결과물해당 사진의 MORE+ 를 누르면 /tour 로 이동을 해야 하는데 다른 섹션에서는 클릭하면 잘만 /tour url로 이동을 하는데 2번째 섹션에서는 MORE+ 를 아무리 클릭을 해도 아무런

메인페이지 반응형 구현 중, videoLoaded setTimeOut 딜레이 수정

양방향 바인딩 단점: 뷰의 변화가 컴포넌트에 영향을 미칠 수도, 반대로 컴포넌트릐 상태가 변경되면 뷰의 상태가 변할 수도 있음편리함을 제공하지만, 코드의 규모가 커질수록 변화가 무엇으로 인해 일어났는지 파악하기 어려워짐양방향 바인딩 = 항상 나쁘다? X 단방향

📗 자바스크립트의 동등 비교 리액트 함수 컴포넌트와 훅을 반복적으로 작성하다 보면 의존성 배열(dependencies array)에 대한 고민이 생김 보통은 리액트에서 제공하는 eslint-react-config에 선언돼 있는 react-hooks/exhaustive

✅ 새로고침 시 컨텐츠들이 짤리는 현상 원인: Intersection Observer가 새로고침 시점에도 작동하여 컨텐츠를 숨김 초기 렌더링 시에도 visibility가 발생하여 모든 컨텐츠들이 숨김 상태 해결: 그 후 조건부 식 수정을 통해 해결 ✅ 해당 섹션

문제: 포트폴리오 웹페이지를 Vercel로 배포하던 중, eslint와 타입 오류 발생eslint 해결: package.json에서 eslintConfig에 "next/next/no-img-element": "off" 추가 및"ignorePatterns": "\*.co

미니 프로젝트로 무얼 해볼까 하다가 내가 취미로 좋아하는 헬스를 주제삼아 운동 트래커를 만들어 보기로 다짐했음만들어보기 전에 무슨 운동을 얼마나 했는지 차트로 나타내면 좋을 거 같아서 차트 라이브러리 중 뭘 사용해볼까 하다가 Chart.js가 가장 대중적인 거 같길래