TIL 검색 결과

해당 글 19건

2차 면접 후기

컬쳐핏 면접으로 알고 갔는데 cs 관련해서 수두룩하게 질문을 받았다...그래서 오늘도 부족했던 부분에 대해서 정리해보려 한다.1. http와 https의 차이가 무엇인가요?먼저, http란 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜이다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 http 요청을 전송하고 웹 서버는 http 응답으로 응답한다. 이 때 브라우저는 데이터를 일반 텍스트로 교환한다.여기서 http 통신의 문제점이 드러난다. 바로 '일반 텍스트'로 교환을 하기 때문이다. 즉, 암호화되지 않은 데이터를 교환하기 때문에 제3자가 가로채고 읽을 수 있다. 이를 해결하기 위해 https는 http 요청 및 응답을 SSL 및 TLS 기술에 결합하여 또 다른 보안 계..
TIL 2025. 6. 19. 14:32

면접 후기

면접을 보고 왔다....하하하하하하하역시 실제 면접을 가니까 아는 것도 대답 잘 못하겠고 그냥 백지 상태가 되버리는... 이번엔 면접 질문에 대해 답이 마음에 안 들거나 아예 모르는 질문들만 기록을 하려 합니다.사실 떨어서 질문도 잘 기억이 나질 않지만....마음을 다 잡고...1. useLayoutEffect가 무엇인가요?useLayoutEffect는 useEffect와 달리 브라우저가 화면을 그리기 전에 동기적으로 실행되는 훅입니다.이 시점에 DOM을 측정하거나 조작하면 리플로우나 리페인트가 발생할 수 있어 성능에 영향을 줄 수 있기 때문에, 꼭 필요한 경우에만 사용하는 것이 권장됩니다.예를 들어, 헤더의 UI가 유저 이름의 길이에 따라 배치가 달라지는 경우, useLayoutEffect를 사용해 화..
TIL 2025. 6. 6. 01:14

KPT 회고 - Green Deal

이번에 또 한 번 프로젝트가 끝났습니다~~~~~ Green Deal outsourcing-alpha.vercel.app요 위에 있는 링크를 통해 저희의 프로젝트를! 확인하실 수 있습니다.코드는 요 아래에서https://github.com/ImJaeOne/green-deal GitHub - ImJaeOne/green-dealContribute to ImJaeOne/green-deal development by creating an account on GitHub.github.com 이런 식으로 반응형으로도 구현할 수 있도록 열심히 노력한 프로젝트입니다!프로젝트가 끝났다고 다 끝난게 아니겠죠?? KPT 회고를 진행해보도록 하겠습니다~! KPTKeep - 현재 만족하고 있는 부분커밋 단위와 GitHub/코드 ..
TIL 2025. 3. 5. 16:38

KPT 회고

🚀 KPT 회고 (MBTI Test 프로젝트)✅ Keep (유지할 점)Zustand + React Query 조합이 편리하고 상태 관리가 간결해짐.React Query의 자동 데이터 refetch 기능 덕분에 useEffect + setState 조합보다 훨씬 효율적인 API 관리 가능.Navigate의 state를 활용하여 로그인 후 원래 페이지로 이동하는 기능 구현.Zustand persist를 활용하여 로그인 유효 시간 동기화 적용.refetchInterval을 활용한 토큰 자동 갱신 및 만료 시 자동 로그아웃 기능 추가.카카오톡 공유 기능으로 사용자 경험(UX) 개선.isPending 상태를 활용한 로딩 UI 적용으로 데이터 로딩 중 깔끔한 사용자 경험 제공.⚠️ Problem (개선할 점)us..
TIL 2025. 2. 25. 22:45

PR을 이용하는 첫 프로젝트를 시작하며

프로젝트 세팅갑작스럽게 팀장을 맡게 되면서 프로젝트 기획과 세팅을 진행하게 되었습니다.오늘은 프로젝트를 세팅하면서 겪은 경험과 회고를 정리해보려 합니다.1. Git 및 Vite 프로젝트 설정가장 먼저 GitHub에서 새로운 레포지토리를 생성하고, VSCode에서 Vite를 이용해 React 프로젝트를 생성한 후 Git과 연동했습니다. 초기 설정 작업으로는 다음을 진행했습니다:.prettierrc 설정하여 코드 스타일 통일husky를 적용해 커밋 전에 자동으로 prettier가 실행되도록 설정PR 템플릿을 추가해 PR 작성 시 기본 형식을 갖추도록 유도dev 브랜치를 생성하고, 브랜치 규칙을 설정하여 PR을 생성한 사람을 제외한 2명이 승인해야 merge가 가능하도록 지정PR을 연습해볼 겸 혼자서 PR을 ..
TIL 2025. 2. 13. 01:01

