[2주차 기본/심화/공유 과제] 관리자 페이지 #4

ayla-12 · 2024-10-29T13:16:51Z

✨ 구현 기능 명세

💡 기본 과제

바닐라 JavaScript 사용. (React 등 라이브러리 사용 X)

데이터
- 초기 데이터는 데이터 파일을 별도로 생성해서 저장
- 이 데이터를 불러와서 localStorage에 저장(이미 localStorage에 값이 있으면 안 불러옴).
- localStorage 데이터를 이용해서 테이블을 렌더링(HTML에 데이터를 직접 넣는 하드코딩 x)
헤더
- 왼쪽엔 아이콘 1개 (종류는 상관 x)
- 가운데에는 타이틀(아무거나)
- 오른쪽에는 긴 컨텐츠(텍스트, 아이콘 등 아무거나)
- 좌측/우측 컨텐츠의 길이가 달라도 헤더가 정확히 3등분 되어 정렬되어야 함.
필터
- 7개의 검색필터, 2개의 버튼으로 구성
- 검색필터를 배치할때는 반드시 display: grid 속성 사용
- 속성이 4줄에 각각 1개, 1개, 3개, 2개 배치 되어야 함(속성의 내용은 상관 x)
- 필터링 할 값을 input에 입력
  (기본과제에서는 7개 모두 input으로 구현해도 괜찮음)
- 7개의 속성 모두 필터링이 동작해야 함(포함하는 값으로 필터링)
- (기본) 1번에 1개씩 입력하고 검색 필터 적용
표
- 우측 상단에는 선택삭제, 추가 버튼이 위치
- 상단 필터에서 필터링 된 값만 나타남
- 반드시 HTML의 table 태그를 사용해서 구현
- 체크박스 기능
- 선택삭제 버튼 클릭 시, 체크된 항목들 삭제
- 추가 버튼 클릭 시, 항목 추가 모달 등장
모달
- 필터링, 테이블에 사용되는 7개의 항목을 입력 가능
- 우측 상단에 모달 닫기 버튼
- 하단에 추가 버튼 클릭 시, 모달 닫히면 데이터 추가
- 1개라도 비어있는 상태로 추가 시, alert 창 띄워주기

🔥 심화 과제

필터
- 필터에 dropdown을 1개 이상 사용
- 초기화 버튼을 누르면 모든 필드가 비워짐
- (심화) 여러 조건들을 모두 만족하도록(and) 검색 필터 적용
표
- 한 개 이상의 열에는, 눌렀을 때 해당 칸의 값을 이용해서 링크 이동
- 전체 체크박스 기능 (전체가 체크되면 맨위 체크박스도 자동으로 체크, 하나라도 해제되면 같이 해제)
모달
- 백드롭(모달 주변 어두운 배경 부분) 클릭 시 모달 닫힘

공유과제

제목: [JavaScript] 자바스크립트의 데이터 타입에 대해.araboza

링크 첨부 : https://wave-web.tistory.com/67

❗️ 내가 새로 알게 된 점

class와 id를 어떻게 활용해야할 지 조금은 감을 잡았습니다.
box-sizing: border-box를 하지 않으면 의도치 않은 흘러넘침이 발생하는 것을 깨달았습니다.
select 박스에서 플레이스 홀더처럼 표현하는 방법을 배웠습니다.
모달을 만들기 위해서는 클래스 리스트에 on class를 추가하는 방법으로 구현할 수 있다는 것을 알게되었습니다.
저번에 퍼블리싱 할 때 단위를 px이 아닌 rem으로 해보라는 조언을 받아서 이번에는 모두 rem 형식으로 설정하였습니다.
forEach 함수를 배운 후 사용해보았습니다.
화살표 함수에 대해서 많이 써보면서 확실히 이해하는 과정을 거쳤습니다.
innerHTML을 활용하여 js 파일 내에서 html을 삽입할 수 있다는 사실을 알게 되었습니다.

❓ 구현 과정에서의 어려웠던/고민했던 부분

