전체 글409 [ 스파르타 / TIL ] 내일배움캠프 #18 오늘 한 것 포스팅된 리뷰들의 사진 크기 수정 아이콘 간격 수정 이미지를 올렸을 때 "+ 사진 올리기" 버튼의 텍스트가 이미지 파일 이름으로 변경되게 설정 게시물 흐름 변경 오늘의 깨달음 이미지를 올렸을 때 "+ 사진 올리기" 버튼의 텍스트가 이미지 파일이름으로 변경되게 설정 처음에는 사진이 올려졌을때 버튼에 이미지 파일 이름을 어떻게 올려야 될지 조금 막막했다. 일단 버튼 event를 가져오기 때문에 가져온 내용물 중에 버튼 이름을 뽑아내야 했다. 하지만 아직 event.target.parentNode, children을 잘 사용할 줄 몰라 출력을 해보면서 원하는 값을 찾아 나갔다. 처음에는 "+ 사진 올리기"를 가져오게 아래와 같이 적어주었다. const btnName = event.target.pa.. 2022. 11. 24. [ 스파르타 / TIL ] 내일배움캠프 #17 오늘 한 것 board.js에서 Firebase 연결 board.js파일에 사진 올리기 버튼 클릭 시 Firebase에 올라가게 하기 오늘의 깨달음 404 not found board.js에서 Firebase를 연결하는 순간 페이지가 동작을 하지 않고 "404 page not found"라는 에러만 떴다. board.js 연결하기 전에는 잘 동작하던 웹이 board.js만 연결하면 안 되는 게 board.js에 문제가 있는 것 같아서 거의 두 시간가량을 board.js만 보고 있다가 깨달았다... 해결 firebase.js 파일과 board.js는 같은 위치에 있었다. 하지만 나는 아래와 같이 파일을 하나 더 나가서 엉뚱한 곳에서 firebase.js 파일을 불러왔던 것이다. import { dbServ.. 2022. 11. 23. [ 스파르타 / TIL ] 내일배움캠프 #16 오늘 한 것 board.html 반응형 구현 board.js - 신발 이미지, 이름, 리뷰 포스트 구현 오늘의 문제 페이지 상단으로 이동하는 버튼 페이지 상단으로 이동하는 버튼을 눌렀을 때 페이지의 상단이 아닌 메인 페이지로 이동 해결 페이지가 여러 개일 때 a 태그로 #버튼을 설정하니까 메인 페이지로 가버려서 top:0으로 가게 코드를 바꾸어 주었다. 회고 저번 주 금요일에 UI를 짜고 주말 동안 내가 맡은 board.html을 구현했다. 신발 이미지, 브랜드 이름, 리뷰 포스트를 만들고 반응형으로 만들어뒀다. 만든 것을 오늘 dev 브랜치에 합치면서 문제도 생기고 해결하는 과정에서 import, export의 중요성을 깨달았다. 그리고 프로젝트 구조가 전체적으로 import, export를 하는데 주.. 2022. 11. 22. [ WIL ] 내일배움캠프 3주차 지난 한 주간 배운 것 1. 스터디 그룹에서 함께 pull, pull, branch, merge까지 구현을 해보았다. 2. 웹페이지 구현 보완점 & 깨달음 저번 주 보완점에 조금 더 자연스러운 페이지 디자인과 구현 능력이라고 적었었는데 이번에 새로운 프로젝트를 시작하면서 Figma를 사용하여 처음에는 전체적인 구조를 짜고 다시 한번 UI 구조를 정리하며 글자 크기, 버튼, 여백 등을 실제로 웹이 구현되었을 때의 구조를 다 만들고 시작했다. 구조를 다 짜고 시작하니까 팀원들 간의 페이지 흐름이 좋아졌고 디자인 때문에 반복해서 수정할 일은 없을 것 같다. 다음 주 계획 1. Firebase 구현해보기 2. 알고리즘 문제 꾸준히 풀기 3. 새로 시작한 프로젝트 구현 하기 4. 사진 파일 업로드 기능 만들기 5.. 2022. 11. 21. [ 스파르타 / TIL ] 내일배움캠프 #15 오늘 한 것 두 번째 프로젝트 시작 프로젝트 기획 및 와이어 프레임 UI 구체화 프로세스, 스레드, 비동기 라이트 특강 회고 오늘은 아침에 발제가 나오고 오전에는 팀원들과 프로젝트 아이디어를 구상했다. 팀원들이 여러 좋은 아이디어를 내주었는데 최종적으로 내가 낸 아이디어를 선택해주었다. 몇 달 전에 만들어보고 싶어서 구상했던 거였는데 로그인, 회원가입, 프로필 바꾸기, 등등 나에게는 아직 너무 어려웠었다. 그때는 해내지 못했지만 이번에는 꼭 해내 보고 싶다. 우리 팀의 이름은 SWIVEE이다. 사실 브랜드 로고 디자인에서 마음에 들어서 선택했지만 의미가 없었다. 그래서 의미를 불어넣었다! 만능 구글이 역시 오늘도 나를 도와주었다. SWIVEE를 검색하던 도중 swivel이라는 단어가 연결이라는 의미를 가.. 2022. 11. 19. [ 스파르타 / TIL ] 내일배움캠프 #14 오늘 한 것 알고리즘 문제 풀어보기 스파르타 웹 퍼블리싱 강의 듣기 Firebase 라이브 특강 오늘 공부한 것 [ JavaScript ] currentTarget vs target 차이점 자바스크립트를 공부하던 중 e.currentTarget와 e.target의 차이점이 궁금해서 포스팅하게 되었다. 쉽게 말하자면 자바스크립트는 이벤트가 요소(element) 간에 전파가 된다. 이런 경우로 인해 currentTarget codesign.tistory.com 회고 웹 퍼블리싱 강의를 보며 네이버 창을 만드는 중에 e.target과 e.currentTarget이 같을 경우 어떠한 동작을 취하게 하는데 둘의 차이점이 이해가 가지 않아서 알아보고 위 링크에 정리해보았다. 이미 구현해본 코드였지만 아직은 다시 봐.. 2022. 11. 17. [ JavaScript ] currentTarget vs target 차이점 자바스크립트를 공부하던 중 e.currentTarget와 e.target의 차이점이 궁금해서 포스팅하게 되었다. 쉽게 말하자면 자바스크립트는 이벤트가 요소(element) 간에 전파가 된다. 이런 경우로 인해 currentTarget과 target이 선택하는 요소가 달라진다. currentTarget vs target 차이점 currentTarget : 이벤트를 등록해 놓은 요소를 반환한다. target : 이벤트가 발생한 요소를 반환한다. 예제 나를 선택하면 나는 target 다른 target const currDiv = document.getElementById('currDiv'); currDiv.addEventListener('click',(e)=>{ console.log('currentTarget.. 2022. 11. 17. [ 스파르타 / TIL ] 내일배움캠프 #13 오늘 한 것 알고리즘 문제 풀어보기 스파르타 웹 퍼블리싱 강의 듣기 튜터님 데이터베이스 특강 깃 branch 오늘 공부한 것 [ 프로그래머스 / JavaScript ] 방문 길이 https://school.programmers.co.kr/learn/courses/30/lessons/49994 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 codesign.tistory.com 회고 오늘 하루 종일 웹 퍼블리싱 강의를 들으면서 강의 복습 차원에서 네이버 검색창과 반응형 로그인을 구현해 보았다. 역시 아직은 CSS와 JS가 약하다. 대중 무언가가 필요하다는 생각은 들지만 어쩔 때는 용어가 생각이 안 나고 어쩔 때는 .. 2022. 11. 16. [ 프로그래머스 / JavaScript ] 방문 길이 https://school.programmers.co.kr/learn/courses/30/lessons/49994 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다. U: 위쪽으로 한 칸 가기 D: 아래쪽으로 한 칸 가기 R: 오른쪽으로 한 칸 가기 L: 왼쪽으로 한 칸 가기 캐릭터는 좌표평면의 (0, 0) 위치에서 시작합니다. 좌표평면의 경계는 왼쪽 위(-5, 5), 왼쪽 아래(-5, -5), 오른쪽 위(5, 5), 오른쪽 아래(5, -5)로 이루어져 있습니다. 예를 .. 2022. 11. 16. 이전 1 ··· 15 16 17 18 19 20 21 ··· 46 다음 728x90
