티스토리

나의 코딩일지

검색하기

블로그 홈

나의 코딩일지

pompomko.tistory.com/m

폼폼코 님의 블로그입니다.

구독자: 1

방명록 방문하기

728x90

반응형

주요 글 목록

기술면접 예상질문 -알고리즘- 시간복잡도와 공간복잡도가 무엇인지 설명해주실 수 있을까요? 시간 복잡도(Time Complexity)는 입력 크기에 따라 알고리즘이 실행되는 시간이 어떻게 변화하는지를 나타냅니다. 입력 크기가 커짐에 따라 실행 시간이 얼마나 증가하는지를 의미합니다. 공간 복잡도(Space Complexity)는 입력 크기에 따라 알고리즘이 사용하는 메모리 공간이 어떻게 변화하는지를 나타냅니다. 입력 크기가 커짐에 따라 사용되는 메모리 공간이 얼마나 증가하는지를 의미합니다. 재미있게 공부한 알고리즘이 있다면 설명해주실 수 있을까요? 동적 계획법(Dynamic Programming)입니다. 동적 계획법은 복잡한 문제를 작은 하위 문제로 나누어 해결하고, 이미 계산된 하위 문제의 해답을 저장하여 중복 계산을 피하는 방식입니다.. 공감수 0 댓글수 0 2024. 4. 9.
기술면접 대비 네트워크 관련 예상 질문 1,HTTPS의 원리를 설명해주실 수 있을까요? HTTPS(Hyper Text Transfer Protocol Secure)는 웹 브라우저와 웹 서버 간의 통신을 암호화하여 보안을 강화한 프로토콜입니다. HTTPS는 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화합니다. 클라이언트와 서버는 SSL/TLS 핸드셰이크 과정을 통해 상호 인증하고, 암호화 키를 교환합니다. 이후 모든 데이터는 대칭키 암호화 알고리즘으로 암호화되어 전송됩니다. 서버는 인증서를 사용하여 자신의 신원을 증명하고, 이를 통해 중간자 공격을 방지합니다. 2,TCP 3 way handshake란 무엇인지 설명해주실 수 있을까요? TCP 통신을 시.. 공감수 0 댓글수 0 2024. 4. 8.
기술 면접 대비 질문 정리 자바스크립트 클로저(Closure) 클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있는 영역입니다. 이는 함수가 생성될 때 함수 생성 당시의 외부 변수를 기억하고 있기 때문입니다. 클로저는 데이터를 안전하게 보호하고 은닉할 수 있어 객체지향 프로그래밍의 원리인 캡슐화를 구현할 수 있습니다. 2. 호이스팅(Hoisting) 호이스팅은 변수와 함수 선언이 코드 실행 전에 최상위로 이동하는 것을 말합니다. 변수의 경우에는 선언만 호이스팅되고, 할당은 호이스팅되지 않습니다. 함수의 경우에는 함수 선언식은 호이스팅되지만, 함수 표현식은 호이스팅되지 않습니다. 호이스팅으로 인해 변수나 함수를 사용하기 전에 선언되어 있지 않으면 에러가 발생할 수 있습니다. 3. 이벤트 버블링(Event Bubbling) 이벤트.. 공감수 0 댓글수 0 2024. 3. 26.
24.02.08 최종 프로젝트 발표!(내배캠 마무리) 드디어 작년 10월부터 시작한 내배캠 부트 캠프가 마무리되었습니다.... 길다면 길고 짧다면 짧은 5개월입니다... 그리고 오늘은 최종 프로젝트 발표일이었습니다 마지막 zep.... 발표회를 하기 위해 게더타운으로 다시 이동했습니다 그래도 부스 진행되는 동안 다양한 분들이 방문해 주셔서 저희 서비스를 감상해 주셨습니다 뭔가 내 자식이 칭찬받는 기분 ㅎㅎ 오후 4시 폭풍 질문받는 중 게임 관련 프로젝트는 오랜만에 본다는 튜터님도 있었고 그냥 디자인이 너무 이뻐서 우리 조 투표해 주신 다분도 있었고 채용 박람회 직원들이 이런 기분일까요? 우리 제품 칭찬해 주는 사람들 보면서? 좋은 경험이었습니다 https://teamsparta.notion.site/c1efecf8ca4541fe8ae5eb8995666489.. 공감수 0 댓글수 1 2024. 2. 8.
2024.02.07 최종 프로젝트 발표회 준비 이제 내일이면 드디어 마지막 최종 프로젝트 발표일 입니다 오늘은 하루종일 발표 준비만 한 날이였습니다 마지막까지 팀원들과 발표자료 준비로 회의를 했습니다 https://oasis-moonstone-a81.notion.site/2024-02-08-5a1b987c04fe42449134b6717d9236fe?pvs=4 2024.02.08 최종 프로젝트 발표회 | Notion 발표 영상 oasis-moonstone-a81.notion.site 이번 TIL은 따로 적을 필요없이 노션에 있는 내용으로 충분할거같습니다 확실히 팀원들과 회의를 해보니 혼자 생각한것보다 훨씬 좋은 자료들이 나왔습니다. 지난 프로젝트의 과정들이 떠올랐습니다.이제 내일 발표하면 드디어 마지막 이네요.... 공감수 0 댓글수 0 2024. 2. 7.
24.02.06 마지막 최종 배포 이제 최종 프로젝트도 어느새 배포 와 발표회만을 남겨두고있다 마지막은 코드 리팩토링으로 가독성을 높이는데 중점을뒀다 AWS배포중에 오류가 생겨 일단은 급하게 버셀로 배포를 완료했다 https://todaygames-5mok-pxxq25hen-todaygame.vercel.app 마지막까지 우여곡절이 많았지만 그래도 무사히 배포까지 마쳤다 벌써 내배캠도 마무리 되어가는 중이라 걱정되긴하지만..... 그래도 일단 AWS 적용까지 다시 해봐야하듯하다 공감수 0 댓글수 0 2024. 2. 6.
24.02.05 타입스크립트 코드 리팩토링(AWS 배포) 이제는 거의 마무리 단계라 기능 구현보다는 코드 리팩토링에 좀더 에너지를 쏟고있습니다 코드를 둘러보다보니 type 를 은근히 많이 사용해서 하나하나 콘솔 찍어보고 새로 타입을 만드는 중입니다.. 코드 리팩토링이 어느 정도 진행된 후에는 AWS를 통한 배포 방법도 들었습니다 AWS 배포 팀원의 아시는 지인분이 친절히 PPT 도 만들어 설명해 주셨습니다 오늘 배우면서 개발자들이 왜 맥북을 쓰는지 알거같았습니다 그놈의 리눅스.... 공감수 0 댓글수 0 2024. 2. 5.
24.02.04 오늘은 코드를 전체적으로 리팩토링을 해야할듯합니다 웬만하면 any type은 안써야겠습니다 공감수 0 댓글수 0 2024. 2. 4.
24.02.03 수파베이스 현재 로그인한 사용자 정보 가져오기 튜터님의 피드백 중 예상치도 못한 한마디 "구글 로그인이나 카카오 로그인해도 비밀번호 바꿀 거냐..." 앗 그래서 오늘 소셜 로그인을 한 경우에는 비밀번호 변경 창을 안 보이게 할 예정입니다 그러려면 일단 소셜 로그인인지 아닌지 구분해야겠죠 수파베이스 auth.user에 보면 이렇게 provider가 표시가 됩니다 이제 이 정보를 가져오려면 예시) useEffect(() => { const authListener = supabase.auth.onAuthStateChange((event, session) => { if (session?.user) { supabase .from('userinfo') .select('*') .eq('id', session.user.id) .single() .then((resp.. 공감수 0 댓글수 1 2024. 2. 3.
24.02.02 수파베이스 스토리지 이미지 업로드&테이블 연결 마이그레이션도 완료했고 이제 다시는 트래픽 초과를 발생시키지않기위해 서둘러 스토리지 연결을 해봅니다 const MypageNav = ({ selectedCategory, onCategoryChange }: MypageProps) => { const user = useSelector((state: RootState) => state.userSlice.userInfo); const fileInputRef = useRef(null); const handleFileChange = useCallback( async (e: React.ChangeEvent) => { if (e.target) { const selectedFile = e.target.files; if (selectedFile && selectedFil.. 공감수 0 댓글수 0 2024. 2. 2.
수파베이스 마이그레이션 (수파베이스 계정 서버 옮기기) 24.02.01 결국 무료 트래픽 초과로 인해 수파베이스 서버를 옮기게 되었습니다.... 수파베이스 서버를 옮겨야 한다! 싶을 때 보면 좋을 정리 글이 되겠네요 https://www.youtube.com/watch?v=nyX_EygplXQ 기본적으로 이영상을 따라 했습니다 자동 자막이 잘 돼있어서 영어 몰라도 참고할만했습니다 (물론 저는 튜터님(튜터님도 이거 보고하심) 설명 듣고 같이 봤습니다) https://docs.docker.com/desktop/install/windows-install/ Install Docker Desktop on Windows Get started with Docker for Windows. This guide covers system requirements, where to download.. 공감수 1 댓글수 1 2024. 2. 1.
24.01.31 수파베이스 스토리지 연결 오류(rls) 프로필 이미지 업로드할때 data.url로 들어가던게 무료제공 트래픽을 모두 잡아먹었습니다...!! 2월5일까지는 어떻게 사용이 가능하지만 2월8일이 최종 발표인지라 새로운 데이터 베이스 로 이동주닙를 해야겠네요 문제는 일단 프로필 이미지 업로드 기능에 스토리지를 거쳐서 올리는 방식으로 코드 리팩토링을 진행 해야합니다 const handleFileChange = useCallback( async (e: React.ChangeEvent) => { if (e.target) { const selectedFile = e.target.files; if (selectedFile && selectedFile.length > 0) { const file = selectedFile[0]; // 공백 제거 및 특수 문자 .. 공감수 0 댓글수 0 2024. 1. 31.
24.01.30 최종 프로젝트 배포 후 추가 수정 중 디테일한 부분을 계속 수정 중에 있다 오늘은 상단에 점 3개 더 보기 버튼을 누르면 수정 삭제 버튼이 나오도록 설정했는데 아래 박스 더 보기를 눌러도 위에서만 수정 삭제가 뜨는 대참사가 일어났다 처음에는 기능 문제인가 아니면 map으로 잘못 뿌려 주고 있나 싶었지만 원인은 css였다 handleMoreInfoClick(post.id)} /> {editingPostId === post.id && ( handleEditButtonClick(post.id)}>수정 삭제 )} 에딧 버튼(점 3개)를 누르면 밑에 있는 수정 삭제 버튼이 나와야 하는데 const StfetchForm = styled.div` flex-direction: column; padding: 10px; justify-content: flex.. 공감수 0 댓글수 1 2024. 1. 30.
24.01.29 배포후 긴급수정 배포후 UT(유저 테스트)를 통해 긴급 수정중입니다 부족한 부분이 꽤나 많네요 좀더 유저의 입장으로 개발했어야 싶지않았나 싶습니다 엄청난 피드백;; 오늘도 잠못드는 하루가 될거같습니다 공감수 0 댓글수 0 2024. 1. 29.
프론트 엔드 기술 면접 대비 TOP 16/30 24.01.28 제가한 답변은 아니지만 다른분들이 한 베스트 답변들을 모아봤습니다 면접보러 가기전에 3~4줄로 요약해보고 면접보러 가야겠네요 1.상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 먼저 상태관리를 해야하는 이유는 리액트는 SPA으로 JS로 DOM을 조작하는 방식이 아니라 가상 DOM 방식을 사용해 화면에 있는 요소들을 제어합니다. 그렇기 때문에 직접 변수를 변경하는 것이 아닌 state를 통해 데이터를 관리해야 변경된 사항을 적용할 수 있습니다. - 상태관리를 사용하는 이점으로는 먼저 말했듯 변경사항을 적용할 수 있다는 점, 두번째로는 하나의 state의 값으로 하위 컴포넌트에 props로 전달하여 일관된 데이터를 공유할 수 있다는 점입니다. - state 관리는 크게 지역적, 전역적.. 공감수 1 댓글수 1 2024. 1. 28.
24.01.27 스토리지 연결....!!! 어디선가 본 글인데 진짜 잘하는 개발자는 자기가 짠 코드를 아쉬워하지 말아야한다고합니다 차라리 싹다밀고 처음부터 만드는게 더 좋을수도 있다고... 오늘 저도 그래야 할듯합니다.... 공감수 0 댓글수 0 2024. 1. 27.
24.01.26 모의 기술 면접 피드백 정리 오늘은 1 대 1 모의 기술 면접을 봤다 정리한 내용과 피드백을 정리해 봤다 https://oasis-moonstone-a81.notion.site/2024-01-26-React-3-ed7a11456800426c924db8a8bba5abd3?pvs=4 2024.01.26 [React 3기] 최종프로젝트 기술 면접 질문 리스트 | Notion supabase를 사용하는 이유에 대해 말씀해주세요. oasis-moonstone-a81.notion.site 원래는 각각의 개념마다 댓글도 달아놔서 나무위키처럼 정보를 많이 정리해놨는데 편집 때만 보이는 기능이었나 봐 막상 팀원들한테 공유하니 다 사라져 버렸다. 모의 기술 면접 피드백 정리 -Props drilling 을 설명해 주세요 - 프랍스 드릴링 의 개념 좀.. 공감수 0 댓글수 1 2024. 1. 26.
24.01.25 이미지 업로드 대참사 (수파베이스) 현재 로그인한 유저정보는 useSelector를 통해 가져오고 해당유저의 uid를 fillter로 사용해 해당 유저가 만든 게시글만 불러오고 있다 import styled from 'styled-components'; import { useSelector } from 'react-redux'; import { useEffect, useState } from 'react'; import { supabase } from 'types/supabase'; import { RootState } from 'redux/config/configStore'; const MyCommunity = () => { const [posts, setPosts] = useState([]); const user = useSelecto.. 공감수 1 댓글수 0 2024. 1. 25.
24.01.24 수파베이스 유저 비밀번호 변경 오늘도 프로젝트를 여전히 진행 중입니다 구글에 supabase update user password라고 검색하니 바로 스택 오버플로우 검색 결과가 나와 공식 doc과 함께 참고해서 만들었습니다 https://stackoverflow.com/questions/71561522/how-to-update-the-password-of-a-supabase-user-on-a-nextjs-project/71948292#71948292?newreg=87301c7d3fcc4fe380ff42e93f8571de How to update the password of a Supabase user on a NextJs project? I'm facing an issue updating a password for a supabase.. 공감수 1 댓글수 1 2024. 1. 24.
24.01.23 수파베이스 스토리지 안쓰고 이미지 업로드 추가 기능 구현 중에 있습니다 간단한 닉네임 중복검사 const checkNickname = async (nickname: string) => { // 닉네임 중복 검사 (userinfo테이블 기준입니다 /mypage에서 닉네임 변경할때도 userinfo만 변경됩니다) const { data, error } = await supabase .from('userinfo') .select('nickname') .eq('nickname', nickname); if (error) { console.log('닉네임 중복 검사 에러'); return; } return data.length > 0; //닉네임 중복이 맞다면 true를 뱉어냄 }; 수파베이스 유저정보를 모아둔 테이블에서 중복되는 닉네임이 있다면 ture.. 공감수 0 댓글수 1 2024. 1. 23.
24.01.22 최종 프로젝트 중간발표 어느새 시간은 흘러 벌써 중간발표하는 날까지 다가왔습니다 원래는 노션만 보고 발표하려고 했지만 앞선 발표 들을 보고 안되겠다 싶어 후다닥 만든 PPT ppt 화면 보여주는 사이트 검색하니 캔바라는 사이트가 있어서 후딱 만들었습니다 https://www.canva.com/ko_kr/presentations/ https://www.cloudcraft.co/ Cloudcraft – Draw AWS diagrams Visualize your AWS environment as isometric architecture diagrams. Snap together blocks for EC2s, ELBs, RDS and more. Connect your live AWS environment. www.cloudcraft... 공감수 0 댓글수 1 2024. 1. 22.
24.01.21 대표사진 삭제 지금보니까 상단 네브바에 프로필 이미지를 넣어 줘야 하나 고민이네요 본래 디자인에 맞춰진 mypage입니다 이제 프로필 이미지도 불러와지고 얼추 구색은 갖췄는데 아직도 몇가지 기능이 부족한 상태입니다 1,프로필 이미지 업로드 2, 비밀번호 변경 (여기서 수파베이스 인증 부분을 건드려야하는데 어떤 방식으로 나가야할지 막막....) 공감수 0 댓글수 0 2024. 1. 21.
24.01.20 회원 가입시에 유효성 검사가 많이 없어 추가로 몇가지 구현했습니다 import React, { useState } from 'react'; import { supabase } from 'shared/supabase'; import { Link, useNavigate } from 'react-router-dom'; import { StyledSignup, StyledForm, StyledInput, StyledButton, StyledH1, StyledLabel } from './styles'; interface FormData { email: string; password: string; displayName: string; } const isValidConfirmPassword = (password: .. 공감수 0 댓글수 0 2024. 1. 20.
24.01.19 수파베이스 테이블 정보 업데이트 유저 정보 불러오는 건 성공했으니 이제 유저 정보를 수정할 차례입니다 https://supabase.com/dashboard/project/zypmvkiqnuatkkktbmrr/api?resource=userinfo API | Supabase supabase.com https://supabase.com/docs/reference/javascript/upsert Upsert data | Supabase Perform an UPSERT on the table or view. Depending on the column(s) passed to onConflict, .upsert() allows you to perform the equivalent of .insert() if a row with the corre.. 공감수 0 댓글수 0 2024. 1. 19.
24.01.18 수파 베이스 회원가입 추가 정보 넣기 회원가입 시에 닉네임을 추가할 수 있도록 해보았습니다 import React, { useState } from 'react'; import { supabase } from 'shared/supabase'; import { Link, useNavigate } from 'react-router-dom'; import { StyledSignup, StyledForm, StyledInput, StyledButton, StyledH1, StyledLabel } from './styles'; interface FormData { // displayname: string; email: string; password: string; displayName: string; } interface UserExtraData {.. 공감수 0 댓글수 0 2024. 1. 18.
24.01.17 현재는 다시 MYPAGE작업중이다 저번에 쓰던코드는 버리고 userSlice를 이용해 전역 상태관리를하고 로그인한 정보를 가져온다 리액트 쿼리를 이용해서 수파베이스 user데이터를 가져오고 params를 이용해 id값과 일치하는 데이터를 뿌린다 import { useDispatch } from 'react-redux'; import { useQuery } from '@tanstack/react-query'; import { useEffect } from 'react'; import { useSelector } from 'react-redux'; import { useState } from 'react'; import { UserInfo } from 'api/user'; import { setError, .. 공감수 1 댓글수 0 2024. 1. 17.
24.01.16 다른 팀원들은 많은 진전이있었지만 오늘도 여전히 전역상태관리에서 막혀있다 어제일에 휴유증인지 집중이 안되 너무 힘들지만 포기할순없다 전역상태 관리를 위해서 redux-toolkit강의를 다시보고있다 수파베이스에서도 따로 가능하다는데 이번에 새로올라온 생활코딩 강의를 봐야할지도 23.자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요. 답변 JavaScript는 웹의 표준 언어로, 동적 타이핑이 가능해 유연하게 사용할 수 있으나, 이로 인해 컴파일 시간에 타입 오류를 발견하기 어렵고 유지보수가 어려울 수 있습니다. TypeScript는 JavaScript의 상위 집합으로, 정적 타입 검사를 통해 오류 발견이 쉽고 코드의 안정성을 높이는 장점이 있습니다. 하지만 TypeScript는 학습 곡선이.. 공감수 1 댓글수 0 2024. 1. 16.
24.01.15 현재 전역상태관리를 이용해 로그인 정보를 담는중이다 컨피그 스토어는 많이 안다뤄봐서 어색하지만 빠르게 진행해야할듯하다 21 . react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요. 답변 클래스형 컴포넌트는 ES6 클래스로 정의되고, 라이프사이클 메서드를 사용합니다. 함수형 컴포넌트는 간결하고 읽기 쉽습니다. Hook을 통해 상태 관리와 라이프사이클 메서드 기능을 수행할 수 있습니다. 함수형 컴포넌트는 커뮤니티와 공식 문서에서 권장되며, 성능도 약간 더 좋을 수 있습니다. 현대 React 개발에서 함수형 컴포넌트가 주로 사용됩니다. 22. 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요. 답변 쓰로틀링은 일정 시간 동안 이벤트 실행을.. 공감수 1 댓글수 0 2024. 1. 15.
24.01.14 최종프로젝트 my page 프로필 생성 여전히 수파베이스 에서 데이터 가져오기 까지는 성공한 상황 이제는 데이터를 가공 할차례입니다 그전에 머리도 잠시 식힐겸 처참한 css 수정time const StyledButton = styled.button` width: 350px; height: 50px; flex-shrink: 0; background-color: ${(props) => props.theme.color.primary}; color: #ffffff; border: none; margin-top: 10px; border-radius: 15px; &:hover { background-color: #1c3669; } `; 팀과제인 만큼 css는 전역상태관리로 색상통일했습니다(막상할려니 전역관리 색상 적용방법 생각안났음;;) 이제 다시 my.. 공감수 2 댓글수 2 2024. 1. 14.
24.01.13 수파베이스 테이블 데이터불러오기 이제는 mypage 작업중입니다 일단은 수파베이스 테이블에서 특정 coloum을 불러와 봅시다 만들어놓은 테이블의 API Doc에 들어가면 내가 작성한 테이블 이름 그대로 어떻게 불러와야하는지 코드를 알려줍니다 저는 테이블에서 한 열(coloum)을 읽어와야하기에 일단 전체 를 긁어와봤습니다 (*) 을 하니까 열(coloum) 이아니라 행(row)가 읽혀져 왔습니다 const { data, error } = await supabasedata.from('가져올 테이블이름').select('가져오고싶은정보'); useEffect(() => { const fetchUserInfo = async () => { try { const { data, error } = await supabasedata.from('us.. 공감수 1 댓글수 0 2024. 1. 13.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.