체크박스... 전체 선택 전체 해제는 되는데, 전체 선택 한 상태에서 아래 아무거나 해제하면 전체 선택 버튼도 해제 되어야하는데 그게 안됩니다. 어떻게 해야할지 고민하다 시간이 안되어 넘어갔습니다 ㅠ
section 영역에 margin-top을 줬는데 왜 쌩뚱맞은 헤더가 내려오는건지 모르겠습니다. fixed 속성을 없앴더니 원하는대로 보여서(그러나... 헤더는 고정되지 않음 ㅠㅠ) 그대로 두긴했는데 왜그런지 궁금합니다.
그리드가 예쁘지 않습니다! 현재 4번째 행에 두 검색 필드의 크기가 다릅니다. 어떻게 통일을 시켜야하는지 잘모르겠습니다.
- grid를 6열로 쪼갠 다음에, 필드 3개들어가는거에 맞춰서 규격을 짰더니 발생한 문제였습니다.
필터링 기능 어거지로 구현하기는 했는데 이렇게 비효율적일 수가 ?!? 형식이 반복되는데 이걸 함수 형태로 만들어서 필드에 적힌 내용을 들고와서 비교할 수 있지 않을까... 까지만 생각해보았습니다..
저 react 실습하다가 실수로 week2 폴더랑 막 다 설치됐는데 이거 어떻게 해결하는지 아시는분? ... ㅠㅠ

🥲 소요 시간

70h 정도...

🖼️ 구현 결과물

https://youtu.be/ubH9I7XKAec

ocahs9

이번 과제 쉽지 않았죠.. 고생하셨습니다 !!
정말 열심히 하셨네요 80시간... 대단해요 👍👍
코멘트 한번 확인해주시고, 리팩토링도 도전해봅시다 화이팅 !!!

ocahs9 · 2024-10-30T16:43:01Z

week2/assignment/index.html

+                <tbody>
+                    <!-- 한 row에 들어가는 정보 값. 나중에 js 할 때 <tr>을 추가하는 식으로 해야됨 -->
+                </tbody>


주석 굿! 사실 이번에는 tbody가 딱 하나뿐이라서 상관 없을 수도 있는데, 나중에는 더 확실하게 가져오기 위해서 id를 부여해준 뒤, 해당 id를 바탕으로 js에서 해당 태그를 뽑아오는 게 좋아요!

예를 들면, getElementById('아이디') 와 같은 방식으로요! 그래서 나중에는 언젠가 js에서 뽑아와서 사용할 요소라면, id를 부여하는 습관을 가져봅시다 !

ocahs9 · 2024-10-30T16:43:36Z

week2/assignment/index.html

+    <header class="header">
+        <a href="#"><i class="fa-solid fa-bars"></i></a>
+        <h1>물결웹팟 파트원 관리 페이지</h1>
+        <span>made by AND SOPT 메이커스팀장 김가연🌊🚀</span>


ocahs9 · 2024-10-30T16:51:59Z

week2/assignment/admin.js

+    // 변수에 값이 있을 시, 필터에 적힌 값과 멤버 배열에 담긴 값을 비교해서, filteredMembers로 반환한다!
+    if (nameFilter) {
+        filteredMembers = filteredMembers.filter(member => member.name === nameFilter);
+    }
+    if (engNameFilter) {
+        filteredMembers = filteredMembers.filter(member => member.englishName === engNameFilter);
+    }
+    if (githubIDFilter) {
+        filteredMembers = filteredMembers.filter(member => member.github == githubIDFilter);
+    }
+    if (genderFilter) {
+        filteredMembers = filteredMembers.filter(member => member.gender === genderFilter);
+    }
+    if (roleFilter) {
+        filteredMembers = filteredMembers.filter(member => member.role === roleFilter);
+    }
+    if (firstWeekGroupFilter) {
+        filteredMembers = filteredMembers.filter(member => member.firstWeekGroup == firstWeekGroupFilter);
+    }
+    if (secondWeekGroupFilter) {
+        filteredMembers = filteredMembers.filter(member => member.secondWeekGroup == secondWeekGroupFilter);
+    }


각각의 필터에 있는 값은 위에서 뽑아온 뒤에, 여기 if문으로 비교하고 해당 필터의 값과 일치하는 값을 갖는 멤버를 뽑아내는 로직이죠? 근데 이렇게 구성하면, 문제가 몇가지 있어요!

만약 nameFilter의 value와 같은 멤버와, secondWeekGroupFilter 의 value의 같은 멤버가 동시에 존재한다면?
-> 결국 secondWeekGroupFilter 의 value에 해당하는 멤버들만 남게 된다.
-> 이유는? if문은 항상 실행되는데, filteredMembers 라는 딱 하나의 변수라서 결국 해당 변수에는 마지막에 실행된 값만 들어가게 되므로 !

