본문 바로가기
728x90

전체 글

 (197)
[노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 5. JSX 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. JSX코드로 바꾸어보자! 👉🏻짠! 전체 코드 const btn = React.createElement( "button", { onClick: () => console.log("im clicked"), style: { backgroundColor: "tomato", } }, "Click me!" ); const Button = ( console.log("im clicked")} > Click me! ); 👉🏻위의 코드가 이전 강의까지 작성했던 코드 찐 리액트 코드이고 아래가 JSX를 이용해 간략하게 적은 코드이다. JSX코드를 사용하기 위해서는 찐 리..
[노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 3. Events in React 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. React로 이벤트 달기 👉🏻일단 전체 코드! Click me const btn = React.createElement("button", {onClick: () => console.log("im clicked"), style: {backgroundColor: "tomato",}}, "Click me!"); 👉🏻빨간 배경의 클릭하면 콘솔에 "im clicked"가 출력되는 버튼을 만들었다. 이 코드는 위의 JS 3줄을 사용해야 하는 코드를 한 줄로 줄일 수 있는 React의 장점을 보여준다. const container = React.createEl..
[노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 2. Our First React Element 참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby 1. 리액트 실행 과정을 바닐라 자바스크립트와 비교해보자 Vanilla Javascripts Total clicks : 0 Click me 👉🏻버튼을 클릭하면 숫자를 올려주는 기능을 만들기 위한 코드이다. React JS 👉🏻먼저 React를 사용하기 전에 이 두 가지 스크립트를 넣어준다. 첫 번째: 우리가 만드는 어플리케이션의 UI가 interactive하게 만들어준다. 두 번째: React코드로 만든 html요소를 body tag에 들어갈 수 있게 해준다. 👉🏻React 코드이다. id가 root인 HTML 요소를 가져온다. createElement로..
[Self-study/level2] Python | 삼각 달팽이 문제 https://programmers.co.kr/learn/courses/30/lessons/68645 코딩테스트 연습 - 삼각 달팽이 5 [1,2,12,3,13,11,4,14,15,10,5,6,7,8,9] 6 [1,2,15,3,16,14,4,17,21,13,5,18,19,20,12,6,7,8,9,10,11] programmers.co.kr 1차 풀이 def firstStep(list, num, x, y, counting): for i in range(counting): list[x][y] = num x += 1 num += 1 return (num, x - 1, y + 1) def secondStep(list, num, x, y, counting): for i in range(counting): l..
[BAEKJOON/Python] no.3085 사탕게임 | 구현, 브루트포스 문제 https://www.acmicpc.net/problem/3085 3085번: 사탕 게임 예제 3의 경우 4번 행의 Y와 C를 바꾸면 사탕 네 개를 먹을 수 있다. www.acmicpc.net 1차 풀이 구글링..ㅎ count = int(input()) candy_list = [list(input()) for _ in range(count)] answer = 0 def check(candy_list): answer = 1 for i in range(count): #0 1 2 cnt = 1 for idx in range(1, count): #1 2 if candy_list[i][idx] == candy_list[i][idx - 1]: cnt += 1 else: cnt = 1 if cnt > answe..
[BAEKJOON/Python] no.14713 앵무새 | Queue 문제 https://www.acmicpc.net/problem/14713 14713번: 앵무새 자가용 비행기를 타고 세계 일주를 하던 pps789와 cseteram은 어느 날 엔진 고장으로 인해 이름 모를 섬에 불시착하게 된다. 그들은 이 섬을 탐험하는 도중 아주 신기한 사실을 알게 되었는데, 바로 www.acmicpc.net 1차 풀이 : 구글링ㅎ from collections import deque bird_count = int(input()) bird_sentence_list = list() for i in range(bird_count): bird_sentence_list.append(deque(map(str, input().split()))) sentence = deque(map(str, inp..
[생활코딩/React] 2022개정판 | 10. delete 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. 리스트를 삭제해보자! delete 기능을 만들어보자 function App() { ...중략... if (mode === "WELCOME") {...} else if (mode === "READ") { ...중략... contextControl = { event.preventDefault(); setMode('UPDATE'); }}>update { const newTopics = [] for(let i = 0; i < topics.length; i++) { if(topics[i].id !== id) { newTopic..
[생활코딩/React] 2022개정판 | 9. update 참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 1. update 기능을 만들어보자! update 버튼을 만들어보자! 상세 글을 클릭했을 때 update버튼이 나오게 할 것이다. function App() { ...중략... let content = null; let contextControl = null; if (mode === "WELCOME") {...} else if (mode === "READ") { ...중략... contextControl = { event.preventDefault(); setMode('UPDATE'); }}>update } else if ..
728x90

티스토리툴바