TO

const [data, setData] = useState(); if (modalName === 'recruit') { setData([ { id: 1, title: '다운 받기', link: 'https://drive.google.com/drive/folders/17KHI_vdVBZch6hGUGlbtzlFg9AOYFlRy?usp=drive_link', subtitle: 'Going to Google Drive', }, { id: 2, title: 'Notion 보러 가..

visual studio code 에서도 JAVA 코드를 만들 수 있다준비물 : vs code, jdk 1. visual studio code를 설치한다설치 방법은 블로그에 따로 포스팅 했으니 참고하시길!https://hollypp.tistory.com/entry/Visual-Studio-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95-Window-%ED%99%98%EA%B2%BD Visual Studio 설치 방법 - Window 환경https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot..

1. Visual Studio Code로 Java  vs code JAVA 환경 세팅하기visual studio code 에서도 JAVA 코드를 만들 수 있다준비물 : vs code, jdk 1. visual studio code를 설치한다설치 방법은 블로그에 따로 포스팅 했으니 참고하시길!https://hollypp.tistory.com/entry/Visual-Studio-%EC%84%A4%Ehollypp.tistory.com https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building a..

https://portpolio-brown.vercel.app/ Vite + React + TS portpolio-brown.vercel.app기존 포트폴리오다.학원 수료 전까지 피드백 받고 싶기도 했고추천서 써주신다하셔서 부랴부랴 만들어서 제출했더니차라리 처음부터 다시 만드는게 어떠냐는 피드백이 돌아왔다.그래서 다시 만들기로 결정! 이번엔 해외 사이트 위주로레퍼런스를 찾아보았다.굉장히 많은 레퍼런스를 참고하였다.전 사이트와는 다르게페이지도 나누고 좀 더 화려한 느낌으로 가려고 한다.GSAP이 문젠데... ㅠ우선 할 수 있는 곳 까지 최선을 다해보자 참고 레퍼런스https://www.cssdesignawards.com/ CSS Design Awards - Website Awards - Best Web D..

공유 할 수 있는 popup 창을 만들었다. 발표가 끝나고 해보고 싶었던 기능 추가하는 중이라디자인에 공을 들이진 않았다.공유 클릭 시 나오는 popup 창 디자인이다.x 버튼을 누르면 popup 창이 사라지고로고 아이콘을 누르면 해당 SNS에 공유할 수 있는 창이 뜨고복사 버튼을 누르면 링크가 복사되는 식이다. import { useLocation } from 'react-router';import { SharePopupWrap } from '../style';import CopyToClipboard from 'react-copy-to-clipboard';import { useEffect } from 'react';const SharePopup = ({ shareToggle, imageUrl }) =>..

OTT 사이트 프로젝트의 기간이 끝났다.솔직히 JS 기초도 부족하다고 느꼈었고, 2주 간 바짝 Redux를 배워기능 구현 위주 역할을 맡았을 때 잘할 수 있을지무척 걱정이 많았는데 생각보다 잘 끝나서 홀가분하고 뿌듯한 기분을 느꼈다. 프로젝트 발표는 내가 맡았다.아무래도 발표 경험이 비교적 많았기 때문에 그랬던 것 같다.(내가 어필하기도 했다..ㅎㅎ)  발표자로 중 일부인데 좀 아쉬운 점은나도 급하게 만드느라 그저 제목, 사진 복붙한 것이 크게 아쉬웠다.다른팀들은 ppt도 되게 디자인 적으로 잘 꾸며놨어서잘한 느낌이 팍팍 들었다.확실히 디자인도 중요한 요소 중 하나라는 것을새삼 깨닫게 되었다. 나중에 시연 영상도 따로 찍어야 한다.내 포폴에도 쓰고 싶으니 조만간 찍도록 해야겠다.

회원정보 수정 기능을 구현하였다.가장 먼저 구현하고 싶은 것들을 정리해보았다. 1) 변경할 수 있는 값들과 변경 불가한 값 구분변경할 수 있는 값들은 전화번호, 비밀번호, 이름 등이었고변경할 수 없는 값들은 이메일 등이 있었다.이는 readOnly 기능을 사용해 쉽게 구현 가능했다. 예시 ✅ value vs defaultValue 차이  둘다 input 초기값을 설정하는 attribute이나 값을 변경하는 방식이 다르다.속성동작 방식상태 관리value"제어 컴포넌트" → 상태(state)와 동기화됨useState와 같은 상태 변수 필요defaultValue"비제어 컴포넌트" → 초기값만 설정되고 이후 변경되지 않음상태 변수 없이 사용 가능 ✅ readOnly와 defaultValue를 함께 사용하는 이유..

2월이 끝나간다.프론트엔드 부트캠프를 시작한 지 벌써 6개월. 그동안 많은 걸 배우고, 좋은 사람들과 좋은 대화를 나눴다. 날이 따뜻해지니 뚝섬유원지를 걸을 때의 그 기분 좋은 설렘도 더 선명해진다.이제 부트캠프를 마무리하며, 배운 것들을 차곡차곡 정리해볼까 한다. 사실 기술 블로그를 써야지, 써야지 하면서 미뤘었는데. 누군가 볼지 안 볼지는 모르겠지만, 최소한 나한테는 남는 기록이었으면 좋겠다.이제 3월. 새학기 같은 마음으로 다시 시작해보려 한다. 남은 2025년, 끝까지 알차게 채워보는 걸로. ✨

콜백함수함수에 파라미터로 들어가는 함수. 비동기이며 순차적으로 실행하고 싶을 때 사용.ex. event listener, setTimeoutfunction first (params) { params()} // first() 실행 후 params() 실행  callback hell : 콜백함수가 너무 많이 중첩될 경우 코드의 가독성이 떨어짐, 에러 발생시 처리 어려움. 이를 해결하기 위해 promise 또는 async/await 사용 promisepromise((resolve, reject) => {비동기로 실행할 코드}) // resolve는 성공 코드, reject는 실패 코드.then{}.catch{} : error 처리 .finally{} : 모든 처리가 끝난 후 처리할 코드promise 체인 : ..

1. 변수변수는 데이터를 저장하는 컨테이너다.JavaScript에서는 변수를 사용하여 값을 저장하고, 나중에 해당 값을 읽거나 수정할 수 있다.2. 변수 선언 방법JavaScript에서는 변수를 선언하기 위해 var, let, const 키워드를 사용한다. 각 키워드는 서로 다른 특성과 사용 목적을 가지고 있다.2.1. var특징:ES5 이전의 변수 선언 방식.Function Scope: 함수 내부에서만 접근 가능.Hoisting: 선언이 코드 상단으로 끌어올려진다.값을 재할당할 수 있다.블록 스코프를 지원하지 않아 의도하지 않은 동작이 발생할 수 있다.예제:function testVar() { if (true) { var x = 10; } console.log(x); // 10 (블록 스코프..