필터링 중복 적용이 안될겁니다. 물론 이건 심화 과제였던 것 같은데, 배우면 좋을 것 같아서 알려드릴게요!
그래서 '모든 필터링'을 만족할 때의 멤버를 보여주고 싶다면 && 연산자로 연결해서 구현해보는 것도 좋을 것 같아요.

그리고 추가로 하나 더 말씀드려보자면, 보통 종속적인 데이터들은(같은 레벨에서 관리되는 데이터들은) if-else if- else 문으로 관리되지 if문 여러개로 관리되지 않아요! if문 여러개는 보통 논리적으로 다른 기능을 표시할 때 사용하곤 합니다 ~! 참고해서 리팩토링 도전해봅시다!

ocahs9 · 2024-10-30T16:53:45Z

week2/assignment/admin.js

+modalOpenBtn.addEventListener('click',function(){
+  	//'on' class 추가
+    modal.classList.add('on');
+});
+
+//닫기 버튼을 눌렀을 때 모달팝업이 닫힘
+modalCloseBtn.addEventListener('click',function(){
+    //'on' class 제거
+    modal.classList.remove('on');
+});


class로 관리해주는 것도 좋은데, 아주 간단하게 모달의 on/off만 나타낼거니까
modal.style.display = "none";
modal.style.display = "flex";
과 같은 방식을 이용해보는 건 어떨까요?

style 속성을 수정하는 것도 하나의 방법이긴 한데,

저는 개인적으로 css, javascript의 분리를 위해서 javascript 파일에서 css 속성을 건드리는 것을 선호하지 않는데
혹시 이부분에 대해서는 어떻게 생각하시나요?

css 속성을 직접 건드리지 않는다는거면, classList.add / classList.remove 와 같은 방식을 사용하신다는 말씀이시죠?
사실 분리하는 것도 좋다고 생각하긴 하는데, 저는 여러 파일을 왔다 갔다하는게 오히려 시간을 쓰는 것 같아서.. 좋지 않더라구요. 그래서 간단한 문법 같은 경우에는 그냥 css를 직접 건드리는 방식을 채택하는 편이긴 합니다..! (물론 좀 긴 css를 넣었다 뺐다 해야하는 경우에는 class를 추가,제거 해주는 방식이 더 좋긴 할 것 같습니다 !)

확실히 본인의 취향에 따라 달라질 수도 있을 것 같아요! 좋은 의견 감사합니다 👍

ocahs9 · 2024-10-30T16:55:42Z

week2/assignment/admin.js

+//하나라도 해제되면 전체 선택 체크박스 해제해야함...ㅠㅠㅠ!! 
+document.querySelector('#checkAll');
+checkAll.addEventListener('click', function(){
+
+    const isChecked = checkAll.checked;
+
+    if(isChecked){
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+        for(const checkbox of checkboxes){
+            checkbox.checked = true;
+        }
+    }
+
+    else{
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+        for(const checkbox of checkboxes){
+            checkbox.checked = false;
+        }
+    }
+})


하나라도 체크 해제되거나, 전부 체크가 되면 전체 체크 버튼이 비활성화/활성화가 자동으로 되어야했는데 그게 쉽지 않았죠.. 저는 전체체크박스들을 제외한 다른 체크박스들에 같은 class를 주고, 그걸 전부 querySelectorAll 로 뽑아온 뒤 값을 확인해서 전체 체크박스의 checked를 바꿔주는 방식으로 구현했는데, 제 코드 한번 참고해보시는 것도 좋을 것 같아요!

minjeoong

70시간.. 너무 고생하셨습니다!!!
여러 섬세한 부분 챙겨야할 게 많아서 어려웠던 것 같아요 🥺
코드 보면서 또 배웠던 것 같네요 ... 너무 고생하셨습니다!

minjeoong · 2024-10-31T04:40:20Z

week2/assignment/admin.js

