sohyeon kim

💡 tailwind 에서도 calc 사용이 가능했다! .example { font-size: calc(2vw + 10px); /* viewport width에 따라 크기 조절하면서 10px를 추가 */ padding: 20px; /* 고정된 크기로 픽셀 단위 사용 */ margin: calc(1vw + 5px) calc(2vw + 10px); /* 세로는 viewport width에 따라, 가로는 픽셀 단위로 사용 */ width: calc(50% + 20px); /* 백분율로 지정하면서 20px를 추가 */ } 원래 요렇게 쓰는 calc .. tailwind 에서 써보자! 저 바(8vh)에 보더를 주고 안에 빨간 박스(8vh)를 채워놨는데 border-box 가 적용되어 있어서 빨간 박스가 보더를 가려..

💡 블로그나 SNS 같은 피드형 웹페이지 프로젝트 🗓️ 02.07 ~ 02.15 (9일) 연휴가 껴있어서 초반에 속도가 조금 더뎠지만 막바지에 다들 밤 늦게까지 작업해 주셔서 무사히 완성할 수 있었다.. 기획 초반에는 뉴스 관련 글을 올리는 곳이었지만..? 중간에 주제가 바뀌면서 맛집 후기를 올리는 사이트가 되었다! 나는 소개 페이지, 프로필 수정(닉네임, 소개, 좋아하는 음식 해시태그)을 담당했었다. // 저장했던 profile ID와 일치하는 profile 정보를 수정합니다. const editProfile = async (e) => { try { e.preventDefault(); const infoRef = doc(db, 'profile', userId); await updateDoc(infoRe..

💡 tailwind 로 체크박스 커스텀하기 { handleCheckObjectAnswer(id, options, option.id); }} /> checked 됐을 때 표시될 배경색을 넣어주고, 그 위에 png 하얀색 체크 표시를 넣어줬다! 그리고 bg-no-repeat bg-center 로 이미지가 가운데 위치하도록 했다. 🥵 url 문제가 좀 있었는데.. 파일에 넣어둔 이미지를 가져오려 했는데 url 에 파일 경로를 아무리 넣어봐도 .. 적용이 안됐다. tailwind.config 에서도 넣어봤지만.. 자꾸 경로 오류가 떠서 시간만 보내다가 supabase storage 에서 URL 가져올 수 있지 않나?!?!??! 해서 이미지 올려두고 url 복사해서 넣어두니 아주 잘 표시됐다. 😭 🔗 https:..

