오늘은 복잡한 구조로 이루어져있는 json을 변환해서 트리구조로 읽기 쉽게끔 리더기를 만들어볼 거다 디자인에 신경을 쓰고싶지만.. 귀찮아서 대충 긁어오는중..ㅋㅋ JSON Reader 구조 JSON Reader 변환 원래 파일 첨부기능도 넣고싶었지만.. 그 input type=file 스타일링이 귀찮아서 뺐다..ㅋㅋ 스크립트는 적용시켜놨으니까 참고해주시긔 여기서는 button을 눌렀을 때 displayJson함수가 실행되는 onClick 이벤트 정도만 봐도 될 듯 싶다. CSS @font-face { font-family: "Pretendard-Regular"; src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretenda..

오늘은 날씨 오픈 API를 활용해서 간단하게 만들어보았다! 단점은... 영어로만 도시를 검색해야한다는 점 ㅜㅜ 되게 간단한 기능인데도 자스 코드가 그렇게 간결하지가 않다.. (최대한 리팩토링 해봤는데도..) 아마 괜히 효과주고 싶어서 gsap랑 css 뭐 이것저것 넣었는데 별 호과없음 ㅋㅋㅋ 다음엔 좀 더 멋지게 만들어야징. Weather App 구조 유효하지 않습니다! 다시 한 번 확인해주세요. 습도 풍속 배경쪽은 무시해주시고 ㅎㅎ.. 에러문구는 display: none으로 감춰놨다가 if문을 사용해 잘못 검색했을 시 에러 문구를 노출시키게끔 스크립트를 짰다. CSS @font-face { font-family: "SUIT-Regular"; src: url("https://cdn.jsdelivr.net..

코딩테스트를 보러갔는데.. 자바스크립트로 심플한 투두리스트를 만드는 과제였다. 마크업과 스타일링은 20분?정도 걸렸는데 문제는... 자바스크립트를 다 까먹어서 ㅋㅋㅋㅋ... 추가하는 기능까진 만들었는데... 시간이 없어서 나머지는 못 만들었다. 그래서 만들어본 투두리스트.. 자바스크립트 공부 좀 열심히 해야겠다 ^^; To-Do List 구조 ✍️ T o - D o L i s t Add h1태그에선 CSS로 애니메이션 효과를 주고싶어서 span으로 쪼갰습니다. // 폰트 @font-face { font-family: "SUITE-Regular"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.wo..

javascript mastery에 새로 뜬 클론코딩 중 스레드가 눈에 띄여서 한 번 도전해보기루 했다. Next.js와 타입스크립트를 쓴다해서 냉큼~ 5시간 짜리지만 천천히 보면서 학습중이다. 사실 아직 1시간밖에 안봤찌만 벌써 고난; https://youtu.be/O5cmLDVTgAs?si=h6mn8wllnyTw5lJe 로그인 기능은 멀로쓰지? 봤더니 Clerk이라는 라이브러리를 쓰는 듯 싶옸따 Clerk 공식 문서 https://clerk.com/docs Welcome to Clerk Docs | Clerk Add complete user management to your application in minutes. clerk.com 문서에 보면 친절하게 설명 잘 해놨음 물론 영어를 몰라서 걍 꾸역꾸..

오늘부터 다시 공부 드가기로 했다 실무하면서 내가 기본기가 많이 부족하다고 느껴서 그날그날 팀장님이 말씀하신 내용 위주로 공부할 예정! 오늘은 간단한 로그인 기능을 구현했는데 그것조차 절절매서 너무 힘들었다 ㅎ. axios를 활용해 post로 id와 password를 보내는 것!! 보내면 토큰을 받아 session에 저장하라 하셨다 .. 근데 어떻게 저장하는 지 몰라서 ... ㅎ 데이터 저장 방법 로컬 스토리지(Local Storage): 로컬 스토리지는 웹 페이지의 도메인과 연결된 클라이언트 측 스토리지 공간으로, 데이터를 영구적으로 저장할 수 있습니다. 이 데이터는 사용자의 브라우저를 닫아도 계속 유지됩니다. 로컬 스토리지는 주로 오프라인 데이터나 애플리케이션의 설정과 같은 정보를 저장하는 데 사용됩..

코딩테스트 51일차 소수 찾기 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) function solution(n) { var answer = 0; // 소수 개수를 저장할 변수 초기화 for (var i = 2; i