+//setItem
+//이미 불러와져있는 data가 없으면 setItem 함수 호출
+if (!localStorage.getItem('data')) {
+    localStorage.setItem('data', JSON.stringify(members));


엄청 중요한 부분은 아니지만,, 코드가 중복되어 사용되고 있어서
밑에 가연님이 만들어두신 다음 함수를 호출하면 깔끔할 것 같아요!

function saveMembers(members){ localStorage.setItem('data', JSON.stringify(members)); }

minjeoong · 2024-10-31T05:02:54Z

week2/assignment/admin.js

+    const nameFilter = document.querySelector('#filter-name').value;
+    const engNameFilter = document.querySelector('#filter-engName').value;
+    const githubIDFilter = document.querySelector('#filter-githubID').value;
+    const genderFilter = document.querySelector('#filter-gender').value;
+    const roleFilter = document.querySelector('#filter-role').value;
+    const firstWeekGroupFilter = document.querySelector('#filter-week1').value;
+    const secondWeekGroupFilter = document.querySelector('#filter-week2').value;


id 는 class 보다 명시도가 높아요
(-> 관련 링크 첨부드립니다! https://developer.mozilla.org/ko/docs/Web/CSS/Specificity )
특별히 다른 값에 주로 주는 요소로 주로 사용되기 때문에
#id 보다는, class 를 자주 사용하면 좋습니다!
CSS 먹일 때와 동시에 생각해서 구현하면 좋을 것 같아요
"권장사항"이지 필수는 아닙니다!!

minjeoong · 2024-10-31T05:06:18Z

week2/assignment/admin.js

+        row.remove(); // row 삭제
+    });
+
+    saveMembers(members); // 변경된 멤버 데이터 로컬 스토리지에 저장하기


오,, 함수를 따로 빼서 코드가 깔끔해보이고
직관적이여서 너무 좋은 것 같습니다 👏🏻👏🏻👍🏻

minjeoong · 2024-10-31T05:08:54Z

week2/assignment/admin.js