💡 리액트에서 파일 첨부하기 우선 미리보기를 위한 로직 🫠 const handleClickImg = (id: string | undefined) => { // img & input 을 감싸고 있는 div 클릭 시 const fileInput = document.getElementById(`fileInput${id}`); // fileInput${id} id를 가진 DOM 요소를 fileInput?.click(); // 클릭한다. }; const handleChangeImg = (id: string | undefined, files: FileList | null) => { const file = files?.[0]; if (file) { const imgUrl = URL.createObjectURL(fil..

📝 문제영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요. 🫠 나의 풀이def solution(numbers): num = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"] for i, n in enumerate(num): numbers = numbers.replace(n, str(i)) return int(numbers) enumerate 리스트의 인덱스, 요소를 가져올 수 있다.replace 문자열을 다른 문자열로 바꿔준다...

💡 라디오 속성에 대해 알아보자. 문항들 map 을 돌리는 상황에서 라디오가 문항마다 체크되어야 하는데 한 문제에만 체크되는 오류가 있었다. 살펴보니.. test 하면서 막 만들어 둔 속성들이 문제였다. 그래서 알아본 속성들 용도 🥹 id : label 의 for 와 연결된다. name : 같은 주제의 input 들을 묶어준다. 과일 - 사과, 포도, 딸기 value : 선택된 라디오 값을 저장할 때 이용 label 로 input 을 감싸주는 걸로 변경해서 id & for 를 지웠고, name 에 map 으로 돌리면서 가져오는 qustion 의 id 를 넣어줬다! 🔗 https://www.daleseo.com/react-radio-buttons/ React에서 라디오 버튼 사용하기 Engineering ..

📝 문제 정수 배열 arr가 주어집니다. arr를 이용해 새로운 배열 stk를 만드려고 합니다. 변수 i를 만들어 초기값을 0으로 설정한 후 i가 arr의 길이보다 작으면 다음 작업을 반복합니다. 만약 stk가 빈 배열이라면 arr[i]를 stk에 추가하고 i에 1을 더합니다. stk에 원소가 있고, stk의 마지막 원소가 arr[i]보다 작으면 arr[i]를 stk의 뒤에 추가하고 i에 1을 더합니다. stk에 원소가 있는데 stk의 마지막 원소가 arr[i]보다 크거나 같으면 stk의 마지막 원소를 stk에서 제거합니다. 위 작업을 마친 후 만들어진 stk를 return 하는 solution 함수를 완성해 주세요. 🫠 나의 풀이 def solution(arr): stk = [] i = 0 while ..

🫥 기획 마무리..! 드디어 모든 기획이 마무리되었다! 오늘 아침엔 우선 개발 시간을 다 같이 계산해 봤다. 막연하게 생각하고 있었는데 한 기능마다 시간을 계산하니까 파악이 잘 됐다. 일정이 정리되고 DB-ERD 피드백을 받았다. 원래 배열이나 객체로 넣어놨던 값들을 다 다른 DB 로 나눠주셨다. 처음엔 헷갈렸는데 퀴즈북 - 퀴즈 나눴던 것처럼 더 나아가서 하나하나 작게 쪼개는 거라 생각하니 좀 이해가 됐다.. 코드컨벤션까지 정한 후에 CRA 셋업에 들어갔다! 팀장님이 화면공유로 코드 작성해 주시고 팀원들은 각자 프로젝트 세팅했던 방식 얘기하면서 잘 맞춰갔다. 세팅 끝나고 서로 확장팩 공유하는데.. ㅋ. ㅋ "[귀여운 아이들]을 얻었습니다!" 대망의 역할 분담 🥹 하고 싶은 기능에 모두 투표한 후에 누가..

🫠 기획 더 더.. 구체화 오늘은 어제에 이어 기획을 좀 더 촘촘하게 짜고.. 초기 세팅에 들어갔다! 먼저 길고 길었던 와이어 프레임 제작을 마무리했다. 디자이너님 보시기 편하게 레이아웃만 잡아놓고, 간단한 설명들을 적어놨다. 그리구.. 문제의 퀴즈 데이터 관리 퀴즈를 만들고 푸는 페이지를 생각하다가 데이터 보내고 가져오는게 너무 감이 안잡혀서 😥 각자 미로에 자기가 생각하고 있는 table 을 적어보기로 했다. 퀴즈북과 그 안에 퀴즈에 각각 어떤 데이터가 들어갈지 정리한 뒤에 다시 서로 얘기하면서 더할 건 더하고 뺄 건 빼면서 감을 잡아갔다.. 저 퀴즈 데이터 늪에 빠져있을 때.. 팀장님이 우선 오늘 todo 들 중에서 각자 맡을 수 있는 걸 맡아서 먼저 끝내자고 하셔서 겨우 정신차리고 나올 수 있었다..

🫠 기획 구체화하기 어제 정해졌던 한글 공부 사이트에서 기획을 좀 더 구체화했다! DB, 전역 상태 관리 등은 어떻게 할지 정하고, 핵심 기능인 게임 & 퀴즈는 어떻게 구현할지 레퍼런스를 많이 찾아봤다. 유저가 만드는 퀴즈 부분이 어떻게 만들어야할지 감이 안왔었는데 구글폼이나 다른 공부 사이트들을 보다보니 좀 정리가 된거 같다. 👶 그리고 중요한 프로젝트명 정하기! 한글 공부 사이트여서 한글로 짓기로 정하고, 각자 이름들을 생각해 왔다. 그 중 좋았던 후보가 1. 글마루 2. 뭔말이지 요 둘! 고르고 고르다.. 튜터님의 의견을 더해.. 뭔말easy? 로 결정됐다! 자매품 못말리지 🫂 퍼소나 & 페이지 컨셉 정하기 우리의 퍼소나, 헤일리씨와 사이먼씨다 나중에 좀 더 자세하게 설정해두면 프로젝트 설명에 도움..