2023년 6월 2일부터 새로운 곳에서 프론트엔드 개발자로 다시 시작하게 되면서 이전과 비교했을 때, 앞으로 어떤 개발자가 돼야 하는지 써보려 해요! 더 좋은 생각을 많이 나눠준다면 저희 팀과 저의 큰 성장이 될 것 같아요! 크게 현재 나는 어떤 사람인지 돌아보며 시작하도록 할게요 Q1. 어떤 개발자가 되고 싶나요? 저는 단기적, 장기적으로 두 가지 목표를 갖고 있어요! 먼저 단기적으로는 현재 맡은 서비스를 유저에게 더 좋은 경험을 주는 플랫폼으로 만들어가는 게 현재 목표예요!그러기 위해선 스스로 세 가지가 중요하다고 생각하여 꼭 숙지하면서 개발하기 위해 노력하고 있어요. 첫째, 내 서비스를 누구보다 완벽하게 이해하기 (이제 막 알아가고 있죠..!)둘째, 좋은 개발팀문화를 만들어가며 함께 정착하기셋째, ..

오늘은 저번 시간에 잠깐 나왔던 가운데 정렬에 대해서 제가 주로 쓰는 방법을 소개합니다!! 순서는 1) 글씨 가운데 정렬, 2) flex 가운데 정렬, 3) tranform 가운데 정렬 이렇게 보도록 할게요~! 각각 써야할 순간이 정해져있는? 느낌이라 유용하게 사용할 수 있을거에요! 1. 글씨 가운데 정렬 제목!!! 기본적으로 위와 같이 쓴다면 좌측부터 글이 작성될텐데 글씨를 가운데 정렬하기 위해선 css를 아래처럼 해주면 돼요! .header { text-align: center } 이렇게 정렬되는 모습을 볼 수 있어요!! 하지만, 글씨가 아닌 영역이라면 위와 같은 방법으로는 가운데 정렬이 안돼요 영억1 영역2 // module.css .header { text-align: center; } .box ..

저번 시간에 마무리로 밑줄이 채워지는 bar 인터랙션을 알아보려해요~! 영상은 아래 링크에서 참고해주시면 감사하겠습니다..!(블로그 이전하면서 옮기고 있어요..!) https://blog.naver.com/glory4god/222663114305 순서는 버튼에 커서를 올렸을 때(나중엔 메뉴1, 또는 메뉴2를 선택한다면 charging 되도록!!) 좌측에서 우측으로 bar가 채워지도록 만드는 과정이죠!! 일단 배운 after, before 둘 중 하나의 가상선택자를 사용하여, width를 0으로 놓은 후에, hover시에 width가 100%가 되도록 한다면 완성이 될 듯 하죠??! 위의 버튼 구조에서 아래처럼 css 설정해보도록 할게요 .wrap { position: relative; } .wrap::a..

오늘은 직접 만든 정보처리기사필기 웹사이트를 리뷰해보려고 합니다!! 사진으로 진행 순서를 공유해보고 어떤 기능이 있는지 소개해드릴께요! https://exam-bomb-service.vercel.app 1번. 과목을 선택해요! 처음 페이지를 접속하면 아래 화면처럼 메뉴가 나와요!(현재는 정보처리기사필기만 가능해요ㅠㅠ) 2번. 공부할 과목의 챕터, 또는 기출 세트를 선택해요! 다음으로를 누른다면 챕터 선택시엔 원하는 문제 수를 고를 수 있어요 ㅎㅎㅎ ​ 3번. 시험에 진심으로 임해요! 짠, 핑크배경은 보기중에 정답을! 상단 번호는 정답이 푸른색을 의미해요! 또한 현재까지의 문제 스코어를 확인할 수 있고, 문제의 오류가 있다면 신고할 수도 있어요! ​ 4번. 열심히 문제를 푸셨나요? 다 푼 정보는 메인페이지..

3월 6일 제주도로 정보처리기사 필기시험을 볼겸 여행을 다녀올 계획이예요!! 오늘로 딱 일주일 남았는데 아직 한참 공부할 내용은 멀었네요..ㅎㅎㅎ ​ 그래도!! 개인프로젝트로 정보처리기사필기 기출, 문제은행 사이트를 만들어서 출퇴근길, 그리고 심심할 때 마다 풀어보니 반복되는 문제 패턴들을 알아가는듯 해요! ​ 혹시나 사용해 볼 분들은 아래 링크로 접속을 해보시면 돼요!! https://exam-bomb-service.vercel.app/start Exam Bomb - 문제 은행 원하는 과목을 자유롭게 공부해요 exam-bomb-service.vercel.app 유저에게 좀 더 다양한 정보를 제공하기 위해 카카오 간편 계정 로그인을 만들었기에, 로그인 후 사용해주시면 감사하겠어요..!! ​ 해당 문제은행..