+
+//초기화 버튼 구현
+document.querySelector('#reset').addEventListener('click', function() {
+    document.querySelectorAll('.text-box').forEach(input => input.value = ''); // 텍스트 입력 필드 초기화


오 저는 하나하나 다 초기화 했던 것 같은데,
이런 방법이 좀 더 깔끔하고 좋은 것 같네요
굿 👏🏻👏🏻

input을 초기화하는 좋은 방법인 것 같습니다.

이 방법 이외에도, form태그를 사용한다면, form안의 button 태그에 type='reset' 속성을 사용해서 form 안의 모든 input을 초기화 시켜주는 방법도 있으니 참고해보시면 좋을 것 같습니다!

minjeoong · 2024-10-31T05:10:40Z

week2/assignment/admin.js

+    }
+
+
+    console.log(filteredMembers);


불필요한 콘솔로그는 지우는 게 좋습니다!
리팩터링 할 때 수정하면 좋을 것 같아요 🫠

맞습니다~
개발 과정에서 console.log로 값을 확인하고 테스트 하는 습관은 너무 좋지만, 개발/테스트 후에는 지우기~!

minjeoong · 2024-10-31T05:17:28Z

week2/assignment/index.html

+                </div>
+                <div class="filter-text-box week1">
+                    <div class="filter-title">1주차 금잔디조</div>
+                    <input type="text" class="text-box" id="filter-week1" placeholder="1주차 금잔디조를 입력해주세요(1~9).">


type 을 text 로 정해두면,
실제로 10 이상 값도 물론이고, string 값 까지 전부 받을 수 있는 상태가 되어요!
그래서, type 은 number 로 지정해주는 게 좋을 것 같아요
그리고 타입이 number 이기 때문에
요소의 최솟값을 명시하는 min 속성과
요소의 최댓값을 명시하는 max 속성을 사용해보는 것 도 좋습니다.
관련 아티클 첨부해 두겠습니다!

https://www.tcpschool.com/html-tag-attrs/input-min
https://tcpschool.com/html-tag-attrs/input-max

minjeoong · 2024-10-31T06:04:14Z

week2/assignment/style.css

+    font-display: swap;
+}
+
+html {


처음부터 1rem = 10px 설정하고 들어가는 거 너무 좋네요.. 🍀

gudusol

이미 레전드 개발자 두분이 고봉밥 코리 잔뜩 남겨주셨네요!

2주차 과제 하시느라 고생많으셨습니다. 메팀장, 임원진 일도 많으실텐데 세미나 과제도 열심히 임해주셔서 더 감사합니다 ㅎㅎ

javascript 코드도 잘 작성하셨고, 함수화도 많이 시키면서 깔끔한 코드 작성하려고 많이 노력한게 보이는 것 같습니다!

3주차 과제도 화이팅~! 🔥

gudusol · 2024-10-31T12:03:27Z

week2/assignment/index.html

+                    <div class="filter-title">이름</div>
+                    <input type="text" class="text-box" id="filter-name" placeholder="이름을 입력해주세요.">


여기는 div태그보다는 label태그를 사용해보는건 어떨까요?

label과 input태그를 함께 사용할 때 (input아니어도 괜찮습니다),

input에 id를 설정하고, 해당 id를 label 태그의 for 속성으로 연결해주면 여러 가지 장점이 있습니다!

라벨을 클릭했을때 input이 자동으로 활성화됨으로써 사용성 좋아짐.

어떤 라벨이 어떤 요소에 연결되는지 정확히 인식할 수 있어, 접근성이 향상.

유지보수와 가독성 측면에서도 어떤 label이 어떤 요소를 위한 것인지 한눈에 알 수 있어 더 좋음.

다양한 장점이 있으니 label을 사용하실 때는 for속성을 꼭 한번씩 생각해보시면 좋을 것 같습니다!

gudusol · 2024-10-31T12:03:55Z

week2/assignment/index.html

+                </div>
+                <div class="filter-text-box week1">
+                    <div class="filter-title">1주차 금잔디조</div>
+                    <input type="text" class="text-box" id="filter-week1" placeholder="1주차 금잔디조를 입력해주세요(1~9).">


gudusol · 2024-10-31T12:38:58Z

week2/assignment/index.html

+                <button class="secondary filter-button" id="reset">초기화</button>
+                <button class="primary filter-button" id="search">검색</button>
+            </div>


button 태그의 기본 type 속성은 type="submit"로 설정되어 있습니다. 이 때문에 button이 form 태그 안에 있을 경우 클릭 시 기본적으로 폼이 제출되고, 새로고침이 발생합니다. 그리고 필요에 따라 이 기본동작(새로고침)을 막기 위해 이벤트 핸들러에서 preventDefault()를 사용하게 됩니다.

따라서 코드의 명확성과 의도 전달을 위해 form태그의 외부의 버튼(제출용이 아닌 버튼)이라면 type="button"을 명시적으로 설정하는 것이 권장됩니다! 이렇게 하면 해당 버튼이 제출용이 아님을 분명히 할 수 있어, 코드 이해와 유지보수에 유리합니다.

사실 button이 type="submit" 속성을 가지고 있더라도, form 태그 외부에 있을 때는 새로고침 없이 단순 버튼처럼 동작하기는 한다고 하지만, type='button'을 이용해 좀 더 명시적으로 submit용 버튼이 아님을 나타내 주면 더 좋을 것 같습니다!

gudusol · 2024-10-31T12:40:54Z

week2/assignment/index.html

+        </main>
+    </section>
+
+    <script type="module" src="admin.js"></script>


modal은 화면에 바로 그려지는 부분이 아니라 이렇게 script태그가 중간에 있어도 큰 영향은 없을것 같긴한데, 일반적으로 js파일을 불러오는 script태그는 body태그의 가장 하단에 위치시키는 것을 권장하고 있습니다!

그 이유는,
브라우저가 html을 읽다가 script태그를 만나면 화면 그리는 것을 멈추고, js파일을 읽게 됩니다.
또한 js 파일에서 DOM 요소에 접근하게 된다면, 화면이 모두 그려져 있어야 정상적으로 요소에 접근할 수 있습니다.
따라서 js파일을 불러오는 script 태그는 body태그의 맨 아래에 위치시키는 것이 좋습니다. (혹은 defer속성을 사용하는 방법도 있습니다.)

관련 아티클 하나 첨부해드릴게요!

[HTML] script 태그의 위치에 따른 차이점

gudusol · 2024-10-31T12:42:21Z

week2/assignment/style.css

+@font-face {
+    font-family: 'SUIT Variable';
+    src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2');
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;


폰트 설정까지! 디테일 👍

gudusol · 2024-10-31T14:50:21Z

week2/assignment/admin.js

+        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+        for(const checkbox of checkboxes){
+            checkbox.checked = true;
+        }
+    }
+
+    else{
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+        for(const checkbox of checkboxes){
+            checkbox.checked = false;
+        }
+    }


const checkboxes = document.querySelectorAll('input[type="checkbox"]');

이 코드가 똑같이 두번 사용되고 있어서, if 문 위쪽에서 한번만 호출해서 사용할 수 있을 것 같습니다!

gudusol · 2024-10-31T15:05:45Z

week2/assignment/admin.js

+modalOpenBtn.addEventListener('click',function(){
+  	//'on' class 추가
+    modal.classList.add('on');
+});
+
+//닫기 버튼을 눌렀을 때 모달팝업이 닫힘
+modalCloseBtn.addEventListener('click',function(){
+    //'on' class 제거
+    modal.classList.remove('on');
+});


style 속성을 수정하는 것도 하나의 방법이긴 한데,

저는 개인적으로 css, javascript의 분리를 위해서 javascript 파일에서 css 속성을 건드리는 것을 선호하지 않는데
혹시 이부분에 대해서는 어떻게 생각하시나요?

gudusol · 2024-10-31T15:10:39Z

week2/assignment/admin.js

+
+//초기화 버튼 구현
+document.querySelector('#reset').addEventListener('click', function() {
+    document.querySelectorAll('.text-box').forEach(input => input.value = ''); // 텍스트 입력 필드 초기화


input을 초기화하는 좋은 방법인 것 같습니다.

이 방법 이외에도, form태그를 사용한다면, form안의 button 태그에 type='reset' 속성을 사용해서 form 안의 모든 input을 초기화 시켜주는 방법도 있으니 참고해보시면 좋을 것 같습니다!

gudusol · 2024-10-31T15:10:47Z

week2/assignment/admin.js

+    const nameFilter = document.querySelector('#filter-name').value;
+    const engNameFilter = document.querySelector('#filter-engName').value;
+    const githubIDFilter = document.querySelector('#filter-githubID').value;
+    const genderFilter = document.querySelector('#filter-gender').value;
+    const roleFilter = document.querySelector('#filter-role').value;
+    const firstWeekGroupFilter = document.querySelector('#filter-week1').value;
+    const secondWeekGroupFilter = document.querySelector('#filter-week2').value;


gudusol · 2024-10-31T15:11:56Z

week2/assignment/admin.js

+    }
+
+
+    console.log(filteredMembers);


맞습니다~
개발 과정에서 console.log로 값을 확인하고 테스트 하는 습관은 너무 좋지만, 개발/테스트 후에는 지우기~!

ayla-12 added 9 commits October 22, 2024 22:54

init: 초기 설정

dadf98a

feat: html 요소 완성

81c190e

feat: html&css 완료(모달 X)

db17bde

feat: 모달 구현 완료

a56ddbe

feat: 로컬스토리지에 데이터 저장&화면에 뿌리기

02d6ac1

feat: 전체 선택 구현

5c5c7fd

feat: 멤버 추가&삭제 기능 구현 & 로컬 스토리지 추가

68a104a

feat: 멤버 필터링 기능 완성

8e3516a

fix: 회원 추가시 빈 항목 검사 추가

46b8d61

ayla-12 requested review from minjeoong and ocahs9 October 29, 2024 13:16

ayla-12 changed the title ~~[2주차 기본/심화/공유 제] JavaScript 연습~~ [2주차 기본/심화/공유 과제] JavaScript 연습 Oct 29, 2024

ayla-12 changed the title ~~[2주차 기본/심화/공유 과제] JavaScript 연습~~ [2주차 기본/심화/공유 과제] 관리자 페이지 Oct 29, 2024

refactor: 쓸데없는 파일 제거

8f716ea

ocahs9 reviewed Oct 30, 2024

View reviewed changes

minjeoong reviewed Oct 31, 2024

View reviewed changes

gudusol reviewed Oct 31, 2024

View reviewed changes

gudusol mentioned this pull request Nov 6, 2024

[2주차 기본/심화/공유 과제] 기능 명세 템플릿 AND-SOPT-WEB/JungWoanChoi#3

Merged

30 tasks

		<div class="filter-title">이름</div>
		<input type="text" class="text-box" id="filter-name" placeholder="이름을 입력해주세요.">

[2주차 기본/심화/공유 과제] 관리자 페이지 #4

Are you sure you want to change the base?

[2주차 기본/심화/공유 과제] 관리자 페이지 #4

Conversation

ayla-12 commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ 구현 기능 명세

💡 기본 과제

🔥 심화 과제

공유과제

제목: [JavaScript] 자바스크립트의 데이터 타입에 대해.araboza

❗️ 내가 새로 알게 된 점

❓ 구현 과정에서의 어려웠던/고민했던 부분

🥲 소요 시간

🖼️ 구현 결과물

Uh oh!

ocahs9 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

minjeoong left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gudusol left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

ayla-12 commented Oct 29, 2024 •

edited

Loading