Timeline

배경화면 위에 글씨가 있는 상황에서 배경화면은 투명하게 하고 글씨는 그 위로 보이도록 하겠습니다 html은 아래와 같습니다 index.html Hello 이제 css 설정을 해보겠습니다 -position을 이용해 배경화면과 글씨의 위치를 조정해줍니다 -가상선택자 ::after을 이용해 배경화면의 가상요소를 생성하여 여기에 배경 이미지와 투명도를 지정해줍니다 -z-index 설정으로 가상요소를 원본의 뒤로 밀어줍니다 style.css .container { width: 100%; height: 100%; text-align: center; position: relative; z-index: 1; } .container::after { width: 100%; height: 100%; content: ""; ..

위코드의 첫 번째 프로젝트로 나이키 모티브 코딩을 하게 되었습니다 https://www.nike.com/kr Nike. Just Do It. 나이키의 모든 것, 나이키 공식 온라인스토어 www.nike.com 저는 nav, 제품리스트 페이지, 결제 페이지를 맡아 구현 중입니다 어려움이 많은데,,,, 어려웠던 기능들은 차차 정리해보겠습니다 1. nav 컴포넌트 -mouseenter 시 드롭다운 메뉴 보여주기 -검색어 filter 기능 2. 제품리스트 페이지 -필터 기능 - 제품리스트 페이지 레이아웃 3. 결제 페이지 -비회원 진입 시 보여주는 컴포넌트 -버튼 클릭 시 컴포넌트 바꿔주기

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 아직 정리 중인 개념입니다 1. async/await이란? async는 비동기라는 의미로 async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다 useEffect(() => { (async () => { const res = await fetch( `api 주소` ); const data = await res.json(); })(); }, []); 함수안에 비동기적으로 실행 될 부분은 await 붙어 있는 코드입니다. await은 무엇으로 부터 기다리다라는 뜻을 가지고 있습니다. await은 그 뒤에코드를 실행하고, 그코드가 리턴하는 객체를 기다려 줍니다. 그리고 객체가 fullfiield 상태가 되면 그 작업 성공 결과를 추출해서..

클릭 시 보여주는 메뉴를 구현했습니다 실제 구현 화면은 아래와 같고 이전 포스팅인 검색 기능 구현하기의 연장선입니다 JSX 부분 // 버튼 클릭 시 메뉴가 보이도록 하기 위해 onClick에 함수를 지정했습니다 {onClick ? ( //MENU_DATA안에 있는 메뉴리스트를 map함수를 이용해 구현했습니다 {MENU_DATA.map(list => ( {list.menu} ))} ) : null} js 문법 부분 // 버튼의 클릭을 감지하는 state를 만들었습니다 const [onClick, setOnClick] = useState(false); // 함수 안의 setOnClick 함수를 이용해 버튼 클릭 시 이전 상태를 바탕으로 동작하게 했습니다 const onClickMenu = () => { se..

인스타그램의 메뉴바를 클론 코딩했습니다 완성된 js 파일은 게시물 하단에서 확인하세요 아래 파일을 통해 구현한 메뉴바의 모습입니다 JSX 부분 // 검색창 왼쪽 로고 부분 westagram // 검색창 부분 // keyword를 입력하지 않으면 검색결과가 나오는 창이 보이지 않도록 했습니다 {keyword.length > 0 && ( {filteredList.map(profile => ( {profile.profileId} ))} )} // 검색창 오른쪽 아이콘 부분 js 문법 부분 const [profiles, setProfiles] = useState([]); const [keyword, setKeyword] = useState(''); // mock data이기 때문에 fetch로 불러왔습니다 us..

Q. 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 XII = 12 XXVII = 27 입니다. 그런데 4를 표현할 때는 IIII가 아니라 IV 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 됩니다. 9는 IX입니다. I는 V와 X앞에 와서 4, 9 X는 L, C앞에 와서 40, 90 C는 D, M앞에 와서 400, 900 A. function romanToNum(s) { //로마자:숫자 객체 변수는 romeNum const romeNum = { 'I' :..

노마드코더의 ReactJS로 영화 웹 서비스 만들기 코스 중 todolist 만드는 방법을 따라 js 파일 하나로 구현했고, css 파일은 따로 만들지 않았습니다 완성된 js 파일은 게시물 하단에서 확인하세요 https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co JSX 부분 Comment List Click 우선, jsx를 작성할 때는 모든 태그를 하나의 태그로 감싸줘야하기 때문에 로 전체를 감싸주었습니다 간단하게 로 제목을 만들어주고 안에 과 을 넣어줬습니다 로 선을 그어주어 input과 output(댓글이 입력되는 부분)을 나눠주었습니다 ..

Q. 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. 예각 : 0

Q. 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. A. function solution(common) { if (common[2] - common[1] === common[1] - common[0]) { return common.pop() + common[1] - common[0]; } else { return common.pop() * (common[1] / common[0]); } } TIL Array.prototype.pop() pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환한다 ex. const animal = ['cat', 'dog', 'rabbit', 'lion'] co..

Q. strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = ['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 '' A. function getPrefix(strs) { if (strs.length === 0) return ''; let prefix = strs[0]; for (let i = 1; i < strs.length; i++) { while (strs[i].indexOf(prefix) !== 0) { prefix = prefix.substring(0, prefix.length - 1); } } return prefix; } 문제 해결 과정 우선 ..