본문 바로가기

TIL

[TIL-124] 위코드 24일차: 코드 카타 코드 카타 주어진 문자열 내에서 중복되지 않고 이어지는 가장 긴 문자열의 길이 구하기 내 답안 const getLengthOfStr = str => { let arr = []; let maxLength = 0; let alphabet = ""; for (let j = 0; j < str.length; j++) { for (let i = j; i { let countMax = 0; let countString = “”; for(let i = 0; i < str.length; i++) { let indexOfStr = countString.indexOf(str[i]); if (indexOfStr !== -1){ countString = countString.substr(indexOfStr + 1); } co.. 더보기
[TIL-122~123] 노마드코더 ReactJS #3.0~#3.5 #2 State state 안 좋은 예시 컴포넌트 안에 변수를 포함시킬 땐 {변수명}으로 함. "onClick" 이벤트에 함수를 넣을 때 {countUp}의 형태로 ()를 붙이지 않음. 더보기
[TIL-123] 위코드 23일차: React Router & Sass ReactJS props 개념 properties라는 뜻으로, 함수형 컴포넌트에 객체를 인자로 전달해서 함수 안에서 변수처럼 사용할 수 있다. 응용 dal_nim 10분 전 byeol_nim hae_dal_byeol님 외... 팔로우 [문제상황] 유사한 구조의 두 profile 를 컴포넌트로 바꾸었다. 그런데 서로 다른 텍스트가 들어가거나 태그가 필요할 때 그런 점들을 구현하기 힘들다. 속성 : alt와 src 속성의 값을 상황에 따라 바꾸어야 한다. 어려운 점은 텍스트 형식에 props와 일반 텍스트를 결합해야 한다는 점이다. 태그의 content : 상황에 따라 user의 닉네임을 props로 받아서 담아야 한다. 태그 : 팔로우 버튼이 필요한 경우에만 포함되어야 한다. style을 위한 클래스 : .. 더보기
[TIL-122] 위코드 22일차: ReactJS / 코드 카타 ReactJS Component의 Props 개념 참고 https://www.daleseo.com/react-button-component/ https://react.vlpt.us/basic/05-props.html 코드 카타 더한 값이 target이 나오는 nums 배열의 두 숫자 조합 문제 nums 배열과 특정한 수인 target을 인자로 받는 twoSum 함수는, nums 배열에서 두 숫자를 뽑아 더한 값이 target이 되는 조합의 두 index를 요소로 갖는 배열을 반환한다. 코드 const twoSum = (nums, target) => { for (let i = 0; i < nums.length; i++) { let firstnum = nums[i]; for (let j = i+1; j < .. 더보기
[TIL-121] 노마드코더 ReactJS #1.0~#3.0 #1 React 기초 * 구현사항 : 태그를 클릭하면 클릭한 횟수를 보여주는 태그 1. Vanilla Javascript ver. Total clicks: 0 Click me HTML에 태그들을 만들고, JS로 addEventListener를 붙여 동적인 상호작용을 구현함. 2. ReactJS ver. CDN 링크를 사용해서 임시로 React와 React-DOM을 import 함. https://ko.reactjs.org/docs/cdn-links.html 생성한 요소들이 들어갈 태그를 HTML 안에 만듦. 자바스크립트 DOM으로 root 태그를 가져옴. React.createElement()로 요소들을 생성함. 과 , 그리고 이 두 요소들을 담을 컨테이너 . React.createElement("태그명.. 더보기
[TIL-120] 위코드 19일차: 위스타그램 Wrap-Up / Javascript 테스트 CSS bottom-up 개념 자식 태그에 속성을 먼저 부여하고 그에 따라 부모 태그의 속성이 결정되게 하는 방식이다. 예를 들어, 부모 태그에 고정된 크기를 주는 게 아니라, 그 안의 자식 요소들의 크기를 부여하여 부모 요소의 크기가 결정되게 한다. 그럼 내부의 자식 요소에 변동이 있을 때 부모 요소도 알아서 조절되기 때문에 변화에 유연하다는 장점이 있다. 하지만 무조건 bottom-up 방식을 쓰는 것은 아니다. 예를 들어, 부모 요소의 정해진 크기(영역)을 초과하도록 자식 요소가 추가될 경우 스크롤해서 확인할 수 있게 할 때가 있다. .boxComponent { height: 200px; padding: 10px; margin: 10px 0; overflow: scroll; background-co.. 더보기
[TIL-119] 위코드 18일차: 위스타그램 - 메인 페이지 CSS outline 개념 input 태그에 border 속성을 제거해도 기본값으로 focus 되었을 때(인풋을 클릭해서 입력 받을 수 있는 상태) 파란색으로 테두리가 생긴다. 이 테두리를 outline 속성으로 제어할 수 있다. focus된 input에 대한 선택자는 input:focus로 쓸 수 있다. input:focus { outline: none; } focus된 input의 outline을 없앤다. 선택자 > 개념 input 태그의 자식인 p 태그에 CSS를 적용하기 위해 선택할 때 input p라고 쓸 수도 있고 input > p라고 쓸 수도 있다. 이 차이는 >를 쓰면 직속 자식만 선택된다...? Javascript innerText & innerHTML 개념 어떤 태그의 내용에 접근할 때.. 더보기
[TIL-118] 위코드 17일차: 깃과 깃헙 Git & Github git init : 새 프로젝트 시작하기 개념 내가 새로운 프로젝트를 만들 때는 git init을 사용하여 깃을 시작한다. // 깃을 사용하여 변경 내용을 감지하기 시작함 git init // 코드를 올릴 깃헙 서버(remote)의 레포지토리 주소를 origin이라는 변수에 저장함 git remote add origin repository_url // 현재 디렉토리의 전체 파일을 staging 영역에 추가함 git add . // 지금까지의 변경사항을 깃으로 저장함(커밋) git commit -m "first commit" -----여기까지 local----- // 쌓인 커밋을 main 브랜치에 업로드함(푸시) git push origin main 작업할 디렉토리에 git init.. 더보기

티스토리툴바