이벤트 위임으로 하위 요소 접근하기

드디어...!! 오늘부터 개인 JS 프로젝트로 영화 소개 프로젝트를 시작했습니다.TBDM이라는 open API를 통해 영화 데이터를 불러오고 화면에 띄어주면 되는 그런 프로젝트입니다.오늘 구현한 부분은 다음과 같습니다. 1. 데이터를 불러와서 화면에 렌더링(각 영화의 id 값을 movie-id라는 속성값으로 부여) 2. 각 영화 아이템을 누르면 상세 페이지 모달로 구현(movie-id 값을 통한 상세 정보 불러오기)  하지만, 중간에 한 가지 난관이 있었습니다. 바로 이벤트 위임 부분이었습니다.상위 요소에만 이벤트 리스너를 붙이고, 클릭된 요소를 event.target으로 판별해 처리합니다 이 조건으로 인하여... 상위 요소인 selectMovie에 무작정 클릭 이벤트를 추가하고 클릭된 요소들을 콘솔로 ..
TIL 2025. 1. 9. 00:53

팀 프로젝트를 위한 Git 브랜치 관리🔥

오늘은 Git 심화 특강을 듣고 왔는데요!이번 강의에서 배운 내용을 바탕으로, 브랜치를 활용한 프로젝트 관리 방법을 정리해보려 합니다. 저번 미니 프로젝트를 되돌아보며... 😅저희 팀은 각 페이지나 기능별로 브랜치를 나누지 않고 바로 main 브랜치에 작업했었는데요, 이때 정말 많은 문제가 발생했습니다.git pull 없이 push를 해서 충돌이 나고,기존 main 브랜치와 엇갈린 작업이 생기면서 결국 서로의 코드가 꼬이는 상황이 발생했습니다. 그때는 이 문제를 해결하기 위해 git reset 등등... 시도했지만,사실 브랜치를 제대로 활용했다면 이런 문제를 미리 방지할 수 있었습니다!Git 브랜치를 활용한 올바른 관리 방법 🎯1. 브랜치 전략 이해하기2. 브랜치 생성 및 관리3. 충돌 예방을 위한 ..
TIL 2024. 12. 31. 19:31

1차 미니 프로젝트 KPT 💡

팀 소개 페이지Github : https://github.com/SpartaFirst/BeTheBestTeam1. Keep (잘했던 점 / 유지하고 싶은 것)✅ 팀의 성과:모르는 부분이 있으면 바로 바로 서로에게 질문을 해서 문제 해결을 함각 페이지 별로 역할 분담해서 html/css/js를 맡음포기하지 않고 끝까지 자신이 맡은 부분을 완수함2. Problem (개선이 필요하거나 아쉬웠던 점)⚠️ 팀 차원의 문제:처음 회의 시간에 css class나 id명을 BEM 규칙을 사용하기로 했지만 잘 지켜지지 않음시멘틱 태그의 이해가 부족한 상태에서 시멘틱 태그를 사용함피그마로 스타일을 확실하게 정하지 않아 그때 그때 수정함해결한 문제에 대해 정리하지 않음3. Try (앞으로 시도해보고 싶은 것)🌟 문제 해결..
TIL 2024. 12. 30. 15:45

1차 팀 프로젝트 / Firebase Authentication으로 회원 가입 하기

거두절미하고 오늘의 결과물입니다...! 저번에 이어서 멤버 포스트 css와 js를 추가 수정했습니다.  기존에 userId와 userPw를 Firebase Database에 저장하던 방식을 Firebase Authentication을 이용하도록 수정했습니다. import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js';const app = initializeApp(firebaseConfig);const auth = getAuth(app);---const userId = formData.get('userId');const userPw = formData.get..
TIL 2024. 12. 27. 00:34