이 문제의 input은 위와 같다. 문제 읽으며 생각한 풀이 방향성!!!! 1. 유저가 신고한 유저의 리스트를 갖는 Map 구현 2. 유저당 신고당한 count를 갖는 Map구현 이 두가지를 통해서 구현할 계획이다! 먼저 reportMap과 cntMap 두개를 만들었다. let reportMap = {}; let cntMap = {}; report.forEach((re)=>{ const [from, to] = re.split(' '); if(reportMap[from]){ if(!reportMap[from].includes(to)){ reportMap[from].push(to) cntMap[to] ? cntMap[to]+=1 :cntMap[to] =1 } }else { reportMap[from] = [..

문제 읽으며 생각한 풀이 방향성!!!! 1. 전달받는 board의 배열이 moves 값으로 인덱싱하기에 용이하지 못하다고 판단! board[row][col]에서 board[col][row]로 조회할 수 있도록 변경!! 2. 100 * 100 까지 가능하므로 Array 인덱싱보단 Map으로 column 조회가 좋지 않을까? 라고 생각! 아래 코드와 같이 boardMap을 구현함! let boardMap = {}; board.forEach((row,i)=>{ row.forEach((val,j)=>{ if(val !== 0){ boardMap[j+1] ? boardMap[j+1].push(val) : boardMap[j+1] = [val]; } }) }) 0 인 경우엔 넣지 않고, row를 0번부터 인덱싱 하..

오늘은 저의 개발속도를 향상 시켜줄 tailwindcss를 프로젝트에 install하는 방법을 알아볼까 해요! tailwindCSS를 한 번도 안써본 사람은 있어도 한 번만 쓴 사람은 아마 없을거라고 생각해욯ㅎㅎ 그렇다면 왜 제가 이걸 계속 쓰는지 한 번 볼까요?! 일단 제가 생각하는 장점을 말해보자면 1. 조금만 익숙해진다면 css 개발 속도가 훨씬 증가! (코드량 감소) 2. 자주 필요한 css가 미리 만들어져 있어서 손쉽게 구현 가능! 하지만 그럼에도 단점이 있긴하죠,, 제가 생각하는 단점을 말해보면 1. 익숙하지 않다면 지저분하게 생각들수도 있다! 태그의 className에 연달아 쓰기때문에 지저분하대요.... (하지만 저는 css 파일에 tailwind를 적용하여 사용하기에 지저분하다고는 생각안..

이번 시간에는 box-shadow를 통해 정말 간단하지만 버튼 active 상태를 유저에게 확실하게 제공할 수 있는 효과에 대해서 알아보도록 할게요! 요새 CSS 관련 글을 작성할 때 마다 내가 고민하며 구현했던 것들을 나눌 수 있다는게 즐거워요ㅠㅠㅠ CSS 너무 재밌는 것,,,,,,,, 이제 본론으로 가보도록 하겠습니다! 오늘도 결과를 먼저 보여드리자면 메뉴 1 버튼을 보시면 왼쪽부터 기본 / hover / active 상태입니다! 확실히 hover일 때는 올려놓은 듯하게, active 상태일 때는 마우스로 누르고 있는 것 처럼 느껴지죠?? 이런게 UI/UX이지 않을까 싶습니닿ㅎㅎㅎㅎ 먼저 box-shadow를 통해 얻을 수 있는 효과를 살짝 설명하자면, 태그의 영역에 그림자효과를 주어 박스 형태가 있..

드디어! 마무리 할 시간이 왔습니다! 오늘은 마지막으로 selected 상태를 다루는 과정을 알아보려해요! selected상태일 땐, 아래 사진과 같이 글씨 상단에 노란 점을 찍어보려하는데요! 지난 시간에 after before를 사용해봤는데 이거.. 안해봤겠죠?? ​ 그래서! 오늘은 '어떤식으로 만들기 위해 접근할까'라는 생각을 갖고, 접근 방식을 보려해요! ​ 글씨위에 점이 생기네?? (새로운 tag를 만들고, selected일 때만 tag를 보이게 해야하나..?) 이렇게 생각할 수 있지만 오늘은 가상 요소 선택자의 before 사용하여 다뤄보려해요! ​ 1. before를 만들어, absolute로 top:0에 left : 50% 를 주면 가운데에 생기겠지??? 먼저 위와 같이 만약 selected..